|
@@ -26,6 +26,26 @@
|
|
|
<div>{{ item.time }}</div>
|
|
<div>{{ item.time }}</div>
|
|
|
<div>{{ item.location }}</div>
|
|
<div>{{ item.location }}</div>
|
|
|
<div>{{ item.status }}</div>
|
|
<div>{{ item.status }}</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>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</el-timeline-item>
|
|
</el-timeline-item>
|
|
@@ -40,6 +60,7 @@
|
|
|
import { listOrderDeliver, queryTrack } from '@/api/order/orderDeliver';
|
|
import { listOrderDeliver, queryTrack } from '@/api/order/orderDeliver';
|
|
|
import { OrderDeliverVO } from '@/api/order/orderDeliver/types';
|
|
import { OrderDeliverVO } from '@/api/order/orderDeliver/types';
|
|
|
import { listOrderStatusLog } from '@/api/order/orderStatusLog';
|
|
import { listOrderStatusLog } from '@/api/order/orderStatusLog';
|
|
|
|
|
+import { Picture } from '@element-plus/icons-vue';
|
|
|
interface Props {
|
|
interface Props {
|
|
|
modelValue: boolean;
|
|
modelValue: boolean;
|
|
|
orderId?: string | number;
|
|
orderId?: string | number;
|
|
@@ -49,6 +70,7 @@ interface LogisticsInfo {
|
|
|
time: string;
|
|
time: string;
|
|
|
location: string;
|
|
location: string;
|
|
|
status: string;
|
|
status: string;
|
|
|
|
|
+ imagesUrl: string;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const props = defineProps<Props>();
|
|
const props = defineProps<Props>();
|
|
@@ -116,10 +138,11 @@ const handleLogisticNoChange = async (logisticNo: string) => {
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
|
time: displayTime,
|
|
time: displayTime,
|
|
|
- // 3. 建议:保留原始状态字段,方便后续筛选(如“已签收”)
|
|
|
|
|
|
|
+ // 3. 建议:保留原始状态字段,方便后续筛选(如"已签收")
|
|
|
status: item.context || item.content || '',
|
|
status: item.context || item.content || '',
|
|
|
// 4. 建议:如果有地址字段,也可以映射进来,没有则保持订单号
|
|
// 4. 建议:如果有地址字段,也可以映射进来,没有则保持订单号
|
|
|
- location: item.location || (selected.orderCode ? `${selected.orderCode}` : '')
|
|
|
|
|
|
|
+ location: item.location || (selected.orderCode ? `${selected.orderCode}` : ''),
|
|
|
|
|
+ imagesUrl: ''
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -134,7 +157,8 @@ const handleLogisticNoChange = async (logisticNo: string) => {
|
|
|
return {
|
|
return {
|
|
|
time: item.createTime,
|
|
time: item.createTime,
|
|
|
location: item.orderCode ? `${item.orderCode}` : '',
|
|
location: item.orderCode ? `${item.orderCode}` : '',
|
|
|
- status: item.statusName
|
|
|
|
|
|
|
+ status: item.statusName,
|
|
|
|
|
+ imagesUrl: item.imagesUrl
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
@@ -153,7 +177,8 @@ const handleLogisticNoChange = async (logisticNo: string) => {
|
|
|
{
|
|
{
|
|
|
time: (selected as any).createTime || '',
|
|
time: (selected as any).createTime || '',
|
|
|
location: selected.orderCode ? `${selected.orderCode}` : '',
|
|
location: selected.orderCode ? `${selected.orderCode}` : '',
|
|
|
- status: '已下单'
|
|
|
|
|
|
|
+ status: '已下单',
|
|
|
|
|
+ imagesUrl: ''
|
|
|
}
|
|
}
|
|
|
];
|
|
];
|
|
|
}
|
|
}
|
|
@@ -211,6 +236,42 @@ const handleClose = () => {
|
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .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;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|