CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求（清除数据）

CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求（去除 log）
CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求
2026-08-06 09:58:58 +08:00 · 2026-08-05 20:24:15 +08:00 · 2026-08-05 20:21:20 +08:00 · 2026-08-05 19:04:02 +08:00 · 2026-08-05 18:43:21 +08:00 · 2026-08-05 18:37:22 +08:00
8 changed files with 4557 additions and 101 deletions
@@ -0,0 +1,501 @@
+# 调度App H5行驶证拍摄取景引导框 — 需求文档
+---
+
+## 需求文档摘要
+**一句话概括**：在调度App H5车辆管理页（`vehicleAdd.vue`）的行驶证上传流程中，拦截现有 `van-uploader` 的点击事件，先进入自定义拍摄引导页（WebRTC取景+浅色背景+灰色边框引导框+蓝色角标+Hero提示卡+取景要点卡+预览确认），拍摄确认后将照片传回现有的压缩→上传→OCR流程，实现拍摄环节的引导增强。
+
+**核心要点**：
+
+| 维度 | 内容 |
+| --- | --- |
+| **背景** | 调度App H5车辆管理页行驶证上传使用 `van-uploader` 直接调起系统选择器，无拍摄规范提示，导致卡套反光、证件歪斜、文字模糊等问题频发 |
+| **目标** | 拦截行驶证槽位点击，进入拍摄引导页（浅色背景+相机预览+引导框+Hero提示卡+取景要点卡），拍摄后预览确认，确认后回到现有压缩→上传→OCR流程 |
+| **现有流程** | `van-uploader` 点击 → 系统选择器 → `after-read` 回调 → `compressFileItem` 压缩 → `uploadImage` 上传 → `ocrHandler` OCR识别 |
+| **改造方案** | 行驶证槽位点击 → **拍摄引导页（新增）** → 预览确认（新增）→ `compressFileItem` 压缩 → `uploadImage` 上传 → `ocrHandler` OCR识别 |
+| **界面改动** | 新增拍摄引导页组件 + 预览确认页组件；改造 `vehicleAdd.vue` 中行驶证三个槽位的点击逻辑 |
+| **数据规则** | 无新增字段；引导框样式与文案为前端静态资源；后端接口完全不变 |
+| **原型** | [调度App-H5行驶证拍摄取景引导原型.html](https://sinoassist.yuque.com/attachments/yuque/0/2026/html/34748803/1785205633529-2dd10b98-a855-4a6b-b2a1-894fc14e3ca3.html) |
+
+
+**技术要点**：
+
+ 后端：无需变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR`
+ 前端：`supplier-dispatch-h5` 项目 `vehicleAdd.vue` 改造 + 新增拍摄引导组件
+ 数据库：无需变更
+
+---
+
+## 一、基本信息
+| 项目 | 内容 |
+| --- | --- |
+| **需求名称** | 调度App H5行驶证拍摄取景引导框 |
+| **提出人** |  |
+| **产品负责人** | 宋志领 |
+| **所属模块** | 调度App H5 - 车辆管理（`vehicleAdd.vue`）- 行驶证上传 |
+| **需求类型** | 优化 |
+| **目标版本** |  |
+| **紧急程度** | 中 |
+
+
+## 二、需求背景
+### 2.1 现有流程
+调度App H5车辆管理页面（`https://crm1.sino-assist.com/h5/supplier/dispatch/vehicleManage`）中，用户在录入或修改车辆信息时，需要上传行驶证主页、副页、车辆照片页。
+
+当前上传流程基于 Vant `van-uploader` 组件实现：
+
+```plain
+用户点击 van-uploader 上传槽位
+    │
+    ▼
+系统调起相册/相机选择器（accept="image/*"）
+    │
+    ▼
+after-read 回调触发（vehicleLicenseFrontHandler / vehicleLicenseBackHandler / vehicleLicenseCarHandler）
+    │
+    ▼
+compressFileItem() 前端压缩（目标 < 5MB，JPEG 格式）
+    │
+    ▼
+uploadImage() 上传 → POST /order/uploadImage（multipart/form-data）
+    │
+    ▼
+ocrHandler() OCR 识别 → POST /agg-api/tencent-ocr/unifiedOCR
+    │
+    ▼
+回填识别结果到表单字段（车牌号、车架号、所有人等）
+```
+
+**现有代码位置**：
+
+| 文件 | 关键方法/组件 |
+| --- | --- |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `van-uploader` 组件（行驶证三个槽位） |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseFrontHandler()` — 行驶证主页上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseBackHandler()` — 行驶证副页上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseCarHandler()` — 行驶证车辆照片上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `compressFileItem()` — 图片压缩 |
+| `supplier-dispatch-h5/src/api/mine.js` | `uploadImage()` — 上传接口 |
+| `supplier-dispatch-h5/src/api/mine.js` | `ocrHandler()` — OCR 识别接口 |
+
+
+### 2.2 问题分析
+当前流程中，用户点击上传槽位后直接调起系统相册/相机选择器，**没有任何拍摄规范提示**。实际采集到的照片普遍存在以下问题：
+
+1. **卡套/保护膜未取出**：证件装在透明卡套或覆膜中拍摄，塑料/玻璃表面反光，遮盖号牌、车架号等关键字段，导致OCR无法识别。
+2. **摆放不规整**：歪斜、弯曲、四角缺角、未对准画面中央，导致自动识别定位失败或字段错位。
+3. **反光与阴影**：在强光或灯光直射下拍摄，出现高光斑、阴影遮挡文字，造成文字模糊。
+
+上述问题直接造成行驶证OCR识别失败、审核驳回率升高，服务商需反复重传，拉长车辆录入周期。
+
+### 2.3 改造方向
+参考业界成熟的证件拍摄方案（如银行卡、身份证识别），在拍摄预览界面上叠加半透明取景引导框，配合文字提示，能从源头规范用户拍摄行为，显著提升照片合格率。
+
+**改造原则**：仅改造拍摄环节（系统选择器 → 自定义拍摄引导页），后续的压缩→上传→OCR流程完全保持不变。
+
+---
+
+## 三、需求目标
+1. 用户点击行驶证任一上传槽位时，**不再直接调起系统选择器**，而是进入自定义拍摄引导页。
+2. 拍摄引导页在相机预览画面上**自动叠加半透明取景引导框**，框的形状和比例匹配行驶证实际尺寸。
+3. 引导框区域显示明确的文字提示：「请将行驶证从卡套内取出后拍摄，避免反光」「请将证件对准框内，确保边缘完整、文字清晰」。
+4. 引导框**适配不同手机屏幕尺寸**，在主流移动端设备上显示正常。
+5. 用户点击拍摄后，引导框消失，进入**照片预览确认步骤**，支持重拍或确认使用。
+6. 用户确认使用后，照片**传回现有的 **`compressFileItem`** → **`uploadImage`** → **`ocrHandler`** 流程**，后续逻辑完全不变。
+7. 车头照、保单等非行驶证槽位**保持现有 **`van-uploader`** 直接调起选择器的逻辑**，不受影响。
+
+---
+
+## 四、功能说明
+### 功能点 1：拦截行驶证槽位点击，进入拍摄引导页
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 行驶证槽位点击拦截 |
+| **涉及页面** | `vehicleAdd.vue` — 行驶证主页、副页、车辆照片页的 `van-uploader` 组件 |
+| **触发条件** | 用户在车辆管理页点击行驶证任一上传槽位（首次上传或重新上传）时触发 |
+| **处理逻辑** | 拦截 `van-uploader` 的默认点击行为（调起系统选择器），改为打开拍摄引导页组件 |
+| **输出结果** | 进入拍摄引导页，展示相机预览 + 引导框 |
+
+
+**改造前后对比**：
+
+| 步骤 | 改造前（现有流程） | 改造后 |
+| --- | --- | --- |
+| 1 | 点击 `van-uploader` 槽位 | 点击 `van-uploader` 槽位 |
+| 2 | 系统调起相册/相机选择器 | **拦截点击 → 进入拍摄引导页（新增）** |
+| 3 | 选择/拍摄照片 | 相机预览 + 引导框 + 文字提示 |
+| 4 | `after-read` 回调 | 点击拍摄 → **预览确认页（新增）** |
+| 5 | `compressFileItem` 压缩 | 确认使用 → **构造 file 对象，触发 **`after-read`** 回调** |
+| 6 | `uploadImage` 上传 | `compressFileItem` 压缩（**不变**） |
+| 7 | `ocrHandler` OCR 识别 | `uploadImage` 上传（**不变**） |
+| 8 | 回填表单 | `ocrHandler` OCR 识别（**不变**）→ 回填表单 |
+
+
+**关键改造点**：拍摄引导页确认使用后，需将 Canvas 捕获的图片 Blob 构造为 `van-uploader` 的 `after-read` 回调所期望的 `{ file: File, content: dataURL }` 格式，从而无缝衔接现有的压缩→上传→OCR流程。
+
+---
+
+### 功能点 2：拍摄引导页 — 相机预览 + 引导框
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 拍摄取景引导框 |
+| **涉及页面** | 新增拍摄引导页组件 |
+| **触发条件** | 从行驶证槽位点击进入 |
+| **处理逻辑** | 使用 WebRTC `getUserMedia` 获取摄像头视频流，在 `video` 元素上全屏展示；叠加浅色背景层（`#F5F5F5`）+ 中央镂空引导框（灰色实线边框 `#C2C8D2` + 蓝色 L 形角标 `#354D93` + 入场渐显动画）+ 顶部 Hero 提示卡（白底+蓝色图标）+ 取景要点图标卡（do/don't）+ 底部白色拍摄栏 |
+| **输出结果** | 用户在规范引导下完成拍摄 |
+
+
+**界面设计**（拍摄引导页示意）：
+
+```plain
+┌─────────────────────────────────────────┐
+│  ←  拍摄行驶证主页                       │  ← 顶部导航栏（深蓝 #2C395F）
+├─────────────────────────────────────────┤
+│                                         │
+│  ┌───────────────────────────────────┐  │  ← Hero 提示卡（白底+蓝色图标）
+│  │ [📁] 请将行驶证从卡套内取出后拍摄  │  │
+│  │       避免反光，确保文字清晰        │  │
+│  └───────────────────────────────────┘  │
+│                                         │
+│  ┌───────────────────────────────────┐  │
+│  │└──                            ──┘ │  │  ← 蓝色 L 形角标（#354D93）
+│  │  中华人民共和国机动车行驶证         │  │  ← 证件标题轮廓（半透明蓝色）
+│  │                                    │  │
+│  │                                    │  │  ← 页面其余区域空白
+│  │                                    │  │
+│  │  ▢ 印章                            │  │  ← 印章位置轮廓（红色方形）
+│  │└──                            ──┘ │  │
+│  └───────────────────────────────────┘  │  ← 灰色实线边框（#C2C8D2）
+│                                         │
+│  ┌─────────┐  ┌─────────┐  ┌─────────┐ │  ← 取景要点图标卡（白底）
+│  │  [✓]    │  │  [✓]    │  │  [✗]    │ │
+│  │ 边缘完整 │  │ 文字清晰 │  │ 避免反光 │ │
+│  └─────────┘  └─────────┘  └─────────┘ │
+│                                         │
+├─────────────────────────────────────────┤
+│              ┌──────────┐              │
+│              │  ◉ 拍摄  │              │  ← 拍摄按钮（蓝色 #354D93）
+│              └──────────┘              │  ← 底部白色拍摄栏
+└─────────────────────────────────────────┘
+```
+
+> 说明：全屏相机预览（`video` 元素）作为底层背景，整体页面背景为浅色（`#F5F5F5`），营造明亮的拍摄环境。屏幕中央为镂空透明区域（匹配行驶证宽高比约 1.43:1），镂空区域外围为浅色背景（区别于镂空区域的相机预览画面）。镂空区域外圈增加灰色实线边框（`#C2C8D2`，3px，带入场渐显动画），四角显示蓝色 L 形角标（`#354D93`，带入场渐显动画），辅助用户对齐证件边缘。**引导框上方设置 Hero 提示卡**（白底圆角卡片+蓝色图标+主标题"请将行驶证从卡套内取出后拍摄"+副标题"避免反光，确保文字清晰"），**引导框下方设置取景要点图标卡**（3 个白底小卡片，分别用 ✓/✗ 图标标注"边缘完整""文字清晰""避免反光"）。**引导框内叠加极简证件模板轮廓**（半透明蓝色，透明度约 20%-35%）：主页仅展示顶部一行标题"中华人民共和国机动车行驶证"和左下角红色方形印章，其余区域空白；副页仅展示右下角条形码图案（长度与真实条形码一致）及数字编号，其余区域空白。底部为白色拍摄栏，居中放置蓝色圆形拍摄按钮。
+>
+
+**操作按钮**：
+
+| 按钮 | 触发条件 | 操作结果 |
+| --- | --- | --- |
+| 拍摄 | 点击 | 通过 Canvas 捕获当前 `video` 帧，生成图片 Blob，进入预览确认页 |
+| 返回（左上角） | 点击 | 关闭相机流，退出拍摄引导页，返回车辆管理页，不上传照片 |
+| 点击背景区（非引导框内） | 点击 | 无响应，保持拍摄引导页（防止误触） |
+
+
+---
+
+### 功能点 3：三页差异化引导
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 分页面差异化引导 |
+| **涉及页面** | 行驶证主页、副页、车辆照片页拍摄引导页 |
+| **触发条件** | 按用户点击的具体槽位进入对应拍摄引导页 |
+| **处理逻辑** | 三页共用相同的引导框比例和通用提示文案；差异体现在页面标题和**引导框内的证件模板轮廓** |
+| **输出结果** | 用户明确知道当前拍摄的是行驶证的哪一页，并能按模板轮廓对齐证件内容 |
+
+
+**各页引导差异**：
+
+| 页面 | 对应槽位 | 对应 Handler | 页面标题 | 模板轮廓内容 |
+| --- | --- | --- | --- | --- |
+| 行驶证主页 | `vehicleLicenseFrontList` | `vehicleLicenseFrontHandler` | 拍摄行驶证主页 | 仅展示：顶部一行标题"中华人民共和国机动车行驶证" + 左下红色方形印章 |
+| 行驶证副页 | `vehicleLicenseBackList` | `vehicleLicenseBackHandler` | 拍摄行驶证副页 | 仅展示：右下角条形码图案（长度与真实条形码一致）+ 条形码数字编号 |
+| 行驶证车辆照片 | `vehicleLicenseCarPhotoList` | `vehicleLicenseCarHandler` | 拍摄行驶证车辆照片 | "车辆照片"标题 + 车辆SVG轮廓（车身/车窗/车轮），引导居中拍摄 |
+
+
+> **说明**：引导框内的证件模板轮廓为半透明叠层（透明度约 20%-35%），仅作视觉对齐辅助，不遮挡相机预览画面。模板轮廓使用 CSS/SVG 静态实现，不依赖后端数据。三种模板通过 `renderLicenseTemplate(type)` 函数根据槽位类型动态切换。
+>
+
+---
+
+### 功能点 4：照片预览确认
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 照片预览确认 |
+| **涉及页面** | 拍摄完成后进入的预览确认页 |
+| **触发条件** | 用户在拍摄引导页点击"拍摄"按钮后触发 |
+| **处理逻辑** | 展示刚拍摄的照片，提供"重拍"和"确认使用"两个操作 |
+| **输出结果** | 确认使用 → 照片传回 `van-uploader` 的 `after-read` 回调，走现有压缩→上传→OCR流程；重拍则返回拍摄引导页 |
+
+
+**界面设计**（预览确认页示意）：
+
+```plain
+┌─────────────────────────────────────────┐
+│  ←  返回                                │
+├─────────────────────────────────────────┤
+│                                         │
+│     ┌─────────────────────────────┐     │
+│     │                             │     │
+│     │      刚拍摄的照片预览        │     │
+│     │      （全宽自适应展示）       │     │
+│     │                             │     │
+│     └─────────────────────────────┘     │
+│                                         │
+│                                         │
+│        ┌──────────┐ ┌──────────┐       │
+│        │  重拍    │ │ 确认使用 │       │
+│        └──────────┘ └──────────┘       │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**操作按钮**：
+
+| 按钮 | 触发条件 | 操作结果 |
+| --- | --- | --- |
+| 重拍 | 点击 | 返回拍摄引导页，重新进入相机预览 |
+| 确认使用 | 点击 | 将照片 Blob 构造为 `{ file: File, content: dataURL }` 格式，调用对应槽位的 `after-read` Handler（如 `vehicleLicenseFrontHandler`），进入现有压缩→上传→OCR流程 |
+| 返回 | 点击 | 关闭相机流，返回车辆管理页，不保存照片 |
+
+
+**数据衔接说明**：
+
+确认使用后，需构造以下对象传给现有的 Handler 方法：
+
+```plain
+{
+  file: new File([blob], `vehicle_license_${type}_${Date.now()}.jpg`, { type: 'image/jpeg' }),
+  content: dataURL  // base64 格式，供 van-uploader 预览使用
+}
+```
+
+传入后，现有的 `compressFileItem()` → `uploadImage()` → `ocrHandler()` 链路完全不变。
+
+---
+
+## 五、业务规则
+### 规则 1：触发范围
+引导框仅对 `vehicleAdd.vue` 中标题含"行驶证"的三个 `van-uploader` 槽位生效（主页、副页、车辆照片）；**车头照**（`vehicleFrontPhotoList`）、**保单**（`insurancePictureFiles`）等其他槽位不进入拍摄引导页，保持现有 `van-uploader` 直接调起选择器的交互。
+
+### 规则 2：引导框比例
+引导框的宽高比固定为行驶证实物比例（约 1.43:1，横向），在不同屏幕尺寸下按屏幕宽度自适应缩放（宽度约为屏幕宽度的 80%），左右留白均匀，确保用户无需过度调整手机位置即可将证件放入框内。
+
+### 规则 3：后续流程不变
+引导框仅做"拍摄环节的视觉辅助"，**不改变原上传与OCR识别流程**。用户确认使用后，照片传入现有的 `compressFileItem` → `uploadImage` → `ocrHandler` 链路，识别失败仍按现有方式提示重传。
+
+### 规则 4：屏幕适配
+引导框在竖屏模式下以横向矩形展示（行驶证为横向证件）。若用户将手机横置，引导框应自适应旋转为纵向矩形以匹配证件方向。优先保证竖屏体验，横屏为可选适配。
+
+### 规则 5：降级策略
+若设备不支持 WebRTC `getUserMedia`（部分低版本 Android WebView 或非 HTTPS 环境），**降级为现有的 **`van-uploader`** 直接调起系统选择器**，不阻断用户上传流程。降级时引导框不展示，用户走原有流程。
+
+---
+
+## 六、边界与异常场景
+| 场景编号 | 场景描述 | 预期处理 |
+| --- | --- | --- |
+| 1 | 用户未对准引导框就点击拍摄 | 系统不拦截，正常拍摄并进入预览；用户在预览页可点击"重拍"重新对准 |
+| 2 | 相机权限未授权 | 拍摄引导页加载前检测权限；未授权时提示"请允许使用相机权限"，并提供"从相册选择"降级入口 |
+| 3 | 弱光/暗光环境拍摄 | 引导框正常展示；若设备支持，可自动开启屏幕补光（或提示用户到光线充足处拍摄） |
+| 4 | 用户旋转手机（横竖屏切换） | 引导框自适应旋转，保持与行驶证方向一致；拍摄按钮和提示文字跟随屏幕方向调整位置 |
+| 5 | 小屏幕手机（如 iPhone SE） | 引导框按比例缩小，提示文字自动换行，确保所有元素在可视区域内完整展示 |
+| 6 | 大屏幕手机（如 iPhone Pro Max） | 引导框按比例放大，不超过屏幕安全区域，保持舒适的单手操作距离 |
+| 7 | 设备不支持 getUserMedia | 自动降级为 `van-uploader` 直接调起系统选择器，不展示引导框 |
+| 8 | iOS 微信内置浏览器权限受限 | 检测到微信环境且 getUserMedia 不可用时，降级为系统选择器 |
+| 9 | 拍摄后未进入预览（相机被中断） | 检测到相机关闭/中断事件，自动返回车辆管理页，不上传照片 |
+| 10 | 非行驶证槽位（如车头照）点击 | 不进入拍摄引导页，维持现有 `van-uploader` 直接调起选择器的交互 |
+| 11 | 修改车辆时重新上传行驶证 | 同样进入拍摄引导页，拍摄确认后替换原照片，走现有压缩→上传→OCR流程 |
+
+
+---
+
+## 七、影响范围
+### 前端
+| 文件 | 变更类型 | 变更内容 |
+| --- | --- | --- |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | **改造** | 行驶证三个 `van-uploader` 槽位（`vehicleLicenseFrontList`/`vehicleLicenseBackList`/`vehicleLicenseCarPhotoList`）增加点击拦截逻辑：点击时打开拍摄引导页组件，而非直接调起系统选择器；拍摄确认后将照片传回现有的 `vehicleLicenseFrontHandler`/`vehicleLicenseBackHandler`/`vehicleLicenseCarHandler` |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | **改造** | 车头照（`vehicleFrontPhotoList`）、保单（`insurancePictureFiles`）槽位**不变**，保持现有 `van-uploader` 直接调起选择器的逻辑 |
+| `supplier-dispatch-h5/src/components/CameraGuide.vue` | **新增** | 拍摄引导页组件：WebRTC 相机预览 + 浅色背景层（`#F5F5F5`）+ 镂空引导框 + 灰色实线边框（`#C2C8D2`，入场渐显动画） + 四角蓝色 L 形角标（`#354D93`，入场渐显动画） + Hero 提示卡（白底+蓝色图标） + 取景要点图标卡（do/don't） + **证件模板轮廓叠层**（主页/副页/车辆照片三种模板动态切换） + 底部白色拍摄栏（蓝色圆形拍摄按钮） |
+| `supplier-dispatch-h5/src/components/CameraGuide.vue` | **新增** | 预览确认页：照片展示 + 重拍按钮 + 确认使用按钮 |
+| `supplier-dispatch-h5/src/api/mine.js` | **不变** | `uploadImage()` 和 `ocrHandler()` 完全复用 |
+| `supplier-dispatch-h5/src/utils/` | **不变** | `compressFileItem()` 等工具方法完全复用 |
+
+
+### 后端
+| 文件 | 变更内容 |
+| --- | --- |
+| 无 | 无需变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR` |
+
+
+### 数据库
+| 表名 | 变更内容 |
+| --- | --- |
+| 无 | 无需变更 |
+
+
+---
+
+## 八、验收标准
+### 8.1 拍摄引导页展示
+- [ ] 点击行驶证主页/副页/车辆照片任一上传槽位，进入拍摄引导页（非直接调起系统选择器）
+- [ ] 拍摄引导页展示全屏相机预览背景（`video` 元素实时画面）
+- [ ] 屏幕中央显示镂空引导框，框的宽高比约 1.43:1（横向）
+- [ ] 引导框外围为浅色背景（`#F5F5F5`），与镂空区域的相机预览画面形成对比
+- [ ] 引导框外圈显示灰色实线边框（`#C2C8D2`，3px，带入场渐显动画）
+- [ ] 引导框四角显示蓝色 L 形定位角标（`#354D93`，带入场渐显动画）
+- [ ] 引导框上方显示 Hero 提示卡（白底圆角卡片+蓝色图标），主标题"请将行驶证从卡套内取出后拍摄"，副标题"避免反光，确保文字清晰"
+- [ ] 引导框下方显示取景要点图标卡（3 个白底小卡片）：边缘完整（✓ 蓝色）、文字清晰（✓ 蓝色）、避免反光（✗ 红色）
+- [ ] 页面底部显示白色拍摄栏，居中放置蓝色圆形拍摄按钮（`#354D93`），按钮样式醒目、易于点击
+- [ ] 页面标题根据槽位类型显示对应文字（"拍摄行驶证主页"/"拍摄行驶证副页"/"拍摄行驶证车辆照片"）
+- [ ] 引导框内显示证件模板轮廓（半透明，不遮挡相机预览）
+- [ ] 主页模板包含：顶部一行标题"中华人民共和国机动车行驶证" + 左下红色方形印章，其余区域空白
+- [ ] 副页模板包含：右下角条形码图案（长度与真实条形码一致）+ 条形码数字编号，其余区域空白
+- [ ] 车辆照片模板包含：车辆SVG轮廓（车身/车窗/车轮）
+- [ ] 切换不同槽位时，模板轮廓自动切换为对应内容
+
+### 8.2 预览确认页展示
+- [ ] 点击"拍摄"后进入预览确认页，展示刚拍摄的照片
+- [ ] 预览页提供"重拍"按钮，点击后返回拍摄引导页
+- [ ] 预览页提供"确认使用"按钮，点击后照片传入现有的 `after-read` Handler
+- [ ] 预览页左上角提供"返回"按钮，点击后放弃当前照片，返回车辆管理页
+
+### 8.3 现有流程衔接
+- [ ] 确认使用后，照片经 `compressFileItem()` 压缩（目标 < 5MB）
+- [ ] 压缩后经 `uploadImage()` 上传到服务器（`POST /order/uploadImage`）
+- [ ] 上传后经 `ocrHandler()` 进行 OCR 识别（`POST /agg-api/tencent-ocr/unifiedOCR`）
+- [ ] OCR 识别结果正确回填到表单字段（车牌号、车架号、所有人等）
+- [ ] 上传槽位显示拍摄的照片缩略图
+
+### 8.4 非行驶证槽位不受影响
+- [ ] 点击车头照上传槽位，保持现有 `van-uploader` 直接调起系统选择器的逻辑
+- [ ] 点击保单上传槽位，保持现有 `van-uploader` 直接调起系统选择器的逻辑
+- [ ] 车头照上传后的 `ocrCarFrontHandler()` OCR 识别正常
+
+### 8.5 屏幕适配
+- [ ] 在 iPhone 各型号（SE/标准版/Plus/Pro Max）上引导框比例正确、文字完整显示
+- [ ] 在 Android 主流机型（华为/小米/OPPO/vivo 等）上引导框比例正确、文字完整显示
+- [ ] 竖屏模式下引导框为横向矩形，横屏模式下自适应为纵向矩形
+
+### 8.6 降级场景
+- [ ] 设备不支持 `getUserMedia` 时，降级为 `van-uploader` 直接调起系统选择器
+- [ ] 降级后压缩→上传→OCR流程正常
+- [ ] iOS 微信内置浏览器权限受限时，降级为系统选择器
+
+---
+
+## 九、非功能要求
+ **性能**：拍摄引导页从点击槽位到展示引导框的耗时 < 500ms；拍摄按钮响应 < 200ms；Canvas 捕获帧 < 100ms。
+ **兼容性**：支持 iOS Safari 12+、Android Chrome 80+、微信/企业微信内置浏览器；需兼容 WebView 环境。
+ **适配性**：支持屏幕宽度 320px - 430px 的主流手机；引导框和文字在不同尺寸下自适应，不出现截断或重叠。
+ **安全性**：引导内容为纯前端静态展示，不涉及用户照片上传前的任何数据采集与存储；相机流在页面关闭时立即释放。
+ **降级方案**：若设备不支持 WebRTC/getUserMedia，降级为现有的 `van-uploader` 直接调起系统选择器，不阻断用户上传流程。
+
+---
+
+
+
+## 流程图
+### 改造后完整流程
+```plain
+用户在 vehicleAdd.vue 点击上传槽位
+        │
+        ▼
+┌─────────────────────┐
+│ 是否为行驶证三个    │
+│ 槽位之一？          │
+│ (主页/副页/车辆照片)│
+└─────────────────────┘
+   │              │
+   否             是
+   │              ▼
+   │    ┌─────────────────────┐
+   │    │ 检测设备是否支持    │
+   │    │ getUserMedia？      │
+   │    └─────────────────────┘
+   │       │           │
+   │      否          是
+   │       │           │
+   │       ▼           ▼
+   │    降级：      进入拍摄引导页
+   │    van-uploader  （WebRTC相机预览 +
+   │    直接调起      浅色背景 + 引导框 +
+   │    系统选择器    Hero卡 + 要点卡 + 角标）
+   │       │           │
+   │       │    ┌──────┼──────┐
+   │       │    ▼      ▼      ▼
+   │       │   返回   拍摄   点击
+   │       │   车辆   按钮   背景
+   │       │   管理页  │    （无响应）
+   │       │          ▼
+   │       │   ┌──────────────┐
+   │       │   │ 照片预览确认  │
+   │       │   │ 页面          │
+   │       │   └──────────────┘
+   │       │          │
+   │       │    ┌─────┼─────┐
+   │       │    ▼     ▼     ▼
+   │       │   重拍  确认  返回
+   │       │    │     使用  车辆
+   │       │    │     │     管理页
+   │       │    │     ▼
+   │       │    │  构造 { file, content }
+   │       │    │  传入 after-read Handler
+   │       │    │     │
+   ▼       ▼    ▼     ▼
+┌─────────────────────────┐
+│ 现有流程（完全不变）     │
+│ compressFileItem() 压缩  │
+│       │                 │
+│       ▼                 │
+│ uploadImage() 上传       │
+│ POST /order/uploadImage  │
+│       │                 │
+│       ▼                 │
+│ ocrHandler() OCR识别     │
+│ POST /agg-api/           │
+│   tencent-ocr/unifiedOCR │
+│       │                 │
+│       ▼                 │
+│ 回填表单字段             │
+│ (车牌号/车架号/所有人等) │
+└─────────────────────────┘
+```
+
+---
+
+## 影响范围说明
+| 维度 | 影响说明 |
+| --- | --- |
+| **功能** | 仅新增行驶证拍摄前的取景引导层，不改变车辆管理页其他功能和OCR识别流程 |
+| **数据** | 无新增业务数据；不修改现有上传接口的入参和出参 |
+| **接口** | 无接口变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR` |
+| **配置** | 无变更 |
+| **用户习惯** | 用户上传行驶证时多了一步引导页+预览确认，但流程轻量，拍摄确认后无缝衔接现有压缩→上传→OCR流程，整体体验提升 |
+
+
+
+
+## 测试关注点
+| 测试类型 | 关注点 |
+| --- | --- |
+| **功能测试** | 三页槽位均正确进入拍摄引导页；引导框比例正确；提示文字完整显示；拍摄后进入预览确认；确认后正确回填到 `van-uploader` 并触发现有 Handler |
+| **流程衔接测试** | 确认使用后 `compressFileItem` 压缩正常；`uploadImage` 上传成功；`ocrHandler` OCR 识别结果正确回填表单；行驶证主页 OCR 回填车牌号/车架号/所有人等；行驶证副页 OCR 回填档案编号/核载人数等 |
+| **兼容测试** | iPhone SE/标准版/Plus/Pro Max；华为/小米/OPPO/vivo 主流机型；微信/企业微信内置浏览器；Safari/Chrome |
+| **回归测试** | 车头照等非行驶证槽位保持原有直接调选择器逻辑；车辆管理页其他功能不受影响；OCR 识别与审核流程正常；修改车辆时重新上传行驶证正常 |
+| **降级测试** | 不支持 `getUserMedia` 的设备降级为 `van-uploader` 系统选择器；降级后压缩→上传→OCR 流程正常 |
+| **适配测试** | 竖屏/横屏切换；320px 窄屏与 430px 宽屏的显示效果；文字不截断、按钮可点击 |
+
+
+
+
+
+
+
+
@@ -31,14 +31,14 @@
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Geolocation,AMap.Geocoder,AMap.Marker,AMap.Driving"></script>
-    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+<!--    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
    <script>
        window.selfLink = window.location.href;
        window.selfSearch = window.location.search;
    </script>
    <script>
        // VConsole 默认会挂载到 `window.VConsole` 上
-        let vConsole = new window.VConsole();
+        // let vConsole = new window.VConsole();
        (function (doc, win) {
            // console.log("==window.location.pathname===",window.location.pathname)
            let docEl = doc.documentElement
@@ -2,8 +2,6 @@
  <div class="cameraGuide" v-if="visible">
    <!-- ===== 拍摄引导页 ===== -->
    <div class="cameraPage" v-show="step==='guide'">
-      <video ref="video" class="cameraVideo" autoplay playsinline muted></video>
-
      <div class="cameraNav">
        <van-icon name="arrow-left" class="backBtn" @click="handleClose" />
        <span class="navTitle">{{ navTitle }}</span>
@@ -34,6 +32,8 @@
          <span class="corner br"></span>
          <div class="guideFrameBorder"></div>
          <div class="guideHole">
+            <!-- 相机画面仅在取景框内显示 -->
+            <video ref="video" class="cameraVideo" autoplay playsinline webkit-playsinline muted></video>
            <!-- 主页模板：标题 + 印章 -->
            <div v-if="type==='front'" class="licenseTemplate ltFrontPage">
              <div class="ltInner">
@@ -61,15 +61,6 @@
                  <div class="ltTitleLine">车辆照片</div>
                </div>
                <div class="ltCarOutline">
-                  <svg viewBox="0 0 140 70" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M14 46 L20 26 Q22 20 30 19 L88 16 Q96 16 102 22 L116 34 Q126 36 128 42 L128 48 Q128 52 124 52 L116 52"></path>
-                    <path d="M14 46 L14 50 Q14 52 18 52 L30 52"></path>
-                    <circle cx="42" cy="52" r="9"></circle>
-                    <circle cx="102" cy="52" r="9"></circle>
-                    <path d="M51 52 L93 52"></path>
-                    <path d="M58 19 L60 33 L34 34"></path>
-                    <path d="M92 18 L94 32 L114 33"></path>
-                  </svg>
                </div>
              </div>
            </div>
@@ -143,6 +134,11 @@ export default {
    visible: {
      type: Boolean,
      default: false
+    },
+    // 父组件前置探测时已拿到的相机流，传入则直接复用（iOS 上避免二次 getUserMedia 黑屏）
+    stream: {
+      type: Object,
+      default: null
    }
  },
  data() {
@@ -153,7 +149,7 @@ export default {
      'medium', 'tall', 'short wide', 'medium', 'tall', 'short', 'medium wide', 'tall']
    return {
      step: 'guide', // guide 拍摄引导 | preview 预览确认
-      stream: null,
+      activeStream: null,
      previewBlob: null,
      previewDataURL: '',
      barcodeBars: heights
@@ -185,32 +181,69 @@ export default {
  methods: {
    async startCamera() {
      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
+        // 优先复用父组件探测时拿到的流，未传入才自行申请
+        const stream = this.stream || await navigator.mediaDevices.getUserMedia({
          video: { facingMode: 'environment' },
          audio: false
        })
-        // 等待期间组件已被关闭，立即释放
-        if (!this.visible) {
+        // 等待期间组件已被关闭或销毁，立即释放
+        if (!this.visible || this._isDestroyed || this._isBeingDestroyed) {
          stream.getTracks().forEach(t => t.stop())
          return
        }
-        this.stream = stream
+        this.activeStream = stream
+        console.log('[CameraGuide] stream acquired, 来源:', this.stream ? '父组件复用' : '组件自申请', 'active:', stream.active,
+          'tracks:', stream.getTracks().map(t => `${t.kind}/${t.readyState}/enabled:${t.enabled}`))
        await this.$nextTick()
        const video = this.$refs.video
        if (video) {
+          // iOS 自动播放加固：muted/playsinline 属性与特性同时设置，元数据就绪后再 play
+          video.muted = true
+          video.setAttribute('playsinline', 'true')
+          video.setAttribute('webkit-playsinline', 'true')
          video.srcObject = stream
-          video.play().catch(() => {})
+          const logVideoState = (tag) => {
+            console.log(`[CameraGuide] ${tag}:`,
+              'paused:', video.paused,
+              'readyState:', video.readyState,
+              'currentTime:', video.currentTime,
+              'videoWidth:', video.videoWidth,
+              'videoHeight:', video.videoHeight,
+              'streamActive:', stream.active,
+              'muted:', video.muted)
+          }
+          const playVideo = () => {
+            video.play()
+              .then(() => logVideoState('play resolved'))
+              .catch(e => {
+                console.warn('[CameraGuide] video play error:', e && (e.name || e.message || e))
+                logVideoState('play rejected')
+              })
+          }
+          video.onloadedmetadata = () => {
+            logVideoState('loadedmetadata')
+            playVideo()
+          }
+          video.onplaying = () => logVideoState('playing')
+          video.onerror = () => {
+            console.warn('[CameraGuide] video element error:', video.error && `${video.error.code}/${video.error.message}`)
+          }
+          if (video.readyState >= 1) {
+            playVideo()
+          }
+          // 2 秒后再看一次：currentTime 是否增长（判断是真在播还是黑屏死流）
+          setTimeout(() => logVideoState('after 2s'), 2000)
        }
      } catch (e) {
        // 权限拒绝或相机不可用 → 通知父组件降级为系统选择器
-        console.error('getUserMedia error:', e)
-        this.$emit('fallback')
+        console.warn('getUserMedia error:', e && (e.name || e.message || e))
+        this.$emit('fallback', e)
      }
    },
    stopCamera() {
-      if (this.stream) {
-        this.stream.getTracks().forEach(t => t.stop())
-        this.stream = null
+      if (this.activeStream) {
+        this.activeStream.getTracks().forEach(t => t.stop())
+        this.activeStream = null
      }
    },
    takePhoto() {
@@ -219,10 +252,24 @@ export default {
        this.$toast('相机尚未就绪，请稍候')
        return
      }
+      // 按取景框比例（约 1.43:1）从视频中心裁剪，与框内可视区域（object-fit: cover）保持一致
+      const frameAspect = 1.43
+      const vw = video.videoWidth
+      const vh = video.videoHeight
+      let sw, sh
+      if (vw / vh > frameAspect) {
+        sh = vh
+        sw = Math.round(vh * frameAspect)
+      } else {
+        sw = vw
+        sh = Math.round(vw / frameAspect)
+      }
+      const sx = Math.round((vw - sw) / 2)
+      const sy = Math.round((vh - sh) / 2)
      const canvas = document.createElement('canvas')
-      canvas.width = video.videoWidth
-      canvas.height = video.videoHeight
-      canvas.getContext('2d').drawImage(video, 0, 0)
+      canvas.width = sw
+      canvas.height = sh
+      canvas.getContext('2d').drawImage(video, sx, sy, sw, sh, 0, 0, sw, sh)
      const dataURL = canvas.toDataURL('image/jpeg', 0.92)
      canvas.toBlob(blob => {
        if (!blob) {
@@ -316,7 +363,9 @@ export default {
  align-items: center;
  justify-content: center;
  padding-top: 80px;
-  padding-bottom: 100px;
+  /* 避让底部拍照栏（约 142px 高），防止小屏下提示被遮挡 */
+  padding-bottom: 150px;
+  padding-bottom: calc(150px + env(safe-area-inset-bottom));
  pointer-events: none;
 }
 .guideHero {
@@ -361,14 +410,25 @@ export default {
    line-height: 1.4;
  }
 }
-/* 取景框：宽约为屏宽 80%，宽高比约 1.43:1 */
+/* 取景框：宽约为屏宽 80%，宽高比约 1.43:1；小屏按可视高度自适应缩小，避免遮挡上下元素 */
 .guideFrameOuter {
  position: relative;
  width: 80%;
-  max-width: 340px;
-  padding-top: 69.93%; /* 宽高比约 1.43:1 */
+  /* 纵向可用高度 ≈ 100vh - (导航80 + 拍照栏150 + 提示卡92 + 底部提示92) ≈ 100vh - 420px，
+     换算成宽度（×1.43）并限制在 170~340px 之间，大屏表现与原 80%/340px 一致 */
+  width: clamp(170px, min(80%, calc((100vh - 420px) * 1.43)), 340px);
+  width: clamp(170px, min(80%, calc((100dvh - 420px) * 1.43)), 340px);
+  /* 宽高比约 1.43:1（与拍照裁剪比例一致）；不用 padding-top 百分比——它相对父级宽度，无法跟随自适应宽度 */
+  aspect-ratio: 1.43 / 1;
  flex-shrink: 0;
-  filter: drop-shadow(0 4px 16px rgba(20, 30, 50, .12));
+  /* 不用 filter: drop-shadow，iOS 上父级 filter 会导致 video 合成层不绘制（黑屏） */
+  box-shadow: 0 4px 16px rgba(20, 30, 50, .12);
+}
+/* 兼容不支持 aspect-ratio 的旧浏览器：padding-top 相对父级宽度，80% / 1.43 ≈ 55.94% */
+@supports not (aspect-ratio: 1 / 1) {
+  .guideFrameOuter {
+    padding-top: 55.94%;
+  }
 }
 .corner {
  position: absolute;
@@ -209,7 +209,16 @@ const routes = [
        name: 'vehicleAdd',
        component: () => import('@/views/index/vehicleAdd'),
        meta: {
-            title: '车辆新增或修改'
+            title: '车辆新增或修改',
+            cache: true // keep-alive 缓存：跳转拍摄页返回时保留表单，再次从其他页面进入时由 activated 重新初始化
+        }
+    },
+    {
+        path: "/cameraGuide",
+        name: 'cameraGuide',
+        component: () => import('@/views/index/cameraGuide'),
+        meta: {
+            title: '拍摄行驶证'
        }
    },
    {
@@ -0,0 +1,22 @@
+// 拍摄页与表单页之间的内存中转：blob 无法走路由 query，返回时由表单页取出并清空
+export default {
+  namespaced: true,
+  state: {
+    result: null,   // 拍照确认结果 { type, blob, dataURL }
+    fallback: null  // 相机不可用降级信息 { type, error }
+  },
+  mutations: {
+    setResult(state, payload) {
+      state.result = payload
+      state.fallback = null
+    },
+    setFallback(state, payload) {
+      state.fallback = payload
+      state.result = null
+    },
+    clear(state) {
+      state.result = null
+      state.fallback = null
+    }
+  }
+}
@@ -0,0 +1,47 @@
+<template>
+  <!-- 独立拍摄页：由 vehicleAdd 跳转进入（query.type = front/back/car），
+       确认/取消/降级后 $router.back() 返回 vehicleAdd -->
+  <camera-guide
+    :visible="show"
+    :type="type"
+    @confirm="onConfirm"
+    @cancel="goBack"
+    @fallback="onFallback"
+  />
+</template>
+
+<script>
+import CameraGuide from "@/components/CameraGuide.vue";
+
+export default {
+  name: 'cameraGuidePage',
+  components: { CameraGuide },
+  data() {
+    return {
+      show: false // 挂载后置 true，触发组件 visible 侦听器启动相机
+    }
+  },
+  computed: {
+    type() {
+      const t = this.$route.query.type
+      return ['front', 'back', 'car'].includes(t) ? t : 'front'
+    }
+  },
+  mounted() {
+    this.show = true
+  },
+  methods: {
+    onConfirm({ blob, dataURL }) {   // 拍照确认：结果存入 store，返回 vehicleAdd 消费
+      this.$store.commit('camera/setResult', { type: this.type, blob, dataURL })
+      this.$router.back()
+    },
+    onFallback(e) {   // 相机不可用：降级信息存入 store，返回 vehicleAdd 走系统选择器
+      this.$store.commit('camera/setFallback', { type: this.type, error: e })
+      this.$router.back()
+    },
+    goBack() {
+      this.$router.back()
+    }
+  }
+}
+</script>
@@ -454,27 +454,18 @@
    </div>
  </van-popup>

-  <camera-guide
-    :visible="cameraGuideVisible"
-    :type="cameraGuideType"
-    @confirm="onCameraConfirm"
-    @cancel="onCameraCancel"
-    @fallback="onCameraFallback"
-  />
-
 </div>
 </template>

 <script>
  // uploadImage
-  import {Dialog} from "vant";
+  import {Dialog, ImagePreview} from "vant";
  import {formatDate1} from "@/utils/common"
 import {myMixins} from "@/utils/myMixins"
 import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler,
  userOperationPermissions,saveSupplierApproval} from "@/api/mine"
 import TwoCommonBtn from "@/components/twoBtnCommon.vue"
 import CellGroup from "@/components/cellGroup.vue";
-import CameraGuide from "@/components/CameraGuide.vue";
 export default {
  name: "vehicleAdd",
  mixins:[myMixins],
@@ -510,7 +501,6 @@ export default {
      oldSupplierServiceList:[],
      show:false,
      imageUrl: require('@/assets/arr_right.png'),
-      cameraGuideVisible: false, // 拍摄引导弹层显示
      cameraGuideType: 'front',  // 当前拍摄槽位 front/back/car
      vehicleLicenseFrontList: [],
      vehicleLicenseBackList: [],
@@ -708,6 +698,33 @@ export default {
    },
  },
  async mounted() {
+    await this.initPage()
+    this.hasInited = true // 标记首次初始化完成（keep-alive 下 activated 据此判断再次进入需重新初始化）
+  },
+  activated() {
+    // 从拍摄页返回：取回拍照结果/降级信息，保留表单不重新初始化
+    const cam = this.$store.state.camera
+    if (cam.result || cam.fallback) {
+      const { result, fallback } = cam
+      this.$store.commit('camera/clear')
+      if (result) {
+        this.cameraGuideType = result.type
+        this.onCameraConfirm(result)
+      } else {
+        this.cameraGuideType = fallback.type
+        this.handleCameraFail(fallback.error)
+      }
+      return
+    }
+    // 从车辆管理等其他页面再次进入（keep-alive 缓存复用）：按当前路由重新初始化
+    if (this.hasInited) {
+      this.initPage()
+    }
+  },
+  methods:{
+    async initPage() {
+      // 整体重置为初始 data（keep-alive 缓存复用时清空上一次的新增/修改数据，含 watcher 改过的 vehicleTypes.disabled），再按当前模式初始化
+      Object.assign(this.$data, this.$options.data.call(this, this))
      this.id=this.$route.params?.id
      this.approvalForm.supplierId=this.$route.params?.supplierId
      const urlParams = new URLSearchParams(window.location.search);
@@ -718,6 +735,10 @@ export default {
      if( this.id){
        await this.vehicleInfo()
      }else{
+        // 新增：清空 el-tree 勾选状态（缓存复用时可能残留上一辆车的服务种类勾选）
+        this.$nextTick(() => {
+          this.$refs.tree && this.$refs.tree.setCheckedKeys([])
+        })
        this.originData={
          vehicleType:'',
          vehicleStatus:'',
@@ -731,7 +752,6 @@ export default {
        }
      }
    },
-  methods:{
    showDateHandler() {
      if( this.id ) {   // 修改
        if( this.permissonList.includes('hasInsuranceAudit') ) {
@@ -946,27 +966,54 @@ export default {
    isCameraSupported() {   // 是否支持 getUserMedia（不支持则降级系统选择器）
      return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) && window.isSecureContext !== false
    },
-    async onLicenseSlotClick(type) {   // 行驶证三槽位点击拦截：前置探测相机，可用才进引导页，否则直接降级系统选择器
+    onLicenseSlotClick(type) {   // 行驶证三槽位点击：已有图片→预览，无图片→跳拍摄页（不支持相机则降级系统选择器）
      this.cameraGuideType = type
+      const listMap = {
+        front: 'vehicleLicenseFrontList',
+        back: 'vehicleLicenseBackList',
+        car: 'vehicleLicenseCarPhotoList'
+      }
+      const item = (this[listMap[type]] || [])[0]
+      const src = item && (item.url || item.content)
+      if (src) {
+        // 已有图片：预览（删除按钮在拦截层之上，可删除后重拍）
+        ImagePreview({ images: [src], closeable: true })
+        return
+      }
+      // 无图片：拍照
      if (!this.isCameraSupported()) {
        // 不支持 getUserMedia（如 iOS 微信、非 HTTPS、老 WebView）：直接调系统选择器
        this.triggerNativeUpload(type)
        return
      }
-      try {
-        // 前置真实探测相机可用性，避免进入拍摄引导页后黑屏；拿到流立即释放
-        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
-        stream.getTracks().forEach(t => t.stop())
-        this.cameraGuideVisible = true
-      } catch (e) {
-        console.error('probe getUserMedia error:', e)
-        if (e && (e.name === 'NotAllowedError' || e.name === 'SecurityError')) {
-          // 权限被拒：弹框询问（重试/从相册选择）
-          this.onCameraFallback()
+      this.$router.push({ name: 'cameraGuide', query: { type } })
+    },
+    isCameraPermissionError(e) {   // 是否为相机权限类错误
+      return !!(e && (e.name === 'NotAllowedError' || e.name === 'SecurityError' || e.name === 'PermissionDeniedError'))
+    },
+    handleCameraFail(e) {   // 相机不可用统一处理：权限类弹确认框，其他异常提示后由用户点击触发相册（保证点击手势有效）
+      if (this.isCameraPermissionError(e)) {
+        Dialog.confirm({
+          title: '提示',
+          message: '相机权限未开启，无法使用拍摄引导。是否重新尝试开启相机？',
+          confirmButtonText: '重新尝试',
+          cancelButtonText: '从相册选择',
+          confirmButtonColor: '#354D93',
+        }).then(() => {
+          // 重新走前置探测，探测通过才打开拍摄引导
+          this.onLicenseSlotClick(this.cameraGuideType)
+        }).catch(() => {
+          this.triggerNativeUpload(this.cameraGuideType)
+        })
      } else {
-          // 无摄像头、被占用等其他异常：直接降级系统选择器
-          this.triggerNativeUpload(type)
-        }
+        Dialog.alert({
+          title: '提示',
+          message: '当前设备无法调用相机拍摄，请从相册选择照片上传。',
+          confirmButtonText: '从相册选择',
+          confirmButtonColor: '#354D93',
+        }).then(() => {
+          this.triggerNativeUpload(this.cameraGuideType)
+        })
      }
    },
    triggerNativeUpload(type) {  // 主动触发对应 uploader 的原生文件选择
@@ -978,7 +1025,6 @@ export default {
      })
    },
    onCameraConfirm({ blob, dataURL }) {   // 拍摄确认：构造 {file, content} 走现有压缩→上传→OCR 链路
-      this.cameraGuideVisible = false
      const type = this.cameraGuideType
      const file = new File([blob], `vehicle_license_${type}_${Date.now()}.jpg`, { type: 'image/jpeg' })
      const fileItem = { file, content: dataURL }
@@ -996,25 +1042,6 @@ export default {
      this[listMap[type]] = [fileItem]
      this[handlerMap[type]](fileItem)
    },
-    onCameraCancel() {   // 返回放弃
-      this.cameraGuideVisible = false
-    },
-    onCameraFallback() {   // 权限拒绝/相机不可用：弹框询问，重试或降级系统选择器
-      this.cameraGuideVisible = false
-      Dialog.confirm({
-        title: '提示',
-        message: '相机权限未开启，无法使用拍摄引导。是否重新尝试开启相机？',
-        confirmButtonText: '重新尝试',
-        cancelButtonText: '从相册选择',
-        confirmButtonColor: '#354D93',
-      }).then(() => {
-        // 重新走前置探测，探测通过才打开拍摄引导
-        this.onLicenseSlotClick(this.cameraGuideType)
-      }).catch(() => {
-        // 降级为系统选择器
-        this.triggerNativeUpload(this.cameraGuideType)
-      })
-    },
    async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
      console.log('file',file)
      try {
@@ -1686,8 +1713,7 @@ export default {
  },
  components:{
    CellGroup,
-    TwoCommonBtn,
-    CameraGuide
+    TwoCommonBtn
  }
 }
 </script>
Author	SHA1	Message	Date
zlf	9af26f9b32	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求（清除数据）	2026-08-06 09:58:58 +08:00
zlf	4b71881ceb	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求（去除 log）	2026-08-05 20:24:15 +08:00
zlf	dd9d8f453e	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-05 20:21:20 +08:00
zlf	1b323a4bfa	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-05 19:04:02 +08:00
zlf	2dd5f41a3b	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-05 18:43:21 +08:00
zlf	cd2aaeef32	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-05 18:37:22 +08:00
zlf	c9f5296e3c	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-05 09:44:28 +08:00
zlf	68fc21992b	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-04 19:29:34 +08:00
zlf	e28c8bb6f1	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-04 19:15:28 +08:00
zlf	3976d086ba	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-04 19:05:59 +08:00
zlf	f6dc8ea98b	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-04 18:58:15 +08:00
zlf	ae77c69fe9	CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求	2026-08-04 17:57:26 +08:00