zhywpt-sp/subpackage/orders/order-detail-logistics.vue

<!-- 订单详情-查看物流 -->
<template>
	<view class="main">
		<view class="card-box padding-all">
			<view class="as-layout-horizontal as-gravity-center-start">
				<image :src="`${$imgUrl}order/logistics.png`" class="icon"></image>
				<view class="as-layout-horizontal">
					<text class="txt-grey" style="flex:1">中国邮政速递 Y1281937337287283</text>
					<text class="txt-grey copy" @click="copyTxt('Y1281937337287283')">复制</text>
				</view>
			</view>
			<view class="logistics-layout">
				<order-logistics :options="state.logisticsList" @more="state.popupVisible = true"></order-logistics>
			</view>
		</view>

		<view class="card-box padding-top-bottom">
			<view class="as-layout-horizontal as-gravity-center-start title">
				<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon"></image>
				<text class="txt-title">某产品A</text>
			</view>
			<view style="border-bottom: 1px solid #DCDCDC;" />

			<!-- 订单信息 -->
			<view class="order-box" :class="{show:state.isShow}">
				<view class="order-line" v-for="(item,index) in state.orderShowInfo" :key="index">
					<order-info-item :label="item.label" :value="item.value"></order-info-item>
				</view>
				<view class="order-line" v-for="(item,index) in state.orderHideInfo" :key="index">
					<order-info-item :label="item.label" :value="item.value"></order-info-item>
				</view>
			</view>
			<view class="show-or-noshow as-layout-horizontal as-gravity-center" @click="state.isShow = !state.isShow">
				<text>{{state.isShow?"收起部分订单信息":"查看全部订单信息"}}</text>
				<image class="arror" :src="`${$imgUrl}common/arror-${state.isShow? 'right' : 'down'}.png`"></image>
			</view>
		</view>
	</view>

	<!-- 查看更多物流信息 -->
	<popup-bottom ref="popup" v-model:visible="state.popupVisible" title="详细信息" radius="40" maxHeight="75%">
		<view class="log-popup" v-if="state.popupVisible">
			<order-logistics :options="state.logisticsAllList" :flag="2"></order-logistics>
		</view>
	</popup-bottom>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import orderInfoItem from "./components/order-info-item";
	import orderLogistics from "./components/order-logistics";
	import popupBottom from "./components/popup-bottom.vue";
	import { msg, getOrderTypeName, getCarTypeName, getOrderStatusName, getOrderTime } from "@/utils/utils";
	import { onLoad } from "@dcloudio/uni-app";

	const state = reactive({
		orderInfo: "",
		//是否显示更多订单信息
		isShow: false,
		//显示更多物流信息
		popupVisible: false,
		//显示部分订单信息
		orderShowInfo: [{
			label: '新办单号：',
			value: ''
		},
		{
			label: '业务类型：',
			value: ''
		},
		{
			label: '订单车牌：',
			value: ''
		},
		{
			label: '所属类型：',
			value: ''
		},
		{
			label: '车辆类型：',
			value: ''
		},
		{
			label: '订单状态：',
			value: ''
		},
		],
		//隐藏部分订单信息
		orderHideInfo: [{
			label: '创建时间：',
			value: ''
		},
		// {
		// 	label: '付款时间：',
		// 	value: ''
		// },
		// {
		// 	label: '发货时间：',
		// 	value: ''
		// },
		// {
		// 	label: '业务员：',
		// 	value: '张三'
		// },
		{
			label: '物流单号：',
			value: ''
		},
		{
			label: '物流公司：',
			value: ''
		},
		],
		//物流信息
		logisticsList: [
			{ title: '已签收 02-01 10:18:09', desc: '贵州省贵阳市具体地址贵阳市具体地址贵阳市具体贵阳市具体地址 已签收 签收人：【代收点】贵阳市…', right: true },
			{ title: '送至 俊发城 A 区 5 栋 1021', desc: '李先生 86-178****8911' },
		],
		logisticsAllList: [
			{ title: '已签收 02-01 10:18:09', desc: '贵州省贵阳市具体地址 签收人：高先生' },
			{ title: '派送中 02-01 09:38', desc: '贵州省贵阳市具体地址贵阳市具体地址贵阳市 派件员：张三 手机号：15620608655' },
			{ title: '运输中 ', desc: '贵州省贵阳市XXXXXXX 已收入' },
			{ title: '01-12 16:27 ', desc: '贵州省贵阳市XXXXXXX 已出发' },
			{ title: '01-12 09:31 ', desc: '贵州省贵阳市XXXXXXX 已打包' },
			{ title: '01-12 09:12 ', desc: '贵州省贵阳市XXXXXXX 已收入' },
			{ title: '物流异常提醒 01-11 12:09 ', desc: '目前快递运力正在全力以赴恢复中，您目前快递运力正 在全力以赴恢复中，您目前快递运力正在全力以赴恢复 中您，敬请谅解！' },
			{ title: '等待揽件 ', desc: '上海市 浦江' },
		],
	})

	const copyTxt = (value : string) => {
		uni.setClipboardData({
			data: value,
			success: () => {//复制成功的回调函数
				msg('复制成功！');
			}
		});

	}
	onLoad((options) => {
		state.orderInfo = JSON.parse(options.orderInfo);
		console.log("state.orderInfo", options.orderInfo)
		state.orderShowInfo[0].value = state.orderInfo['orderId']
		state.orderShowInfo[1].value = getOrderTypeName(state.orderInfo['orderType'])
		state.orderShowInfo[2].value = state.orderInfo['vehiclePlate']
		state.orderShowInfo[3].value = state.orderInfo['userType'] === 'UNIT_USER' ? '单位' : '个人'
		state.orderShowInfo[4].value = getCarTypeName(state.orderInfo["type"])
		state.orderShowInfo[5].value = getOrderStatusName(state.orderInfo['orderStep'])

		state.orderHideInfo[0].value = getOrderTime(state.orderInfo['insertTime'])
		state.orderHideInfo[1].value = state.orderInfo['trackingNumber']
		state.orderHideInfo[2].value = state.orderInfo['courierCompany']
	})
</script>

<style>
	page {
		background-color: #EEF7F7;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.log-popup {
		margin: -8rpx 10rpx 0px;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 50rpx 45rpx 30px;
		overflow: visible;
	}

	.main {
		margin: 30rpx;

		.card-box {
			background-color: white;
			border-radius: 20rpx;
			box-shadow: 0px 0px 6rpx 2rpx rgba(223, 223, 223, 0.3);
			margin-bottom: 30rpx;
		}

		.padding-all {
			padding: 30rpx;
		}

		.padding-top-bottom {
			padding: 25rpx 0px 30rpx;
		}

		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
		}

		.copy {
			&:hover {
				color: red;
			}
		}

		.txt-grey {
			font-size: 24rpx;
			color: #999999;
		}

		.txt-title {
			font-size: 30rpx;
			color: #333333;
		}

		.title {
			padding: 0 30rpx 25rpx;
		}

		.order-line {
			padding: 28rpx 30rpx 0;
		}

		.order-box {
			height: 380rpx;
			overflow: hidden;
		}

		.show {
			height: auto;
			overflow: visible;
		}

		.show-or-noshow {
			font-size: 26rpx;
			color: #999999;
			text-align: center;
			padding: 28rpx 0 8rpx;
		}

		.arror {
			width: 28rpx;
			height: 28rpx;
			padding-left: 6rpx;
			margin-top: 2rpx;
		}

		.logistics-layout {
			margin-top: 40rpx;
			margin-left: 20rpx;
		}
	}
</style>