deming/pageE/order/Logistics.vue

<template>
	<view class="logistics">
		<view class="logistics-info">
			<!-- <view class="express">
				<image src="../static/mine/23.png"></image>
				<view class="dispatcher-info">
					<view>派件员：xxx</view>
					<view>手机：123456789</view>
				</view>
			</view> -->
			<view class="express-status">
				<image :src="expressInfo.goods_image"></image>
				<view>
					<view class="status">物流状态：{{ expressInfo.is_check }}</view>
					<view>承运来源：{{ expressInfo.express_name || '' }}</view>
					<view>运单编号：{{ expressInfo.shipping_code || '' }}</view>
					<view>官方电话：{{ expressInfo.express_phone || '' }}</view>
				</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">
					<view class="info u-line-2">{{ item.content }}</view>
					<view class="date">{{ item.kd_time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [],
			expressInfo: {},
		}
	},
	onLoad(option) {
		this.getOrderLogistics(option.oid);
	},
	methods: {
		getOrderLogistics(id) {
			this.$u.api.orderLogistics({ id: id }).then(res => {
				if(res.errCode == 0) {
					this.expressInfo = res.data.express_info;
					this.list = res.data.express_list;
				} else {
					this.list = [];
					this.$u.toast(res.message);
				}
			})
		}
	}
};
</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>