修改订单详情页面

src/pages/client/clientPackage/orderAll.vue

@@ -7,14 +7,16 @@
     <!-- 订单 -->
     <view class="order">
       <view class="order-box">
-        <view class="order-item" v-for="(item,index) of init_list" :key="index">
-          <view class="item-top">
-            <view class="top-left gray-color">订单编号 : 3000291847772181</view>
-            <view class="top-right ">待付款</view>
-          </view>
-          <view class="item-top">
-            <view class="top-left gray-color">支付时间 : 2024-01-12</view>
-            <view class="top-right"></view>
+        <view class="order-item" v-for="(item,index) of init_list" :key="index" >
+          <view class="" @click="handlerSkipDetail(item)">
+            <view class="item-top">
+              <view class="top-left gray-color">订单编号 : 3000291847772181</view>
+              <view class="top-right ">待付款</view>
+            </view>
+            <view class="item-top">
+              <view class="top-left gray-color">支付时间 : 2024-01-12</view>
+              <view class="top-right"></view>
+            </view>
           </view>
 
           <u-line margin='20rpx 0'></u-line>
@@ -33,7 +35,7 @@
                 </view>
               </view>
               <view class="r-r">
-                <view class="r-item" @click="handlerSkipComment(item)">
+                <view class="r-item" @click.stop="handlerSkipComment(item)">
                   <u-icon name="chat" color="#000" size="28"></u-icon>
                   <span>评价</span>
                 </view>

src/pages/client/clientPackage/orderDetail.vue

@@ -1,46 +1,66 @@
 <template>
   <view class="container">
-    <view class="top-box">
+
+    <view class="center-box">
       <view class="top-t">
         <view class="t-l">
           <view class="t-b"> </view>
-          <view class="t-name">测试名称</view>
-        </view>
-        <view class="t-r">
-          代发货
+          <view class="t-name">商品详情</view>
         </view>
       </view>
 
       <u-line margin='20rpx 0'></u-line>
 
-      <view class="top-bottom-text">订单号: {{ init_list.orderSn }}</view>
-      <view class="top-bottom-text">下单时间:2024-2-25</view>
+      <view class="item-center" v-for="item of 3">
+        <view class="center-left">
+          <image src="@/static/QR57a.jpg" class="img"></image>
+        </view>
+        <view class="center-right">
+          <view class="r-l">
+            <view class="right-name"> 测试名称 </view>
+            <view class="right-descript"> 测试商品描述111 </view>
+            <view class="l-box">
+              <view class="right-price"> ￥1200 </view>
+              <view class="right-numb"> ×1 </view>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
 
-    <view class="center-box">
+    <view class="top-box">
       <view class="top-t">
         <view class="t-l">
           <view class="t-b"> </view>
-          <view class="t-name">商品详情</view>
-        </view>
-        <view class="t-r">
-
+          <view class="t-name">订单信息</view>
         </view>
       </view>
 
-      <view class="center-item" v-for="(item,index) of init_list.goodsInfo">
-        <view class="item-left">
-          <image class="img" src='@/static/QR57a.jpg'></image>
+      <u-line margin='20rpx 0'></u-line>
+
+      <view class="top-t2">
+        <view class="t2-item">
+          <p>订单号</p>
+          <p>2884719002012</p>
+        </view>
+        <view class="t2-item">
+          <p>下单时间</p>
+          <p>2024-2-25</p>
+        </view>
+        <view class="t2-item">
+          <p>支付方式</p>
+          <p>在线支付</p>
         </view>
-        <view class="item-right">
-          <view class="right-name"> {{ item.goodsName }} </view>
-          <view class="right-name"> {{ item.goodsQuantity }} </view>
-          <view class="right-name"> ${{ item.goodsPrice }} </view>
+        <view class="t2-item">
+          <p>商品总额</p>
+          <p>￥7.90</p>
         </view>
-        <view class="">
-          <button @click="handlerSkipContext(item)">评价商品</button>
+        <view class="t2-item">
+          <p>优惠券</p>
+          <p>-￥3.90</p>
         </view>
       </view>
+
     </view>
   </view>
 </template>
@@ -49,18 +69,24 @@
   export default {
     data() {
       return {
-        init_list: null
+        init_list: {
+          goodsInfo: [{
+            goodsName: '测试名称111',
+            goodsQuantity: 12,
+            goodsPrice: 322
+          }]
+        }
       }
     },
     onLoad(e) {
-      this.init_list = e.orderList
+      // this.init_list = e.orderList
     },
-    methods:{
-      handlerSkipContext(item){
+    methods: {
+      handlerSkipContext(item) {
         uni.navigateTo({
-          url:"/pages/client/clientPackage/goodsEstimation"
+          url: "/pages/client/clientPackage/goodsEstimation"
         })
-        console.log('@@@@item',item);
+        console.log('@@@@item', item);
       }
     }
   }
@@ -87,34 +113,90 @@
           .t-b {
             width: 12rpx;
             border-radius: 10rpx;
-            background-color: #C3711C;
+            background-color: #f98e23;
           }
 
           .t-name {
             margin-left: 10rpx;
+            font-weight: bold;
+            font-size: 28rpx;
           }
         }
       }
+
+      .top-bottom-text {
+        margin: 10rpx 0;
+      }
+
+      .top-t2 {
+        .t2-item {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 20rpx;
+        }
+      }
     }
+    .center-box{
+      margin-bottom: 20rpx;
+    }
+    .item-center {
+      display: flex;
+      align-items: center;
+      margin: 10rpx 0;
 
-    .center-box {
-      margin-top: 20rpx;
-      .center-item{
-        display: flex;
-        margin-bottom: 20rpx;
-        .item-left{
-          .img{
-            width: 200rpx;
-            height: 200rpx;
-          }
+      .center-left {
+        height: 160rpx;
+
+        .img {
+          width: 160rpx;
+          height: 160rpx;
         }
-        .item-right{
+      }
+
+      .center-right {
+        width: 100%;
+        height: 160rpx;
+        display: flex;
+        justify-content: space-between;
+        margin-left: 20rpx;
+
+        .r-l {
           display: flex;
           flex-direction: column;
           justify-content: space-around;
-          margin-left: 20rpx;
+
+          .right-name {
+            color: #4D5671;
+            font-size: 32rpx;
+            font-weight: bold;
+          }
+
+          .right-descript {
+            font-size: 28rpx;
+            color: #858797;
+          }
+
+          .l-box {
+            display: flex;
+            font-size: 24rpx;
+            align-items: center;
+            font-style: italic;
+
+            .right-price {
+              margin-right: 20rpx;
+              font-weight: bold;
+              font-size: 28rpx;
+              color: #F57F32;
+            }
+
+            .right-numb {
+              font-size: 24rpx;
+              color: #858797;
+            }
+          }
         }
       }
     }
+
   }
 </style>