From 66b2c737c5a049c91fca95ec53b805ffba0b6a82 Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Thu, 31 Jul 2025 12:40:19 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/order/components/OrderItem.vue      | 301 ++++++++++++++++++
 .../pages/order/order.vue                     |   5 +
 java-mall-app-shop-admin/static/icon_map.png  | Bin 0 -> 1219 bytes
 java-mall-app-shop-admin/static/icon_mt.png   | Bin 0 -> 1685 bytes
 .../static/icon_phone.png                     | Bin 0 -> 1149 bytes
 5 files changed, 306 insertions(+)
 create mode 100644 java-mall-app-shop-admin/pages/order/components/OrderItem.vue
 create mode 100644 java-mall-app-shop-admin/static/icon_map.png
 create mode 100644 java-mall-app-shop-admin/static/icon_mt.png
 create mode 100644 java-mall-app-shop-admin/static/icon_phone.png

diff --git a/java-mall-app-shop-admin/pages/order/components/OrderItem.vue b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
new file mode 100644
index 0000000..78ac710
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
@@ -0,0 +1,301 @@
+<template>
+  <view class="order_item">
+    <view class="expresser">
+      <view class="header">#<text>38</text></view>
+      <view class="body">
+        <view class="item info">
+          <view class="name"> 谭金宇 </view>
+          <view class="btn_call"> 催快递 </view>
+        </view>
+        <view class="item time">立即送达/07-29 20:21前送达</view>
+      </view>
+      <view class="footer">
+        <view class="status">已接单</view>
+      </view>
+    </view>
+
+    <view class="user">
+      <view class="header">
+        <view class="info">
+          <view class="name">谢能坤</view>
+          <view class="mobile">13128997057</view>
+        </view>
+        <view class="box">
+          <view class="btn_call">联系顾客</view>
+        </view>
+      </view>
+      <view class="body">
+        <view class="info">
+          广西壮族自治区贵港市桂平市中山南路中山医院斜对面烧鹅大厦 8楼801
+        </view>
+        <view class="box">
+          <view class="btn_map"></view>
+        </view>
+      </view>
+      <view class="footer">
+        <view class="info"><text>备注:</text>不需要筷子，小哥请送到驿站</view>
+      </view>
+    </view>
+
+    <view class="goods">
+      <view class="body">
+        <view class="info">
+          <image src="111" mode="aspectFit" class="img" />
+          <image src="111" mode="aspectFit" class="img" />
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="total">共10件商品</view>
+        </view>
+      </view>
+
+      <view class="footer">
+        <view class="text">合计</view>
+        <view class="prize_type">¥</view>
+        <view class="prize_num">289.45</view>
+      </view>
+    </view>
+
+    <view class="tool">
+      <view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
+      <view class="body">
+        <view class="btn btn_cancel">取消订单</view>
+        <view class="btn btn_refund">退款</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.order_item {
+  padding: 24rpx;
+  border-radius: 10rpx;
+  background: #fff;
+  font-size: 24rpx;
+  color: #222;
+  
+.expresser {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+
+  .header {
+    text {
+      font-size: 48rpx;
+    }
+  }
+  .body {
+    flex: 1;
+    padding-left: 24rpx;
+    position: relative;
+
+      &::after{
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+      display: block;
+        content: " ";
+        width: 1px;
+ background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
+  background-size: 100% 16rpx; 
+  opacity: 0.2;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+
+      &.info{
+        margin-bottom: 8rpx;
+      }
+      .time {
+        color: rgba(34, 34, 34, 0.9);
+      }
+      .name {
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        &::before {
+          display: block;
+          content: " ";
+          width: 36rpx;
+          height: 36rpx;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: 6rpx;
+          margin-right: 12rpx;
+          background: url("@/static/icon_mt.png") no-repeat 50% 50%;
+          background-size: 28rpx 28rpx;
+        }
+      }
+      .btn_call {
+        display: flex;
+        align-items: center;
+        margin-left: 24rpx;
+        &::before {
+          display: block;
+          content: " ";
+          width: 32rpx;
+          height: 32rpx;
+          background: url("@/static/icon_phone.png") no-repeat;
+          background-size: 100%;
+        }
+      }
+    }
+  }
+  .footer{
+    width: 228rpx;
+    .status{
+text-align: center;
+font-size: 28rpx;
+font-weight: bold;
+    }
+  }
+}
+
+.user {
+  margin-bottom: 24rpx;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+    .info {
+      display: flex;
+      align-items: center;
+      .name {
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+    }
+    .btn_call {
+      display: flex;
+      align-items: center;
+      &::before {
+        display: block;
+        content: " ";
+        width: 32rpx;
+        height: 32rpx;
+        background: url("@/static/icon_phone.png") no-repeat;
+        background-size: 100%;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn_map {
+      width: 36rpx;
+      height: 36rpx;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 6rpx;
+      background: url("@/static/icon_map.png") no-repeat 50% 50%;
+      background-size: 28rpx 28rpx;
+    }
+    .box{
+      padding-left: 40rpx;
+    }
+  }
+
+  .footer{
+    .info{
+       margin: 16rpx 0 24rpx;
+      background: rgba(254, 247, 234, 0.5);
+    padding: 12rpx 24rpx;
+    border-radius: 8rpx;
+     text{
+      color: #FF801F;
+      display: inline-block;
+      margin-right: 12rpx;
+    }
+    }
+   
+    &::after{
+      display: block;
+        content: " ";
+        height: 1px;
+  background-image: linear-gradient(to right, #000 50%, transparent 20%);
+  background-size: 16rpx 100%;
+  opacity: 0.2;
+    }
+  }
+}
+
+.goods {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+  .body {
+    display: flex;
+    align-items: center;
+    .info {
+      display: flex;
+      align-items: center;
+    }
+    .img {
+      width: 96rpx;
+      height: 96rpx;
+      margin-right: 12rpx;
+      border-radius: 10rpx;
+      background: #666;
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: baseline;
+    line-height: 36rpx;
+    .text{
+      color: #666;
+    }
+    .prize_type{
+      margin-left: 14rpx;
+    }
+    .prize_num {
+      font-size: 36rpx;
+    }
+  }
+}
+
+.tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .header{
+    color: #666;
+     display: flex;
+  align-items: center;
+  .icon{
+    margin-left: 8rpx;
+  }
+  }
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn{
+      width: 132rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      text-align: center;
+      border: 1px solid #666;
+      border-radius: 8rpx;
+      margin-left: 24rpx;
+    }
+    .btn_refund{
+      border-color: $base-color;
+      color: $base-color;
+    }
+  }
+}
+}
+
+
+</style>
diff --git a/java-mall-app-shop-admin/pages/order/order.vue b/java-mall-app-shop-admin/pages/order/order.vue
index 660fa98..25dd3db 100644
--- a/java-mall-app-shop-admin/pages/order/order.vue
+++ b/java-mall-app-shop-admin/pages/order/order.vue
@@ -1179,6 +1179,8 @@
       </view>
     </u-popup>
     <u-toast ref="uToast"></u-toast>
+
+    <OrderItem></OrderItem>
   </view>
 </template>
 
@@ -1204,6 +1206,8 @@ import tuiGallery from "@/components/tui-gallery/tui-gallery.vue";
 import tuiRadio from "@/components/tui-radio/tui-radio.vue";
 import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
 import tuiSelect from "@/components/tui-select/tui-select.vue";
+
+import OrderItem from "./components/OrderItem.vue";
 export default {
   components: {
     tuiTabs,
@@ -1215,6 +1219,7 @@ export default {
     tuiRadio,
     tuiRadioGroup,
     tuiSelect,
+       OrderItem,
   },
   data() {
     return {
diff --git a/java-mall-app-shop-admin/static/icon_map.png b/java-mall-app-shop-admin/static/icon_map.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a4bf0903ad0931f9170ba96c27522fb9e8dfe22
GIT binary patch
literal 1219
zcmeAS@N?(olHy`uVBq!ia0vp^W+2SL3?z5Yp7kC`F%}28J2BoosZ$SRmjw8PxB>-7
z0i8pDE0|?E(8`*UAirP+Mix#bznrEC(|r}WRbo44wnuWY>1Ou#rf7&J^mIlDsMSrY
zkY&<um1`5OWlx`xW??2+R%$u9Z<0ArQFDlqf<aJYp%kmcMCsu0fSU3ujw$l0#k}@m
z)=tbWF|JYk-iD_6c{a8V-C}X-+DRF9p4rtRl0q_CI#W%Y*L&^%&A`A^>gnPbQZZ-h
zw4d=pjuP$ZjIFtiY_Uwi0Se|U*Vd{Wy&&?$sGDWCis$LgFBEpao}d4b`Rl&T#~*w@
zURyDv^10d(frAfAdV6-+E_zYeA2)Fh-@zZ!$$RYnhjIx?Og^@AlFS~lMLvgwugiYB
z_9UcbYE`G-`5PWiI(oArr>NzfiHbUPcEipq-j`BMjSQVbGcr_)v-MKbU%ov%GxBB6
zUe`>u+$~osdzWW!PiZc@eR#75@7=_;tvdG?eR;=Y{H@#jjQ)`rg$c>&g+J#tZTZ8c
zy!KvvbiBTZxx~gP?zi3;9sB&$>wWQ3tJeM3%@(TK9JsQcuVYW^N#`A5Q`|eQI<k7n
zE<C<r$6K~np2FW;oc_i)1#fTu_mOkeZ_PZub!XB$M6?4Y&sYAzv_MH|cScc^zMu?a
z2LD8}YqvQ3n4h?(__WUY#dXlO;lq=ZZwt5en_m%gVDB*D3aIW?YnNmA!X~)u;otsG
zd1oHnTbZ;ZbuP0}TzXl)WQG@?@vMm{wHBf`MbjNtu$nxauy9LR$(zq}Wv<<LuUhg(
zwwQlX-FN?qW|Fdg*45m)i}p$T%`Q;tE%8~;W47@74W)DZV$<1req21AvE-!Xsp`&m
z8^i+bRCn~2`sTUcJb&3PUs~5m#{Jv1ompuwr`MiLi#YP5X{YOn>7u899r?WJskQTu
zSz9ywPkWfH7hZU3-H*B;-=nuK?Jc=<rYq-DoYQ?KH|>~b9##9+8_o9czIoNO<5Hor
zzc*WSjkmpj{erXQVGnF}{Hru9IB8PHclDa9)qb`xC5tUfmS3oMZ>@_zrqp+|`>vd&
z<fe6wSAze(IP*42r%L+0|Kf}Lwk+*W-=1yTR?pZFHSu0!>6FKyyyxla=d#Wzp$P!#
CigRlK

literal 0
HcmV?d00001

diff --git a/java-mall-app-shop-admin/static/icon_mt.png b/java-mall-app-shop-admin/static/icon_mt.png
new file mode 100644
index 0000000000000000000000000000000000000000..2825fcfdc03984b6c850245128c2d785e294fbc8
GIT binary patch
literal 1685
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

literal 0
HcmV?d00001

diff --git a/java-mall-app-shop-admin/static/icon_phone.png b/java-mall-app-shop-admin/static/icon_phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..f496d704104272e6243134ff252d3274f3efbb90
GIT binary patch
literal 1149
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!7>k44ofvPP)TsxuHwXBHxB>-L
zR7};>Of^(Z)m2T^fJn_$Rn=5e*#yW{SA!y;G9XY>GXaXIshMeMX+fk^R8)Y<G*m!}
zL9*&*KyeinbBH+*6Erk{h9FE+QZi6eH32DBHPZl^57es+(gHFN<OUO<?O=^&Qc}k1
zKmb;$sbm0BqY80=G0>4fE7aA244@ioi0ujrK$C%jK);x&sv5yu3$h(-oe9WZusgvH
z0C^MaT0@X_u#=39fd+!OKyjcI>dMAIy{f9lz+hBR01BEZDFH>G25PDpL6m_k1tM@D
z0L=sj6p*W+-~b9$4UiU)0+1U(#%jx0g4LVo>FF^rghB+Bm5qSTRtFlW4h%z(N)3>E
zj3F*jQ883kHw1eJ<o(bCYIZ<7CYA*G1v6;3pZof4x024LfB#Q2GB^AR;MsnPeZRxB
z^(Mb%=GWc2YxQ@+{d=mr;<_6BJotV#?Q}`p%EkM6hN{-a4<fVIIco4uTqy7&CQ5VL
zjrZ$gtC#=ry#2x8j_9#TTUhn;53O~4mCGXWMEBiAGm9U^?>myZ6PVU;92Dk1cj?<J
zq2sH$nfH8BxfIq?ur1AI<8@1^oCkXicivk7Ok1}-T^vIy=DfWg8hqG6g!KU{*A%^=
zuH9n#@80Ph<r2C6=-s<K`<V*N=9-D$;^ZFMq#70P^DNtZvt{FdjmHmOEGaB2TzYM5
zp4C68a{i#Zm%Y#1Kk|JkUGpQohO^ebo=>QOohflX`@-J`tt176x>yhGuz47v;Kb;X
zlpeI0p+ZEcBaF##|K6qum4px`8$R|Uw;4Gt6fW|49AZ3K=D@{gu=LdHT_!Q}H<m=&
zD>2_rpSfZF)ZTZS=fp5%e5^h8iD802BiDf@xBdswT>BdqC2=v_*Hm5Nt-;#wD9NgE
zy`J+JS62Y1+M+I|kn0Q!rzu@wRM<XG$%J9yMHdFA*$o$bZYD=Rn3bi<u!fi6Ss7Ep
zD+Z@@OUD;QY);!-6;8A*Z2ypzxHsU%=6&<u<iC?N;9$DusKK+B^YHrU>nC2!m|<YY
z$SVJ`an_tF`)$76oW`3249+b*TYv6N)BFh=PJ||F3kXfS!g_WS$A(R-^gh_EZrHHx
zU-N_giV8V-e-(Cg-f2yZmc1d!IOFItt~XqaIr;It76QyS66bR%?D;JpT6f!C?5%g?
zw%-g-{yY(3G<Z96(|YUUUzXZ;a_^Pdapdb#i<rh;|D^6tFDlOd_u~HD;9o&<a{2R}
i{N@?EUb`rNn){MXSpL~Vj={h*$l&Sf=d#Wzp$Pzn5Px?7

literal 0
HcmV?d00001