store/pages/logistics-detail/logistics-detail.vue

<template>
	<view class="log_detail">
		<view class="info">
			<image src="/static/imgs/shop/log_bg.png"></image>
			<view>
				<view class="info_con">
					<view style="position:relative;">
						<image :src="img" style="flex-shrink: 0;"></image>
					</view>
					<view class="info_log">
						<view class="flexB">
							<text>{{ logList.express_company }}</text>
							<view class="edit_log flexC" @click="skipEdit">修改物流</view>
						</view>
						<text>
							<text>{{ logList.express_no }}</text>
							<text class="copy" @click="copy(logList.express_no)">复制</text>
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="step" v-if="Number(express.State) > 0">
			<view class="step_con">
				<view>
					<view class="active" v-if="express.State == 1">
						<image src="/static/imgs/shop/step.png"></image>
						<view>已发货</view>
					</view>
					<view v-else>已发货</view>
					<view class="circle" :class="express.State == 1 ? 'circle_active' : ''"></view>
				</view>
				<view class="line"></view>
				<view>
					<view class="active" v-if="express.State == 2">
						<image src="/static/imgs/shop/step.png"></image>
						<view>运输中</view>
					</view>
					<view v-else>运输中</view>
					<view class="circle" :class="express.State == 2 ? 'circle_active' : ''"></view>
				</view>
				<view class="line"></view>
				<view>
					<view class="active" v-if="express.State == 3 || express.State == 4">
						<image src="/static/imgs/shop/step.png"></image>
						<view v-if="express.State == 4">问题件</view>
						<view v-else>已签收</view>
					</view>
					<view v-else>已签收</view>
					<view class="circle" :class="express.State == 3 || express.State == 4 ? 'circle_active' : ''">
					</view>
				</view>
			</view>
		</view>
		<view class="log_con">
			<view v-for="item in log" :key="item.id">
				<view class="flexS">
					<view class="time flexCC">
						<view v-if="item.AcceptTime">{{ item.AcceptTime | sendTime }}</view>
						<text v-if="item.AcceptTime">{{ item.AcceptTime | sendDay }}</text>
					</view>
					<view class="log_info">{{ item.AcceptStation }}</view>
				</view>
				<view class="col_line"></view>
			</view>
		</view>
		<view class="noData" v-if="Number(express.State) == 0">
			<image src="../../static/imgs/default/no_record.png"></image>
			<view>暂无物流状态</view>
		</view>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '../../common/util/utils.js';
	import {
		getLogs
	} from '../../apis/shop.js';
	export default {
		data() {
			return {
				logList: [], //物流详情
				express: '', //物流进程
				noData: false, //是否显示暂无物流信息
				img: '',
				log: '', //物流进度
				order_no: '' //订单编号
			};
		},
		onLoad(ops) {
			this.img = ops.img;
			this.order_no = ops.order_no;
			this.getLogData(ops.order_no);
		},
		filters: {
			sendDay(times) {
				//截取字符串年月日
				var timearr = times
					.replace(' ', ':')
					.replace(/\:/g, '-')
					.split('-');
				var timestr = '' + timearr[0] + '-' + timearr[1] + '-' + timearr[2];
				return timestr;
			},
			sendTime(times) {
				//截取字符串时间
				var timearr = times
					.replace(' ', ':')
					.replace(/\:/g, '-')
					.split('-');
				var timestr = '' + timearr[3] + ':' + timearr[4] + '';
				return timestr;
			}
		},
		methods: {
			//修改物流信息
			skipEdit() {
				const {
					express_company,
					express_no,
					express_time,
					express_phone,
					express_code
				} = this.logList;
				let data = {
					express_company,
					express_no,
					express_time,
					order_no: this.order_no,
					img: this.img,
					express_phone,
					express_code,
				};
				uni.navigateTo({
					url: '../edit-logisitics/edit-logisitics?data=' + encodeURIComponent(JSON.stringify(data))
				});
			},
			getLogData(order_no) {
				getLogs({
					order_no
				}).then(res => {
					if (res.code == 200) {
						this.logList = res.data;
						this.express = res.data.express;
						let log = res.data.express.Traces;
						if (log) {
							this.log = log.reverse();
						}
					}
				});
			},
			/*复制单号*/
			copy(data) {
				handleClipboard(
					data,
					event,
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					},
					() => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						});
					}
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.log_detail {
		width: 100%;
		min-height: 100%;
		background: #fff;
		padding-bottom: 120rpx;

		.info {
			width: 100%;
			height: 194rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			>view {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 194rpx;

				.info_con {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 690rpx;
					margin: 0 auto;
					height: 194rpx;

					image {
						width: 138rpx;
						height: 138rpx;
						border-radius: 8rpx;
					}

					.count {
						width: 138rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						background-color: rgba(0, 0, 0, 0.7);
						color: #fff;
						text-align: center;
						position: absolute;
						bottom: 0;
						left: 0;
						border-radius: 0 0 8rpx 8rpx;
					}
				}

				.info_log {
					width: 100%;
					margin-left: 30rpx;

					view,
					text {
						color: #fff;
						font-size: 28rpx;
					}

					view {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 15rpx;
					}

					.copy {
						display: inline-block;
						width: 94rpx;
						text-align: center;
						height: 42rpx;
						border: 1rpx solid #fff;
						color: #fff;
						border-radius: 24rpx;
						margin-left: 15rpx;
					}

					.edit_log {
						width: 168rpx;
						height: 64rpx;
						background: #fce904;
						font-size: 28rpx;
						color: $base-color;
						border-radius: 32rpx;
						font-weight: normal;
					}
				}
			}
		}

		.step {
			width: 100%;
			height: 190rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #e9e9e9;
			padding: 30rpx 0;

			.address {
				width: 634rpx;
				margin: 0 auto;
			}

			.step_con {
				width: 690rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: flex-end;

				image {
					width: 130rpx;
					height: 60rpx;
				}

				view {
					font-size: 24rpx;
					color: #999;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.active {
					position: relative;

					view {
						position: absolute;
						top: 6rpx;
						left: 33rpx;
						color: #fff;
					}
				}

				text {
					font-size: 28rpx;
				}

				.circle {
					width: 20rpx;
					height: 20rpx;
					background: #e9e9e9;
					border-radius: 50%;
					margin: 12rpx 0;
				}

				.circle_active {
					background: $base-line-bg;
				}

				.line {
					width: 200rpx;
					height: 4rpx;
					margin-bottom: 19rpx;
					background-color: #e9e9e9;
				}
			}
		}

		.log_con {
			width: 690rpx;
			margin: 50rpx auto 100rpx;

			>view {
				margin-bottom: 30rpx;
			}

			>view:last-child {
				.col_line {
					display: none;
				}
			}

			>view:not(:first-child) {
				.log_info {
					color: #999;
				}
			}

			.time {
				width: 164rpx;
				flex-shrink: 0;
				margin-right: 24rpx;

				view {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 5rpx;
				}

				text {
					font-size: 28rpx;
					color: #999;
				}
			}

			.log_info {
				font-size: 28rpx;
				width: 90%;
			}

			.col_line {
				width: 2rpx;
				height: 50rpx;
				background-color: #e9e9e9;
				margin-left: 72rpx;
			}
		}

		.source {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #999;
			padding: 50rpx 0;
		}
	}
</style>