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

## 更新时间
2026-01-08 17:00

## 更新说明

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

---

## 🔄 流程变更

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

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

---

## ✨ 新增功能

### 1. 身份证号确认界面

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

```html
<!-- 识别结果确认区域 -->
<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. 新增状态变量

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

### 3. 新增函数

#### confirmIdCard()
确认身份证号并查询建档状态

```javascript
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()
清除识别结果，重新识别

```javascript
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. 状态管理

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

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

### 2. 条件渲染

```html
<!-- 显示确认框的条件 -->
<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秒提示 → 跳转表单
```

---

## 🎨 样式优化

### 确认框样式

```css
.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;
}
```

### 按钮布局

```html
<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. **启动项目**
   ```bash
   ./start.sh  # Mac/Linux
   start.bat   # Windows
   ```

2. **访问系统**
   ```
   http://localhost:8080
   ```

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

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

---

## 📝 注意事项

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

---

## 🎉 更新完成

新的流程更加用户友好：
- ✅ 允许用户核对身份证号
- ✅ 可以修改识别错误
- ✅ 减少无效的建档查询
- ✅ 提升数据准确性

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