ykz-wx/pages/index/CfStatus.vue

<template>
	<view class="cf-status">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="status-item" :class="item.isCur?'is-current':''" v-for="item in statusList" :key="item.id">
				<view class="status-item-left">
					<view class="icon">
						<text class="iconfont">&#xe602;</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="status-item-right">
					<view class="status-item-title">{{item.title}}</view>
					<view>{{item.time}}</view>
				</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'
	// defineProps({
	// 	info: {
	// 		type: Object as PropType<any>,
	// 		default: () => ({}),
	// 	},
	// })
	const loaded = ref(false)
	const statusList = ref([{
		icon: '',
		title: '已签收',
		time: '2024/04/22  12:24',
		isCur: true,
	}, {
		icon: '',
		title: '已快递',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已打包',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已煎煮',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已浸泡',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已调剂',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已确认',
		time: '2024/04/22  12:24',
		isCur: false,
	}, {
		icon: '',
		title: '已接收',
		time: '2024/04/22  12:24',
		isCur: false,
	}])

	const getInfo = async () => {
		loaded.value = true;
		// todo
		loaded.value = false;
	}

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

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

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

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

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


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

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

			.status-item-right {
				.status-item-title {
					font-size: $uni-font-size-lg;
					line-height: $uni-line-height-lg;
					margin-bottom: 8rpx;
				}
			}

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

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

					.status-item-title {
						font-size: 32rpx;
						font-weight: 800;
					}
				}
			}

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