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

<template>
	<u-popup :show="showPopup" mode="center" round="20" @close="closePopup" :closeable="true"
		:safeAreaInsetBottom="false" :closeOnClickOverlay="true">
		<view class="express-popup">
			<!-- 弹框头部 -->
			<view class="popup-header">
				<text class="title">物流轨迹</text>

			</view>

			<!-- 右上角关闭按钮 -->
			<view class="close-btn" @tap="closePopup">
				<u-icon name="close" size="22" color="#333"></u-icon>
			</view>
			<!-- 物流轨迹时间线 -->
			<scroll-view class="timeline-container" scroll-y="true">
					<TimelineItem
						v-for="(item, index) in deliverTraceList" 
						:key="index"
						:title="item.title"
						:desc="item.context"
						:time="item.time"
						:is-active="item.isActive"
						:show-line="index < deliverTraceList.length - 1"
						:show-dot-bg="index === 0"
					/>
					<view v-if="deliverTraceList.length === 0 && !loading" class="empty-trace">
						暂无物流轨迹
					</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		watch
	} from 'vue'
	import TimelineItem from '@/components/TimelineItem.vue'
	import { queryDeliverTrace } from '@/api/order'

	const props = defineProps({
		showPopup: {
			type: Boolean,
			default: false
		},
		orderNo:{
			type: String,
			default: ""
		},
		expressData: {
			type: Object,
			default: () => ({})
		}
	})

	const emit = defineEmits(['update:showPopup', 'close'])

	const loading = ref(false)
	const deliverTraceList = ref([])

	
	watch(() => props.showPopup, (newVal) => {
	  if (newVal) {
		getDeliverTrace()
	  }
	})
	
	const getDeliverTrace = async () => {
	  if (!props.orderNo) {
	    deliverTraceList.value = []
	    return
	  }
	  loading.value = true
	  try {
	    const response = await queryDeliverTrace({
	      number: props.orderNo,
	      company: ''
	    })
	    if (response.code === 200 && response.data) {
	      const list = response.data.data.map((item, index) => ({
	        ...item,
	        isActive: index === 0
	      }))
	      deliverTraceList.value = list
	    } else {
	      deliverTraceList.value = []
	      uni.showToast({ title: '未查询到物流信息', icon: 'none' })
	    }
	  } catch (error) {
	    console.error('查询物流轨迹失败:', error)
	    uni.showToast({ title: '查询物流信息失败', icon: 'error' })
	    deliverTraceList.value = []
	  } finally {
	    loading.value = false
	  }
	}
	
	

	const closePopup = () => {
		emit('update:showPopup', false)
		emit('close')
	}
</script>

<style scoped lang="less">
	.express-popup {
		width: 670rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 32rpx;
		max-height: 88vh;
		min-height: 50vh;
		display: flex;
		flex-direction: column;
	}

	/* 头部样式 */
	.popup-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;


		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.close-btn {
		position: absolute;
		right: 32rpx;
		top: 40rpx;
	}

	/* 时间线容器 */
	.timeline-container {
		overflow-y: auto;
		max-height: calc(88vh - 120rpx);

		.empty-trace {
			text-align: center;
			padding: 90rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}

	/* 弹框样式调整 */
	:deep(.u-popup) {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	:deep(.u-popup__content) {
		width: 90% !important;
		max-width: 670rpx !important;
		/* 限制最大宽度，避免在宽屏上过宽 */
		margin: 0 auto;
	}
</style>