YTAPP/pages/waybillDeliveryOrder/orderInfo.vue

<template>
	<view class="info">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#007aff">
		</uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<view class="order-no">
					<view>
						<text>派送单号: {{ item.order_no }}</text>
						<image @click="copyString(item.order_no)" class="icon" src="/static/copy.png"
							mode="aspectFill" />
					</view>
					<uni-tag :text="item.status_text" type="primary" circle></uni-tag>
				</view>
				<view class="box-card">
					<view class="label-icon">
						<text class="label-title">地址信息</text>
					</view>
					<view class="label-content">
						<text>
							{{ item!.address.first_name + ' ' + item!.address.last_name }}
						</text>
						<text v-if="item!.address.mobile">
							+{{ item!.address.mobile_code + ' ' + item!.address.mobile }}
							<br />
						</text>
						<text v-if="item!.address.email">
							{{ item!.address.email }}
							<br />
						</text>
						<text>
							{{ item!.address.address_line_1 }}
							<br />
						</text>
						<text v-if="item!.address.address_line_2">
							{{ item!.address.address_line_2 }}
							<br />
						</text>
						<text v-if="item!.address.address_line_3">
							{{ item!.address.address_line_3 }}
							<br />
						</text>
						<text>
							{{ item!.address.city + ' ' + item!.address.district }}
							<br />
						</text>
						<text>
							{{ item!.address.province }}
							<br />
						</text>
						<text>
							{{ item!.address.zip_code }}
							<br />
						</text>
					</view>
				</view>
				<view class="box-card">
					<text>客户派送日期:
						<uni-dateformat v-if="item.delivery_date" :date="item.delivery_date"
							format='yyyy-MM-dd'></uni-dateformat>
						<text v-else>无</text>
						<br />
					</text>
					<text>备注: {{ item.remark || '无' }}</text>
				</view>

				<view class="box-card">
					<view class="label-icon">
						<text class="label-title">物流信息</text>
					</view>
					<view class="label-content">
						<text>派送渠道类型:
							<uni-tag :text="delivery_type[item.delivery_type]" type="primary"></uni-tag>
							<br />
						</text>
						<text v-if="Number(item.delivery_type) === 1">司机:
							{{ deliveryOrderOptions['driver_id'][item.driver_id] || '无' }}
							<br />
						</text>
						<text v-if="Number(item.delivery_type) === 2">快递公司:
							<uni-tag :text="item.express.name || '无'" type="success" size="small" circle></uni-tag>
							<br />
						</text>
						<text>物流单号:
							{{ item.express_no || '无' }}
							<br />
						</text>
						<text>追踪单号: {{ item.express_tracking_number || '无' }}</text>
					</view>
				</view>

			</view>
			<view v-show="current === 1">
				选项卡2的内容
			</view>
		</view>
		<uni-popup ref="messageRef" type="message">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { pickupWaybillDeliveryOrderURL } from '@/utils/api.js';
	const current = ref(0);
	const items = ref(['基本信息', '运单详情']);
	const loading = ref(false);
	const token = ref();
	const waybillDelivery = ref([]);
	const messageType = ref();
	const messageText = ref();
	const messageRef = ref();
	const item = ref();
	const deliveryOrderOptions = ref({});

	const delivery_type = ref({
		'1': '英途派送',
		'2': '第三方物流',
	})

	onLoad((query) => {
		token.value = uni.getStorageSync('token');
		item.value = uni.getStorageSync('selectItem');
		deliveryOrderOptions.value = uni.getStorageSync('deliveryOrderOptions');
		console.log(item.value);
		// getInfo(query.id);
	});

	const onClickItem = (e : any) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	const copyString = (str : string) => {
		uni.setClipboardData({
			data: str,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				});
			},
			fail: function () {
				console.log('复制失败');
			}
		});
	};
</script>

<style lang="scss" scoped>
	.info {
		padding: 20rpx;
		font-size: 30rpx;
		line-height: 50rpx;

		.icon {
			margin-left: 5rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.content {
			margin-top: 20rpx;

			.order-no {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

		.box-card {
			margin-top: 10rpx;
			padding: 10rpx;
			border: 1rpx gray dashed;
			border-radius: 20rpx;
		}

		.label-content {
			// margin-top: 10rpx;
		}
	}
</style>