mall-front-app/pages/order/express/log.vue

<!-- 物流追踪 -->
<template>
	<s-layout title="物流追踪">
		<view class="log-wrap">
			<!-- 商品信息 -->
			<view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
				<uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
					<swiper class="swiper-box">
						<swiper-item v-for="(item, index) in goodsImages" :key="index">
							<view class="image-container">
								<image class="log-card-img" mode="aspectFill" :src="sheep.$url.static(item.image)" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="log-card-msg">
					<!-- TODO 非繁人：优化点：展示状态 -->
					<!--          <view class="ss-flex ss-m-b-8">-->
					<!--            <view>物流状态：</view>-->
					<!--            <view class="warning-color">{{ state.info.status_text }}</view>-->
					<!--          </view>-->
					<view class="ss-m-b-16 TrackingNumber">快递单号：{{ state.info.logisticsNo }}</view>
					<view class="ss-m-b-16">快递公司：{{ state.info.logisticsName }}</view>
					<view>
						发货时间：{{ sheep.$helper.timeFormat(state.info.deliveryTime, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
			</view>

			<!-- 物流轨迹 -->
			<view class="log-content ss-m-20 ss-r-10">
				<view class="log-content-box ss-flex" v-for="(item, index) in state.tracks" :key="item.title">
					<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
						<text class="cicon-title" />
						<view v-if="state.tracks.length - 1 !== index" class="line" />
					</view>
					<view class="log-content-msg">
						<!-- TODO 非繁人：优化点：展示状态 -->
						<!--            <view class="log-msg-title ss-m-b-20">-->
						<!--              {{ item.status_text }}-->
						<!--            </view>-->
						<view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
						<view class="log-msg-date ss-m-b-40">
							{{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import OrderApi from '@/sheep/api/trade/order';

	const state = reactive({
		info: [],
		tracks: [],
	});

	const goodsImages = computed(() => {
		let array = [];
		if (state.info.items) {
			state.info.items.forEach((item) => {
				array.push({
					image: item.picUrl,
				});
			});
		}
		return array;
	});

	async function getExpressDetail(id) {
		const {
			data
		} = await OrderApi.getOrderExpressTrackList(id);
		state.tracks = data.reverse();
	}

	async function getOrderDetail(id) {
		const {
			data
		} = await OrderApi.getOrder(id)
		state.info = data;
	}

	onLoad((options) => {
		getExpressDetail(options.id);
		getOrderDetail(options.id);
	});
</script>

<style lang="scss" scoped>
	// .swiper-box {
	//   width: 200rpx;
	//   height: 200rpx;
	// }

	.log-card {
		border-top: 2rpx solid rgba(#dfdfdf, 0.5);
		padding: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: stretch;

		.uni-swiper__warp {
			border-radius: 8rpx;
			margin-right: 16rpx;
			height: 156rpx;
			border: 2rpx solid #f6f6f6;
		}

		.image-container {
			width: 100%;
			/* 容器宽度100% */
			position: relative;
			/* 相对定位 */
			overflow: hidden;
			/* 隐藏超出部分 */
			padding-top: 56.25%;
			/* 9 / 16 = 0.5625, 即56.25% */
		}

		.log-card-img {
			position: absolute;
			/* 绝对定位 */
			top: 0;
			left: 0;
			width: 100%;
			/* 图片宽度100% */
			height: 100%;
			/* 高度自动调整 */
			object-fit: cover;
			/* 覆盖填充方式，保持宽高比 */
		}

		uni-image>div {
			background-size: contain;
			background-position: center;
			
		}
		uni-swiper-item{
			display: flex;
			align-items: center;
		}
		.log-card-msg {
			// flex:2;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			width: calc(100% - 200rpx);
		
			.TrackingNumber {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.warning-color {
				color: #999;
			}
		}
	}

	.log-content {
		padding: 34rpx 20rpx 0rpx 20rpx;
		background: #fff;

		.log-content-box {
			align-items: stretch;
		}

		.log-icon {
			height: inherit;

			.cicon-title {
				color: #ccc;
				font-size: 40rpx;
			}

			.activity-color {
				color: #f0c785;
				font-size: 40rpx;
			}

			.info-color {
				color: #ccc;
				font-size: 40rpx;
			}

			.line {
				width: 1px;
				height: 100%;
				background: #d8d8d8;
			}
		}

		.log-content-msg {
			.log-msg-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.log-msg-desc {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}

			.log-msg-date {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>