establish_medical_demo/UPDATE_3S_PROMPT.md

功能更新说明 - 3秒提示功能

更新时间

2026-01-08 16:50

更新内容

在身份证识别成功后，添加3秒倒计时提示功能，提升用户体验。

功能描述

1. 已建档用户

提示内容： ✅ 该用户此前已完成建档，正在读取用户信息...

行为：

• 识别成功后显示提示
• 等待3秒
• 自动进入表单页面，并填充已保存的信息
• 用户可以修改并保存

2. 未建档用户

提示内容： 📝 该用户此前未建档，正在跳转到建档页面...

行为：

• 识别成功后显示提示
• 等待3秒
• 自动进入表单页面，身份证号已填充（置灰）
• 用户需要填写其他信息

技术实现

后端修改

1. 实体类：IdCardRecognitionResult.java

添加 registered 字段：

/**
 * 是否已建档
 */
private Boolean registered;

2. 控制器：PatientController.java

在识别成功后查询建档状态：

if (result.getIsIdCard()) {
    // 识别成功后，检查是否已建档
    boolean isRegistered = patientDataService.existsByIdCardNumber(result.getIdCardNumber());
    result.setRegistered(isRegistered);

    String message = isRegistered ? "身份证识别成功，该用户已建档" : "身份证识别成功，该用户未建档";
    return ApiResponse.success(message, result);
}

前端修改

1. 识别身份证：recognizeIdCard()

if (res.data.code === 200) {
    patientInfo.idCardNumber = res.data.data.idCardNumber;

    // 显示3秒倒计时提示
    const isRegistered = res.data.data.registered;
    const message = isRegistered
        ? '✅ 该用户此前已完成建档，正在读取用户信息...'
        : '📝 该用户此前未建档，正在跳转到建档页面...';

    ElMessage({
        message: message,
        type: 'success',
        duration: 3000,
        showClose: false  // 禁止手动关闭
    });

    // 等待3秒后再进入下一步
    await new Promise(resolve => setTimeout(resolve, 3000));

    await checkPatientExists();
}

2. 手动输入身份证号：useManualIdCard()

// 先查询是否已建档
const isRegistered = await axios.get('/api/patient/exists', {
    params: { idCardNumber: patientInfo.idCardNumber }
}).then(res => res.data.code === 200 ? res.data.data : false);

// 显示3秒倒计时提示
const message = isRegistered
    ? '✅ 该用户此前已完成建档，正在读取用户信息...'
    : '📝 该用户此前未建档，正在跳转到建档页面...';

ElMessage({
    message: message,
    type: 'success',
    duration: 3000,
    showClose: false
});

// 等待3秒后再进入下一步
await new Promise(resolve => setTimeout(resolve, 3000));

用户体验流程

场景一：摄像头拍照识别 + 已建档

1. 用户拍摄身份证照片
2. 点击"识别身份证"按钮
3. 识别成功，显示：✅ 该用户此前已完成建档，正在读取用户信息...
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，信息已填充
6. 用户可以修改并保存

场景二：摄像头拍照识别 + 未建档

1. 用户拍摄身份证照片
2. 点击"识别身份证"按钮
3. 识别成功，显示：📝 该用户此前未建档，正在跳转到建档页面...
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，身份证号已填充
6. 用户填写其他信息并提交

场景三：手动输入 + 已建档

1. 用户手动输入身份证号
2. 点击"使用手动输入的身份证号"按钮
3. 验证通过，显示：✅ 该用户此前已完成建档，正在读取用户信息...
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，信息已填充
6. 用户可以修改并保存

场景四：手动输入 + 未建档

1. 用户手动输入身份证号
2. 点击"使用手动输入的身份证号"按钮
3. 验证通过，显示：📝 该用户此前未建档，正在跳转到建档页面...
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，身份证号已填充
6. 用户填写其他信息并提交

测试步骤

1. 测试已建档场景

# 1. 先创建一个测试用户
# 启动项目后访问 http://localhost:8080
# 手动输入身份证号：110101199001011234
# 填写完整信息并提交

# 2. 测试识别功能
# 使用相同的身份证号进行识别
# 观察提示信息：✅ 该用户此前已完成建档，正在读取用户信息...
# 等待3秒
# 验证表单信息是否正确填充

2. 测试未建档场景

# 1. 使用新的身份证号（如：110101199001011235）
# 进行识别或手动输入

# 2. 观察提示信息：📝 该用户此前未建档，正在跳转到建档页面...
# 等待3秒
# 验证身份证号是否已填充，其他字段为空

关键特性

1. 自动等待3秒：用户无法手动关闭提示，确保提示信息被看到
2. 区分提示：已建档和未建档使用不同的文案和图标
3. 流畅过渡：3秒后自动跳转，无需用户额外操作
4. 双重支持：摄像头识别和手动输入都支持此功能

代码变更清单

后端

• ✅ IdCardRecognitionResult.java - 添加 registered 字段
• ✅ PatientController.java - 识别成功后查询建档状态

前端

• ✅ index.html - recognizeIdCard() 函数添加3秒提示
• ✅ index.html - useManualIdCard() 函数添加3秒提示

注意事项

1. 提示时长：设置为3秒（3000ms），可根据需要调整
2. 不可关闭：showClose: false 确保用户必须等待
3. 异步等待：使用 await new Promise(resolve => setTimeout(resolve, 3000)) 实现精确等待
4. 状态查询：手动输入时需要额外调用 /api/patient/exists 接口

未来优化建议

1. 倒计时显示：可以在提示中显示倒计时数字（3、2、1）
2. 进度条：添加进度条显示剩余时间
3. 跳过按钮：提供"立即跳过"按钮（可选）
4. 动画效果：添加加载动画提升视觉效果

---

更新完成！ 🎉