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

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

		<view class="content">
			<!-- 左侧寄件人信息 -->
			<view class="sender-info">
				<view class="city-tag">{{ orderDetail.senderCity }}</view>
				<view class="name">{{ orderDetail.senderName }}</view>
			</view>

			<view class="translate">
				<view class="status">{{ getStatusText(orderDetail.orderStatus) }}</view>

				<image v-if="orderDetail.orderStatus == 5" src="/static/img/translte-1.png"></image>
				<image v-if="orderDetail.orderStatus == 6" src="/static/img/translte-3.png"></image>
				<image v-else src="/static/img/translte-2.png"></image>
			</view>

			<!-- 右侧收件人信息 -->
			<view class="receiver-info">
				<view class="city-tag">{{ orderDetail.receiverCity }}</view>
				<view class="name">{{ orderDetail.receiverName }}</view>
			</view>
		</view>

		<!-- 状态信息 -->
		<view class="section-continer" v-if="false">
			<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 v-if="orderDetail.orderStatus == 1" @click="cancel" class="action-btn btn-cancel">
				<text class="btn-text">运单取消</text>
			</view>
		</view>

		<!-- 物流轨迹弹框 -->
		<TrackPopup 
			v-model:showPopup="showTrackPopup" 
			:expressData="expressData"
			:orderNo="orderDetail.externalWaybillNo"
		/>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue'
	import {
		cancelOrder
	} from '@/api/order.js'
	import TrackPopup from './TrackPopup.vue'

	const emit = defineEmits(['success'])
	const props = defineProps({
		isGrab: {
			type: Boolean,
			default: false
		},
		orderDetail: {
			type: Object,
			default: () => ({})
		}
	})

	// 控制弹框显示
	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?waybillId=${props.orderDetail.waybillId}`
		})
	}

	// 复制运单号
	const copyWaybillNumber = () => {
		uni.setClipboardData({
			data: props.orderDetail.externalWaybillNo,
			success: () => {
				uni.showToast({
					title: '运单号已复制',
					icon: 'success'
				})
			}
		})
	}
	// 取消订单
	const cancel = async () => {
		uni.showModal({
			content:'是否取消运单（' + props.orderDetail.externalWaybillNo + '）',
			cancelText:'否',
			confirmText:'是',
			success: async (res) => {if(res.confirm){
					let res = await cancelOrder({
						waybillId: props.orderDetail.waybillId,
						cancelReason: "取消",
						externalWaybillNo: props.orderDetail.externalWaybillNo,
						orderType: props.orderDetail.orderType,
						productCode: props.orderDetail.productCode,
					
						waybillNo: props.orderDetail.waybillNo,
					})
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						emit('success')
					}
				}
			}
				
		})		
	}

	// 获取订单状态
	const getStatusText = (orderStatus) => {
		let txt = ''
		switch (orderStatus) {
			case 1:
				txt = '待揽件'
				break;
			case 2:
				txt = '已揽件'
				break;
			case 3:
				txt = '运输中'
				break;
			case 4:
				txt = '派送中'
				break;
			case 5:
				txt = '已签收'
				break;
			case 6:
				txt = '已取消'
				break;
			default:
				break;
		}
		return txt;
	}
</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>