214 lines
8.3 KiB
Markdown
214 lines
8.3 KiB
Markdown
# 预约问诊界面更新说明
|
||
|
||
## 更新内容
|
||
|
||
根据UI设计图更新了预约问诊组件，使其更符合实际业务需求。
|
||
|
||
## 新增功能
|
||
|
||
### 1. 预约方式选择
|
||
- **选择时段预约有专医生**：先选时间段，系统推荐有空的医生
|
||
- **选择医生预约有专时段**：先选医生，显示该医生的可用时间段
|
||
|
||
### 2. 预约类型
|
||
- 视频问诊（可扩展：图文问诊、电话问诊等）
|
||
|
||
### 3. 患者信息
|
||
- 显示当前患者姓名
|
||
- 显示上次就诊记录
|
||
|
||
### 4. 医生选择优化
|
||
- 单选按钮形式选择医生
|
||
- 每个医生名称后显示可用号源数量标签
|
||
- 有号源：绿色标签显示数字
|
||
- 无号源：灰色标签显示"无"
|
||
|
||
### 5. 日期选择优化
|
||
- 横向按钮式布局
|
||
- 显示未来7天
|
||
- 格式：02月26日 (四)
|
||
- 选中状态：蓝色按钮
|
||
|
||
### 6. 时间段显示优化
|
||
- 4列网格布局
|
||
- 每个时间段包含：
|
||
- 时间（如：09:00-09:30）
|
||
- 可用号源数量标签
|
||
- 状态样式：
|
||
- 可预约：白色背景 + 蓝色数字标签
|
||
- 不可预约：灰色背景 + 灰色"无"标签
|
||
- 已选择：蓝色背景 + 白色文字
|
||
|
||
## 界面布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 预约问诊 [X] │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ 上次就诊: 无就诊记录 │
|
||
│ │
|
||
│ 预约方式: ○ 选择时段预约有专医生 │
|
||
│ ● 选择医生预约有专时段 │
|
||
│ │
|
||
│ 预约类型: ● 视频问诊 │
|
||
│ │
|
||
│ 选择患者: ● 刘炳希 │
|
||
│ │
|
||
│ 预约医生: ● 樊平 [7] ○ 樊雪芹 [7] ○ 刘文英 [7] │
|
||
│ ○ 王西诗 [7] ○ 吉红梅 [7] ○ 李世伟 │
|
||
│ ○ 李新星 [7] ○ 喻小勇 │
|
||
│ │
|
||
│ 预约时间: │
|
||
│ [02月26日(四)] [02月27日(五)] [02月28日(六)] │
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │09:00-09:30│ │09:30-10:00│ │10:00-10:30│ │10:30-11:00│ │
|
||
│ │ 无 │ │ 无 │ │ 无 │ │ 无 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │13:00-13:30│ │13:30-14:00│ │14:00-14:30│ │14:30-15:00│ │
|
||
│ │ 无 │ │ 无 │ │ 无 │ │ 无 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │15:00-15:30│ │15:30-16:00│ │16:00-16:30│ │16:30-17:00│ │
|
||
│ │ 无 │ │ 无 │ │ 无 │ │ 无 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │17:00-17:30│ │17:30-18:00│ │18:00-18:30│ │
|
||
│ │ 无 │ │ 无 │ │ 无 │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │19:00-19:30│ │19:30-20:00│ │20:00-20:30│ │
|
||
│ │ 无 │ │ 无 │ │ 6 │ ← 选中 │
|
||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ 备注: _______________________________________________ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [取消] [确定] │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 技术实现要点
|
||
|
||
### 1. 时间段生成
|
||
```typescript
|
||
// 生成30分钟间隔的时间段
|
||
const generateTimeSlots = () => {
|
||
const slots = []
|
||
// 上午: 09:00-12:00
|
||
for (let hour = 9; hour < 12; hour++) {
|
||
for (let minute = 0; minute < 60; minute += 30) {
|
||
slots.push({
|
||
time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
|
||
period: 'morning'
|
||
})
|
||
}
|
||
}
|
||
// 下午: 13:00-20:30
|
||
for (let hour = 13; hour <= 20; hour++) {
|
||
for (let minute = 0; minute < 60; minute += 30) {
|
||
if (hour === 20 && minute > 30) break
|
||
slots.push({
|
||
time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
|
||
period: 'afternoon'
|
||
})
|
||
}
|
||
}
|
||
return slots
|
||
}
|
||
```
|
||
|
||
### 2. 医生可用号源统计
|
||
```typescript
|
||
// 获取医生在指定日期的可用号源总数
|
||
const getDoctorAvailability = async (doctorId: number, date: string) => {
|
||
const morningSlots = await getAvailableSlots({
|
||
doctor_id: doctorId,
|
||
date: date,
|
||
period: 'morning'
|
||
})
|
||
|
||
const afternoonSlots = await getAvailableSlots({
|
||
doctor_id: doctorId,
|
||
date: date,
|
||
period: 'afternoon'
|
||
})
|
||
|
||
const totalAvailable = [
|
||
...(morningSlots?.slots || []),
|
||
...(afternoonSlots?.slots || [])
|
||
].filter(slot => slot.available && slot.quota > 0).length
|
||
|
||
return totalAvailable
|
||
}
|
||
```
|
||
|
||
### 3. 响应式布局
|
||
```scss
|
||
.time-slots-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.time-slots-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
```
|
||
|
||
## 后端API需要返回的数据
|
||
|
||
### 1. 可用时间段接口增强
|
||
```json
|
||
{
|
||
"slots": [
|
||
{
|
||
"time": "09:00",
|
||
"available": true,
|
||
"quota": 5, // 剩余号源数
|
||
"total": 10 // 总号源数
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 2. 医生可用号源统计接口（新增）
|
||
```
|
||
GET /doctor.appointment/doctorAvailability
|
||
参数:
|
||
{
|
||
"doctor_id": 1,
|
||
"date": "2024-02-26"
|
||
}
|
||
|
||
返回:
|
||
{
|
||
"available_count": 7, // 可用号源总数
|
||
"total_count": 20 // 总号源数
|
||
}
|
||
```
|
||
|
||
## 用户体验优化
|
||
|
||
1. **加载状态**：在获取数据时显示加载动画
|
||
2. **空状态提示**：当没有可用时间段时显示友好提示
|
||
3. **实时更新**：选择医生或日期后立即加载时间段
|
||
4. **视觉反馈**：
|
||
- 可点击元素有hover效果
|
||
- 选中状态明显区分
|
||
- 不可用状态灰色显示
|
||
5. **错误处理**：网络错误时显示错误提示
|
||
|
||
## 扩展建议
|
||
|
||
1. **智能推荐**：根据患者历史就诊记录推荐医生
|
||
2. **快速预约**：一键预约最近可用时间
|
||
3. **批量查看**：同时查看多个医生的可用时间
|
||
4. **日历视图**：提供月历视图方便选择日期
|
||
5. **收藏医生**：支持收藏常用医生快速预约
|