175 lines
3.7 KiB
Vue
175 lines
3.7 KiB
Vue
<template>
|
||
<view class="LogisticsIndex">
|
||
<block v-if="list.length>0">
|
||
<view class="logistics-top">
|
||
<view>{{express.express_name}} <span class="copy" @click='copy(express.express_no)'>复制单号</span></view>
|
||
<view><span>快递编号</span>：{{express.express_no}} </view>
|
||
</view>
|
||
<view class="Logistics-content">
|
||
<view>物流追踪</view>
|
||
<view class="list">
|
||
<view class="list-item" v-for="(item,index) in list" :key='index'>
|
||
<view :class="['dian',index === 0 ?'dian-active':'']"></view>
|
||
<view :class="['content',index === 0?'content-active':'']">
|
||
<view class=""><span style='padding-right: 10rpx;'>{{item.status}} - </span>{{item.context}}
|
||
</view>
|
||
<view class="date"> {{item.time}} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 没有订单列表 -->
|
||
<no-list v-if="list.length === 0" name='no-addr' txt="暂无任务物流进度信息~" />
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
mallShipmentsLogistic
|
||
} from '@/apis/interfaces/numberWeight'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
no: '', // 快递单号
|
||
express:{},// 地址信息
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.no = this.$route.params.no
|
||
this.getLogistic(this.no)
|
||
},
|
||
methods: {
|
||
getLogistic(no) {
|
||
mallShipmentsLogistic(no).then(res => {
|
||
console.log(res)
|
||
this.list = res.logistics
|
||
this.express = res.express
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
// 复制
|
||
copy(no) {
|
||
uni.setClipboardData({
|
||
data: no,
|
||
success: res=>{
|
||
console.log('success');
|
||
console.log(res)
|
||
}
|
||
});
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F8F8F8;
|
||
}
|
||
|
||
.LogisticsIndex {
|
||
font-size: $title-size;
|
||
color: #333;
|
||
margin-top: 20rpx;
|
||
|
||
// 物流名称
|
||
.logistics-top {
|
||
background-color: #fff;
|
||
padding: 30rpx 50rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
view:nth-child(2) {
|
||
padding-top: $padding * 0.5;
|
||
font-size: 0.9*$title-size;
|
||
}
|
||
|
||
.copy {
|
||
display: inline-block;
|
||
padding: $padding *0.4 $padding;
|
||
background-color: $main-color;
|
||
margin-left: 30rpx;
|
||
color: #fff;
|
||
font-size: $title-size *0.8;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
// 物流进度
|
||
.Logistics-content {
|
||
background-color: #fff;
|
||
padding: 30rpx 50rpx;
|
||
margin: 50rpx 0;
|
||
|
||
.list {
|
||
margin-top: $margin*2;
|
||
margin-left: 20rpx;
|
||
|
||
.list-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border-left: solid 2rpx #cacaca;
|
||
padding-bottom: $margin*1.6;
|
||
|
||
&:last-child {
|
||
border-left: solid 2rpx #fff !important;
|
||
}
|
||
|
||
&:first-child {
|
||
color: $main-color !important;
|
||
}
|
||
|
||
.dian {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #cacaca;
|
||
border: solid 10rpx rgba($color:#cacaca, $alpha: 0.3);
|
||
position: relative;
|
||
left: -11rpx;
|
||
}
|
||
|
||
.dian-active {
|
||
background-color: $main-color;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
left: -16rpx;
|
||
border: solid 10rpx rgba($color: $main-color, $alpha: 0.3);
|
||
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.5);
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
margin-left: 60rpx;
|
||
// padding: 10rpx 0;
|
||
font-size: $title-size * 0.9;
|
||
color: #666;
|
||
position: relative;
|
||
top: -10rpx;
|
||
|
||
.date {
|
||
margin-top: $margin;
|
||
}
|
||
}
|
||
|
||
.content-active {
|
||
color: $main-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|