最新版公众号前端
This commit is contained in:
sangchengzhi
387
src/views/Member_pdjh.vue
Normal file
387
src/views/Member_pdjh.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="queue-page">
|
||||
<nav-bar/>
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
class="queue-container"
|
||||
>
|
||||
<!-- 空状态 -->
|
||||
<div class="custom-empty" v-if="!loading && list.length === 0">
|
||||
<div class="empty-text">暂无挂号排队信息</div>
|
||||
</div>
|
||||
|
||||
<!-- 排队记录卡片 -->
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="item.ID"
|
||||
class="queue-card"
|
||||
>
|
||||
<!-- 状态与序号区域 -->
|
||||
<div class="status-bar">
|
||||
<!-- 就诊状态 -->
|
||||
<div class="status-badge" :class="getStatusClass(item.DiagnosticStatus)">
|
||||
<van-icon :name="getStatusIcon(item.DiagnosticStatus)" class="status-icon" />
|
||||
<span class="status-text">{{ getStatusText(item.DiagnosticStatus) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 挂号序号 -->
|
||||
<div class="serial-number">
|
||||
<span class="serial-label">挂号序号：</span>
|
||||
<span class="serial-value">{{ item.ADiagnosticNO }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心信息区域 -->
|
||||
<div class="core-info">
|
||||
<div class="dept-doctor">
|
||||
<div class="info-item">
|
||||
<van-icon name="wap-home-o" class="info-icon" />
|
||||
<span class="info-label">挂号科室：</span>
|
||||
<span class="info-value">{{ item.RoomName || item.DepartmentName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="user-o" class="info-icon" />
|
||||
<span class="info-label">挂号医生：</span>
|
||||
<span class="info-value">{{ item.DoctorName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="service-o" class="info-icon" />
|
||||
<span class="info-label">呼叫诊室：</span>
|
||||
<span class="info-value">{{ item.CallRoomName || '暂无呼叫' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间信息区域 -->
|
||||
<div class="time-info">
|
||||
<div class="time-item">
|
||||
<van-icon name="clock-o" class="time-icon" />
|
||||
<span class="time-label">签到时间：</span>
|
||||
<span class="time-value">{{ item.DiagnosticOrderTime }}</span>
|
||||
</div>
|
||||
|
||||
<div class="time-item" v-if="item.CallTime">
|
||||
<van-icon name="volume-o" class="time-icon" />
|
||||
<span class="time-label">呼叫时间：</span>
|
||||
<span class="time-value">{{ item.CallTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 正在呼叫提示（仅状态为2时显示） -->
|
||||
<div v-if="item.DiagnosticStatus === '2'" class="calling-notice">
|
||||
<van-icon name="warning" class="notice-icon" />
|
||||
<span class="notice-text">正在呼叫您的序号，请尽快前往{{ item.CallRoomName }}就诊</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getQueuing } from "@/request/api.js";
|
||||
import { Empty, Icon } from "vant";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Empty.name]: Empty,
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: [],
|
||||
patientId: '',
|
||||
patientName: '',
|
||||
intervalId: null // 添加定时器ID
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.patientId = this.$route.query.patientId;
|
||||
this.patientName = this.$route.query.patientName;
|
||||
this.onLoad();
|
||||
|
||||
// 设置每20秒执行一次onLoad方法
|
||||
this.intervalId = setInterval(() => {
|
||||
this.onLoad();
|
||||
}, 20000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清除定时器
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
this.loading = true;
|
||||
const params = {
|
||||
PatName: this.patientName,
|
||||
PatID: this.patientId
|
||||
};
|
||||
|
||||
getQueuing(params).then(res => {
|
||||
this.loading = false;
|
||||
console.log(res.ResultCode);
|
||||
if (res.ResultCode === "0") {
|
||||
this.list = res.DiagnosticInfos || [];
|
||||
// 按签到时间倒序排列（最新的在前面）
|
||||
this.list.sort((a, b) => {
|
||||
return new Date(`2025-10-29 ${b.DiagnosticOrderTime}`) - new Date(`2025-10-29 ${a.DiagnosticOrderTime}`);
|
||||
});
|
||||
this.finished = true;
|
||||
} else {
|
||||
// 移除 Toast 显示，只在控制台记录错误
|
||||
console.log('获取排队信息失败:', res.ResultMsg);
|
||||
this.finished = true;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取排队信息失败:', err);
|
||||
// Toast('获取信息失败，请重试');
|
||||
this.loading = false;
|
||||
this.finished = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 就诊状态文本映射
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
'1': '候诊中',
|
||||
'2': '正在呼叫',
|
||||
'3': '候诊中',
|
||||
'4': '已就诊',
|
||||
'5': '已过号',
|
||||
'6': '已挂起'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
},
|
||||
|
||||
// 就诊状态图标映射
|
||||
getStatusIcon(status) {
|
||||
const iconMap = {
|
||||
'1': 'friends-o', // 候诊-等待图标
|
||||
'2': 'volume-o', // 呼叫-音量图标
|
||||
'3': 'underway-o', // 候诊-等待图标
|
||||
'4': 'passed',// 已就诊-对勾图标
|
||||
'5': 'close',// 过号-叉号图标
|
||||
'6': 'pause-circle-o' // 挂起-暂停图标
|
||||
};
|
||||
return iconMap[status] || 'clock-o';
|
||||
},
|
||||
|
||||
// 就诊状态样式类（颜色区分）
|
||||
getStatusClass(status) {
|
||||
const classMap = {
|
||||
'1': 'status-waiting', // 候诊-蓝色
|
||||
'2': 'status-calling', // 呼叫-橙色
|
||||
'3': 'status-waiting', // 候诊-蓝色
|
||||
'4': 'status-completed', // 已就诊-绿色
|
||||
'5': 'status-missed', // 过号-红色
|
||||
'6': 'status-suspended' // 挂起-灰色
|
||||
};
|
||||
return classMap[status] || 'status-unknown';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-empty {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
|
||||
.empty-text {
|
||||
font-size: 0.32rem;
|
||||
color: #86909c;
|
||||
}
|
||||
}
|
||||
.queue-page {
|
||||
background-color: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
padding-top: 1rem; // 适配导航栏高度
|
||||
}
|
||||
|
||||
.queue-container {
|
||||
padding: 0.2rem 0.3rem;
|
||||
}
|
||||
|
||||
.empty-view {
|
||||
padding: 3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 排队记录卡片
|
||||
.queue-card {
|
||||
background-color: #fff;
|
||||
border-radius: 0.15rem;
|
||||
padding: 0.35rem;
|
||||
margin-bottom: 0.25rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 状态与序号区域
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
// 状态徽章
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.5rem;
|
||||
font-weight: 500;
|
||||
|
||||
.status-icon {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 状态颜色样式
|
||||
.status-waiting {
|
||||
background-color: #e8f3ff;
|
||||
color: #4285f4;
|
||||
}
|
||||
.status-calling {
|
||||
background-color: #fff8e6;
|
||||
color: #ff7d00;
|
||||
animation: pulse 1.5s infinite; // 呼吸动画强调
|
||||
}
|
||||
.status-completed {
|
||||
background-color: #e6f7ee;
|
||||
color: #00b42a;
|
||||
}
|
||||
.status-missed {
|
||||
background-color: #fee;
|
||||
color: #f53f3f;
|
||||
}
|
||||
.status-suspended {
|
||||
background-color: #f2f3f5;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
// 挂号序号
|
||||
.serial-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
|
||||
.serial-label {
|
||||
font-size: 0.32rem;
|
||||
color: #86909c;
|
||||
}
|
||||
.serial-value {
|
||||
font-size: 0.5rem;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// 核心信息区域
|
||||
.core-info {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.dept-doctor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
|
||||
.info-icon {
|
||||
font-size: 0.4rem;
|
||||
color: #4285f4;
|
||||
width: 0.4rem; // 固定宽度，保证对齐
|
||||
}
|
||||
.info-label {
|
||||
font-size: 0.4rem;
|
||||
color: #86909c;
|
||||
width: 2.2rem; // 固定宽度，保证内容对齐
|
||||
}
|
||||
.info-value {
|
||||
font-size: 0.4rem;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间信息区域
|
||||
.time-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding-top: 0.2rem;
|
||||
border-top: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.time-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
|
||||
.time-icon {
|
||||
font-size: 0.4rem;
|
||||
color: #86909c;
|
||||
width: 0.4rem;
|
||||
}
|
||||
.time-label {
|
||||
font-size: 0.4rem;
|
||||
color: #86909c;
|
||||
width: 2.2rem;
|
||||
}
|
||||
.time-value {
|
||||
font-size: 0.4rem;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 正在呼叫提示
|
||||
.calling-notice {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.2rem;
|
||||
background-color: #fff8e6;
|
||||
border-left: 3px solid #ff7d00;
|
||||
border-radius: 0.05rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
|
||||
.notice-icon {
|
||||
font-size: 0.36rem;
|
||||
color: #ff7d00;
|
||||
}
|
||||
.notice-text {
|
||||
font-size: 0.32rem;
|
||||
color: #ff7d00;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user