You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
6.9 KiB
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> <span
style="font-size: 30rpx;" v-if=" userInfo.reg_number">卡号:{{userInfo.reg_number}}</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> -->
<view
style="font-size: 26rpx;margin-top: 50rpx;color: #d46767;font-weight: 700; border: 1px solid #83c5c5; padding: 30rpx;border-radius: 20rpx;">
<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" v-if="item.clinic">{{item.clinic}}</view>
<view class="item_k" v-for="(item2,index2) in item.items">
<view class="zhenshiname">{{item2.name}}</view>
<view class="itemdesc">{{item2.desc}}</view>
</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="item_k" v-for="(item2,index2) in item.items">
<view class="zhenshiname">{{item2.name}}</view>
<view class="itemdesc">{{item2.desc}}</view>
</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="item_k" v-for="(item2,index2) in item.items">
<view class="zhenshiname">{{item2.name}}</view>
<view class="itemdesc">{{item2.desc}}</view>
</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="item_k" v-for="(item2,index2) in item.items">
<view class="zhenshiname">{{item2.name}}</view>
<view class="itemdesc">{{item2.desc}}</view>
</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;
}
.item_k {
border-bottom: 1px solid #ddd;
padding: 0rpx 16rpx 16rpx 0rpx;
}
.itemdesc {
font-size: 26rpx;
color: #ff573a;
font-weight: 700;
}
</style>