ykz-wx/pages/index/CfLogistics.vue

<template>
	<view class="cf-logistics">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="cf-logistics-top">
				<view class="icon"><text class="iconfont">&#xe674;</text></view>
				{{info.no}}
				<view class="copy-icon"> <text class="iconfont">&#xe620;</text></view>
			</view>
			<view class="logistics-list">
				<view class="logistics-item" :class="item.className" v-for="item in info.statusList" :key="item.id">
					<view class="logistics-item-left">
						<view class="icon" v-if='item.icon'>
							<text class="iconfont">&#xe602;</text>
						</view>
						<view class="icon" :class="item.className" v-else-if="item.className=='is-finish'">
							收
						</view>
						<view class="dot" v-else></view>
						<view class="line"></view>
					</view>
					<view class="logistics-item-right">
						<view class="logistics-item-title" v-if="item.title">{{item.title}}</view>
						<view class="logistics-item-time">{{item.time}}</view>
						<view>{{item.text}}</view>
					</view>
				</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'
	import rest from '@/stores/rest'
	
	import { filterLogisticsTitle } from '@/lib/util'
	import { CfLogisticsVO } from '../../lib/type';
		
	defineProps({
		info: {
			type: Object as PropType<any>,
			default: () => ({}),
		},
	})
	const loaded = ref(false)
	const no = ref('SF145587878799')
	const info = ref({
		no: '',
		statusList: [],
	})
	// const statusList = ref([{
	// 	title: '已签收',
	// 	time: '2024/04/22  12:24',
	// 	text: '您的快件已由本人签收，如有疑问请电联快递员【方金花，电话:13391055998】，感谢您使用顺丰，期待再次为您服务。(主单总件数:1件) ',
	// 	className: 'is-finish',
	// }, {
	// 	icon: '&#xe602;',
	// 	title: '派送中',
	// 	time: '2024/04/22  12:24',
	// }, {
	// 	icon: '&#xe602;',
	// 	title: '运送中',
	// 	time: '2024/04/22  12:24',
	// 	text: '快件交给方金花，正在派送途中(联系电话:13391055998，顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听!)(主单总件数:1件)',
	// }, {
	// 	text: '快件离开 【重庆中转场】，已发往【重庆慈竹店】的路上',
	// 	time: '2024/04/22  12:24',
	// }, {
	// 	text: '快件离开 【重庆中转场】，已发往【重庆慈竹店】的路上',
	// 	time: '2024/04/22  12:24',
	// }, {
	// 	text: '快件离开 【重庆中转场】，已发往【重庆慈竹店】的路上',
	// 	time: '2024/04/22  12:24',
	// }])

	const getInfo = async () => {
		loaded.value = true;
		try {
			let res = await rest.get('/app-api/bmfw/findCfWl',{ptwybh:'2024_1857595040975118338'}) as CfLogisticsVO
			for (let i = 0; i < res.cfList.length; i++) {
				let msgList = JSON.parse(res.cfList[i].msg)
				for (let j = 0; j< msgList.length;j++){
					let listWl = {  time: '',title:'',icon:'',message:'' }
					listWl.time = msgList[j].time2
					listWl.title = filterLogisticsTitle(msgList[j].wlzt)
					listWl.icon = '\ue674'
					listWl.message = msgList[j].context
					info.value.statusList.push(listWl)
				}
				info.value.no = res.cfList[i].ydh
			}
		} catch (e) {
			console.log(e);
		}
		loaded.value = false;
	}

	onMounted(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.cf-logistics {
		background: #fff;
		padding: $uni-spacing-col-s3 $page-row-spacing;
		height: 100%;
		box-sizing: border-box;

		.icon {
			width: 64rpx;
			height: 64rpx;
			background: $uni-bg-icon;
			border-radius: 50%;
			@include flex-center;

			.iconfont {
				background: linear-gradient(180deg, #46ACFF 0%, $uni-color-primary 100%);
				background-clip: text;
				text-fill-color: transparent;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.cf-logistics-top {
			@include flex;
			margin-bottom: 32rpx;

			.icon {
				background: $uni-color-primary-light;
				margin-right: 24rpx;
			}

			.copy-icon {
				margin-left: 16rpx;
			}
		}

		.logistics-list {
			overflow-y: auto;
			flex: 1;

			height: calc(100% - 96rpx);

			.logistics-item {
				color: $uni-text-color-grey;
				display: flex;
				min-height: 140rpx;


				.logistics-item-left {
					@include flex;
					flex-direction: column;
					margin-right: 24rpx;

					.icon {
						.iconfont {
							background: linear-gradient(180deg, #C2CFE7 0%, #899AB9 100%);
							background-clip: text;
							text-fill-color: transparent;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.is-finish {
							background: $uni-color-primary;
							color: #fff;
						}
					}

					.dot {
						width: 24rpx;
						height: 24rpx;
						background: $uni-border-color;
						border-radius: 50%;
						margin: 0 20rpx;
					}

					.line {
						flex: 1;
						// width: 1px;
						border-left: 1px dashed $uni-border-color;
						margin: 12rpx 0;
					}
				}

				.logistics-item-right {
					margin-bottom: 32rpx;
					font-size: 24rpx;
					line-height: $uni-line-height-sm;

					.logistics-item-title {
						font-size: 28rpx;
						line-height: $uni-line-height-base;
						margin-bottom: 8rpx;
					}

					.logistics-item-time {
						margin-bottom: 8rpx;
					}
				}

				&.is-finish {
					.logistics-item-left {
						.line {
							border-left: 1px dashed $uni-color-primary;
						}
					}

					.logistics-item-right {
						color: $uni-text-color;

						.logistics-item-title {
							font-weight: 800;
						}
					}
				}

				&:last-child {
					.logistics-item-left {
						.line {
							display: none;
						}
					}
				}
			}
		}
	}
</style>