瀏覽代碼

Merge branch 'master' of http://8.152.4.3:3000/yp_web/yoe-shop-web

weixin_52219567 1 天之前
父節點
當前提交
d12a8d1433
共有 1 個文件被更改,包括 65 次插入4 次删除
  1. 65 4
      src/views/order/orderManage/logisticsDetail.vue

+ 65 - 4
src/views/order/orderManage/logisticsDetail.vue

@@ -17,6 +17,26 @@
           <el-timeline-item v-for="(item, index) in logisticsTrack" :key="index" :timestamp="item.time" placement="top" color="#409EFF">
             <div class="track-number">{{ item.trackingNo }}</div>
             <div class="track-content">{{ item.content }}</div>
+            <div v-if="item.imagesUrl" class="timeline-images">
+              <div class="image-label">签收图片:</div>
+              <div class="image-list">
+                <el-image
+                  v-for="(url, imgIndex) in item.imagesUrl.split(',')"
+                  :key="imgIndex"
+                  :src="url"
+                  :preview-src-list="item.imagesUrl.split(',')"
+                  :initial-index="imgIndex"
+                  fit="cover"
+                  class="sign-image"
+                >
+                  <template #error>
+                    <div class="image-error">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+            </div>
           </el-timeline-item>
         </el-timeline>
       </div>
@@ -29,11 +49,13 @@ import { ref, watch } from 'vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { deliver_method } = toRefs<any>(proxy?.useDict('deliver_method'));
 import { selectOrderDeliverByOrderId, queryTrack, listOrderStatusLog } from '@/api/pc/enterprise/order';
+import { Picture } from '@element-plus/icons-vue';
 
 interface TrackItem {
   time: string;
   trackingNo: string;
   content: string;
+  imagesUrl: string;
 }
 
 const props = defineProps<{
@@ -105,10 +127,11 @@ const handleLogisticNoChange = async (logisticNo: string) => {
 
           return {
             time: displayTime,
-            // 3. 建议:保留原始状态字段,方便后续筛选(如“已签收”
+            // 3. 建议:保留原始状态字段,方便后续筛选(如"已签收"
             content: item.context || item.content || '',
             // 4. 建议:如果有地址字段,也可以映射进来,没有则保持订单号
-            trackingNo: item.location || (selected.orderCode ? `${selected.orderCode}` : '')
+            trackingNo: item.location || (selected.orderCode ? `${selected.orderCode}` : ''),
+            imagesUrl: ''
           };
         });
       }
@@ -124,7 +147,8 @@ const handleLogisticNoChange = async (logisticNo: string) => {
             return {
               time: item.createTime,
               trackingNo: item.orderCode ? `${item.orderCode}` : '',
-              content: item.statusName
+              content: item.statusName,
+              imagesUrl: item.imagesUrl
             };
           });
         } else {
@@ -132,7 +156,8 @@ const handleLogisticNoChange = async (logisticNo: string) => {
             {
               time: (selected as any).createTime || '',
               trackingNo: selected.orderCode ? `${selected.orderCode}` : '',
-              content: '已下单'
+              content: '已下单',
+              imagesUrl: ''
             }
           ];
         }
@@ -240,6 +265,42 @@ const handleClose = () => {
       color: #333;
       line-height: 1.6;
     }
+
+    .timeline-images {
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed #dcdfe6;
+
+      .image-label {
+        font-size: 13px;
+        color: #909399;
+        margin-bottom: 6px;
+      }
+
+      .image-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .sign-image {
+          width: 60px;
+          height: 60px;
+          border-radius: 4px;
+          border: 1px solid #dcdfe6;
+          cursor: pointer;
+
+          .image-error {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f5f7fa;
+            color: #c0c4cc;
+          }
+        }
+      }
+    }
   }
 }
 </style>