121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
||
<view class="content" v-if="express.express_number">
|
||
<view class="express">
|
||
<image class="express-logo" :src="express.cover"></image>
|
||
<view class="express-text">
|
||
<view class="title">物流公司：{{express.express_name}}</view>
|
||
<view class="no">订单号码：{{express.express_number}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="block-title">物流信息</view>
|
||
<view class="logistic">
|
||
<view class="logistic-item" v-for="(item, index) in logistics" :key="index">
|
||
<view class="context"><text>[{{item.status}}]</text>{{item.context}}</view>
|
||
<view class="time">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getLogistic } from '@/apis/interfaces/mailed.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
express : {},
|
||
logistics : []
|
||
};
|
||
},
|
||
created() {
|
||
getLogistic(this.$Route.query.id).then(res => {
|
||
let { orderExpress, logistics } = res;
|
||
this.express = orderExpress
|
||
this.logistics = logistics
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 物流公司
|
||
.express{
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: white;
|
||
.express-logo{
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
}
|
||
.express-text{
|
||
width: calc( 100% - 118rpx);
|
||
font-size: 30rpx;
|
||
line-height: 44rpx;
|
||
.title{
|
||
font-weight: bold;
|
||
}
|
||
.no{
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
// title
|
||
.block-title{
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
line-height: 50rpx;
|
||
}
|
||
// 订单记录
|
||
.logistic{
|
||
position: relative;
|
||
background: white;
|
||
padding: 15rpx 0;
|
||
&::after{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1rpx;
|
||
content: " ";
|
||
background: #ddd;
|
||
}
|
||
.logistic-item{
|
||
padding: 15rpx 30rpx 15rpx 70rpx;
|
||
font-size: 30rpx;
|
||
position: relative;
|
||
&::after{
|
||
position: absolute;
|
||
left: 19rpx;
|
||
top: 50%;
|
||
margin-top: -12rpx;
|
||
content: " ";
|
||
height: 20rpx;
|
||
width: 20rpx;
|
||
border-radius: 50%;
|
||
background: #ddd;
|
||
border: solid 4rpx white;
|
||
}
|
||
.status{
|
||
color: gray;
|
||
}
|
||
.context{
|
||
padding: 10rpx 0;
|
||
line-height: 40rpx;
|
||
text{
|
||
color: $main-color;
|
||
}
|
||
}
|
||
.time{
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
</style>
|