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="warehouse-packaging" v-if="warehouse.length>0">

				<Progress :logisticsList="warehouse" />

			</view>
			<view class="_detail-1">
				<text>已于11月24日送至平台仓库</text>
				<u-icon @click="putItAway" name="arrow-up" color="#666666" size="18" v-if="isShow"></u-icon>
				<u-icon @click="putItAway" name="arrow-down" color="#666666" size="18" v-else></u-icon>
			</view>
			<view class="logistics-detail" v-if="isShow">
				<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" v-if="isShow">
				<Progress :logisticsList="logisticsList" />
			</view>
		</view>
	</view>
</template>

<script>
	import Progress from './component/progress.vue'
	export default {
		components: {
			Progress
		},
		data() {
			return {
				logisticsList: [{
						title: "已签收",
						time: "10:11",
						status: false,
						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: "快递离开******"
					}
				],
				warehouse: [{
						title: "打包称重",
						time: "10:11",
						status: true,
						imageUrl: true,
						does: "商品已打包称重，待用户付款"
					},
					{

						title: "商品入库",
						time: "10:11",
						status: false,
						imageUrl: false,
						does: "商品已进入转入仓库，正在排队等待打包"
					}
				],
				isShow:true
			}
		},
		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('授权失败，请允许拨打电话权限！');
					}
				});
			},
			putItAway(){
				this.isShow = !this.isShow
			}
		},
		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;
			padding-bottom: 20rpx;

			._detail-1 {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #666;
				align-items: center;
				border-top: 2rpx solid rgba(151, 151, 151, .1);
				padding-top: 28rpx;
			}

			.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, .1);

			}

			.logistics-information {
				padding: 20rpx 0;

				.information {
					position: relative;
				}
			}

		}
	}
</style>