Skip to content

飞
飞鹤小程序
Commit 468fe02d authored by spc's avatar spc
Browse files
Options

fixed

parent 4fe250d2
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 150 deletions
v3/logisticsPage/logisticsPage.vue
View file @ 468fe02d
...@@ -4,24 +4,35 @@ ...@@ -4,24 +4,35 @@
<view class="logistics-header"> <view class="logistics-header">
<view class="logistics-info"> <view class="logistics-info">
<view class="company-info"> <view class="company-info">
<text class="company-name">{{ logisticsData.logisticsCompanyName || '快递公司' }}</text> <text class="company-name">{{ currentLogistics.logisticsCompanyName || '快递公司' }}</text>
<text class="express-code">{{ logisticsData.expressCode || '暂无运单号' }}</text> <text class="express-code">{{ currentLogistics.expressCode || '暂无运单号' }}</text>
</view> </view>
<view class="status-info" v-if="logisticsData.statusDesc"> <view class="status-info">
<text class="status-desc">{{ logisticsData.statusDesc }}</text> <text class="status-desc">{{ currentLogistics.parcelStatusDesc || currentLogistics.statusDesc || '暂无状态' }}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 多个包裹切换（如果有多个） -->
<view class="parcel-tabs" v-if="logisticsList.length > 1">
<view class="tab-item"
v-for="(item, index) in logisticsList"
:key="index"
:class="{ 'active': activeParcelIndex === index }"
@tap="switchParcel(index)">
{{ item.logisticsCompanyName }} - {{ item.expressCode }}
</view>
</view>
<!-- 物流时间轴 --> <!-- 物流时间轴 -->
<view class="logistics-timeline" v-if="logisticsData.processDetailList && logisticsData.processDetailList.length > 0"> <view class="logistics-timeline" v-if="currentLogistics.processDetailList && currentLogistics.processDetailList.length > 0">
<view class="timeline-item" v-for="(item, index) in logisticsData.processDetailList" :key="index"> <view class="timeline-item" v-for="(item, index) in currentLogistics.processDetailList" :key="index">
<!-- 时间轴点和线 --> <!-- 时间轴点和线 -->
<view class="timeline-line"> <view class="timeline-line">
<view class="timeline-dot" :class="{ 'active': index === 0 }"> <view class="timeline-dot" :class="{ 'active': index === 0 }">
<view class="dot-inner" v-if="index === 0"></view> <view class="dot-inner" v-if="index === 0"></view>
</view> </view>
<view class="timeline-line-vertical" v-if="index < logisticsData.processDetailList.length - 1"></view> <view class="timeline-line-vertical" v-if="index < currentLogistics.processDetailList.length - 1"></view>
</view> </view>
<!-- 物流信息内容 --> <!-- 物流信息内容 -->
...@@ -51,8 +62,18 @@ ...@@ -51,8 +62,18 @@
export default { export default {
data() { data() {
return { return {
// 物流数据 // 物流数据列表（支持多个包裹）
logisticsData: { logisticsList: [],
// 当前激活的包裹索引
activeParcelIndex: 0,
// 加载状态
loading: true
}
},
computed: {
// 当前显示的物流信息
currentLogistics() {
return this.logisticsList[this.activeParcelIndex] || {
logisticsCompanyName: '', logisticsCompanyName: '',
logisticsCompanyCode: '', logisticsCompanyCode: '',
expressCode: '', expressCode: '',
...@@ -60,9 +81,7 @@ ...@@ -60,9 +81,7 @@
parcelStatusDesc: '', parcelStatusDesc: '',
lastUpdateTime: '', lastUpdateTime: '',
processDetailList: [] processDetailList: []
}, };
// 加载状态
loading: true
} }
}, },
onLoad(options) { onLoad(options) {
...@@ -80,23 +99,38 @@ ...@@ -80,23 +99,38 @@
order_no: this.orderId order_no: this.orderId
}); });
if (res && res.data) { if (res && res.ok && res.data) {
// 假设接口返回的数据结构为 { ok, data: { processDetailList, ... } } // 支持多个物流包裹的情况
// 调整为页面需要的数据结构 if (Array.isArray(res.data)) {
this.logisticsData = { // 确保每个包裹的数据结构完整
logisticsCompanyName: res.data.logisticsCompanyName || '', this.logisticsList = res.data.map(item => ({
logisticsCompanyCode: res.data.logisticsCompanyCode || '', logisticsCompanyName: item.logisticsCompanyName || '',
expressCode: res.data.expressCode || '', logisticsCompanyCode: item.logisticsCompanyCode || '',
statusDesc: res.data.statusDesc || res.data.parcelStatusDesc || '', expressCode: item.expressCode || '',
parcelStatusDesc: res.data.parcelStatusDesc || '', statusDesc: item.statusDesc || '',
lastUpdateTime: res.data.lastUpdateTime || '', parcelStatusDesc: item.parcelStatusDesc || '',
processDetailList: res.data.processDetailList || [] lastUpdateTime: item.lastUpdateTime || '',
}; processDetailList: item.processDetailList || []
}));
} else {
// 单个包裹的情况，转为数组格式
this.logisticsList = [{
logisticsCompanyName: res.data.logisticsCompanyName || '',
logisticsCompanyCode: res.data.logisticsCompanyCode || '',
expressCode: res.data.expressCode || '',
statusDesc: res.data.statusDesc || '',
parcelStatusDesc: res.data.parcelStatusDesc || '',
lastUpdateTime: res.data.lastUpdateTime || '',
processDetailList: res.data.processDetailList || []
}];
}
} else { } else {
console.error('物流数据获取失败'); console.error('物流数据获取失败');
this.logisticsList = [];
} }
} catch (error) { } catch (error) {
console.error('获取物流信息异常:', error); console.error('获取物流信息异常:', error);
this.logisticsList = [];
} finally { } finally {
this.loading = false; this.loading = false;
} }
...@@ -105,9 +139,8 @@ ...@@ -105,9 +139,8 @@
formatTime(timeStr) { formatTime(timeStr) {
if (!timeStr) return ''; if (!timeStr) return '';
// 假设时间格式为 yyyy-MM-dd HH:mm:ss // 支持时间戳格式
// 需要转换为 MM.dd HH:mm 格式 const date = typeof timeStr === 'number' ? new Date(timeStr) : new Date(timeStr);
const date = new Date(timeStr);
if (isNaN(date.getTime())) return timeStr; if (isNaN(date.getTime())) return timeStr;
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
...@@ -116,153 +149,190 @@ ...@@ -116,153 +149,190 @@
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0');
return `${month}.${day} ${hours}:${minutes}`; return `${month}.${day} ${hours}:${minutes}`;
},
// 切换包裹
switchParcel(index) {
if (index >= 0 && index < this.logisticsList.length) {
this.activeParcelIndex = index;
}
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.logistics-container { .logistics-container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
/* 顶部信息样式 */ /* 顶部信息样式 */
.logistics-header { .logistics-header {
background-color: #ffffff; background-color: #ffffff;
padding: 30rpx 30rpx 20rpx; padding: 30rpx 30rpx 20rpx;
border-bottom: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #e5e5e5;
} }
.logistics-info { .logistics-info {
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.company-info { .company-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.company-name { .company-name {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
} }
.express-code { .express-code {
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #999999;
} }
.status-info { .status-info {
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.status-desc { .status-desc {
font-size: 28rpx; font-size: 28rpx;
color: #666666; color: #666666;
} }
/* 物流时间轴样式 */ /* 包裹切换标签样式 */
.logistics-timeline { .parcel-tabs {
margin-top: 20rpx; background-color: #ffffff;
background-color: #ffffff; margin-top: 20rpx;
padding: 30rpx 0; padding: 20rpx 30rpx;
} display: flex;
overflow-x: auto;
white-space: nowrap;
border-bottom: 1rpx solid #e5e5e5;
}
.timeline-item { .parcel-tabs::-webkit-scrollbar {
display: flex; display: none;
padding: 0 30rpx; }
position: relative;
padding-bottom: 40rpx;
}
/* 时间轴点和线 */ .tab-item {
.timeline-line { padding: 10rpx 20rpx;
display: flex; margin-right: 20rpx;
flex-direction: column; border-radius: 16rpx;
align-items: center; background-color: #f5f5f5;
margin-right: 30rpx; font-size: 26rpx;
min-width: 20rpx; color: #666666;
} flex-shrink: 0;
}
.timeline-dot { .tab-item.active {
width: 20rpx; background-color: #fff0e6;
height: 20rpx; color: #ff6600;
border-radius: 50%; font-weight: 500;
background-color: #e5e5e5; }
position: relative;
z-index: 2;
}
.timeline-dot.active { /* 物流时间轴样式 */
background-color: #ffffff; .logistics-timeline {
border: 2rpx solid #ff6600; margin-top: 20rpx;
width: 18rpx; background-color: #ffffff;
height: 18rpx; padding: 30rpx 0;
} }
.dot-inner { .timeline-item {
position: absolute; display: flex;
width: 10rpx; padding: 0 30rpx;
height: 10rpx; position: relative;
background-color: #ff6600; padding-bottom: 40rpx;
border-radius: 50%; }
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-line-vertical { /* 时间轴点和线 */
width: 2rpx; .timeline-line {
background-color: #e5e5e5; display: flex;
flex: 1; flex-direction: column;
margin-top: -1rpx; align-items: center;
position: relative; margin-right: 30rpx;
z-index: 1; min-width: 20rpx;
} }
/* 物流内容样式 */ .timeline-dot {
.timeline-content { width: 20rpx;
flex: 1; height: 20rpx;
padding-bottom: 40rpx; border-radius: 50%;
} background-color: #e5e5e5;
position: relative;
z-index: 2;
}
.timeline-text { .timeline-dot.active {
font-size: 26rpx; background-color: #ffffff;
color: #999999; border: 2rpx solid #ff6600;
line-height: 40rpx; width: 18rpx;
word-break: break-all; height: 18rpx;
} }
.timeline-text.active { .dot-inner {
color: #333333; position: absolute;
} width: 10rpx;
height: 10rpx;
background-color: #ff6600;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-time { .timeline-line-vertical {
display: block; width: 2rpx;
margin-bottom: 10rpx; background-color: #e5e5e5;
font-size: 24rpx; flex: 1;
} margin-top: -1rpx;
position: relative;
z-index: 1;
}
.timeline-info { /* 物流内容样式 */
font-size: 26rpx; .timeline-content {
} flex: 1;
padding-bottom: 40rpx;
}
/* 暂无数据样式 */ .timeline-text {
.empty-logistics { font-size: 26rpx;
padding: 100rpx 0; color: #999999;
text-align: center; line-height: 40rpx;
color: #999999; word-break: break-all;
font-size: 28rpx; }
background-color: #ffffff;
margin-top: 20rpx;
}
/* 底部间距 */ .timeline-text.active {
.bottom-space { color: #333333;
height: 40rpx; }
}
</style> .timeline-time {
display: block;
margin-bottom: 10rpx;
font-size: 24rpx;
}
.timeline-info {
font-size: 26rpx;
}
/* 暂无数据样式 */
.empty-logistics {
padding: 100rpx 0;
text-align: center;
color: #999999;
font-size: 28rpx;
background-color: #ffffff;
margin-top: 20rpx;
}
/* 底部间距 */
.bottom-space {
height: 40rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment