rt_fhyx_user_miniapp/pages_user/user/storeOrderDelivery.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<image class="bg" src="../../static/images/order_top_bg2.png" mode=""></image>
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="back-box" @click="back">
					<image src="../../static/images/back_white.png" mode=""></image>
					<text class="title">物流信息</text>
					<text></text>
				</view>
				<!-- 运单号 -->
				<view class="waybill-number">
					<view class="itemlistall">
						<view v-for="(item,index) in ExpressMulti" :key="index" @click="xuanze(index)"
						 :class="actexpress==index?'itemlist itemact':'itemlist' " >
							物流{{index+1}}</view>
					</view>
					
					<view class="inner">
						<view class="num-box">
							<text class="text">运单号</text>
							<text class="text">{{expressList.LogisticCode}}</text>
							<view class="copy" @click="copyOrderSn(expressList.LogisticCode)">复制</view>
						</view>
						<view class="kf-box">
							<text class="text">{{expressList.ShipperName}}</text>
							<!-- <text class="text">客服电话：95311</text> -->
						</view>
					</view>
				</view>
				<view class="content"  v-if="expressList!=null">
					<!-- 物流信息 -->
					<view class="refund-steps" v-if="expressList.Traces!=null">
						<view v-for="(item,index) in expressList.Traces" :key="index" class="steps">
							<view class="title">
								<!-- <text v-if="index == 0" class="text black-text">已签收</text> -->
								<!-- <text  class="text gray-bold">运输中</text> -->
								<!-- 左侧灰色圆点 -->
								<view class="dot"></view>
								<!-- 对号 -->
								<image  class="img" src="../../static/images/complete.png" mode=""></image>
								<!-- 运输中图标 -->
								<image  class="img" src="../../static/images/car40.png" mode=""></image>
							</view>
							<view  class="desc-text">
								{{item.AcceptStation}}
							</view>
							 
							<view class="time">{{item.AcceptTime}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {getMyStoreOrderById,cancelOrder,getExpress,getExpresslist} from '@/api/storeOrder'
	export default {
		data() {
			return {
				statusBarHeight:uni.getStorageSync("menuInfo").statusBarHeight,
				orderId:null,
				deliveryId:null,
				express:{},
				expressList:[],
				ExpressMulti:[],
				actexpress:0
			};
		},
		onLoad(option) {
			this.orderId=option.orderId;
			// this.getExpress();
			this.getExpresslists()
		},
		methods: {
			xuanze(index){
				this.actexpress=index
				this.getExpresslists()
			},
			getExpresslists(){
				var data={orderId:this.orderId};
				getExpresslist(data).then(res => {
					if(res.code==200){
						this.ExpressMulti=res.data
						this.expressList=res.data[this.actexpress]
						console.log(this.expressList)
						console.log(this.ExpressMulti)
					}
				})
			},
			getExpress(){
				var data={orderId:this.orderId};
				
				getExpress(data).then(res => {
					if(res.code==200){
						this.express=res.express;
						this.expressList=res.data;
						this.deliveryId=res.deliveryId
				 
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						 
					}
				});
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// 复制运单号
			copyOrderSn(text) {
				// 复制方法
				uni.setClipboardData({
					data:text,
					success:()=>{
						uni.showToast({
							title:'内容已成功复制到剪切板',
							icon:'none'
						})
					}
				});
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss">
	.itemlistall{
		display: flex;
	}
	.itemlist{
		background-color: #fff;
		margin: 10rpx;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
	}
	.itemact{
		color: #2BC7B9;
	}
	.top-cont{
		width: 100%;
		height: 336upx;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.waybill-number{
				padding: 0 20upx;
				margin-top: 66upx;
				.inner{
					box-sizing: border-box;
					height: 150upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.num-box{
						display: flex;
						align-items: center;
						.text{
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							line-height: 1;
							margin-right: 30upx;
							&:last-child{
								margin-right: 20upx;
							}
						}
						.copy{
							width: 58upx;
							height: 32upx;
							line-height: 32upx;
							text-align: center;
							font-size: 22upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							background: #F5F5F5;
							border-radius: 4upx;
						}
					}
					.kf-box{
						display: flex;
						align-items: center;
						.text{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
							margin-right: 20upx;
						}
					}
				}
			}
			
		}
	}
	.content{
		margin: 20rpx 0rpx;
		padding: 0 20upx;
		.refund-steps{
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 44upx;
			.steps{
				padding-left: 40upx;
				padding-bottom: 56upx;
				position: relative;
				&::after{
					content: "";
					width: 4upx;
					height: 100%;
					background: #F1F1F1;
					position: absolute;
					left: 0;
					top: 20upx;
				}
				&:last-child{
					padding-bottom: 0;
					&::after{
						display: none;
					}
				}
				.title{
					position: relative;
					.text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 38upx;
						&.black-text{
							color: #111111;
							font-weight: bold;
						}
						&.gray-bold{
							font-weight: bold;
							color: #666666;
						}
					}
					.dot{
						width: 16upx;
						height: 16upx;
						background: #EBEBEB;
						border-radius: 50%;
						position: absolute;
						left: -46upx;
						top: 11upx;
						z-index: 10;
						&.active{
							background-color: #2BC7B9;
						}
					}
					.img{
						width: 40upx;
						height: 40upx;
						position: absolute;
						left: -57upx;
						top: 2upx;
						z-index: 10;
					}
				}
				.desc-text{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 1.6;
					margin-top: 10upx;
					.phone{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2BC7B9;
						line-height: 1.6;
					}
				}
				.time{
					font-size: 24upx;
					font-family: Gilroy;
					font-weight: 500;
					color: #999999;
					margin-top: 10upx;
				}
			}
		}
		
	}
	
</style>