zhywpt-sp/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 } from "@/utils/utils";

	const state = reactive({
		//是否显示更多订单信息
		isShow:false,
		//显示更多物流信息
		popupVisible:false,
		//显示部分订单信息
		orderShowInfo: [{
				label: '新办单号：',
				value: '01872753475754'
			},
			{
				label: '业务类型：',
				value: '新办发行'
			},
			{
				label: '订单车牌：',
				value: '贵A01234'
			},
			{
				label: '所属类型：',
				value: '个人'
			},
			{
				label: '车辆类型：',
				value: '客车'
			},
			{
				label: '订单状态：',
				value: '已完成'
			},
		],
		//隐藏部分订单信息
		orderHideInfo: [{
				label: '创建时间：',
				value: '2022-12-25 22:14:44'
			},
			{
				label: '付款时间：',
				value: '2022-11-25 22:14:44'
			},
			{
				label: '发货时间：',
				value: '2022-06-25 22:14:44'
			},
			{
				label: '业务员：',
				value: '张三'
			},
			{
				label: '物流单号：',
				value: 'YT56374359468'
			},
			{
				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('复制成功！');
	        }
	});

}
	
</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>