zyt/admin/APPOINTMENT_UI_UPDATE.md

预约问诊界面更新说明

更新内容

根据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. 时间段生成

// 生成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. 医生可用号源统计

// 获取医生在指定日期的可用号源总数
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. 响应式布局

.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. 可用时间段接口增强

{
  "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. 收藏医生：支持收藏常用医生快速预约