取件单内容优化

src/pages/pickup/waybillPickUpDetail.vue

@@ -45,26 +45,76 @@ const contactClient = () => {
 
 <template>
   <scroll-view enable-back-to-top scroll-y class="viewport">
-    <!-- 商品详情 -->
     <view class="detail panel">
       <view class="title">
-        <text>详情</text>
+        <text>运单详情 </text>
       </view>
       <view class="content">
         <view class="properties">
-          <!-- 属性详情 -->
-          <view class="item" v-for="item in details" :key="item.id">
-            <text class="label">{{ item.status }}</text>
+          <view v-for="item in details" :key="item.id" class="item">
+            <view class="order_no_state">
+              <view>
+                <text>{{ item.waybill_no }}</text>
+              </view>
+              <view class="order_state">
+                <text :class="'state-' + item.status">{{ item.status_text }}</text>
+              </view>
+            </view>
+            <view class="info">
+              <view>
+                预估重量：
+                <text>{{ item.estimated_weight }}KG</text>
+              </view>
+              <view>
+                Ups 取件码：
+                <text>{{ item.ups_prn || '无' }}</text>
+              </view>
+              <view>
+                Ups 准备时间：
+                <text>{{ item.ups_ready_time || '无' }}</text>
+              </view>
+              <view>
+                Ups 截止时间：
+                <text>{{ item.ups_close_time || '无' }}</text>
+              </view>
+              <view> 面单 </view>
+            </view>
+            <view class="title label">
+              <text
+                >物品清单
+                <text class="bln" v-if="!item.goods.length">无</text>
+              </text>
+            </view>
+            <view v-for="(good, g) in item.goods" :key="g" class="goods">
+              <view
+                >类型：
+                <text>{{ good.category_name }}</text>
+              </view>
+              <view
+                >名称：
+                <text>{{ good.goods_name }}</text>
+                <text style="color: #666666; font-size: 22rpx">{{ ' x' + good.qty }}</text>
+              </view>
+
+              <view
+                >价格：
+                <text>￡{{ good.price }}</text>
+              </view>
+              <view
+                >合计：
+                <text>￡{{ good.amount }}</text>
+              </view>
+              <!-- <image
+                class="image"
+                v-for="item in good.images"
+                :key="item"
+                mode="widthFix"
+                :src="item"
+              ></image> -->
+            </view>
           </view>
         </view>
         <!-- 图片详情 -->
-        <!-- <image
-          class="image"
-          v-for="item in goods?.details.pictures"
-          :key="item"
-          mode="widthFix"
-          :src="item"
-        ></image> -->
       </view>
     </view>
   </scroll-view>
@@ -90,12 +140,13 @@ page {
 }
 
 .viewport {
-  background-color: #f4f4f4;
+  background-color: #ffffff;
+  height: 100%;
+  position: relative;
 }
 
 .panel {
   margin-top: 20rpx;
-  background-color: #fff;
   .title {
     display: flex;
     justify-content: space-between;
@@ -115,6 +166,13 @@ page {
       font-size: 24rpx;
       color: #666;
     }
+    .bln {
+      border-left: 0;
+    }
+  }
+  .label {
+    height: auto;
+    padding: 6rpx;
   }
 }
 
@@ -134,6 +192,8 @@ page {
 /* 商品详情 */
 .detail {
   padding-left: 20rpx;
+  padding-bottom: 78rpx;
+  margin-bottom: 20rpx;
   .content {
     margin-left: -20rpx;
     .image {
@@ -142,20 +202,58 @@ page {
   }
   .properties {
     padding: 0 20rpx;
-    margin-bottom: 30rpx;
+    font-size: 30rpx;
     .item {
       display: flex;
+      flex-direction: column;
       line-height: 2;
-      padding: 10rpx;
+      margin: 10rpx;
+      overflow: hidden;
       font-size: 26rpx;
+      border-radius: 20rpx;
+      box-sizing: border-box;
+      background-color: #fff;
       color: #333;
-      border-bottom: 1rpx dashed #ccc;
-    }
-    .label {
-      width: 200rpx;
-    }
-    .value {
-      flex: 1;
+      box-shadow: 0 0rpx 10rpx rgba(200, 200, 200, 0.5);
+      margin-bottom: 20rpx;
+      .order_no_state {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #eeeeee;
+        padding: 20rpx;
+        .order_state {
+          font-size: 24rpx;
+          .state-2 {
+            color: #2979ff;
+          }
+          .state-3 {
+            color: #1c67da;
+          }
+          .state-4 {
+            color: #f3a73f;
+          }
+          .state-5 {
+            color: #18bc37;
+          }
+          .state-6 {
+            color: #f3a73f;
+          }
+          .state-7 {
+            color: #01b075;
+          }
+        }
+      }
+      .info {
+        padding: 10rpx 20rpx;
+      }
+      .goods {
+        margin: 10rpx 20rpx;
+        padding: 10rpx;
+        border: 1rpx solid #eaeaea;
+        border-radius: 10rpx;
+      }
     }
   }
 }

src/pages/pickup/waybillPickUpOrder.vue

@@ -431,10 +431,10 @@ const getScrollW = () => {
   query
     .selectAll('.scroll-item')
     .boundingClientRect((data: any) => {
-      let dataLen = data.length
+      let dataLen = data.length - 1
       for (let i = 0; i < dataLen; i++) {
         //  scroll-view 子元素组件距离左边栏的距离
-        statusItems.value[i].left = data[i].left
+        statusItems.value[i].left = data[i].left || 0
         //  scroll-view 子元素组件宽度
         statusItems.value[i].width = data[i].width
       }
@@ -544,8 +544,9 @@ page {
   .navigator {
     padding: 20rpx;
     margin-top: 20rpx;
-    border-radius: 10rpx;
+    border-radius: 20rpx;
     background-color: #fff;
+    box-shadow: 0 0rpx 10rpx rgba(200, 200, 200, 0.8);
   }
   .order_no_state {
     display: flex;