establish_medical_demo/UPDATE_CONFIRM_STEP.md

流程优化更新 - 身份证号确认步骤

更新时间

2026-01-08 17:00

更新说明

根据用户反馈，优化了身份证识别流程，增加了身份证号确认步骤，允许用户在查询建档状态前核对和修改身份证号。

---

🔄 流程变更

之前的流程

1. 识别身份证（拍照或手动输入）
2. 立即查询是否已建档
3. 显示3秒提示
4. 跳转到表单页面

现在的流程

1. 识别身份证（拍照或手动输入）
2. 显示身份证号确认框，允许用户修改
3. 用户点击"确认身份证号，继续建档"
4. 查询是否已建档
5. 显示3秒提示
6. 跳转到表单页面

---

✨ 新增功能

1. 身份证号确认界面

识别成功后，显示一个醒目的确认框：

<!-- 识别结果确认区域 -->
<div v-if="recognizedIdCard" class="info-card">
    <h3>📋 识别结果</h3>
    <p>请核对并确认身份证号：</p>
    <el-input
        v-model="confirmedIdCard"
        placeholder="请输入或修改身份证号"
        maxlength="18"
        show-word-limit
    ></el-input>
    <el-button @click="confirmIdCard" :loading="checking">
        确认身份证号，继续建档
    </el-button>
    <el-button @click="clearRecognition">
        重新识别
    </el-button>
</div>

特点：

• 🎨 蓝色边框，醒目显示
• ✏️ 可编辑的输入框
• ✅ 确认按钮（带加载状态）
• 🔄 重新识别按钮

2. 新增状态变量

const recognizedIdCard = ref('');  // 识别到的身份证号
const confirmedIdCard = ref('');    // 用户确认/修改后的身份证号
const checking = ref(false);         // 查询建档状态时的加载状态

3. 新增函数

confirmIdCard()

确认身份证号并查询建档状态

const confirmIdCard = async () => {
    // 1. 验证身份证号格式
    const idCardRegex = /^\d{17}[\dXx]$/;
    if (!idCardRegex.test(confirmedIdCard.value)) {
        ElMessage.error('身份证号格式不正确');
        return;
    }

    checking.value = true;
    patientInfo.idCardNumber = confirmedIdCard.value.toUpperCase();

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

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

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

    // 4. 等待3秒
    await new Promise(resolve => setTimeout(resolve, 3000));

    // 5. 查询患者信息并跳转
    await checkPatientExists();
};

clearRecognition()

清除识别结果，重新识别

const clearRecognition = () => {
    recognizedIdCard.value = '';
    confirmedIdCard.value = '';
    capturedImage.value = null;
};

---

🎯 用户体验流程

场景1：摄像头识别 + 确认

1. 用户拍摄身份证照片
2. 点击"识别身份证"
3. 识别成功，显示确认框
   • 身份证号自动填充到输入框
   • 用户可以核对并修改
4. 用户点击"确认身份证号，继续建档"
5. 查询建档状态
6. 显示3秒提示（已建档/未建档）
7. 自动跳转到表单页面

场景2：手动输入 + 确认

1. 用户手动输入身份证号
2. 点击"使用手动输入的身份证号"
3. 输入的身份证号填充到确认框
   • 用户可以再次修改
4. 用户点击"确认身份证号，继续建档"
5. 查询建档状态
6. 显示3秒提示（已建档/未建档）
7. 自动跳转到表单页面

场景3：识别错误，重新识别

1. 用户识别身份证
2. 显示确认框，发现识别错误
3. 点击"重新识别"按钮
4. 清空当前识别结果
5. 可以重新拍照或手动输入

---

📸 界面展示

确认框样式

┌─────────────────────────────────────┐
│ 📋 识别结果                         │
├─────────────────────────────────────┤
│ 请核对并确认身份证号：              │
│ ┌─────────────────────────────────┐ │
│ │ 110101199001011234         18/18│ │
│ └─────────────────────────────────┘ │
│                                     │
│    [确认身份证号，继续建档]         │
│         [重新识别]                  │
└─────────────────────────────────────┘

样式特点：

• 蓝色左边框（#409eff）
• 浅蓝色背景（#e8f4fd）
• 居中按钮布局
• 清晰的标题和提示

---

🔧 技术实现

1. 状态管理

// 识别状态
recognizedIdCard.value = '110101199001011234';  // AI识别的原始结果
confirmedIdCard.value = '110101199001011234';    // 用户确认/修改后的结果

// 清除状态
clearRecognition();  // 重置所有识别相关状态

2. 条件渲染

<!-- 显示确认框的条件 -->
<div v-if="recognizedIdCard" class="info-card">
    <!-- 确认框内容 -->
</div>

<!-- 隐藏手动输入的条件 -->
<div class="manual-input" v-if="!recognizedIdCard">
    <!-- 手动输入框 -->
</div>

3. 数据流转

拍照识别 → recognizedIdCard → confirmedIdCard → 用户修改 → confirmIdCard() → 查询建档 → 3秒提示 → 跳转表单

手动输入 → manualIdCard → recognizedIdCard → confirmedIdCard → 用户修改 → confirmIdCard() → 查询建档 → 3秒提示 → 跳转表单

---

🎨 样式优化

确认框样式

.info-card {
    background: #e8f4fd;
    border-left: 4px solid #409eff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.info-card h3 {
    color: #333;
    margin-bottom: 15px;
}

按钮布局

<div style="text-align: center;">
    <el-button type="primary" @click="confirmIdCard" :loading="checking">
        <el-icon><Check /></el-icon>
        确认身份证号，继续建档
    </el-button>
    <el-button @click="clearRecognition" style="margin-left: 10px;">
        <el-icon><Close /></el-icon>
        重新识别
    </el-button>
</div>

---

✅ 测试要点

1. 摄像头识别测试

• 识别成功后显示确认框
• 身份证号自动填充到输入框
• 可以修改身份证号
• 点击确认按钮后显示加载状态
• 查询建档状态并显示3秒提示
• 自动跳转到表单页面

2. 手动输入测试

• 手动输入后显示确认框
• 身份证号填充到确认框
• 可以再次修改
• 手动输入框被清空
• 点击确认后正常流转

3. 重新识别测试

• 点击"重新识别"清空确认框
• 可以重新拍照
• 可以重新手动输入
• 状态完全重置

4. 边界情况测试

• 识别错误的身份证号，用户修改后确认
• 格式不正确时显示错误提示
• 网络错误时的处理
• 快速点击按钮的处理

---

🚀 使用示例

测试步骤

1. 启动项目

   ./start.sh  # Mac/Linux
   start.bat   # Windows
   

2. 访问系统

   http://localhost:8080
   

3. 测试摄像头识别

   • 点击"开始建档"
   • 点击"打开摄像头" → "拍摄身份证" → "识别身份证"
   • 观察确认框显示
   • 修改身份证号（测试可编辑性）
   • 点击"确认身份证号，继续建档"
   • 观察加载状态和3秒提示
   • 验证跳转到表单页面

4. 测试手动输入

   • 点击"开始建档"
   • 在手动输入框输入身份证号
   • 点击"使用手动输入的身份证号"
   • 观察确认框显示
   • 可以再次修改
   • 点击确认继续

---

📝 注意事项

1. 格式验证：在确认时再次验证身份证号格式
2. 大小写转换：自动将 x 转换为大写 X
3. 加载状态：查询时显示 loading，防止重复点击
4. 错误处理：网络错误时显示友好提示
5. 状态重置：返回首页时清空所有状态

---

🎉 更新完成

新的流程更加用户友好：

• ✅ 允许用户核对身份证号
• ✅ 可以修改识别错误
• ✅ 减少无效的建档查询
• ✅ 提升数据准确性

立即重启项目体验新流程！ 🚀