yanzong_qianduan/pages/news3/LogisticsDetails.vue

<template>
	<view>
		<view class="bgImg"
			:style="{ background: `url(${$picUrl+'/static/news3/walletBg.png'})`, 'background-size': 'cover' }">
			<view style="width:100%;position:sticky;">
				<view class="navBarContent">
					<u-icon name="arrow-left" @click="onBack"
						style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000"
						size="35"></u-icon>
					<text>物流信息</text>
				</view>
			</view>
			<view class="logis-box">
				<image src="/static/default-logo.png" alt=""></image>
				<view class="logis-pany">
					<view class="logis-text">
						<text>物流公司：</text>{{logisticsItem.express_name}}
					</view>
					<view class="logis-text">
						<text>物流单号：</text>{{logisticsItem.express_no}}<text
							style="color: #FF6565; font-size:15px;margin-left: 20px;" @click="copy">复制</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流轨迹 -->
		<view class="logis-detail" v-if="logisticsItem">
			<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in logisticsItem.items" :key="index">
				<view class="logis-item-content">
					<view class="logis-item-content__describe">
						<text class="f-26">{{ item.context }}</text>
					</view>
					<view class="logis-item-content__time">
						<text class="f-22">{{ item.time }}</text>
					</view>
				</view>
			</view>
			<view class="all-details" style="padding: 50px 0;font-size: 16px;" v-if="!logisticsItem.items">暂无物流信息</view>
		</view>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				traces: [],
				logisticsItem:''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(o) {
			this.onCheck(o.logisticsNum)
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1 // 表示返回到上一页（默认为1）
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: this.logisticsItem.express_no, //	这里是个坑接受字符串类型 value转化为字符串
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 查快递
			 */
			onCheck(logisticsNum) {
				newFunApi.expressSearch({
						expressNo: logisticsNum
					})
					.then(res => {
						if (res.status) {
							this.logisticsItem = res.data
						} else {
							uni.showToast({
								title: '查询失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
					.finally()
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F7F8FA;
		min-height: 100%;
		padding-bottom: 40upx;
	}

	.all-details {
		width: 100%;
		font-size: 14px;
		text-align: center;
	}

	.navBarContent {
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		position: relative;

		text {
			font-size: 32upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000;
		}

	}

	.bgImg {
		width: 100%;
		height: 130px;
		position: relative;
	}

	// 物流轨迹
	.logis-box {
		width: 100%;
		height: 80px;
		// background-color: #FFF;
		display: flex;
		align-items: center;
		padding: 30px;

		image {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		.logis-text {
			margin: 10px 0;
		}

		.logis-pany {
			overflow: hidden;
			margin-left: 15px;
			color: #000;
			font-size: 14px;

			text {
				color: #999;
			}
		}
	}

	.logis-detail {
		padding: 30rpx 50rpx;
		background: #fff;

		.logis-item {
			position: relative;
			padding: 10px 0 10px 25px;
			box-sizing: border-box;
			border-left: 2px solid #ccc;

			&.first {
				border-left: 2px solid #FF5050;

				&:after {
					background: #FF5050;
					color: #FF5050;
				}

				.logis-item-content {
					// background: #ff6e39;
					color: #FF5050;

					&:after {
						border-bottom-color: #FF5050;
					}
				}
			}

			&:after {
				content: ' ';
				display: inline-block;
				position: absolute;
				left: -6px;
				top: 30px;
				width: 6px;
				height: 6px;
				border-radius: 10px;
				background: #bdbdbd;
				border: 2px solid #fff;
			}

			.logis-item-content {
				position: relative;
				// background: #f9f9f9;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				color: #999;

				// &:after {
				// 	content: '';
				// 	display: inline-block;
				// 	position: absolute;
				// 	left: -10px;
				// 	top: 18px;
				// 	border-left: 10px solid #fff;
				// 	border-bottom: 10px solid #f3f3f3;
				// }
			}
		}
	}
</style>