176 lines
3.8 KiB
Vue
176 lines
3.8 KiB
Vue
<template>
|
||
<view class="express-info" v-if="!loadding">
|
||
<view class="top-tabbar" v-if="express.length>0">
|
||
<view class="tab-item" :class="{ active: expressIndex == index }" @click="changeIndex(index)"
|
||
v-for="(item, index) in express" :key="index">{{$t("MY_ORD_20")}}</view>
|
||
</view>
|
||
<view class="d-c-c p30" v-if="express.length == 0">
|
||
<text class="iconfont icon-wushuju"></text>
|
||
<text class="cont">{{$t('w_0405')}}</text>
|
||
</view>
|
||
<view class="base-info p30 d-b-c" v-if="express.length>0">
|
||
<image class="express-img" src="/static/icon/order/express-detail.png" mode=""></image>
|
||
<view class="ml20 flex-1">
|
||
<view class="name">
|
||
<text class="gray9">{{$t("MY_ORD_21")}}：</text>
|
||
<text class="fb">{{ detailData.expressName }}</text>
|
||
</view>
|
||
<view class="order-code pt20">
|
||
<text class="gray9">{{$t("MN_F_T_226")}}：</text>
|
||
<text class="fb">{{ detailData.expressCode }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list" v-if="detailData.detailList">
|
||
<view :class="index == 0 ? 'active item' : 'item'" v-for="(item, index) in detailData.detailList"
|
||
:key="index">
|
||
<view class="datetime f28">{{ item.time }}</view>
|
||
<view class="content">{{ item.context }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
/*是否加载完成*/
|
||
loadding: false,
|
||
indicatorDots: true,
|
||
autoplay: true,
|
||
interval: 2000,
|
||
duration: 500,
|
||
/*订单id*/
|
||
orderCode: '',
|
||
expressIndex: 0,
|
||
/*快递信息*/
|
||
express: [],
|
||
detail: {},
|
||
detailData: {}
|
||
};
|
||
},
|
||
computed: {
|
||
// detailData() {
|
||
// return this.express[this.expressIndex];
|
||
// }
|
||
},
|
||
onLoad(e) {
|
||
this.orderCode = e.orderCode;
|
||
},
|
||
mounted() {
|
||
/*获取数据*/
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
changeIndex(e) {
|
||
this.expressIndex = e;
|
||
this.detailData = this.express[this.expressIndex];
|
||
},
|
||
/*获取数据*/
|
||
getData() {
|
||
let self = this;
|
||
let orderCode = self.orderCode;
|
||
// console.log(orderCode)
|
||
uni.showLoading({
|
||
title: self.$t("MN_F_6")
|
||
});
|
||
self._get(
|
||
'sale/api/my-order/express/' + orderCode, {},
|
||
function(res) {
|
||
self.express = res.data;
|
||
if (self.express.length > 0) {
|
||
self.detailData = self.express[self.expressIndex];
|
||
}
|
||
// self.detail = self.express[0];
|
||
// console.log(res.data.express);
|
||
self.loadding = false;
|
||
uni.hideLoading();
|
||
}
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.express-info .base-info {
|
||
background: #ffffff;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.express-info .list {
|
||
padding: 30rpx 30rpx 30rpx 50rpx;
|
||
margin-top: 20rpx;
|
||
border-top: 1px solid #eeeeee;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.express-info .list .item {
|
||
position: relative;
|
||
padding: 30rpx;
|
||
padding-left: 40rpx;
|
||
padding-right: 0;
|
||
padding-top: 0;
|
||
border-left: 1px solid #cccccc;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.express-info .list .item::before {
|
||
display: block;
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -18rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border: 8rpx solid #ffffff;
|
||
border-radius: 50%;
|
||
background: #cccccc;
|
||
}
|
||
|
||
/*
|
||
.express-info .list .item::after {
|
||
display: block;
|
||
content: '';
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: -18rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #cccccc;
|
||
} */
|
||
|
||
.express-info .list .item.active::before {
|
||
background: #fb3024;
|
||
}
|
||
|
||
/* .express-info .list .item.active::after {
|
||
border: 4rpx solid #FB3024;
|
||
}
|
||
*/
|
||
.express-info .list .item {
|
||
color: #999999;
|
||
}
|
||
|
||
.express-info .list .item.active {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.express-info .list .item .datetime {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.express-info .list .item.active .datetime {
|
||
color: #fb3024;
|
||
}
|
||
|
||
.express-img {
|
||
display: block;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
</style> |