2020-06-08 15:23:23 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="logistics">
|
|
|
|
|
|
<view class="logistics-info">
|
2020-07-30 20:33:16 +08:00
|
|
|
|
<!-- <view class="express">
|
2020-06-08 15:23:23 +08:00
|
|
|
|
<image src="../static/mine/23.png"></image>
|
|
|
|
|
|
<view class="dispatcher-info">
|
|
|
|
|
|
<view>派件员：xxx</view>
|
|
|
|
|
|
<view>手机：123456789</view>
|
|
|
|
|
|
</view>
|
2020-07-30 20:33:16 +08:00
|
|
|
|
</view> -->
|
2020-06-08 15:23:23 +08:00
|
|
|
|
<view class="express-status">
|
2020-07-30 20:33:16 +08:00
|
|
|
|
<image :src="expressInfo.goods_image"></image>
|
2020-06-08 15:23:23 +08:00
|
|
|
|
<view>
|
2020-07-30 20:33:16 +08:00
|
|
|
|
<view class="status">物流状态：{{ expressInfo.is_check }}</view>
|
|
|
|
|
|
<view>承运来源：{{ expressInfo.express_name || '' }}</view>
|
|
|
|
|
|
<view>运单编号：{{ expressInfo.shipping_code || '' }}</view>
|
|
|
|
|
|
<view>官方电话：{{ expressInfo.express_phone || '' }}</view>
|
2020-06-08 15:23:23 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="logistics-tracking">
|
|
|
|
|
|
<view class="title">物流跟踪</view>
|
|
|
|
|
|
<view class="main">
|
|
|
|
|
|
<view v-for="(item, index) in list" :key="index" class="logistics-item">
|
2020-07-30 20:33:16 +08:00
|
|
|
|
<view class="info u-line-2">{{ item.content }}</view>
|
|
|
|
|
|
<view class="date">{{ item.kd_time }}</view>
|
2020-06-08 15:23:23 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
2020-07-30 20:33:16 +08:00
|
|
|
|
list: [],
|
|
|
|
|
|
expressInfo: {},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
|
this.getOrderLogistics(option.oid);
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
getOrderLogistics(id) {
|
|
|
|
|
|
this.$u.api.orderLogistics({ id: 16 }).then(res => {
|
|
|
|
|
|
if(res.errCode == 0) {
|
|
|
|
|
|
this.expressInfo = res.data.express_info;
|
|
|
|
|
|
this.list = res.data.express_list;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.list = [];
|
2020-06-08 15:23:23 +08:00
|
|
|
|
}
|
2020-07-30 20:33:16 +08:00
|
|
|
|
})
|
2020-06-08 15:23:23 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.logistics {
|
|
|
|
|
|
min-height: calc(100vh - var(--window-top));
|
|
|
|
|
|
padding: 40rpx 30rpx;
|
|
|
|
|
|
border-top: 1rpx solid #ECECEC;
|
|
|
|
|
|
.logistics-info {
|
|
|
|
|
|
.express {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
> image {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
margin-right: 35rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dispatcher-info {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: rgba(51,51,51,1);
|
|
|
|
|
|
> view:first-child {
|
|
|
|
|
|
margin-bottom: 19rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.express-status {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-bottom: 30rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
|
height: 2rpx;
|
|
|
|
|
|
background: rgba(236,236,236,1);
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
> image {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
|
height: 200rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
margin-right: 29rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
> view {
|
|
|
|
|
|
.status {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: rgba(51,51,51,1);
|
|
|
|
|
|
margin-bottom: 29rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
> view {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color:rgba(102,102,102,1);
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.logistics-tracking {
|
|
|
|
|
|
padding-top: 35rpx;
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: rgba(51,51,51,1);
|
|
|
|
|
|
margin-bottom: 35rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
|
|
|
.logistics-item {
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
|
|
margin-bottom: 75rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: rgba(51,51,51,1);
|
|
|
|
|
|
line-height: 38rpx;
|
|
|
|
|
|
margin-bottom: 14rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.date {
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: rgba(153,153,153,1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
