235 lines
5.2 KiB
Markdown
235 lines
5.2 KiB
Markdown
# 挂号时间段刷新功能说明
|
|
|
|
## 功能概述
|
|
|
|
为预约挂号功能添加了时间段刷新按钮，防止在挂号过程中时间段被其他用户占用的情况。
|
|
|
|
## 实现的功能
|
|
|
|
### 1. 刷新按钮
|
|
|
|
**位置**: 时间段选择区域的右上角
|
|
|
|
**样式**:
|
|
- 主题色按钮
|
|
- 带刷新图标
|
|
- 显示加载状态
|
|
|
|
**触发条件**:
|
|
- 已选择医生
|
|
- 已选择日期
|
|
- 有可用时间段
|
|
|
|
### 2. 刷新逻辑
|
|
|
|
**功能流程**:
|
|
1. 用户点击"刷新"按钮
|
|
2. 显示加载状态
|
|
3. 清空当前选择的时间（临时）
|
|
4. 重新从后端获取最新的时间段数据
|
|
5. 更新时间段列表
|
|
6. 如果之前选择的时间段仍然可用，自动恢复选择
|
|
7. 显示刷新成功提示
|
|
|
|
**代码实现**:
|
|
```typescript
|
|
const handleRefreshSlots = async () => {
|
|
if (!selectedDoctorId.value || !form.date) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
refreshing.value = true
|
|
|
|
// 清空当前选择的时间
|
|
const previousSelection = form.appointmentTime
|
|
form.appointmentTime = ''
|
|
|
|
// 重新加载时间段
|
|
await loadTimeSlots()
|
|
|
|
// 如果之前选择的时间段仍然可用，保持选择
|
|
if (previousSelection) {
|
|
const slot = timeSlots.value.find(s => s.time === previousSelection)
|
|
if (slot && slot.available) {
|
|
form.appointmentTime = previousSelection
|
|
}
|
|
}
|
|
|
|
feedback.msgSuccess('刷新成功')
|
|
} catch (error) {
|
|
console.error('刷新失败:', error)
|
|
feedback.msgError('刷新失败，请重试')
|
|
} finally {
|
|
refreshing.value = false
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. 智能选择保持
|
|
|
|
**特性**:
|
|
- 刷新前记录用户选择的时间段
|
|
- 刷新后检查该时间段是否仍然可用
|
|
- 如果可用，自动恢复选择
|
|
- 如果不可用（已被占用），清空选择
|
|
|
|
**用户体验**:
|
|
- 如果时间段仍可用：用户无需重新选择
|
|
- 如果时间段已被占用：自动清空，提示用户重新选择
|
|
|
|
## 使用场景
|
|
|
|
### 场景1: 正常刷新
|
|
```
|
|
用户选择时间段 → 点击刷新 → 时间段仍可用 → 保持选择 ✓
|
|
```
|
|
|
|
### 场景2: 时间段被占用
|
|
```
|
|
用户选择时间段 → 点击刷新 → 时间段已被占用 → 清空选择 → 提示重新选择
|
|
```
|
|
|
|
### 场景3: 长时间停留
|
|
```
|
|
用户打开挂号页面 → 浏览其他内容 → 返回挂号 → 点击刷新 → 获取最新状态
|
|
```
|
|
|
|
## 界面展示
|
|
|
|
### 时间段标题栏
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ 可预约时段 [刷新] 按钮 │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
### 刷新状态
|
|
```
|
|
加载中: [刷新中...] (按钮禁用，显示loading)
|
|
成功: 提示"刷新成功"
|
|
失败: 提示"刷新失败，请重试"
|
|
```
|
|
|
|
## 技术实现
|
|
|
|
### 1. 状态管理
|
|
```typescript
|
|
const refreshing = ref(false) // 刷新状态
|
|
```
|
|
|
|
### 2. 图标导入
|
|
```typescript
|
|
import { Refresh as RefreshIcon } from '@element-plus/icons-vue'
|
|
```
|
|
|
|
### 3. 样式设计
|
|
```scss
|
|
.time-slots-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 8px 0;
|
|
|
|
.header-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 优势
|
|
|
|
### 1. 防止冲突
|
|
- 实时获取最新数据
|
|
- 避免预约已被占用的时间段
|
|
- 减少预约失败率
|
|
|
|
### 2. 用户体验
|
|
- 一键刷新，操作简单
|
|
- 智能保持选择
|
|
- 清晰的状态反馈
|
|
|
|
### 3. 系统稳定性
|
|
- 错误处理完善
|
|
- 加载状态明确
|
|
- 不影响其他功能
|
|
|
|
## 注意事项
|
|
|
|
### 1. 刷新频率
|
|
- 建议用户在提交前刷新一次
|
|
- 避免频繁刷新增加服务器负担
|
|
- 可考虑添加刷新间隔限制
|
|
|
|
### 2. 网络异常
|
|
- 刷新失败时显示错误提示
|
|
- 保持原有数据不变
|
|
- 用户可以重试
|
|
|
|
### 3. 并发处理
|
|
- 刷新时禁用按钮
|
|
- 防止重复请求
|
|
- 确保数据一致性
|
|
|
|
## 测试建议
|
|
|
|
### 测试1: 正常刷新
|
|
1. 选择医生和日期
|
|
2. 选择一个时间段
|
|
3. 点击刷新按钮
|
|
4. 验证时间段列表更新
|
|
5. 验证选择保持
|
|
|
|
### 测试2: 时间段被占用
|
|
1. 选择一个时间段
|
|
2. 在另一个浏览器/账号中预约该时间段
|
|
3. 点击刷新按钮
|
|
4. 验证该时间段变为"已约"
|
|
5. 验证选择被清空
|
|
|
|
### 测试3: 网络异常
|
|
1. 断开网络
|
|
2. 点击刷新按钮
|
|
3. 验证显示错误提示
|
|
4. 验证原有数据保持不变
|
|
|
|
### 测试4: 快速点击
|
|
1. 快速连续点击刷新按钮
|
|
2. 验证只发送一次请求
|
|
3. 验证按钮在加载时禁用
|
|
|
|
## 未来优化
|
|
|
|
### 1. 自动刷新
|
|
- 可以添加定时自动刷新
|
|
- 例如每30秒自动刷新一次
|
|
- 用户可以关闭自动刷新
|
|
|
|
### 2. 刷新提示
|
|
- 显示上次刷新时间
|
|
- 提示"数据可能已过期，建议刷新"
|
|
- 智能判断是否需要刷新
|
|
|
|
### 3. 实时更新
|
|
- 使用WebSocket实现实时更新
|
|
- 时间段被占用时自动更新
|
|
- 无需手动刷新
|
|
|
|
## 相关文档
|
|
|
|
- `APPOINTMENT_SYSTEM.md` - 预约系统完整文档
|
|
- `APPOINTMENT_QUICK_START.md` - 快速开始指南
|
|
|
|
## 版本信息
|
|
|
|
- 实现时间: 2024-03-06
|
|
- 版本: v1.0
|
|
- 状态: ✅ 已完成
|
|
|
|
---
|
|
|
|
**重要提示**: 建议用户在提交预约前点击刷新按钮，确保获取最新的时间段状态，避免预约失败！
|