CRM_26-08-20#story#9286,调整服务商自有车辆修改条件

.kaifa/调度App H5行驶证拍摄取景引导框.md

@@ -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 宽屏的显示效果；文字不截断、按钮可点击 |
+
+
+
+
+
+
+
+

public/index.html

@@ -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

src/api/mine.js

@@ -18,6 +18,14 @@ export function saveVehicle(data){
         data
     })
 }
+//车辆属性预判（行驶证OCR识别出车辆所有人后调用，命中服务商信息则锁定为自有车辆）
+export function preJudgeVirtualVehicle(data){
+    return request({
+        url:'/supplierAppV2/dispatchApp/user/preJudgeVirtualVehicle',
+        method:'POST',
+        data
+    })
+}
 //提交审批车辆信息
 export function saveSupplierApproval(data){
     return request({

src/components/CameraGuide.vue

@@ -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)
+        console.warn('getUserMedia error:', e && (e.name || e.message || e))
-        this.$emit('fallback')
+        this.$emit('fallback', e)
       }
     },
     stopCamera() {
-      if (this.stream) {
+      if (this.activeStream) {
-        this.stream.getTracks().forEach(t => t.stop())
+        this.activeStream.getTracks().forEach(t => t.stop())
-        this.stream = null
+        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.width = sw
-      canvas.height = video.videoHeight
+      canvas.height = sh
-      canvas.getContext('2d').drawImage(video, 0, 0)
+      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;
+  /* 纵向可用高度 ≈ 100vh - (导航80 + 拍照栏150 + 提示卡92 + 底部提示92) ≈ 100vh - 420px，
-  padding-top: 69.93%; /* 宽高比约 1.43:1 */
+     换算成宽度（×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;

src/router/index.js

@@ -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: '拍摄行驶证'
         }
     },
     {

src/store/modules/camera.js

@@ -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
+    }
+  }
+}

src/views/index/addWechat.vue

@@ -72,13 +72,13 @@
       async nextStep() {
         if (!this.clickFlag) return;
         if(!this.wechatId) {
-          let res = await getContactQrCodeResult({ configId: this.configId, name: this.name });
+          let res = await getContactQrCodeResult({ configId: this.configId, name: this.name, phone: this.formPayload.linkPhone });
           this.wechatId = res?.data?.wechatId;
         }
-        if (!this.wechatId) {
+        /*if (!this.wechatId) {
           Toast('请先添加企微再继续');
           return;
-        }
+        }*/
         try {
           this.clickFlag = false;
           const res = await saveSupplier({

src/views/index/cameraGuide.vue

@@ -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>

src/views/index/vehicleAdd.vue

@@ -131,23 +131,29 @@
       <img class="startImg" src="@/assets/start.png" />
       <span>车辆属性</span>
     </div>
-    <el-select
+    <div class="virtualVehicleField">
-      v-model="virtualVehicle"
+      <el-select
-      value-key="name"
+        v-model="virtualVehicle"
-      class="elSelect"
+        value-key="name"
-      collapse-tags="collapse-tags"
+        class="elSelect"
-      :disabled="vehicleInfoDisabled"
+        collapse-tags="collapse-tags"
-      placeholder="请选择"  style="width: 55%"
+        :disabled="vehicleInfoDisabled || virtualVehicleLocked"
-    >
+        placeholder="请选择"  style="width: 55%"
-      <el-option
-        v-for="item in virtualVehicleOptions"
-        :key="item.name"
-        :label="item.name"
-        :value="item.value"
       >
-      </el-option>
+        <el-option
-    </el-select>
+          v-for="item in virtualVehicleOptions"
-
+          :key="item.name"
+          :label="item.name"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <span class="matchRoleArrow" :class="{expanded: matchRoleExpand}"
+            @click="matchRoleExpand = !matchRoleExpand">▾</span>
+    </div>
+  </div>
+  <div v-if="matchRoleExpand" class="matchRolePanel">
+    匹配角色：{{ virtualVehicleMatchRole || '—' }}
   </div>
   <div class="lineBot"></div>
   <div class="itemContent">
@@ -454,27 +460,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"
+  userOperationPermissions,saveSupplierApproval,preJudgeVirtualVehicle as preJudgeVirtualVehicleApi} 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 +507,6 @@ export default {
       oldSupplierServiceList:[],
       show:false,
       imageUrl: require('@/assets/arr_right.png'),
-      cameraGuideVisible: false, // 拍摄引导弹层显示
       cameraGuideType: 'front',  // 当前拍摄槽位 front/back/car
       vehicleLicenseFrontList: [],
       vehicleLicenseBackList: [],
@@ -525,6 +521,9 @@ export default {
       vehicleLicenseInfo: {},
       vehicleLicenseBackOcrFlag: false,   // 行驶证副页 修改时默认不需要 ocr识别
       isMultiple: false,     // 是否支持多选
+      virtualVehicleLocked: false, // 车辆属性锁定（OCR所有人命中服务商信息时锁定为自有车辆）
+      virtualVehicleMatchRole: '', // 车辆属性自动判定命中的匹配角色
+      matchRoleExpand: false,      // 匹配角色面板展开状态
       vehicleLicense:'',//牌照
       vehicleFrontLicensePlate:'',//车头照车牌号码
       insuranceCorp: '',
@@ -537,7 +536,9 @@ export default {
         name: '一般平板车',
         value: 2
       },{
-        name: '落地平板车',
+        name:'斜落一体平板车',
+        value: 11 },{
+        name: '全落地平板车',
         value: 3
       },{
         name: '地库车',
@@ -570,8 +571,11 @@ export default {
         name: '黄牌',
         value: 2
       }, {
-        name: '新能源',
+        name: '绿牌',
         value: 3
+      }, {
+        name: '黄绿牌',
+        value: 6
       }, {
         name: '临牌',
         value: 4
@@ -684,6 +688,7 @@ export default {
         this.vehicleTypes[7].disabled=true
         this.vehicleTypes[8].disabled=true
         this.vehicleTypes[9].disabled=true
+        this.vehicleTypes[10].disabled=true
       }else{
         this.isMultiple = false
         this.vehicleTypes[2].disabled=false
@@ -692,6 +697,7 @@ export default {
         this.vehicleTypes[7].disabled=false
         this.vehicleTypes[8].disabled=false
         this.vehicleTypes[9].disabled=false
+        this.vehicleTypes[10].disabled=false
       }
       if (newVal == 1 || newVal == 7 || newVal == 9){
         let arr = []
@@ -708,30 +714,89 @@ export default {
     },
   },
   async mounted() {
-    this.id=this.$route.params?.id
+    await this.initPage()
-    this.approvalForm.supplierId=this.$route.params?.supplierId
+    this.hasInited = true // 标记首次初始化完成（keep-alive 下 activated 据此判断再次进入需重新初始化）
-    const urlParams = new URLSearchParams(window.location.search);
+  },
-    const rawId = this.$route.query.supplierId || urlParams.get('supplierId');
+  activated() {
-    this.supplierId = rawId ? Number(rawId) : '';
+    // 从拍摄页返回：取回拍照结果/降级信息，保留表单不重新初始化
-    await this.getSupplierServiceTree();
+    const cam = this.$store.state.camera
-    await this.getTypeList();
+    if (cam.result || cam.fallback) {
-    if( this.id){
+      const { result, fallback } = cam
-      await this.vehicleInfo()
+      this.$store.commit('camera/clear')
-    }else{
+      if (result) {
-      this.originData={
+        this.cameraGuideType = result.type
-        vehicleType:'',
+        this.onCameraConfirm(result)
-        vehicleStatus:'',
+      } else {
-        virtualVehicle:'',
+        this.cameraGuideType = fallback.type
-        serviceIds:[],
+        this.handleCameraFail(fallback.error)
-        hasLiabilityInsurance:'',
-        insuranceCorp:'',
-        liabilityInsuranceStartTime:'',
-        liabilityInsuranceEndTime:'',
-        insurancePicturePhoto:''
       }
+      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);
+      const rawId = this.$route.query.supplierId || urlParams.get('supplierId');
+      this.supplierId = rawId ? Number(rawId) : '';
+      await this.getSupplierServiceTree();
+      await this.getTypeList();
+      if( this.id){
+        await this.vehicleInfo()
+      }else{
+        // 新增：清空 el-tree 勾选状态（缓存复用时可能残留上一辆车的服务种类勾选）
+        this.$nextTick(() => {
+          this.$refs.tree && this.$refs.tree.setCheckedKeys([])
+        })
+        this.originData={
+          vehicleType:'',
+          vehicleStatus:'',
+          virtualVehicle:'',
+          serviceIds:[],
+          hasLiabilityInsurance:'',
+          insuranceCorp:'',
+          liabilityInsuranceStartTime:'',
+          liabilityInsuranceEndTime:'',
+          insurancePicturePhoto:''
+        }
+        // 复制新增：从 query 预填类别/属性/服务种类（id 为空，提交仍走新增分支）
+        this.prefillFromQuery()
+      }
+    },
+    // 复制新增：从 query 解析并回填车辆类别/属性/服务种类 3 项，不调任何接口；
+    // 字段缺失或为空时等价普通新增兜底；其余字段（照片/OCR/责任险/保单/车辆状态）保持重置后的空值
+    // 注意：SPA 内 $router.push 跳转时 $route.query 保留原始类型（copyFlag 为数字 1），
+    // 整页加载/刷新时则为字符串 "1"，此处统一 String() 兼容两种来源
+    prefillFromQuery() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const copyFlag = this.$route.query.copyFlag || urlParams.get('copyFlag');
+      if (String(copyFlag) !== '1') {
+        return
+      }
+      const vehicleType = this.$route.query.vehicleType || urlParams.get('vehicleType');
+      const virtualVehicle = this.$route.query.virtualVehicle || urlParams.get('virtualVehicle');
+      const serviceIds = this.$route.query.serviceIds || urlParams.get('serviceIds');
+      if (vehicleType) {
+        this.selectedOption = String(vehicleType).split(',').map(Number)
+      }
+      if (virtualVehicle) {
+        this.virtualVehicle = Number(virtualVehicle)
+      }
+      // selectedOption 赋值触发 watch（类别 disabled 重置、小修车过滤拖车服务节点、setDefault），
+      // 服务树勾选必须在 watch 过滤之后执行，$nextTick 回调注册顺序保证清空勾选 → watch 过滤 → 预填勾选
+      this.$nextTick(() => {
+        if (serviceIds) {
+          this.$refs.tree && this.$refs.tree.setCheckedKeys(String(serviceIds).split(',').map(Number))
+        }
+      })
+    },
     showDateHandler() {
       if( this.id ) {   // 修改
         if( this.permissonList.includes('hasInsuranceAudit') ) {
@@ -803,12 +868,15 @@ export default {
       }
     },
     getVehicleLicense(color) {
+      color = color || ''
       if( color == '蓝' ) {
         this.vehicleLicense = 1
       } else if(color == '黄') {
         this.vehicleLicense = 2
       } else if(color == '临牌') {
         this.vehicleLicense = 4
+      } else if(color.includes('黄绿')) {
+        this.vehicleLicense = 6
       } else if(color.includes('绿')) {
         this.vehicleLicense = 3
       } else {
@@ -946,27 +1014,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 {
+      this.$router.push({ name: 'cameraGuide', query: { type } })
-        // 前置真实探测相机可用性，避免进入拍摄引导页后黑屏；拿到流立即释放
+    },
-        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
+    isCameraPermissionError(e) {   // 是否为相机权限类错误
-        stream.getTracks().forEach(t => t.stop())
+      return !!(e && (e.name === 'NotAllowedError' || e.name === 'SecurityError' || e.name === 'PermissionDeniedError'))
-        this.cameraGuideVisible = true
+    },
-      } catch (e) {
+    handleCameraFail(e) {   // 相机不可用统一处理：权限类弹确认框，其他异常提示后由用户点击触发相册（保证点击手势有效）
-        console.error('probe getUserMedia error:', e)
+      if (this.isCameraPermissionError(e)) {
-        if (e && (e.name === 'NotAllowedError' || e.name === 'SecurityError')) {
+        Dialog.confirm({
-          // 权限被拒：弹框询问（重试/从相册选择）
+          title: '提示',
-          this.onCameraFallback()
+          message: '相机权限未开启，无法使用拍摄引导。是否重新尝试开启相机？',
-        } else {
+          confirmButtonText: '重新尝试',
-          // 无摄像头、被占用等其他异常：直接降级系统选择器
+          cancelButtonText: '从相册选择',
-          this.triggerNativeUpload(type)
+          confirmButtonColor: '#354D93',
-        }
+        }).then(() => {
+          // 重新走前置探测，探测通过才打开拍摄引导
+          this.onLicenseSlotClick(this.cameraGuideType)
+        }).catch(() => {
+          this.triggerNativeUpload(this.cameraGuideType)
+        })
+      } else {
+        Dialog.alert({
+          title: '提示',
+          message: '当前设备无法调用相机拍摄，请从相册选择照片上传。',
+          confirmButtonText: '从相册选择',
+          confirmButtonColor: '#354D93',
+        }).then(() => {
+          this.triggerNativeUpload(this.cameraGuideType)
+        })
       }
     },
     triggerNativeUpload(type) {  // 主动触发对应 uploader 的原生文件选择
@@ -978,7 +1073,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 +1090,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 {
@@ -1135,7 +1210,7 @@ export default {
         cardSide: 'FRONT'
       });
       this.vehicleFrontLicensePlate=res.data?.number
-      this.getVehicleLicense(res.data.color)
+      this.getVehicleLicense(res.data?.color)
     },
     async vehicleOcrHandler() {     // 行驶证首页 ocr 识别
       this.vehicleLicenseInfo.licensePlateNumber = '';
@@ -1160,6 +1235,8 @@ export default {
         this.vehicleLicenseInfo.licensePlateNumber = frontInfo?.plateNo;
         this.vehicleLicenseInfo.vehicleType = frontInfo?.vehicleType;
         this.vehicleLicenseInfo.owner = frontInfo?.owner;
+        // 行驶证所有人识别成功后，预判车辆属性（命中服务商信息则锁定为自有车辆）
+        this.preJudgeVirtualVehicle();
         this.vehicleLicenseInfo.address = frontInfo?.address;
         this.vehicleLicenseInfo.useNature = frontInfo?.useCharacter;
         this.vehicleLicenseInfo.model = frontInfo?.model;
@@ -1184,6 +1261,33 @@ export default {
       }
       return  true
     },
+    // 车辆属性预判：行驶证所有人与车辆归属服务商的名称/法人/关联人员比对，命中自有则锁定选择器
+    async preJudgeVirtualVehicle() {
+      const wasLocked = this.virtualVehicleLocked;
+      this.virtualVehicleLocked = false;
+      this.virtualVehicleMatchRole = '';
+      // 之前命中自有自动填入的值，本次未命中/识别失败则清空（自有车辆不可手动选），由操作人员手动选择 2/3/4
+      if (wasLocked && this.virtualVehicle === 1) {
+        this.virtualVehicle = '';
+      }
+      const owner = (this.vehicleLicenseInfo.owner || '').trim();
+      if (!owner) {
+        return;
+      }
+      try {
+        const res = await preJudgeVirtualVehicleApi({
+          owner,
+          supplierId: this.supplierId || undefined  // 车辆归属服务商ID，自录场景为空由后端取当前用户服务商
+        });
+        if (res?.data?.locked) {
+          this.virtualVehicleLocked = true;
+          this.virtualVehicleMatchRole = res.data.matchRole || '';
+          this.virtualVehicle = 1;
+        }
+      } catch (e) {
+        // 预判失败不影响保存，选择器保持可编辑
+      }
+    },
     async vehicleBackOcrHandler() {     // 行驶证副页 ocr 识别
       this.vehicleLicenseInfo.recordNumber = '';
       this.vehicleLicenseInfo.passengerCapacity = '';
@@ -1262,6 +1366,9 @@ export default {
       });
       this.auditStatus = result.auditStatus;
       this.virtualVehicle = result.virtualVehicle;
+      // 车辆属性溯源：编辑场景初始化匹配角色，已是自有车辆且命中角色时锁定选择器
+      this.virtualVehicleMatchRole = result.virtualVehicleMatchRole || '';
+      this.virtualVehicleLocked = !!(result.virtualVehicleMatchRole && result.virtualVehicle === 1);
       this.$refs.tree.setCheckedKeys(result.serviceIds)
       this.vehicleStatus = result.vehicleStatus
       this.vehicleLicenseFront = result.vehicleLicenseFront;
@@ -1686,8 +1793,7 @@ export default {
   },
   components:{
     CellGroup,
-    TwoCommonBtn,
+    TwoCommonBtn
-    CameraGuide
   }
 }
 </script>
@@ -1834,6 +1940,37 @@ export default {
   pointer-events: none;
   opacity: 0.6;
 }
+/* 车辆属性-匹配角色溯源 */
+.virtualVehicleField {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .matchRoleArrow {
+    margin-left: 6px;
+    cursor: pointer;
+    color: #909399;
+    user-select: none;
+    display: inline-block;
+    font-size: 22px;
+    line-height: 1;
+    padding: 4px;
+    transition: transform .2s;
+    &.expanded {
+      transform: rotate(180deg);
+      color: #354D93;
+    }
+  }
+}
+.matchRolePanel {
+  margin: 0 25px 6px 0;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: #606266;
+  background: #f4f4f5;
+  border-radius: 4px;
+  line-height: 1.6;
+  text-align: right;
+}
 .pop_wrap {
   width: 340px;
   box-sizing: border-box;

src/views/index/vehicleManage.vue

@@ -82,7 +82,10 @@
             <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}
               <span class="ml10"  :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus == 2 ,'insuranceGray': !item.vehicleStatus }">{{ item.vehicleStatus == 1 ? '启用' :( item.vehicleStatus == 2 ? '停用' : ( item.vehicleStatus == 12 ? '否-服务商停用' : '无状态')) }} </span>
             </div>
-            <div class="codeRight" v-if="item.vehicleStatus == 1" @click.stop="updateStatus(item)">停用</div>
+            <div class="btnWrap">
+              <div class="codeRight" v-if="permissonList.includes('vehicleAddBtn') || supplierId" @click.stop="copyAddVehicle(item)">复制新增</div>
+              <div class="codeRight" v-if="item.vehicleStatus == 1" @click.stop="updateStatus(item)">停用</div>
+            </div>
           </div>
           <div class="juhe flex-between">
             <span class="zdJuhe">核验认证</span>
@@ -360,6 +363,19 @@ export default {
             // on cancel
       });
     },
+    copyAddVehicle(item){//复制新增：把源车的类别/属性/服务种类通过 query 带入新增页（后端未返回新字段时为空，新增页按普通新增兜底）
+      const query = {
+        copyFlag: 1,
+        vehicleType: item.vehicleType || '',
+        virtualVehicle: item.virtualVehicle || '',
+        serviceIds: (item.serviceIds || []).join(','),
+      }
+      if (this.supplierId) {//潜在服务商流程，与「添加」按钮保持一致
+        query.supplierId = this.supplierId
+        query.potentialFlag = this.potentialFlag
+      }
+      this.goPage('vehicleAdd', query)
+    },
     updateVehicle(item){//修改
       if( this.permissonList.includes('vehicleModifyBtn') ) {
         this.$router.push({
@@ -445,6 +461,13 @@ export default {
     .codeLeft{
       @include fontWeightSize(bold,14px)
     }
+    .btnWrap{
+      display: flex;
+      align-items: center;
+      .codeRight + .codeRight{
+        margin-left: 8px;
+      }
+    }
     .codeRight{
       padding: 2px 8px;
       border: 1px solid #DDDDDD;