订单详情

src/pages/client/clientPackage/orderAll.vue

@@ -10,26 +10,26 @@
         <view class="order-item" v-for="(item,index) of init_list" :key='index' @click="handlerSkipDetail(item)">
           <view class="order-top">
             <view class="top-left"> 订单号：{{ item.orderSn }} </view>
-            <view class="top-right"> {{ type }} </view>
+            <view class="top-right"> {{ type_name }} </view>
           </view>
 
           <u-line margin='20rpx 0'></u-line>
 
-          <view class="order-center">
+          <view class="order-center" v-for="(itm,idx) of item.goodsInfo">
             <view class="center-left">
               <image class="left-img" src="@/static/QR57a.jpg"></image>
             </view>
 
             <view class="center-right">
               <view class="right-title">
-                {{ item.goodsInfo.goodsName }}
+                {{ itm.goodsName }}
               </view>
               <view class="right-title">
                 Ceshi 111
               </view>
               <view class="right-price">
-               <view class="price"> ￥{{ item.goodsInfo.goodsPrice }} </view>
-               <view class="numb"> x {{ item.goodsInfo.realAmount }} </view>
+               <view class="price"> ￥{{ itm.goodsPrice }} </view>
+               <view class="numb"> x {{ itm.realAmount }} </view>
               </view>
             </view>
           </view>
@@ -52,6 +52,7 @@ export default {
     return {
       current: 0,
       type: 0,
+      type_name:'',
       size: 20,
       // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
       list: [
@@ -91,6 +92,7 @@ export default {
     handlerChangeItem(data) {
       this.current = data.index;
       this.type = data.type;
+      this.type_name = data.name;
       this.userOrdersPage(this.type);
     },
 
@@ -109,7 +111,7 @@ export default {
     handlerSkipDetail(e){
       console.log('@@@@e',e);
       uni.navigateTo({
-        url:`/pages/client/clientPackage/orderDetail?orderList=${e}`
+        url:`/pages/client/clientPackage/orderDetail?orderList=${JSON.stringify(e)}`
       })
     },
     // 取消订单

src/pages/client/clientPackage/orderDetail.vue

@@ -1,6 +1,21 @@
 <template>
   <view class="container">
-    {{ init_list }}
+    <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>
+      </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>
   </view>
 </template>
 
@@ -12,10 +27,34 @@
       }
     },
     onLoad(e){
-      this.init_list = JSON.parse(e.orderList)
+      this.init_list = e.orderList
     }
   }
 </script>
 
-<style>
+<style lang="scss" scoped>
+  .container{
+    padding: 20rpx;
+    .top-box{
+      padding: 20rpx;
+      background-color: #fff;
+      border-radius: 20rpx;
+      box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0,0,0,0.2);
+      .top-t{
+        display: flex;
+        justify-content: space-between;
+        .t-l{
+          display: flex;
+          .t-b{
+            width: 12rpx;
+            border-radius: 10rpx;
+            background-color: #C3711C;
+          }
+          .t-name{
+            margin-left: 10rpx;
+          }
+        }
+      }
+    }
+  }
 </style>