web-africa-h5/pages/order/express/express.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>