web-app-v1/pages/logistics-details/logistics-details.vue

<template>
	<view class="logistics_details">
		<view class="logistics">
			<view class="freight"><image src="../../static/icon/freight.png" mode=""></image></view>
			<view>
				<view>
					<text>{{ express_com }}</text>
				</view>
				<view style="font-size:28rpx;margin-top:25rpx;">物流单号：{{ express_number }}</view>
			</view>
		</view>
		<view class="step" v-if="trackList.length > 0">
			<view class="stepCon" v-for="(item, index) in trackList" :key="index">
				<!-- <view class="left"> -->
				<view class="date">
					<view>{{ item.AcceptTime | formDate }}</view>
					<view>{{ item.AcceptTime | formDate1 }}</view>
				</view>
				<view class="progress">
					<view class="circle" v-if="index != 0"></view>
					<image src="../../static/icon/activer-circle.png" v-else></image>
					<view :class="[index == 0 ? 'active' : 'line']"></view>
					<!-- <view class="circle" v-show="index == trackList.length - 1"></view> -->
				</view>
				<!-- </view> -->
				<view class="progressCon" :class="[index == 0 ? 'now' : 'before']">{{ item.AcceptStation }}</view>
			</view>
		</view>
		<view v-else class="error_tip">物流信息不存在</view>
	</view>
</template>

<script>
import { _API_GetExpressTrack } from '../../apis/order.js';
export default {
	data() {
		return {
			express_com: '', //物流公司名称
			express_number: '', //运单号
			trackList: [] //物流进程
		};
	},
	onLoad(options) {
		this.express_com = options.express_com;
		this.express_number = options.express_number;
		if (options.id) {
			this.getLogisticsTrack(options.id);
		}
	},
	methods: {
		getLogisticsTrack(id) {
			uni.showLoading({
				title: '加载中'
			});
			_API_GetExpressTrack({
				id
			}).then(res => {
				uni.hideLoading();
				if (res.code === 200) {
					if (res.data.Traces.length === 0) {
						uni.showModal({
							content: res.data.message || '物流信息不存在',
							showCancel: false
						});
						return false;
					}
					let list = res.data.Traces;
					this.trackList = list.sort((a, b) => b.AcceptTime - a.AcceptTime);
					console.log(res.data, '物流信息');
				}
			});
		}
	},
	filters: {
		formDate(time) {
			var date = new Date(time);
			var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var today = month + '-' + day;
			return today;
		},
		formDate1(time) {
			var date = new Date(time);
			var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var today = hours + ':' + minute;
			return today;
		}
	}
};
</script>

<style lang="scss">
.logistics_details {
	min-height: 100%;
	background: $app-base-bg;
	display: flex;
	flex-direction: column;
	.error_tip {
		padding: 20px;
		text-align: center;
	}
	.logistics {
		width: 100%;
		height: 160rpx;
		background: #f76454;
		color: #fff;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		flex-shink: 0;
		.freight {
			image {
				height: 128rpx;
				width: 128rpx;
				margin: 0 33rpx 0 60rpx;
			}
		}
	}

	.step {
		margin-top: 20rpx;
		background: #fff;
		flex: 1;
		padding: 60rpx 0;
		.stepCon {
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			// height: 192rpx;
			min-height: 120rpx;
			padding: 0 30rpx 0 43rpx;
			.date {
				width: 11%;
				flex-shrink: 0;
				image {
					height: 60rpx;
					width: 60rpx;
				}
			}
			.progress {
				display: flex;
				flex-direction: column;
				align-items: center;
				// height: 192rpx;
				flex: 1;
				margin: 0 9rpx 0 30rpx;
				// width: 10%;
				flex-shrink: 0;
				.line {
					width: 4rpx;
					background: #ccc;
					height: 100%;
				}
				.active {
					width: 4rpx;
					background: #f76454;
					height: 100%;
				}
				.circle {
					height: 18rpx;
					width: 18rpx;
					background-color: #ccc;
					border-radius: 50%;
				}
				image {
					margin-top: 6rpx;
					height: 24rpx;
					width: 24rpx;
				}
			}
			// .left {
			// 	flex-shrink: 0;
			// 	width: 20%;
			// 	display: flex;
			// 	justify-content: flex-start;
			// 	align-items: center;

			// }

			.progressCon {
				width: 540rpx;
				padding: 0 0 10rpx;
			}
			.now {
				color: #181818;
			}
			.before {
				color: #aaaaaa;
			}
		}
		.stepCon:last-child {
			.line {
				display: none;
			}
		}
	}
}
</style>