yijianbao_user_uniapp/pages_user/integralOrderDelivery.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<view class="bg"></view>
			<view class="top-inner">			
				<!-- 运单号 -->
				<view class="waybill-number">
					<view class="inner">
						<view class="num-box">
							<text class="text">运单号</text>
							<text class="text">{{deliverySn}}</text>
							<view class="copy" @click="copyOrderSn(deliverySn)">复制</view>
						</view>
						<view class="kf-box">
							<text class="text">{{express}}</text>
							<!-- <text class="text">客服电话：95311</text> -->
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 物流信息 -->
					<view class="refund-steps" v-if="expressList&&expressList.length>0">
						<view v-for="(item,index) in expressList" :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 class="refund-steps"  v-else>{{Reason}}</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {getExpress} from './api/integral.js'
	export default {
		data() {
			return {
				orderId:null,
				deliverySn:null,
				express:{},
				expressList:[],
				Reason: ''
			};
		},
		onLoad(option) {
			this.orderId=option.orderId;
			this.getExpress();
		},
		methods: {
			getExpress(){
				getExpress({orderId:this.orderId}).then(res => {
					if(res.code==200){
						this.express=res.deliveryName;
						this.expressList=res.data.Traces;
						this.deliverySn=res.data.LogisticCode
						this.Reason = res.data.Reason
					}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">
	.top-cont{
		width: 100%;
		height: 336upx;
		position: relative;
		.bg{
			width: 100%;
			height: 350upx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background-color: #2583EB;
			border-radius: 0rpx 0rpx 100rpx 100rpx;
		}
		.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: #2583EB;
						}
					}
					.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: #2583EB;
						line-height: 1.6;
					}
				}
				.time{
					font-size: 24upx;
					font-family: Gilroy;
					font-weight: 500;
					color: #999999;
					margin-top: 10upx;
				}
			}
		}
		
	}
	
</style>