|
@@ -17,6 +17,26 @@
|
|
|
<el-timeline-item v-for="(item, index) in logisticsTrack" :key="index" :timestamp="item.time" placement="top" color="#409EFF">
|
|
<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-number">{{ item.trackingNo }}</div>
|
|
|
<div class="track-content">{{ item.content }}</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-item>
|
|
|
</el-timeline>
|
|
</el-timeline>
|
|
|
</div>
|
|
</div>
|
|
@@ -29,11 +49,13 @@ import { ref, watch } from 'vue';
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { deliver_method } = toRefs<any>(proxy?.useDict('deliver_method'));
|
|
const { deliver_method } = toRefs<any>(proxy?.useDict('deliver_method'));
|
|
|
import { selectOrderDeliverByOrderId, queryTrack, listOrderStatusLog } from '@/api/pc/enterprise/order';
|
|
import { selectOrderDeliverByOrderId, queryTrack, listOrderStatusLog } from '@/api/pc/enterprise/order';
|
|
|
|
|
+import { Picture } from '@element-plus/icons-vue';
|
|
|
|
|
|
|
|
interface TrackItem {
|
|
interface TrackItem {
|
|
|
time: string;
|
|
time: string;
|
|
|
trackingNo: string;
|
|
trackingNo: string;
|
|
|
content: string;
|
|
content: string;
|
|
|
|
|
+ imagesUrl: string;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
@@ -105,10 +127,11 @@ const handleLogisticNoChange = async (logisticNo: string) => {
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
|
time: displayTime,
|
|
time: displayTime,
|
|
|
- // 3. 建议:保留原始状态字段,方便后续筛选(如“已签收”)
|
|
|
|
|
|
|
+ // 3. 建议:保留原始状态字段,方便后续筛选(如"已签收")
|
|
|
content: item.context || item.content || '',
|
|
content: item.context || item.content || '',
|
|
|
// 4. 建议:如果有地址字段,也可以映射进来,没有则保持订单号
|
|
// 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 {
|
|
return {
|
|
|
time: item.createTime,
|
|
time: item.createTime,
|
|
|
trackingNo: item.orderCode ? `${item.orderCode}` : '',
|
|
trackingNo: item.orderCode ? `${item.orderCode}` : '',
|
|
|
- content: item.statusName
|
|
|
|
|
|
|
+ content: item.statusName,
|
|
|
|
|
+ imagesUrl: item.imagesUrl
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
} else {
|
|
} else {
|
|
@@ -132,7 +156,8 @@ const handleLogisticNoChange = async (logisticNo: string) => {
|
|
|
{
|
|
{
|
|
|
time: (selected as any).createTime || '',
|
|
time: (selected as any).createTime || '',
|
|
|
trackingNo: selected.orderCode ? `${selected.orderCode}` : '',
|
|
trackingNo: selected.orderCode ? `${selected.orderCode}` : '',
|
|
|
- content: '已下单'
|
|
|
|
|
|
|
+ content: '已下单',
|
|
|
|
|
+ imagesUrl: ''
|
|
|
}
|
|
}
|
|
|
];
|
|
];
|
|
|
}
|
|
}
|
|
@@ -240,6 +265,42 @@ const handleClose = () => {
|
|
|
color: #333;
|
|
color: #333;
|
|
|
line-height: 1.6;
|
|
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>
|
|
</style>
|