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 trackList" :key="index" :title="item.title" :desc="item.desc"
					:time="item.time" :is-active="item.isActive" :show-line="index < trackList.length - 1"
					:show-dot-bg="index == 0" />
			</scroll-view>
		</view>
	</u-popup>
</template>

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

	const props = defineProps({
		showPopup: {
			type: Boolean,
			default: false
		},
		expressData: {
			type: Object,
			default: () => ({
				company: '顺丰速运',
				number: 'SF1234567890123',
				status: '已签收'
			})
		}
	})

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

	// 模拟物流轨迹数据，实际应用中应该通过API获取
	const trackList = ref([{
			title: '已代收',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿...】',
			time: '2026-01-11 17:32:32',
			isActive: true
		},
		{
			title: '派送中',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿...】',
			time: '2026-01-11 17:32:32',
			isActive: false
		},
		{
			title: '运输中',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿.北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿..】',
			time: '2026-01-11 17:32:32',
			isActive: false
		},
		{
			title: '',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿.北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿..】',
			time: '2026-01-11 17:32:32',
			isActive: false
		},
		{
			title: '',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿.北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿..】',
			time: '2026-01-11 17:32:32',
			isActive: false
		},
		{
			title: '',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿.北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿北京海淀区北京大学菜鸟驿..】',
			time: '2026-01-11 17:32:32',
			isActive: false
		},
		{
			title: '已揽件',
			desc: '快件已投递至【北京海淀区北京大学菜鸟驿..北京海淀区北京大学菜鸟驿.】',
			time: '2026-01-11 17:32:32',
			isActive: 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;
		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);
	}

	/* 弹框样式调整 */
	: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>