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

更新时间

2026-01-08 17:00

更新说明

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

🔄 流程变更

之前的流程

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

现在的流程

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

✨ 新增功能

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：摄像头识别 + 确认

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

场景2：手动输入 + 确认

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

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

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

📸 界面展示

确认框样式

┌─────────────────────────────────────┐
│ 📋 识别结果                         │
├─────────────────────────────────────┤
│ 请核对并确认身份证号：              │
│ ┌─────────────────────────────────┐ │
│ │ 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. 边界情况测试

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

🚀 使用示例

测试步骤

启动项目

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

访问系统
```
http://localhost:8080
```
测试摄像头识别
- 点击"开始建档"
- 点击"打开摄像头" → "拍摄身份证" → "识别身份证"
- 观察确认框显示
- 修改身份证号（测试可编辑性）
- 点击"确认身份证号，继续建档"
- 观察加载状态和3秒提示
- 验证跳转到表单页面
测试手动输入
- 点击"开始建档"
- 在手动输入框输入身份证号
- 点击"使用手动输入的身份证号"
- 观察确认框显示
- 可以再次修改
- 点击确认继续

📝 注意事项

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

🎉 更新完成

新的流程更加用户友好：

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

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

UPDATE_CONFIRM_STEP.md 8.6 KB Permalink Verlauf Originalformat

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

更新时间

更新说明

🔄 流程变更

之前的流程

现在的流程

✨ 新增功能

1. 身份证号确认界面

2. 新增状态变量

3. 新增函数

confirmIdCard()

clearRecognition()

🎯 用户体验流程

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

场景2：手动输入 + 确认

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

📸 界面展示

确认框样式

🔧 技术实现

1. 状态管理

2. 条件渲染

3. 数据流转

🎨 样式优化

确认框样式

按钮布局

✅ 测试要点

1. 摄像头识别测试

2. 手动输入测试

3. 重新识别测试

4. 边界情况测试

🚀 使用示例

测试步骤

📝 注意事项

🎉 更新完成

UPDATE_CONFIRM_STEP.md 8.6 KB

Permalink Verlauf Originalformat