update: 订单详情页

java-mall-app-shop-admin/pages.json

@@ -91,6 +91,12 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+     {
+      "path": "pages/order/orderInfo",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
     },
     {
       "path": "pages/IM/IM",

java-mall-app-shop-admin/pages/order/components/OrderItem.vue

@@ -38,6 +38,7 @@
     </view>
 
     <view class="goods">
+      <view class="single" v-if="isList">
         <view class="body">
           <view class="info">
             <image src="111" mode="aspectFit" class="img" />
@@ -54,8 +55,192 @@
         </view>
       </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>
@@ -211,7 +403,7 @@ font-weight: bold;
         padding: 12rpx 24rpx;
         border-radius: 8rpx;
         text {
-      color: #FF801F;
+          color: #ff801f;
           display: inline-block;
           margin-right: 12rpx;
         }
@@ -229,10 +421,11 @@ font-weight: bold;
   }
 
   .goods {
+    margin-bottom: 24rpx;
+    .single {
       display: flex;
       justify-content: space-between;
       align-items: center;
-  margin-bottom: 24rpx;
       .body {
         display: flex;
         align-items: center;
@@ -259,7 +452,100 @@ font-weight: bold;
           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;
+      }
+
+      .red {
+        color: #fe411b;
+      }
+
+      text {
+        color: #222;
+      }
+      .total {
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+      .count {
         font-size: 36rpx;
+        font-weight: bold;
+      }
+      .order_num {
+        display: flex;
+      align-items: center;
+        &::after {
+          display: block;
+          content: " ";
+          width: 1px;
+          height: 24rpx;
+          margin: 0 12rpx;
+          background: #ccc;
+        }
       }
     }
   }
@@ -296,6 +582,4 @@ font-weight: bold;
     }
   }
 }
-
-
 </style>

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>