jd_logistics/jd_logistics-app/pages/order/components/OrderItem.vue

<template>
	<view class="card">
		<view class="card-header">
			<text class="waybill-number">运单号：JDVA401410370033</text>
			<image src="/static/img/copy.png" @click="copyWaybillNumber"></image>
		</view>

		<view class="content">
			<!-- 左侧寄件人信息 -->
			<view class="sender-info">
				<view class="city-tag">洛阳市</view>
				<view class="name">下海龙</view>
			</view>

			<view class="translate">
				<view class="status">待取件</view>
				<image src="/static/img/translte-1.png"></image>
			</view>

			<!-- 右侧收件人信息 -->
			<view class="receiver-info">
				<view class="city-tag">北京市</view>
				<view class="name">周欣源</view>
			</view>
		</view>

		<!-- 状态信息 -->
		<view class="section-continer">
			<view class="timeline">
				<view class="dot">
					<view class="timeline-dot dot-active"></view>
				</view>
				<view class="timeline-line line-active"></view>
			</view>
			<view class="status-section">
				<view class="status-badge status-collected">已代收</view>
				<view class="status-detail">
					快件已投递至【北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿】
				</view>
				<view class="status-time">2026-01-11 17:32:32</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn" @click="showExpressTrack">
				<text class="btn-text">物流轨迹</text>
			</view>
			<view class="action-btn" @click="showOrderInfo">
				<text class="btn-text">运单详情</text>
			</view>
			<view class="action-btn btn-cancel">
				<text class="btn-text">运单取消</text>
			</view>
		</view>
		
		<!-- 物流轨迹弹框 -->
		<TrackPopup 
			v-model:showPopup="showTrackPopup" 
			:expressData="expressData"
		/>
	</view>
</template>

<script setup>
	import { ref, defineProps, defineEmits } from 'vue'
	import TrackPopup from './TrackPopup.vue'

	const emit = defineEmits(['success'])
	const props = defineProps({
		isGrab: {
			type: Boolean,
			default: false
		},
		orderDetail: {
			type: Object,
			default: () => ({
				goodsMainImage: null,
				goodsName: null,
				id: undefined,
				orderCreateTime: '',
				shopConfirmStatus: "",
				shopEvaluateStatus: '',
				shopDispatchVerifyStatus: "",
				shopGoodsId: undefined,
				shopOrderAmount: undefined,
				shopOrderId: "",
				shopOrderNum: 1,
				shopOrderStatus: "1",
				shopPrice: 102,
				shopRefundReviewStatus: null,
				shopServiceStatus: null,
				shopUserTime: null,
				userId: "1989219383070896130",
				userNickName: "bonjour",
				userPhone: "17639845061"
			})
		}
	})
	
	// 控制弹框显示
	const showTrackPopup = ref(false)
	const expressData = ref({
		company: '顺丰速运',
		number: 'JDVA401410370033',
		status: '待取件'
	})
	
	// 显示物流轨迹弹框
	const showExpressTrack = () => {
		// 这里可以调用API获取物流信息
		// 暂时使用模拟数据
		showTrackPopup.value = true
	}
	
	const showOrderInfo = () => {
		uni.navigateTo({
			url:'/pages/order/order_detail'
		})
	}
	
	// 复制运单号
	const copyWaybillNumber = () => {
		uni.setClipboardData({
			data: 'JDVA401410370033',
			success: () => {
				uni.showToast({
					title: '运单号已复制',
					icon: 'success'
				})
			}
		})
	}
</script>

<style scoped lang="less">
	.card {
		background-color: #fff;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;

		.card-header {
			height: 45rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.waybill-number {
				height: 100%;
				line-height: 45rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				padding: 10rpx;
				margin-left: 8rpx;
				flex-shrink: 0;
			}
		}

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.sender-info,
			.receiver-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 0; /* 防止flex子元素溢出 */

				.city-tag {
					max-width: 250rpx;
					height: 52rpx;
					font-size: 36rpx;
					color: #333333;
					line-height: 52rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.name {
					max-width: 250rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
					margin-top: 8rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.translate {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				flex-shrink: 0;

				.status {
					height: 44rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 100%;
				}

				image {
					height: 28rpx;
					width: 160rpx;
					margin-top: 8rpx;
					flex-shrink: 0;
				}
			}
		}

		.section-continer {
			display: flex;
			background-color: #F5F7FA;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			.timeline {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 34rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				
				.dot {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					background-color: #C1D5FF;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
				}
			
				.timeline-dot {
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					
					&.dot-active {
						background-color: #1B64F0;
					}
				}
			
				.timeline-line {
					flex: 1;
					width: 4rpx;
					box-sizing: border-box;
					margin-top: 10rpx;
					
					&.line-active {
						border-left: 4rpx dashed #1B64F0;
					}
				}
			}
			
			.status-section {
				flex: 1;
				min-width: 0;
			
				.status-badge {
					margin-bottom: 8rpx;
					height: 48rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 48rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			
				.status-detail {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
					margin-top: 8rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			
				.status-time {
					margin-top: 8rpx;
					height: 40rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		
		.action-buttons {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			.action-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				border-radius: 80rpx;
				border: 2rpx solid #F1F3F8;
				margin-left: 20rpx;
		
				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}

				.btn-text {
					font-size: 28rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&.btn-cancel {
					background-color: #fff5f5;

					.btn-text {
						color: #ff6b6b;
					}
				}
				
				/* 添加点击效果 */
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>