|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="logistics-page">
|
|
|
<!-- 顶部包裹切换 -->
|
|
|
- <scroll-view scroll-x class="package-tabs" :scroll-into-view="'tab-' + currentPackageIndex">
|
|
|
+ <scroll-view scroll-x class="package-tabs" :scroll-into-view="'tab-' + currentPackageIndex" v-if="packages.length > 0">
|
|
|
<view class="tab-list">
|
|
|
<view class="tab-item" v-for="(item, index) in packages" :key="index" :id="'tab-' + index"
|
|
|
:class="{ active: currentPackageIndex === index }" @click="switchPackage(index)">
|
|
|
@@ -10,59 +10,70 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
- <!-- 物流基本信息 -->
|
|
|
- <view class="card info-card">
|
|
|
- <view class="info-row">
|
|
|
- <text class="label">承运商:</text>
|
|
|
- <text class="value">{{ currentPackage.expressName }}</text>
|
|
|
- </view>
|
|
|
- <view class="info-row">
|
|
|
- <text class="label">物流单号:</text>
|
|
|
- <text class="value">{{ currentPackage.waybillCode }}</text>
|
|
|
- <view class="copy-btn" @click="copyTrackingNo">复制</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 物流轨迹 -->
|
|
|
- <view class="card timeline-card">
|
|
|
- <!-- 收货地址 -->
|
|
|
- <view class="timeline-item address-item">
|
|
|
- <view class="left-col">
|
|
|
- <view class="icon-box address-icon">收</view>
|
|
|
- <view class="line"></view>
|
|
|
+ <template v-if="packages.length > 0">
|
|
|
+ <!-- 物流基本信息 -->
|
|
|
+ <view class="card info-card">
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">承运商:</text>
|
|
|
+ <text class="value">{{ currentPackage.expressName }}</text>
|
|
|
</view>
|
|
|
- <view class="right-col">
|
|
|
- <view class="status-title">收货地址:{{ currentPackage.receiveAddress }}</view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">物流单号:</text>
|
|
|
+ <text class="value">{{ currentPackage.waybillCode }}</text>
|
|
|
+ <view class="copy-btn" @click="copyTrackingNo">复制</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 轨迹列表 -->
|
|
|
- <view class="timeline-item" v-for="(trace, index) in currentPackage.trackingVoList" :key="index">
|
|
|
- <view class="left-col">
|
|
|
- <!-- 不同状态显示不同图标 -->
|
|
|
- <view v-if="index === 0 && ['已签收', '签收'].includes(trace.status)" class="icon-box check-icon">
|
|
|
- <u-icon name="checkmark" color="#fff" size="20"></u-icon>
|
|
|
- </view>
|
|
|
- <view v-else-if="['派送中', '派件'].includes(trace.status)" class="icon-box delivery-icon">
|
|
|
- <u-icon name="man" color="#fff" size="24"></u-icon>
|
|
|
- </view>
|
|
|
- <view v-else-if="['运输中', '在途'].includes(trace.status)" class="icon-box transport-icon">
|
|
|
- <u-icon name="car" color="#fff" size="24"></u-icon>
|
|
|
+ <!-- 物流轨迹 -->
|
|
|
+ <view class="card timeline-card">
|
|
|
+ <!-- 收货地址 -->
|
|
|
+ <view class="timeline-item address-item">
|
|
|
+ <view class="left-col">
|
|
|
+ <view class="icon-box address-icon">收</view>
|
|
|
+ <view class="line"></view>
|
|
|
</view>
|
|
|
- <view v-else-if="['已下单', '揽收'].includes(trace.status)" class="icon-box order-icon">
|
|
|
- <u-icon name="order" color="#fff" size="24"></u-icon>
|
|
|
+ <view class="right-col">
|
|
|
+ <view class="status-title">收货地址:{{ currentPackage.receiveAddress }}</view>
|
|
|
</view>
|
|
|
- <view v-else class="dot"></view>
|
|
|
-
|
|
|
- <view class="line" v-if="index !== currentPackage.trackingVoList.length - 1"></view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="right-col" :class="{ 'is-first': index === 0 }">
|
|
|
- <view class="status-title">{{ trace.status }}</view>
|
|
|
- <view class="status-desc">{{ trace.context }}</view>
|
|
|
- <view class="status-time">{{ trace.ftime }}</view>
|
|
|
+ <!-- 轨迹列表 -->
|
|
|
+ <view class="timeline-item" v-for="(trace, index) in currentPackage.trackingVoList" :key="index">
|
|
|
+ <view class="left-col">
|
|
|
+ <!-- 不同状态显示不同图标 -->
|
|
|
+ <view v-if="index === 0 && ['已签收', '签收'].includes(trace.status)" class="icon-box check-icon">
|
|
|
+ <u-icon name="checkmark" color="#fff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="['派送中', '派件'].includes(trace.status)" class="icon-box delivery-icon">
|
|
|
+ <u-icon name="man" color="#fff" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="['运输中', '在途'].includes(trace.status)" class="icon-box transport-icon">
|
|
|
+ <u-icon name="car" color="#fff" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="['已下单', '揽收'].includes(trace.status)" class="icon-box order-icon">
|
|
|
+ <u-icon name="order" color="#fff" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view v-else class="dot"></view>
|
|
|
+
|
|
|
+ <view class="line" v-if="index !== currentPackage.trackingVoList.length - 1"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right-col" :class="{ 'is-first': index === 0 }">
|
|
|
+ <view class="status-title">{{ trace.status }}</view>
|
|
|
+ <view class="status-desc">{{ trace.context }}</view>
|
|
|
+ <view class="status-time">{{ trace.ftime }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty-state" v-else-if="!loading">
|
|
|
+ <view class="flex-d flex-a-c empty-box">
|
|
|
+ <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png"
|
|
|
+ style="width: 100%; height: 260rpx" mode="heightFix"></image>
|
|
|
+ <view class="common-title">暂无物流信息</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -71,6 +82,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: true,
|
|
|
currentPackageIndex: 0,
|
|
|
packages: [], // Changed to empty array, will be populated by API
|
|
|
orderId: '',
|
|
|
@@ -93,6 +105,7 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getLogisticsData() {
|
|
|
+ this.loading = true;
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
@@ -102,6 +115,7 @@ export default {
|
|
|
|
|
|
this.$u.api.getOrderTrackingAjax(params).then(res => {
|
|
|
uni.hideLoading();
|
|
|
+ this.loading = false;
|
|
|
if (res.code == 200) {
|
|
|
const data = res.data || [];
|
|
|
|
|
|
@@ -115,6 +129,7 @@ export default {
|
|
|
}
|
|
|
}).catch(() => {
|
|
|
uni.hideLoading();
|
|
|
+ this.loading = false;
|
|
|
this.$u.toast('网络请求失败');
|
|
|
});
|
|
|
},
|
|
|
@@ -324,4 +339,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ padding-top: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .empty-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .common-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|