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 dataList" :key="item.id">
				<view class="status-item-left">
					<view class="icon">
						<text class="iconfont">{{ item.icon }}</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'
	import rest from '@/stores/rest'
	
	import {
		formatDate,
		filterStateTitle ,
		filterStateIcon,
		} from '@/lib/util'
	import { CfStatusVO } from '../../lib/type';
		
	defineProps({
		info: {
			type: Object as PropType<any>,
			default: () => ({}),
		},
	})
	const loaded = ref(false)
	const dataList = ref([])

	const getInfo = async () => {
		loaded.value = true;
		try {
			let statusRes = await rest.get('/app-api/bmfw/findCfStatus',{ptwybh:'2024_1857595040975118338'}) as CfStatusVO
			let res = statusRes.statusList
			for (let i = 0; i < res.length; i++) {
				let cflist = { time: '',title:'',icon:'',message:'',createTime:'',isCur: false }
				if (res[i].prescriptionOperationType != '22'){
					cflist.time = formatDate(res[i].createTime,'{y}-{m}-{d} {h}:{i}')
					cflist.title = filterStateTitle(res[i].prescriptionOperationType)
					cflist.icon = filterStateIcon(res[i].prescriptionOperationType)
					cflist.createTime = res[i].createTime
					dataList.value.push(cflist)
				}
			}
			dataList.value.sort((a, b) => b.createTime - a.createTime)
			if (dataList.value.length > 0) { 
				dataList.value[0].isCur = true
			}
		} catch (e) {
			console.log(e);
		}
		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%, $uni-color-primary 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>