changchuntongyuan_fenzhen/tongyuan_fz_h5/pages/fenzhen/fenzhen_paidui.vue

<template>
	<view class="fenzhen_info" v-if="userInfo">
		 <view class="header">
			 <view class="name">{{userInfo.name}} <span style="font-size: 30rpx;"> {{userInfo.sex==1?'男':userInfo.sex==2?'女':''}} | {{userInfo.age}}岁</span></view>
		<!-- 	 <view class="riqi">体检套餐：{{userInfo.comboName}}</view>
			 <view class="riqi">体检日期：{{userInfo.appointment_date}}</view> -->
		 </view>
		  
			<view class="tiaoma" v-if="userInfo.reg_number">
				<w-barcode :options="{
				  width:600,
				  height:160,
				  code: userInfo.reg_number?userInfo.reg_number:'' ,
				}"></w-barcode>
				<view v-if=" userInfo.reg_number">卡号：{{userInfo.reg_number}}</view>
			</view>
		 
		<view style="font-size: 26rpx;margin-top: 50rpx;color: #d46767;font-weight: 700;">
			<view v-for="(item,index) in tip">
				{{item}}
			</view>
		</view>
		 <view class="xia">
			 <view class="xia_row1">
				  <view class="xia_title">体检诊室 <span style="font-size: 30rpx;color: #7D7D7D;">共 <span class="lanzi">{{keshi_ids.length}}</span> 个</span></view>
				  <view style="color: #7D7D7D;">
					已检查 <span class="lanzi">{{wancheng_count}}</span> 个
				  </view>
			 </view>
			 <view v-for="(item,index) in fenzhen_list" :key="index">
				 <view class="zhuangtai"  v-if="item.status==1">
				 	<view class="zhuangtai_left bakcolor3" >待 排 队</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.item}}</view>
				 		</view>
				 	</view>
				 </view>
				 <view class="zhuangtai" v-if="item.status==2">
				 	<view class="zhuangtai_left bakcolor2" >队 列 中</view>
				 	<view class="zhuangtai_right ">
						
						
				 		<view>
							
				 			<view class="keshiname">{{item.clinic}}</view>
							
				 			<view class="zhenshiname">{{item.item}}</view>
							<view  style="display: flex; justify-content: end;">
								<view style="color: #7D7D7D;"> <span class="shuzi">{{item.wait}}</span>人排队</view>
								<view style="color: #7D7D7D;margin-left: 20rpx;"  > 预计等待<span  class="shuzi">{{item.time}}</span>分钟</view>
							</view>
				 		</view>
						
				 	</view>
				 </view>
				 <view class="zhuangtai"  v-if="item.status==3">
				 	<view class="zhuangtai_left bakcolor1">就 诊 中</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.clinic}}</view>
				 			<view class="zhenshiname">{{item.item}}</view>
				 		</view>
				 		<!-- <view style="color: #7D7D7D;">序号{{item.wait_count}}</view> -->
				 	</view>
				 </view>
				 <view class="zhuangtai"  v-if="item.status==4">
				 	<view class="zhuangtai_left bakcolor1">已 完 成</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.clinic}}</view>
				 			<view class="zhenshiname">{{item.item}}</view>
				 		</view>
				 		<!-- <view style="color: #7D7D7D;"> {{item.wait_count}}</view> -->
				 	</view>
				 </view>
				
			 </view>
			
		 </view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted, nextTick,onUnmounted
	} from 'vue'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import {
		FenZhenGetTiJianLine, 
	} from '@/api'

	
	let id_number=ref('');
	let userInfo=ref('');
	let fenzhen_list=ref([]);
	let wancheng_count=ref(0);
	let keshi_ids=ref([])
	let hospital=ref('')
	let refreshInterval = ref(null) // 用于保存定时器引用
	let tip=ref([]);
	const ChaXunFenZhenInfo= async(info)=>{
 wancheng_count.value=0;
		FenZhenGetTiJianLine({
			id_number: id_number.value
		}).then(res => {
		 
			if (res.status) {
				fenzhen_list.value = res.data.list
				userInfo.value=res.data.info
				tip.value=res.data.tip.split('\r\n');
				fenzhen_list.value.forEach(function(item,index){
					if(item.status==4){
						wancheng_count.value++
					}
					if (keshi_ids.value.includes(item.clinic)) {
						
					}else{
						keshi_ids.value.push(item.clinic)
					}
				})
			}
		
		})
	}
	// 开始定时刷新
	const startAutoRefresh = () => {
		if (refreshInterval.value) clearInterval(refreshInterval.value) // 防止重复启动
		refreshInterval.value = setInterval(() => {
			ChaXunFenZhenInfo()
		}, 10000) // 每5秒刷新一次
	}
 
	onMounted(()=>{		
 
	})
	onLoad((option)=>{
		
		id_number.value=option.id_number
	 
		console.log(option)
			ChaXunFenZhenInfo()
			startAutoRefresh()
	
	})
	// 组件卸载时清除定时器
	onUnmounted(() => {
		if (refreshInterval.value) {
			clearInterval(refreshInterval.value)
			refreshInterval.value = null
		}
	})
</script>

<style scoped>
	.fenzhen_info{
		padding: 30rpx;
	}
	.header{
		background-color:#30c5be ;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		color:#fff;
	 
	}
	.shuzi{
		font-weight: 700;
		color:#ff5500;
	}
	.name{
		font-size: 50rpx;
	}
	.riqi{
		font-size: 26rpx;
		margin-top: 18rpx;
	}
	.tiaoma{
		border-radius: 20rpx;
		 
		padding: 60rpx 40rpx 30rpx 40rpx;
		box-shadow: 0px 5px 5px #ccc;
	}
	.xia{
		padding: 40rpx 0;
	}
	.xia_title{
		font-size: #222222;
		font-size: 40rpx;
	}
	.xia_row1{
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.zhuangtai{
		display: flex;
		  box-shadow: 0px 5px 5px #ccc;
		   border-radius: 20rpx ;
		   border: 1px solid #e2e2e2;
		   margin-top: 20rpx;
	}
	.zhuangtai_left{
		
		 color:#fff;
		padding: 30rpx 20rpx;
	  text-align: center; /* 文字居中对齐 */
	     white-space: nowrap; /* 防止文字换行 */
		 writing-mode:tb-rl;
		 font-size: 30rpx ;
		 border-radius: 20rpx 0 0 20rpx;
		
	}
	.bakcolor1{
		background-color: #fc924a;
	}
	.bakcolor2{
		background-color: #01cfde ;
	}
	.bakcolor3{
		background-color: #c6c6c6;
	}
	.lanzi{
		color:#01cfde;
	}
	
	.zhuangtai_right{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 40rpx;
	}
	.keshiname{
		font-weight: 500;
		font-size: 40rpx;
		color: #222222;
	}
	.zhenshiname{
		font-weight: 500;
		font-size: 30rpx;
		color: #6E6E6E;
		margin-top: 12rpx;
	}
	.tiaoma{
		 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tiaoma2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 15rpx;
	}
</style>