jd_logistics/jd_logistics-app/pages/logistics/index.vue

<template>
	<view class="logistics-container">
		<!-- 头部快递信息 -->
		<view class="logistics-header">
			<image class="logo" src="/static/img/icon-logo-jd.png"></image>
			<view class="company-info">
				<text class="company-name">京东物流</text>
				<view class="tracking-number">
					<text class="number">JDVA40141037033</text>
					<text class="copy-btn" @click="copyTrackingNumber">复制</text>
				</view>
			</view>
		</view>

		<!-- 物流轨迹时间轴 -->
		<view class="timeline-container">
			<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" />
		</view>

	
	</view>
</template>

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

	const scrollHeight = ref(400)

	// 模拟物流轨迹数据
	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
		},
		{
			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
		},
		{
			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
		},
		{
			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
		}
	])

	onMounted(() => {
		// 计算滚动区域高度
		uni.getSystemInfo({
			success: (res) => {
				scrollHeight.value = res.windowHeight - 420 // 减去头部、当前状态、底部等固定高度
			}
		})
	})

	const copyTrackingNumber = () => {
		uni.setClipboardData({
			data: 'JDVA40141037033',
			success: () => {
				uni.showToast({
					title: '已复制运单号',
					icon: 'success'
				})
			}
		})
	}

	const contactCourier = () => {
		uni.showModal({
			title: '联系快递员',
			content: '拨打快递员电话？',
			success: (res) => {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: '请填写快递员电话'
					})
				}
			}
		})
	}

	const viewDetails = () => {
		uni.showToast({
			title: '查看详情',
			icon: 'none'
		})
	}

	const copyAllInfo = () => {
		const allInfo =
			`京东物流\n运单号：JDVA40141037033\n状态：已代收\n快递员：马新宽\n\n物流轨迹：\n2026-01-11 17:32:32 已代收\n2026-01-11 17:32:32 派送中\n2026-01-11 17:32:32 运输中\n2026-01-11 17:32:32 已揽件`

		uni.setClipboardData({
			data: allInfo,
			success: () => {
				uni.showToast({
					title: '已复制全部信息',
					icon: 'success'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.logistics-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 头部样式
	.logistics-header {
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		display: flex;

		.logo {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.company-info {
		margin-left: 20rpx;

		.company-name {
			font-size: 32rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 8rpx;
		}

		.tracking-number {
			height: 44rpx;
			display: flex;
			align-items: center;

			.number {
				height: 44rpx;
				font-weight: 400;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #666;
			}

			.copy-btn {
				height: 44rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #1B64F0;
				margin-left: 8rpx;
				line-height: 44rpx;
				text-align: center;
			}
		}
	}


	// 当前状态样式
	.current-status {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.status-icon {
		width: 80rpx;
		height: 80rpx;
		background: #1aad19;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;

		.icon {
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.status-info {
		flex: 1;

		.status-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}

		.status-desc {
			font-size: 26rpx;
			color: #666;
			display: block;
			margin-bottom: 15rpx;
			line-height: 1.4;
		}

		.courier-info {
			background: #f8f8f8;
			border-radius: 12rpx;
			padding: 15rpx;
			margin-bottom: 15rpx;

			.courier-text {
				font-size: 26rpx;
				color: #333;
				display: block;
				margin-bottom: 5rpx;
			}

			.contact-text {
				font-size: 24rpx;
				color: #1aad19;
			}
		}

		.status-time {
			font-size: 24rpx;
			color: #999;
			display: block;
		}
	}

	// 时间轴容器
	.timeline-container {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

</style>