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