From 2cea3d218755bab0953dd63a10c26aed06c95fe0 Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Thu, 31 Jul 2025 15:35:14 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 java-mall-app-shop-admin/pages.json           |   6 +
 .../pages/order/components/OrderItem.vue      | 652 +++++++++++++-----
 .../pages/order/orderInfo.vue                 |  18 +
 3 files changed, 492 insertions(+), 184 deletions(-)
 create mode 100644 java-mall-app-shop-admin/pages/order/orderInfo.vue

diff --git a/java-mall-app-shop-admin/pages.json b/java-mall-app-shop-admin/pages.json
index 5b8f4d5..d98864b 100644
--- a/java-mall-app-shop-admin/pages.json
+++ b/java-mall-app-shop-admin/pages.json
@@ -91,6 +91,12 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+     {
+      "path": "pages/order/orderInfo",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
     },
     {
       "path": "pages/IM/IM",
diff --git a/java-mall-app-shop-admin/pages/order/components/OrderItem.vue b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
index 78ac710..318c582 100644
--- a/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
+++ b/java-mall-app-shop-admin/pages/order/components/OrderItem.vue
@@ -38,24 +38,209 @@
     </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 class="single" v-if="isList">
+        <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="footer">
-        <view class="text">合计</view>
-        <view class="prize_type">¥</view>
-        <view class="prize_num">289.45</view>
+      <view class="list">
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+        <view class="item">
+          <image src="111" mode="aspectFit" class="img" />
+          <view class="box">
+            <view class="tit">新鲜明虾 500g~550/份</view>
+            <view class="desc">
+              <view class="total">数量X1</view>
+              <view class="price">¥29.5/件</view>
+            </view>
+          </view>
+          <view class="counter">
+            <view class="text">小计</view>
+            <view class="prize_type">¥</view>
+            <view class="prize_num">29.5</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="result">
+      <view class="cell">
+        <view class="header"> 商品总额 </view>
+        <view class="body"> <text>¥</text><text class="total">295</text> </view>
+      </view>
+      <view class="cell">
+        <view class="header"> 配送运费 </view>
+        <view class="body red"> - ¥5</view>
+      </view>
+      <view class="cell">
+        <view class="header"> 平台佣金 </view>
+        <view class="body red"> - ¥0.5</view>
+      </view>
+      <view class="cell">
+        <view class="header"> 活动减免 </view>
+        <view class="body red"> - ¥0.05</view>
+      </view>
+      <view class="cell">
+        <view class="header"> 合计实收 </view>
+        <view class="body"> ¥<text class="count">295</text> </view>
+      </view>
+    </view>
+
+    <view class="result">
+      <view class="cell">
+        <view class="header"> 订单编号 </view>
+        <view class="body">
+          <view class="order_num">3139803842281</view
+          ><view class="btn_copy">复制</view></view
+        >
+      </view>
+      <view class="cell">
+        <view class="header"> 下单时间 </view>
+        <view class="body"> 2025/07/29 15:21</view>
+      </view>
+      <view class="cell">
+        <view class="header"> 支付时间 </view>
+        <view class="body"> 2025/07/29 15:21</view>
+      </view>
+      <view class="cell">
+        <view class="header"> 配送方式 </view>
+        <view class="body"> 同城 </view>
+      </view>
+      <view class="cell">
+        <view class="header"> 配送单号 </view>
+        <view class="body">
+          <view class="order_num">3139803842281</view
+          ><view class="btn_copy">复制</view></view
+        >
       </view>
     </view>
 
     <view class="tool">
-      <view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
+      <view class="header">
+        <template v-if="isList">
+          更多订单信息<u-icon
+            name="arrow-down"
+            color="#666"
+            class="icon"
+          ></u-icon>
+        </template>
+      </view>
       <view class="body">
         <view class="btn btn_cancel">取消订单</view>
         <view class="btn btn_refund">退款</view>
@@ -65,7 +250,14 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    isList: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -77,66 +269,105 @@ export default {};
   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;
+  .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;
+    .body {
+      flex: 1;
+      padding-left: 24rpx;
+      position: relative;
 
-      &::after{
+      &::after {
         position: absolute;
         right: 0;
         top: 0;
         height: 100%;
-      display: block;
+        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;
+        background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
+        background-size: 100% 16rpx;
+        opacity: 0.2;
       }
-      .time {
-        color: rgba(34, 34, 34, 0.9);
-      }
-      .name {
-        font-weight: bold;
+
+      .item {
         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;
+
+        &.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;
-        margin-left: 24rpx;
         &::before {
           display: block;
           content: " ";
@@ -147,155 +378,208 @@ export default {};
         }
       }
     }
-  }
-  .footer{
-    width: 228rpx;
-    .status{
-text-align: center;
-font-size: 28rpx;
-font-weight: bold;
+
+    .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;
+      }
     }
   }
-}
 
-.user {
-  margin-bottom: 24rpx;
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12rpx;
-    .info {
+  .goods {
+    margin-bottom: 24rpx;
+    .single {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .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: 28rpx;
+        }
+      }
+    }
+
+    .list {
+      margin-bottom: 24rpx;
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20rpx;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .img {
+          width: 96rpx;
+          height: 96rpx;
+          border-radius: 10rpx;
+          background: #666;
+        }
+        .box {
+          flex: 1;
+          padding: 0 24rpx;
+          .desc {
+            display: flex;
+            color: #666;
+            padding-top: 8rpx;
+            .total {
+              margin-right: 24rpx;
+            }
+          }
+        }
+
+        .counter {
+          display: flex;
+          justify-content: flex-end;
+          align-items: baseline;
+          min-width: 156rpx;
+          .prize_type {
+            font-weight: bold;
+            padding-left: 12rpx;
+          }
+          .prize_num {
+            font-size: 28rpx;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .result {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 24rpx;
+
+    .cell {
+      color: #666666;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24rpx;
+
+      .body{
       display: flex;
       align-items: center;
-      .name {
+      }
+
+      .red {
+        color: #fe411b;
+      }
+
+      text {
+        color: #222;
+      }
+      .total {
         font-size: 28rpx;
         font-weight: bold;
       }
-    }
-    .btn_call {
-      display: flex;
+      .count {
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+      .order_num {
+        display: flex;
       align-items: center;
-      &::before {
-        display: block;
-        content: " ";
-        width: 32rpx;
-        height: 32rpx;
-        background: url("@/static/icon_phone.png") no-repeat;
-        background-size: 100%;
+        &::after {
+          display: block;
+          content: " ";
+          width: 1px;
+          height: 24rpx;
+          margin: 0 12rpx;
+          background: #ccc;
+        }
       }
     }
   }
 
-  .body {
+  .tool {
     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 {
+    .header {
+      color: #666;
       display: flex;
       align-items: center;
+      .icon {
+        margin-left: 8rpx;
+      }
     }
-    .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;
+    .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;
+      }
     }
   }
 }
-
-.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/orderInfo.vue b/java-mall-app-shop-admin/pages/order/orderInfo.vue
new file mode 100644
index 0000000..8f27db3
--- /dev/null
+++ b/java-mall-app-shop-admin/pages/order/orderInfo.vue
@@ -0,0 +1,18 @@
+<template>
+    <view class="order_info">
+<OrderItem></OrderItem>
+    </view>
+</template>
+
+<script>
+import OrderItem from "./components/OrderItem.vue";
+    export default {
+        components: {
+       OrderItem,
+  },
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file