activitys-uniapp/pages/mine/logistics/logistics.vue

<template>
	<view class="page" :style="vuex_skin">
		<view class="" >
			<!-- 圆通快递 -->
			<view class="express">
				<view class="top ali-c">
					<view class="picture">
						<image class="img" mode="scaleToFill" :src="logo"></image>
					</view>
					<view class="text" style="display: flex;justify-content: center;align-items: center;">
						<view class="text1">
							<text>{{orderDetail.trackingName}}</text>
							<text class="margin-left-50">{{orderDetail.trackingNumber}}</text>
						</view>
					</view>
				</view>
				
				<view class="center margin-right-30 text-gray">
					<text @click="$util.copy(orderDetail.trackingNumber)">复制</text>
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="content bgf">
				<view>
					<view class="flex list">
						<view class="time center">
							<view style="font-size: 28rpx;font-weight: 800;color: #111111;">
							</view>
						</view>
						<view class="info flex1">
							<view class="title address">[收货地址]{{orderDetail.address}}</view>
						</view>
					</view>
					<view class="flex list" :class="{one: index == 0 && wlInfo.State == 3}"
						v-for="(item, index) in wlInfo.Traces" :key="index">
						<view class="time">
							<view class="day">{{item.AcceptTime}}</view>
						</view>
						<view class="info flex1">
							<view class="title">{{index == 0 && wlInfo.State == 3 ? '已签收' : '配送中'}}</view>
							<view class="text">{{item.AcceptStation}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<loading ref="loading" type="3" />
	</view>
</template>

<script>
	let plugin = requirePlugin("wt-logistics");
	import config from "@/assets/http/config.js"
	export default {
		data() {
			return {
				logo:'',
				wlInfo: {},
				//商品订单
				id:'',
				orderDetail:{}
			}
		},
	   async onLoad(options) {
			this.id=options.id
			await this.fetchDetail()
			this.query()
		},
		methods: {
			async fetchDetail(){
				let params={
					id:this.id
				}
				let res=await this.$api.goodsorder.detail(params)
				this.orderDetail=res.data.data
				this.logo='/static/kd/'+this.orderDetail.shipperCode+'.png'
			},
			query() {
				let appId = config.kdniao.appId
				let appKey = config.kdniao.appKey
				let _this = this
				plugin.reglogis(_this.orderDetail.trackingNumber, _this.orderDetail.shipperCode, appId, appKey, '1002', '2', '',
					'https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx').then(function(res) {
					if (res.Success) {
						_this.wlInfo = res
					} else {
						_this.$refs.toast.error('查询失败')
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		font-size: 24rpx;
		background-color: #F6F7F8;
		overflow-y: auto;
	}

	/*flex 转换成flex容器*/
	.flex {
		display: flex;
		flex-direction: row;
	}

	/*flex1 自动填充*/
	.flex1 {
		flex: 1;
	}

	/*ali-c 竖直居中*/
	.ali-c {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bgf {
		background-color: #fff;
	}

	.express {
		//圆通快递
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 30rpx 20rpx 30rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.top {
			padding: 28rpx 29rpx 25rpx 29rpx;

			.img {
				display: block;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.text {
				margin-left: 20rpx;

				.text1 {
					margin-bottom: 6rpx;
					font-size: 28rpx;
					color: #000000;
				}

				.text2 {
					font-size: 20rpx;
					color: #000000;
				}
			}
		}

		.right {
			background-color: rgba(8, 175, 254, 0.02);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			padding: 15rpx 30rpx 20rpx 30rpx;

			.text {
				color: #666666;
				font-size: 22rpx;
			}
		}
	}

	//收货地址
	.content {
		margin: 20rpx;
		padding: 56rpx 46rpx 56rpx 5rpx;
		border-radius: 20rpx;

		.list {
			&:first-child {
				.info::before {
					bottom: -20rpx;
					margin-top: 40rpx;
					border-left: 1px dashed #e5e5e5;
				}

				.title {
					margin-bottom: 56rpx;

					&::before {
						width: 46rpx;
						height: 46rpx;
						left: -23rpx;
						background: url('data:image/jpeg;base64,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') no-repeat center;
						background-size: 46rpx 46rpx;
					}
				}
			}

			&:last-child {
				.info::before {
					height: 32rpx;
				}
			}

			&.one {
				.info::before {
					margin-top: 20rpx;
				}

				.title {
					color: #111111;

					&::before {
						width: 46rpx;
						height: 46rpx;
						left: -23rpx;
						background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAFCklEQVRoQ92az28bRRTHv28cBbxuIgoCClRUICREixD9AfGaVEpJslZa5dCWgNQeUNU7CojChR9F5QIcyF9QLi2VKEokKAre9IdFacZpSYoQAeUCFNGChKAowWtI431oN9nEduzszuIktX3Zg9+vz+x7M29mllAnP6omx1S8o01AtBNRE7Pd7D6BZscHAZPMPEUk3KcN+0xT5nS6Wv7/F8hfrbvWNtozT7PN7SA8Q8CdKoEx8DsYH5OgM9Oi4extX352XUW/UDYUCPf0RHJXJ3vB3AtgfVjnJXq/gKgvel9zH508mVe1qQyS05P7GHYvQE+oOgsmz5cIoi8qUx8Gk5+VCgzCLV3NOWF/APAeFQfhZak/aosDNDI4GcRGIJDck8YDiOBTBjYFMVotGQLGkUd39KL5o59NX5DsU53byKYMgIifsWX6P8+C47ELQ18tZX9JkKl4xyMREt8tU4BKZvNsb2zKnP6+klJFkOz25D00w9eUvC2zMDfQvbHzqV/LuSkLwm1ta3LTjWkwti5zbGrmCaPRxuk2Sqf/LlUsC2LpRj+A3WpeVkx6QJPmoplzEYilJ3sBfn/FwgrliF7UZKqv4so+Wxe2BGhDGPtOy0Hg8TC6xTrUtrQNvsINQi+sl6I3YiWS74D5lbCBCKD7VmmeCqvv6Vm68TKA95a0Q/SuNpx61ZOZB8nGk1uIWAJoDBtInu0d1ehonS46QuKcTxzTzKTHMqkxR64AxDhChNfCQjh6KwwCZrwdy5ivF4FYunEZwOO1BALga02am+dBpuPJLTPEo4oQh/JsL2obVjC13HAbmLY2ZlJjbmpl42ppxcDBmDSPKoIHFg9YI649L71cEEs3hgHoQTwxMBCT5h6nI7YFnhcA2wDFMubhIPpBZFRAAEhNmgkP5AqA+wM4uQFQqyZTF62EcQyM/Z6OJk3fTjqAfVdEEeRnTZobPJCZIG06gY5EZeoNq6WjFUKcLwxsFUHymjQbiFva786JyG/+o0WXJ7O8fd03ZtbSjU8AdN8kIIja+XUUdMZixltOHeTixn4mHCsFX8U34s5cgUHAiGsZcySnG9+W2/KuOkjQ1HICdYqwUgpWY/3wbCsW+2xqzU2/vsVezRH3q0dFkNlinwPxnX5vYpCi6dd3QSwFyeodmwVFHmXYdwmmiaDt+7we4w7b5vE1I+ZQ6RtSfCMLC2KQFqUQJBs3DgvCIQamALpG4IdBuMA8c0CTZ69WSp15PcYfTLhOwGMMHI1J82ChjgpIUYsSZAr2QLKJ5C5iPsWMnbGMOej2O3ry9n/AXzB4QpNDe8uBOBBEeDNiRzbdMjLoHjFZLV3rIfJpgMY0mXo2TLEXNY1zdeLTxvM+TQ6dsHTjOAFro9LcWRjwvy1dG22Rz0Sl6V4jlP5yieSEbfOJ0p7M0jt3A9TvDdTCoAQ61Sxu4x2nQdLLC85bHEuDtfTOc0Dl/XaljZelG+w3k5X7v+zGSmmrSxjVhs1t6nnNaU0O7SjUs/TOHoA+CgFSfqvrppfK4QPjJYIYiGY+/ykbN7qInEMLv9MPp6DwQpToOMnUn1YiuReM5wDuUQapdPjgppf6cdANAM4a9JByIMAPAB4MoeeMxtLHQbNFXwcHdN7o1MWRqbsu1Msh9kK91Pi1QsEKW/sXPR5MXVy9eTB1cRk635bUw/V04aJV8x8MFMLUxScchUA1/1FNpf6oZj9zCtfwLY/Wf/HouMfV4hN8AAAAAElFTkSuQmCC') no-repeat center;
						background-size: 46rpx 46rpx;
					}
				}

				.text {
					color: #555555;
				}

				.time {
					color: #333;

					.day {
						font-size: 26rpx;
					}
				}
			}
		}

		.time {
			width: 200rpx;
			padding-right: 30rpx;
			font-size: 20rpx;
			text-align: right;
			color: #999;

			.day {
				margin-bottom: 4rpx;
			}
		}

		.info {
			position: relative;
			padding-top: 12rpx;
			color: #999;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				z-index: 1;
				width: 0;
				border-left: 1px solid #e5e5e5;
			}

			.title {
				position: relative;
				margin-bottom: 10rpx;
				padding-left: 32rpx;
				font-size: 28rpx;

				&::before {
					content: "";
					position: absolute;
					left: -3px;
					top: 0;
					bottom: 0;
					z-index: 1;
					width: 7px;
					height: 7px;
					margin: auto 0;
					border-radius: 50%;
					background-color: #cecece;
				}

				&.address {
					font-size: 24rpx;
					color: #333;
				}
			}

			.text {
				padding: 0 0 44rpx 32rpx;
			}
		}
	}
</style>