vist_go_uniApp/pages/order/logistics.vue

<template>
	<view class="container">
		<!-- 物流头部信息 -->
		<view class="logistics-header">

			<view class="flex-items-between">
				<view class="font28">物流公司: {{ logisticsCompany }}</view>
				<view>
					<text class="font28 mar-r-10">单号: {{ logisticsNumber }}</text>
					<text class="copy-btn" @tap="copyContent">复制</text>
				</view>


			</view>
		</view>
		<!-- 物流轨迹列表 -->
		<view class="logistics-trace">
			<uni-steps :options="logisticsList" direction="column" :active="0"></uni-steps>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				logisticsCompany: '顺丰速运',
				logisticsNumber: '',
				logisticsList: [{
						desc: '2025-03-25 10:00:00',
						title: '【深圳转运中心】已发出，下一站【北京转运中心】'
					},
					{
						desc: '2025-03-24 15:30:00',
						title: '【深圳站点】已收件'
					},
					{
						desc: '2025-03-24 13:00:00',
						title: '卖家已发货'
					}
				]
			};
		},
		methods: {
			copyContent() {
				uni.setClipboardData({
					data: this.logisticsNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			}
		},
		onLoad(op) {
			this.logisticsNumber = op.expressCode
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.logistics-header {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.company-logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.company-logo image {
		width: 100%;
		height: 100%;
	}


	.logistics-trace {
		min-height: calc(100vh - 20rpx - 32rpx - 20rpx - 20rpx);
		/* 减去容器内边距、头部内边距、头部底部外边距和自身内边距 */
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.copy-btn {
		background-color: #ffffff;
		border: 1px solid #999999;
		color: #333333;
		padding: 5rpx 10rpx;
		/* 减少按钮的内边距 */
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>