pillow_customize_app/pages/pages_zhentou/order/express.vue

<template>
	<view class="process_more">
		<view class="com_box">
			<view class="com_txt">
				{{company}}
			</view>
			<view class="com_num">
				{{logisticsNo}}
			</view>
		</view>
		<!-- 步骤条 -->
		<view class="pro_box">
			<view class="set-2" :key="index" v-for="(item,index) in options">
				<view class="wuliu_box">
					<view class="left_box">
						<!-- <image v-if="item.statusCode == '投柜或驿站'" src="../../../static/image/over.png" mode=""></image> -->
						<image v-if="(item.statusCode == '1' || item.statusCode == '101' || item.statusCode == '102'  || item.statusCode == '103') && index !== 0" src="../../../static/image/lanshou.png" mode=""></image>
						<image v-if="(item.statusCode == '1' || item.statusCode == '101'  || item.statusCode == '102' || item.statusCode == '103') && index == 0" src="../../../static/image/lanshou_act.png" mode=""></image>
						<image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003')  && index !== 0" src="../../../static/image/zaitu.png"></image>
						<image v-if="(item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003') && index == 0" src="../../../static/image/zaitu_act.png" mode=""></image>
						<image v-if="(item.statusCode == '5' || item.statusCode == '501') && index !== 0" src="../../../static/image/paijian.png"></image>
						<image v-if="(item.statusCode == '5' || item.statusCode == '501') && index == 0" src="../../../static/image/paijian_act.png" mode=""></image>
						<image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index !== 0" src="../../../static/image/over.png"></image>
						<image v-if="(item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304') && index == 0" src="../../../static/image/over_act.png" mode=""></image>
					</view>
					<view class="right_box">
						<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '1' || item.status == '103'">
							已揽收
						</view>
						<view class="top_title" :class="index == 0 ? 'active_top' : ''"  v-if="item.statusCode == '101'">
							已下单
						</view>
						<view class="top_title"  :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '102'">
							待揽收
						</view>
						<view class="top_title" :class="index == 0 ? 'active_top' : ''"  v-if="item.statusCode == '0' || item.statusCode == '1001' || item.statusCode == '1002' || item.statusCode == '1003'">
							运输中
						</view>
						<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '5'">
							派件中
						</view>
						<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '501'">
							已投递菜鸟驿站/快递柜
						</view>
						<view class="top_title" :class="index == 0 ? 'active_top' : ''" v-if="item.statusCode == '3' || item.statusCode == '301' || item.statusCode == '302' || item.statusCode == '303' || item.statusCode == '304'">
							已签收
						</view>
						<view class="cen_title" :class="index == 0 ? 'active_cen' : ''">
							{{item.context}}
						</view>
						<view class="bot_title">
							{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "js-md5";
	export default {
		data() {
			return {
				options: [
					// {
					// 	status: '投柜或驿站',
					// 	context: '【青岛市】 快件已被 菜鸟的【青岛康泰源惠客友超市店】代收，【取件地址：青岛康泰源惠客友超市店】，请及时取件。如有疑问请联系：15805321109，投诉电话：0532-88985563',
					// 	time: '2023-08-18 10:33:33'
					// },
					// {
					// 	status: '派件',
					// 	context: '【青岛市】青岛市中五二部（0532-88985563）业务员【杨金梅,19106394524】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系投诉电话：0532-88985563）',
					// 	time: '2023-08-18 08:08:38'
					// },
					// {
					// 	status: '在途',
					// 	context: '【青岛市】 快件已到达 青岛市中五二部',
					// 	time: '2023-08-18 08:08:33'
					// },
					// {
					// 	status: '在途',
					// 	context: '【青岛市】 快件已发往 青岛市中五二部',
					// 	time: '2023-08-18 04:36:56'
					// },
					// {
					// 	status: '在途',
					// 	context: '【青岛市】 快件已到达 青岛中转部',
					// 	time: '2023-08-18 01:04:40'
					// },
					// {
					// 	status: '在途',
					// 	context: '【昆明市】 快件已发往 青岛中转部',
					// 	time: '2023-08-16 00:51:30'
					// },
					// {
					// 	status: '在途',
					// 	context: '【昆明市】 快件已到达 昆明中转',
					// 	time: '2023-08-15 15:30:16'
					// }, {
					// 	status: '在途',
					// 	context: '【丽江市】 快件已发往 昆明中转',
					// 	time: '2023-08-14 19:02:02'
					// }, {
					// 	status: '揽收',
					// 	context: '【丽江市】 【丽江华坪县】（0888-8834031） 的 P1陈平（15108866686） 已揽收',
					// 	time: '2023-08-14 19:01:18'
					// }
				],
				logisticsNo:'',
				company:'',
				companyCode:'',
			}
		},
		onLoad(options) {
			console.log(options)
			this.logisticsNo = options.logisticsNo;
			this.company = options.company;
			this.companyCode = options.companyCode;
			if(this.logisticsNo){
				this.getInfo()
			}
			// this.getInfo()
		},
		methods: {
			getInfo(){
				let param = {
				        customer: "1C32AD38DC92D3A1950391AD766C7F6D",
				        sign: "",
				        param: JSON.stringify({
				          "com": this.companyCode,
				          "num": this.logisticsNo,
				          "phone": '17852327323',
				          "from": "",
				          "to": "",
				          "resultv2": "4",
				          "show": "0",
				          "order": "desc"
				        })
				      }
				      param.sign = md5(param.param + 'ubdRnSOv5517' + param.customer).toUpperCase();
				uni.request({
					url:"https://poll.kuaidi100.com/poll/query.do",
					method:"post",
					header:{
						"Content-Type": "application/x-www-form-urlencoded",
					},
					data: param,
					success:(res =>{
						this.options = res.data.data
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.process_more {
		height: 100%;
		overflow-y: hidden;
	
		.com_box {
			width: 690rpx;
			height: 90rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
	
			.com_txt {
				margin-left: 38rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				color: #333;
			}
	
			.com_num {
				font-size: 26rpx;
				color: #333;
			}
		}
		
		.pro_box{
			width: 690rpx;
			height: 75%;
			overflow-y: auto;
			overflow-x: hidden;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 30rpx 0;
			
			.set-2{
				width: 100%;
				
				&:last-child{
					.wuliu_box{
						.right_box{
							border-left: none;
						}
					}
				}
				
				.wuliu_box{
					width: 100%;
					// position: relative;
					// height: 200rpx;
					// background: red;
					margin: 0 auto;
					display: flex;
					// border-left: 2rpx solid #E8E8E8;
					
					.left_box{
						width: 60rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						padding-left: 20rpx;
						justify-content: center;
						align-items: center;
						
						.line_box{
							width: 2rpx;
							height: 100%;
							background: #E8E8E8;
							// position: relative;
						}
						
						image{
							width: 56rpx;
							height: 56rpx;
							margin-left: 40rpx;
							position: relative;
							z-index: 100;
							// position: absolute;
							// left: 20rpx;
						}
					}
					.right_box{
						width: 100%;
						padding-left: 60rpx;
						padding-bottom: 60rpx;
						padding-right: 80rpx;
						margin-left: -10rpx;
						border-left: 2rpx solid #E8E8E8;
						
						.top_title{
							font-size: 26rpx;
							color: #666;
							
							&.active_top{
								color: #333;
							}
						}
						.cen_title{
							font-size: 22rpx;
							color: #999;
							margin: 20rpx 0;
							
							&.active_cen{
								color: #333;
							}
						}
						.bot_title{
							font-size: 20rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>