wx-qhb/pageD/logisticsProgress/logisticsProgress.vue

<template>
	<view class="page">
		<view class="top-detail">
			<view class="title">
				发往仓库
			</view>
			<image class="arrow" src="../../static/mine/339.png" mode=""></image>
			<view class="title">
				仓库打包
			</view>
			<image class="arrow" src="../../static/mine/340.png" mode=""></image>
			<view class="title">
				洛杉矶
			</view>
		</view>
		<view class="logistics">
			<view class="logistics-detail">
				<view class="">
					{{"顺丰快递"+"&nbsp;"+"|"+"&nbsp"+"订单号："}}
					<text>JDV21093105892</text>
				</view>
				<view class="phone">
					<text @click="cope('JDV21093105892')">复制</text>
					{{"&nbsp;"+"|"+"&nbsp"}}
					<text @click="makeCall">打电话</text>
				</view>
			</view>
			<view class="logistics-information">
				<view v-for="(item,index) in logisticsList" :key="index" class="information">
					<view class="basis">
						<view class="dot" v-if="item.title" :style="item.status?'background-color:#f83224':''">
						</view>
						<view class="dot-1" v-else :style="item.status?'background-color:#f83224':''">
						</view>

						<view class="name" :style="item.status?'color:#f83224':''">
							{{item.title}}
						</view>
						<view class="time" :style="item.status?'color:#f83224':''">
							{{item.time}}
						</view>
					</view>
					<view class="shu" v-show="index < logisticsList.length-1"> </view>
					<view class="does" :id="'does'+index" :style="item.status?'color:#333':''">
						{{ item.does }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logisticsList: [{
						title: "已签收",
						time: "10:11",
						status: true,
						does: "您的快件已暂存至浦口东方万汇城北区2号楼超市店菜鸟驿站，请凭取件码及时领取。"
					}, {
						title: "派送中",
						time: "10:11",
						status: false,
						does: "临沂市配送员【叶景瑞】 187626516732 正为您派送，感谢您的耐心等待"
					}, {
						title: "",
						time: "10:11",
						status: false,
						does: "临沂市配送员【叶景瑞】 187626516732 正为您派送，感谢您的耐心等待"
					},
					{

						title: "运输中",
						time: "10:11",
						status: false,
						does: "快递离开******"
					}
				]
			}
		},
		computed: {},
		methods: {

			cope(str) {
				uni.setClipboardData({
					data: str,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						})
					}
				})
			},
			makeCall() {
				uni.authorize({
					scope: 'scope.makePhoneCall',
					success: () => {
						uni.makePhoneCall({
							phoneNumber: '手机号码',
							success: () => {
								console.log('拨打电话成功！');
							},
							fail: () => {
								console.error('拨打电话失败！');
							}
						});
					},
					fail: () => {
						console.error('授权失败，请允许拨打电话权限！');
					}
				});
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "物流进度"
			})
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 20rpx 24rpx;

		.top-detail {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 144rpx;
			background: linear-gradient(180deg, #F6E1DE 0%, #EFEFEF 100%);
			border-radius: 16rpx 16rpx 0 0;

			.title {
				color: rgba(34, 34, 34, .6);
				font-size: 32rpx;
			}

			.arrow {
				width: 98rpx;
				height: 8rpx;
			}
		}

		.logistics {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 20rpx;
			position: relative;
			top: -20rpx;

			.logistics-detail {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #333;
				height: 104rpx;
				align-items: center;
				border-bottom: 2rpx solid rgba(151, 151, 151, .2);

			}

			.logistics-information {
				padding: 20rpx 0;

				.information {

					position: relative;
				}
			}

			.basis {
				display: flex;
				align-items: center;

				.dot {
					border-radius: 50%;
					background-color: rgba(227, 227, 227, 1);
					width: 18rpx;
					height: 18rpx;
					margin-right: 20rpx;
					z-index: 100;
				}

				.dot-1 {
					border-radius: 50%;
					background-color: rgba(227, 227, 227, 1);
					width: 10rpx;
					height: 10rpx;
					margin-right: 20rpx;
					margin-left: 4rpx;
					z-index: 100;
				}

				.name {
					font-size: 28rpx;
					margin-right: 20rpx;
				}

				.time {
					font-size: 24rpx;
				}
			}

			.shu {
				position: absolute;
				height: 126rpx;
				width: 2rpx;
				background-color: rgba(151, 151, 151, .6);
				left: 8rpx;
				top: 22rpx;
			}

			.does {
				font-size: 24rpx;
				color: rgba(119, 119, 119, .8);
				margin: 8rpx 0 28rpx 36rpx;
			}
		}
	}
</style>