|
|
@@ -9,24 +9,39 @@
|
|
|
<u-icon name="arrow-up" size="36" color="#333333"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
- <view class="timeline-content" :class="{ 'collapsed': !isExpanded }">
|
|
|
+ <view class="timeline-content" :class="{ collapsed: !isExpanded }">
|
|
|
<view class="timeline-list">
|
|
|
<view class="timeline-item" v-for="(item, index) in logVoList" :key="index">
|
|
|
<view class="timeline-dot"></view>
|
|
|
<view class="timeline-info">
|
|
|
- <view class="status" v-if="!isReturn">{{ statusTextMap[item.status] }}</view>
|
|
|
- <view class="status" v-else>{{ statusTextMap2[item.status] }}</view>
|
|
|
+ <view class="status">{{ item.statusName }}</view>
|
|
|
<view class="time" v-if="item.createTime">{{ item.createTime }}</view>
|
|
|
- <view class="desc" v-if="item.description">{{ item.description }}</view>
|
|
|
- <!-- 快递单号 -->
|
|
|
- <view class="express-no" v-if="item.expressNo">
|
|
|
- <text>{{ item.expressNo }}</text>
|
|
|
- <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
|
|
|
- @click.stop="copyExpressNo(item.expressNo)"></image>
|
|
|
+ <view class="desc" v-if="item.description">
|
|
|
+ {{ item.description }}
|
|
|
+
|
|
|
+ <image
|
|
|
+ v-if="item.status == 5"
|
|
|
+ src="../static/copy.png"
|
|
|
+ style="width: 42rpx; height: 42rpx; margin-left: 20rpx; position: relative; top: 6rpx"
|
|
|
+ @click.stop="copyExpressNo(item.description)"
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
+ <!-- 快递单号 -->
|
|
|
+ <view class="express-no" v-if="item.status == 5 && trackingVoList.length == 0"> 暂无物流信息 </view>
|
|
|
<!-- 物流信息 -->
|
|
|
- <view class="express-info" v-if="item.expressInfo">
|
|
|
- {{ item.expressInfo }}
|
|
|
+ <view class="express-info" v-if="item.status == 5 && trackingVoList.length > 0">
|
|
|
+ <view class="timeline-list">
|
|
|
+ <view class="timeline-item" v-for="(track, index) in trackingVoList" :key="index">
|
|
|
+ <view class="timeline-dot"></view>
|
|
|
+ <view class="timeline-info">
|
|
|
+ <view class="status">{{ track.title }}</view>
|
|
|
+ <view class="time" v-if="track.time">{{ track.time }}</view>
|
|
|
+ <view class="desc" v-if="track.description">
|
|
|
+ {{ track.description }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -37,62 +52,66 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'order-timeline',
|
|
|
+ name: "order-timeline",
|
|
|
props: {
|
|
|
logVoList: {
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
isReturn: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ trackingVoList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isExpanded: false,
|
|
|
statusTextMap: {
|
|
|
- '0': '待提交',
|
|
|
- '1': '已删除',
|
|
|
- '2': '待初审',
|
|
|
- '3': '待取件',
|
|
|
- "4": '初审未通过',
|
|
|
- "5": '已揽件',
|
|
|
- "6": '已签收',
|
|
|
- "7": '物流签收',
|
|
|
- '8': '待审核',
|
|
|
- '9': '审核中',
|
|
|
- '10': '待到款',
|
|
|
- '11': '已完成',
|
|
|
+ 0: "待提交",
|
|
|
+ 1: "已删除",
|
|
|
+ 2: "待初审",
|
|
|
+ 3: "待取件",
|
|
|
+ 4: "初审未通过",
|
|
|
+ 5: "已揽件",
|
|
|
+ 6: "已签收",
|
|
|
+ 7: "物流签收",
|
|
|
+ 8: "待审核",
|
|
|
+ 9: "审核中",
|
|
|
+ 10: "待到款",
|
|
|
+ 11: "已完成",
|
|
|
},
|
|
|
|
|
|
statusTextMap2: {
|
|
|
- '0': '待付款',
|
|
|
- '1': '待发货',
|
|
|
- '2': '已推送',
|
|
|
- '3': '已发货',
|
|
|
- '4': '已签收',
|
|
|
- "5": '已完成',
|
|
|
- "6": '已取消',
|
|
|
- "7": '超时取消',
|
|
|
- }
|
|
|
- }
|
|
|
+ 0: "待付款",
|
|
|
+ 1: "待发货",
|
|
|
+ 2: "已推送",
|
|
|
+ 3: "已发货",
|
|
|
+ 4: "已签收",
|
|
|
+ 5: "已完成",
|
|
|
+ 6: "已取消",
|
|
|
+ 7: "超时取消",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
methods: {
|
|
|
toggleExpand() {
|
|
|
- this.isExpanded = !this.isExpanded
|
|
|
+ this.isExpanded = !this.isExpanded;
|
|
|
},
|
|
|
copyExpressNo(no) {
|
|
|
uni.setClipboardData({
|
|
|
data: no,
|
|
|
success: () => {
|
|
|
- uni.$u.toast('复制成功')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ uni.$u.toast("复制成功");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -130,14 +149,14 @@ export default {
|
|
|
overflow: hidden;
|
|
|
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
left: -30rpx;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
height: 80rpx;
|
|
|
width: calc(100% + 60rpx);
|
|
|
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
}
|
|
|
@@ -146,14 +165,14 @@ export default {
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
left: 6rpx;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
width: 2rpx;
|
|
|
height: calc(100% - 60rpx);
|
|
|
- background: #38C148;
|
|
|
+ background: #38c148;
|
|
|
}
|
|
|
|
|
|
.timeline-item {
|
|
|
@@ -169,7 +188,7 @@ export default {
|
|
|
width: 14rpx;
|
|
|
height: 14rpx;
|
|
|
border-radius: 50%;
|
|
|
- background: #38C148;
|
|
|
+ background: #38c148;
|
|
|
margin-right: 20rpx;
|
|
|
flex-shrink: 0;
|
|
|
z-index: 1;
|
|
|
@@ -181,7 +200,7 @@ export default {
|
|
|
|
|
|
.status {
|
|
|
font-size: 28rpx;
|
|
|
- color: #38C148;
|
|
|
+ color: #38c148;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
@@ -199,8 +218,14 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+ color: #888888;
|
|
|
margin: 8rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background: #cdcdcd;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
|
|
|
.u-icon {
|
|
|
margin-left: 10rpx;
|
|
|
@@ -213,10 +238,11 @@ export default {
|
|
|
padding: 20rpx;
|
|
|
background: #dcdcdc;
|
|
|
border-radius: 8rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|