去掉企微验证

This reverts commit 57f83916

.gitignore

@@ -17,6 +17,8 @@ pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
+.claude
+.kimi-code
 *.suo
 *.ntvs*
 *.njsproj

.idea/misc.xml

@@ -3,4 +3,7 @@
   <component name="JavaScriptSettings">
     <option name="languageLevel" value="ES6" />
   </component>
+  <component name="WebPackConfiguration">
+    <option name="mode" value="DISABLED" />
+  </component>
 </project>

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

package-lock.json

@@ -15,9 +15,10 @@
         "dayjs": "^1.8.14",
         "decimal.js": "^10.4.3",
         "echarts": "^5.2.2",
-        "element-ui": "^2.15.9",
+        "element-ui": "^2.15.13",
         "less": "^4.1.3",
         "less-loader": "^11.1.3",
+        "qrcode": "^1.5.4",
         "qs": "^6.11.2",
         "sass": "^1.65.1",
         "sass-loader": "^13.3.2",
@@ -3350,7 +3351,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4801,6 +4801,15 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -5020,6 +5029,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5210,8 +5225,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-      "dev": true
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -6215,7 +6229,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -6370,7 +6383,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -6992,7 +7004,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7408,7 +7419,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -8445,7 +8455,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -8460,7 +8469,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -8485,7 +8493,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8582,7 +8589,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8663,6 +8669,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -9394,6 +9409,131 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -9643,7 +9783,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9657,6 +9796,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -10033,6 +10178,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10324,7 +10475,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10338,7 +10488,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11702,6 +11851,12 @@
         "which": "bin/which"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
@@ -14418,8 +14573,7 @@
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -15473,6 +15627,11 @@
         }
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
     "decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -15627,6 +15786,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -15783,8 +15947,7 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-      "dev": true
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -16545,7 +16708,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "requires": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -16650,8 +16812,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-      "dev": true
     },
     "get-intrinsic": {
       "version": "1.2.1",
@@ -17088,8 +17249,7 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-      "dev": true
     },
     "is-glob": {
       "version": "4.0.3",
@@ -17399,7 +17559,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "requires": {
         "p-locate": "^4.1.0"
       }
@@ -18184,7 +18343,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -18193,7 +18351,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "requires": {
         "p-limit": "^2.2.0"
       }
@@ -18211,8 +18368,7 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-      "dev": true
     },
     "param-case": {
       "version": "3.0.4",
@@ -18292,8 +18448,7 @@
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-      "dev": true
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -18350,6 +18505,11 @@
         "find-up": "^4.0.0"
       }
     },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
     "portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -18835,6 +18995,96 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
     },
+    "qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -19021,8 +19271,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
-      "dev": true
     },
     "require-from-string": {
       "version": "2.0.2",
@@ -19030,6 +19279,11 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -19293,6 +19547,11 @@
         "send": "0.18.0"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -19534,7 +19793,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -19545,7 +19803,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "requires": {
         "ansi-regex": "^5.0.1"
       }
@@ -20524,6 +20781,11 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
     "wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",

package.json

@@ -16,9 +16,10 @@
     "dayjs": "^1.8.14",
     "decimal.js": "^10.4.3",
     "echarts": "^5.2.2",
-    "element-ui": "^2.15.9",
+    "element-ui": "^2.15.13",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
+    "qrcode": "^1.5.4",
     "qs": "^6.11.2",
     "sass": "^1.65.1",
     "sass-loader": "^13.3.2",

public/index.html

@@ -32,6 +32,10 @@
     </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>
+        window.selfLink = window.location.href;
+        window.selfSearch = window.location.search;
+    </script>
     <script>
         // VConsole 默认会挂载到 `window.VConsole` 上
         // let vConsole = new window.VConsole();
@@ -52,7 +56,7 @@
             if (isMobile) {// 是移动端不变
                 // console.log("是移动端不变")
             }else{
-                if(window.location.pathname=='/h5/supplier/dispatch/kpiIndex'){
+                if(window.location.pathname=='/h5/supplier/dispatch/kpiIndex' || window.location.pathname=='/h5/supplier/dispatch/kpiCaseNew'){
                     // console.log("执行了执行了")
                     win.addEventListener(resizeEvt, recalc, false);
                     doc.addEventListener('DOMContentLoaded', recalc, false);

public/res/year-statistic/README.md

@@ -0,0 +1,160 @@
+# 年终总结看板 Dashboard
+
+道路救援服务年终数据可视化看板项目。
+
+## 项目结构
+
+```
+dashboard-demo/
+├── index.html              # 主看板页面（支持URL参数动态加载数据）
+├── data/
+│   ├── 供应商年度KPI.xlsx    # 服务商KPI数据（主数据源）
+│   ├── 师傅案件top3.xlsx     # 案件量TOP3师傅数据
+│   ├── 师傅在线top3.xlsx     # 在线时长TOP3师傅数据
+│   ├── 拒单率最高地区.xlsx    # 拒单率最高地区数据
+│   └── 拒单率最高时段.xlsx    # 拒单率最高时段数据
+└── README.md               # 项目说明
+```
+
+## 功能特性
+
+- 深色主题数据可视化看板
+- **直接读取Excel文件**，无需转换为JSON
+- 支持通过URL参数 `?providerId=XXX` 切换不同服务商
+- 右上角下拉框可实时切换服务商（自动从Excel读取服务商列表）
+- 使用 Chart.js 实现饼状图和雷达图
+- 使用 SheetJS (xlsx) 解析Excel文件
+- 响应式布局，支持不同屏幕尺寸
+- 数据与页面分离，便于维护
+
+## 数据指标
+
+看板展示以下数据指标：
+
+1. **总案件量分布**（饼状图）
+   - 小修、困境、拖车三类案件占比
+
+2. **年度聚合案件量**
+
+3. **案件量TOP3师傅**
+
+4. **车辆平均总在线时长**
+
+5. **在线时长TOP3师傅**
+
+6. **拒单率最高地区**
+
+7. **拒单率最高时段**
+
+8. **APP使用率**
+   - 年度APP使用率展示
+
+## Excel数据结构
+
+### 1. 供应商年度KPI.xlsx
+
+| 列名 | 说明 |
+|------|------|
+| 服务商id | 服务商唯一标识 |
+| 服务商 | 服务商名称 |
+| 完成案件量 | 总案件数量 |
+| 拖车完成量 | 拖车案件数 |
+| 小修完成量 | 小修案件数 |
+| 困境完成量 | 困境案件数 |
+| 聚合案件量 | 聚合案件数量 |
+| APP使用率. | APP使用率（小数形式，如0.998） |
+| 年度车辆平均总在线时长（小时） | 车辆平均在线时长 |
+
+### 2. 师傅案件top3.xlsx
+
+| 列名 | 说明 |
+|------|------|
+| 服务商id | 服务商唯一标识 |
+| 服务商 | 服务商名称 |
+| 服务人员工号 | 师傅姓名/工号 |
+| 完成案件量 | 该师傅完成的案件数 |
+
+### 3. 师傅在线top3.xlsx
+
+| 列名 | 说明 |
+|------|------|
+| 服务商名称 | 服务商名称 |
+| 司机姓名 | 师傅姓名 |
+| 年度总在线时长（小时） | 在线时长 |
+
+### 4. 拒单率最高地区.xlsx
+
+| 列名 | 说明 |
+|------|------|
+| 供应商名称 | 服务商名称 |
+| 地区 | 拒单率最高的地区 |
+| 拒单率 | 拒单率（小数形式） |
+
+### 5. 拒单率最高时段.xlsx
+
+| 列名 | 说明 |
+|------|------|
+| 供应商名称 | 服务商名称 |
+| 时段 | 拒单率最高的时段 |
+| 拒单率 | 拒单率（小数形式） |
+
+## 使用方式
+
+### 1. 启动本地服务器
+
+由于页面使用 `fetch` 加载JSON数据，需要通过HTTP服务器访问：
+
+```bash
+cd C:\Users\Administrator\dashboard-demo
+
+# 使用 Python
+python -m http.server 8080
+
+# 或使用 Node.js
+npx serve .
+
+# 或使用 PHP
+php -S localhost:8080
+```
+
+### 2. 访问页面
+
+- 默认服务商：`http://localhost:8080`（自动加载第一个服务商）
+- 指定服务商：`http://localhost:8080?providerId=1128`（使用服务商id）
+- 切换服务商：使用页面右上角的下拉框
+
+### 3. 更新数据
+
+直接替换 `data/` 目录下的Excel文件即可，页面会自动读取最新数据。
+服务商列表从Excel自动生成，无需手动配置。
+
+## 技术栈
+
+- HTML5 / CSS3
+- JavaScript (ES6+)
+- Chart.js - 图表库（饼图、雷达图）
+- SheetJS (xlsx) - Excel文件解析
+- CSS Grid / Flexbox - 布局
+
+## 后续优化方向
+
+- [ ] 添加更多图表类型（柱状图、折线图等）
+- [ ] 支持时间范围筛选
+- [ ] 添加数据导出功能
+- [ ] 移动端适配优化
+- [ ] 添加数据加载骨架屏
+- [ ] 支持主题切换（深色/浅色）
+
+## 更新日志
+
+### 2025-01-21
+- 改为直接读取Excel文件，无需JSON转换
+- 服务商列表从Excel自动生成
+- 将"AB段里程对比"改为"APP使用率"展示
+- 新增服务商选择下拉框
+
+### 2025-01-20
+- 初始版本
+- 实现基础看板布局
+- 支持URL参数切换服务商
+- 数据JSON化，与页面分离

public/res/year-statistic/data/SP001.json

@@ -0,0 +1,47 @@
+{
+  "serviceProviderId": "SP001",
+  "serviceProviderName": "上海道路救援服务中心",
+  "year": 2025,
+  "summary": {
+    "totalCases": 100,
+    "caseBreakdown": {
+      "minorRepair": 20,
+      "predicament": 20,
+      "towing": 60
+    },
+    "aggregatedCases": 15
+  },
+  "topMastersByCases": [
+    { "rank": 1, "name": "小王", "cases": 18 },
+    { "rank": 2, "name": "小张", "cases": 16 },
+    { "rank": 3, "name": "小李", "cases": 12 }
+  ],
+  "onlineHours": {
+    "averageTotal": 2920,
+    "topMasters": [
+      { "rank": 1, "name": "小王", "hours": 3230 },
+      { "rank": 2, "name": "小张", "hours": 3028 },
+      { "rank": 3, "name": "小李", "hours": 2996 }
+    ]
+  },
+  "rejectionRate": {
+    "highestRegion": {
+      "name": "崇明",
+      "rate": 21.2
+    },
+    "highestTimeSlot": {
+      "period": "18:00-22:00",
+      "description": "晚高峰时段"
+    }
+  },
+  "abMileage": {
+    "highest": {
+      "region": "崇明",
+      "distance": 62
+    },
+    "lowest": {
+      "region": "黄浦",
+      "distance": 6
+    }
+  }
+}

public/res/year-statistic/data/SP002.json

@@ -0,0 +1,47 @@
+{
+  "serviceProviderId": "SP002",
+  "serviceProviderName": "浦东汽车救援有限公司",
+  "year": 2025,
+  "summary": {
+    "totalCases": 156,
+    "caseBreakdown": {
+      "minorRepair": 35,
+      "predicament": 41,
+      "towing": 80
+    },
+    "aggregatedCases": 22
+  },
+  "topMastersByCases": [
+    { "rank": 1, "name": "老陈", "cases": 28 },
+    { "rank": 2, "name": "大刘", "cases": 24 },
+    { "rank": 3, "name": "阿强", "cases": 19 }
+  ],
+  "onlineHours": {
+    "averageTotal": 3150,
+    "topMasters": [
+      { "rank": 1, "name": "老陈", "hours": 3580 },
+      { "rank": 2, "name": "大刘", "hours": 3420 },
+      { "rank": 3, "name": "阿强", "hours": 3210 }
+    ]
+  },
+  "rejectionRate": {
+    "highestRegion": {
+      "name": "奉贤",
+      "rate": 18.5
+    },
+    "highestTimeSlot": {
+      "period": "07:00-09:00",
+      "description": "早高峰时段"
+    }
+  },
+  "abMileage": {
+    "highest": {
+      "region": "金山",
+      "distance": 55
+    },
+    "lowest": {
+      "region": "静安",
+      "distance": 8
+    }
+  }
+}

public/res/year-statistic/data/package-lock.json

@@ -0,0 +1,119 @@
+{
+  "name": "data",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "data",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "xlsx": "^0.18.5"
+      }
+    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    }
+  }
+}

public/res/year-statistic/data/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "data",
+  "version": "1.0.0",
+  "description": "",
+  "main": "read-excel.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "xlsx": "^0.18.5"
+  }
+}

public/res/year-statistic/data/read-excel.js

@@ -0,0 +1,30 @@
+const XLSX = require('xlsx');
+const fs = require('fs');
+const path = require('path');
+
+// Excel文件路径
+const excelPath = 'C:\\Users\\chenhaid\\Documents\\WXWork\\1688858118476511\\Cache\\File\\2026-02\\供应商年度KPIv5.xlsx';
+
+// 输出JSON文件路径
+const outputPath = path.join(__dirname, 'kpi.json');
+
+// 读取Excel文件
+const workbook = XLSX.readFile(excelPath);
+
+// 获取第一个工作表名称
+const sheetName = workbook.SheetNames[0];
+console.log('工作表列表:', workbook.SheetNames);
+
+// 获取工作表
+const worksheet = workbook.Sheets[sheetName];
+
+// 转换为JSON
+const jsonData = XLSX.utils.sheet_to_json(worksheet);
+
+console.log('读取到', jsonData.length, '条数据');
+console.log('第一条数据示例:', JSON.stringify(jsonData[0], null, 2));
+
+// 写入JSON文件
+fs.writeFileSync(outputPath, JSON.stringify(jsonData, null, 2), 'utf8');
+
+console.log('已保存到:', outputPath);

src/api/authentication.js

@@ -0,0 +1,120 @@
+import request from '@/utils/http'
+// 根据订单 获取报备类型
+/*export function getReportListByOrder(key){
+  return request({
+    url: '/order/baseDriverReportConfigs/getByOrderId',
+    method:'GET',
+    params: key
+  })
+}*/
+// 弹框
+export function successPopup( data) {
+  return request({
+    url: '/returnOrder/wechatDriver/user/successPopup',
+    method:'POST',
+    contentType: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+// 认证进度
+export function infoVerifyProgress(data){
+  return request({
+    url: '/returnOrder/wechatDriver/user/infoVerifyProgress',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+
+// 认证详情
+export function driverInfoVerifyDetail(data) {
+  return request({
+    url:'/returnOrder/wechatDriver/user/driverInfoVerifyDetail',
+    method:'POST',
+    data: data,
+    contentType: 'application/json',
+  })
+}
+
+// 我的信息
+export function getMyInfo(data) {
+  return request({
+    url:'/returnOrder/wechatDriver/user/driverDetail',
+    method:'POST',
+    data: data,
+  })
+}
+// ocr识别
+export function ocrRecognize( data) {
+  return request( {
+    url:'/returnOrder/wechatDriver/user/ocrRecognize',
+    data: data,
+    method:'POST',
+    contentType: 'application/json'
+  })
+}
+// 认证
+export function driverInfoVerify( data) {
+  return request({
+    url:'/returnOrder/wechatDriver/user/driverInfoVerify',
+    data: data,
+    method:'POST',
+    contentType: 'application/json'
+  })
+}
+// 实名认证
+export function driverRealName( data) {
+  return request('/returnOrder/wechatDriver/user/driverRealNameAuth', {
+    data: data,
+    method:'POST',
+    contentType: 'application/json'
+  })
+}
+//获取需要确认的人员信息列表
+export function getConfirmPerson(key){
+  return request({
+    url: '/supplierAppV2/dispatchApp/wechat/getNeedConfirmPersonInfo',
+    method:'GET',
+    params: key
+  })
+}
+//微信相关 获取联系我 二维码
+export function getQrCode(key){
+  return request({
+    url: '/supplierAppV2/dispatchApp/wechat/getQrCode',
+    method:'GET',
+    params: key
+  })
+}
+//获取服务商的确认状态
+export function getConfirmStatus(key){
+  return request({
+    url: '/supplierAppV2/dispatchApp/wechat/getSupplier',
+    method:'GET',
+    params: key
+  })
+}
+//确认已添加微信按钮
+export function confirmAddWechat(key){
+  return request({
+    url: '/supplierAppV2/dispatchApp/wechat/confirmAddWechat',
+    method:'GET',
+    params: key
+  })
+}
+//确认无误
+export function confirm(key){
+  return request({
+    url: '/supplierAppV2/dispatchApp/wechat/confirm',
+    method:'GET',
+    params: key
+  })
+}
+//提交审批
+export function submitConfirm( data) {
+  return request('/supplierAppV2/dispatchApp/wechat/submitConfirm', {
+    data: data,
+    method:'POST',
+    contentType: 'application/json'
+  })
+}

src/api/damagePhoto.js

@@ -0,0 +1,14 @@
+import request from '@/utils/http'
+
+/**
+ * 查询 H5 损伤照片
+ * @param {Object} data - { userOrderId, taskOrderId }
+ */
+export function getDamagePhotos(data) {
+  return request({
+    url: '/api/h5-interface/damagePhotos',
+    method: 'POST',
+    contentType: 'application/json',
+    data
+  })
+}

src/api/environmentPhoto.js

@@ -0,0 +1,10 @@
+import request from '@/utils/http'
+
+export function getBeforeDispatchImage(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/order/getBeforeDispatchImage',
+    method: 'POST',
+    contentType: 'application/json',
+    data
+  })
+}

src/api/kpi.js

@@ -81,4 +81,41 @@ export function getDriverName(key) {
       key: key ,
     }
   });
-}
+}
+
+export function getVehicleName(key) {
+  return request({
+    url: '/supplier/select/vehicle',
+    method: 'GET',
+    params: {
+      key: key ,
+    }
+  });
+}
+
+// 车辆 总览
+export function vehicleTotalInfo(data) {
+  return request({
+    url: '/supplier/supplierKPI/querySupplierVehicleStatisticsKpi',
+    method: 'POST',
+    data
+  });
+}
+
+// 服务商维度查询车辆
+export function vehicleInfoBySupplier(data) {
+  return request({
+    url: '/supplier/supplierKPI/querySupplierStatisticsKpiBySupplier',
+    method: 'POST',
+    data
+  });
+}
+
+// 车辆维度查询车辆
+export function vehicleInfoByVehicle(data) {
+  return request({
+    url: '/supplier/supplierKPI/querySupplierVehicleKpi',
+    method: 'POST',
+    data
+  });
+}

src/api/mine.js

@@ -18,6 +18,42 @@ 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({
+        url:'/supplier/approval/saveSupplierDriverVehicleApproval',
+        method:'POST',
+        contentType:'application/json',
+        data
+    })
+}
+/*车辆更改状态 /supplierAppV2/dispatchApp/user/enableVehicle*/
+export function enableVehicle(data){
+    return request({
+        url:'/supplierAppV2/dispatchApp/user/enableVehicle',
+        method:'POST',
+        contentType:'application/json',
+        data
+    })
+}
+
+//编辑车辆信息
+export function updateInsurance(data){
+    return request({
+        url:'/supplierAppV2/dispatchApp/user/updateInsurance',
+        method:'POST',
+        data
+    })
+}
+
 // 获取车辆信息（用于修改时回显的值,只需传vehicleId）
 export function getInfoById(data){
     return request({
@@ -44,12 +80,87 @@ export function vehicleTypeList(){
     })
 }
  // 服务商服务能力
-export function supplierServiceTree(){
+export function supplierServiceTree(data){
+    console.log('ddddddd0', data)
     return request({
         url:'/supplierAppV2/dispatchApp/user/supplierServiceTree',
-        method:'POST'
+        method:'POST',
+        data
     })
 }
+
+// 服务商服务能力
+export function supplierServicePartTree(data){
+    return request({
+        url:'/supplier/approval/getSupplierServiceTree',
+        method:'POST',
+        data
+    })
+}
+
+// 申请加入
+export function saveSupplier(data){
+    return request({
+        url:'/supplier/potential/save',
+        method:'POST',
+        data
+    })
+}
+
+// 申请加入
+export function auditSupplier(data){
+    return request({
+        url:'/supplier/potential/audit',
+        method:'POST',
+        data
+    })
+}
+
+// 修改申请信息
+export function getSupplierInfo(key){
+    return request({
+        url:'/supplier/potential/getById',
+        method:'GET',
+        params:key
+    })
+}
+
+// 根据id查询潜在服务商
+export function supplierSelectById(params){
+    return request({
+        url:'/supplier/potential/supplierSelectById',
+        method:'GET',
+        params
+    })
+}
+
+// 获取企微二维码
+export function getOrCodeInfo(data){
+    return request({
+        url:'/agg-api/wxcp/createContactQrCode',
+        method:'POST',
+        data
+    })
+}
+
+// 获取是否添加企微结果
+export function getContactQrCodeResult(data){
+    return request({
+        url:'/agg-api/wxcp/getContactQrCodeResult',
+        method:'POST',
+        data
+    })
+}
+
+// 添加企微
+export function updateWechatId(data){
+    return request({
+        url:'/supplier/potential/updateWechatId',
+        method:'POST',
+        data
+    })
+}
+
  //司机列表
 export function driverList(data){
     return request({
@@ -318,11 +429,20 @@ export function unifiedOCRWithCompress(data){
     })
 }
 
+export function getArea(data){
+    return request({
+        url:'/base/area/tree',
+        method:'POST',
+        data
+    })
+}
+
 // 服务商是否培训
 export function jumpPage(data){
     return request({
         url:'/supplierAppV2/dispatchApp/user/jumpPage',
         method:'POST',
+        contentType:'application/json',
         data
     })
 }
@@ -339,4 +459,4 @@ export function isSendInsuranceEmail(){
         url:'/supplierAppV2/dispatchApp/user/isSendInsuranceEmail',
         method:'POST',
     })
-}
+}

src/api/order.js

@@ -23,7 +23,7 @@ export function toDoAudit(data){
     data
   })
 }
-// 工单详情
+//
 export function getOrderDetail(data){
   return request({
     url:'/supplierAppV2/dispatchApp/order/getOrderDetail',
@@ -77,6 +77,15 @@ export function updateOrderSettlement(data){
     data
   })
 }
+// 获取司机信息
+export function getDriverInfo(data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/order/getDriverInfo',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}
 // 电瓶数量列表
 export function batteryCountList(){
   return request({
@@ -151,4 +160,40 @@ export function dealWithAlarm(data) {
   })
 }
 
+//获取当前任务信息
+export function getConfigByCode(data){
+  return request({
+    url: '/base/baseConfig/getConfigByCode',
+    method:'POST',
+    data
+  })
+}
+
+//获取最新版本
+export function getNewVersion(key){
+  return request({
+    url: '/driverApp/app/updateVersion',
+    method:'GET',
+    params: key
+  })
+}
+
+export function getLog(data){
+  // 添加log
+  return request({
+    url: '/ureport/pageView/save',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}
+
+
+//获取最新版本
+export function getUserBO(){
+  return request({
+    url: '/base/user/getUserBO',
+    method:'POST',
+  })
+}
 

src/api/secondHandCar.js

@@ -54,7 +54,7 @@ export function userFeedback(data){
     data
   })
 }
-//二手拖车信息擦亮
+//擦亮
 export function usedCarPolish(data){
   return request({
     url: `/toc-user/car-app/usedCarPolish/${data}`,

src/api/supplierPhone.js

@@ -0,0 +1,43 @@
+import request from '@/utils/http'
+
+/**
+ * 查询当前服务商分时段电话列表和审批状态
+ * @param {Object} params
+ * @param {number} params.supplierId 服务商 ID
+ */
+export function getSupplierPhoneList(params) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/supplierPhone/list',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 查询当前服务商电话时段变更审批状态
+ * @param {Object} params
+ * @param {number} params.supplierId 服务商 ID
+ */
+export function getSupplierPhoneApprovalStatus(params) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/supplierPhone/approvalStatus',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 提交服务商电话时段变更审批
+ * @param {Object} data
+ * @param {number} data.supplierId 服务商 ID
+ * @param {string} [data.modifyReason] 修改原因
+ * @param {Array} data.phoneList 电话时段草稿列表
+ */
+export function submitSupplierPhoneApproval(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/supplierPhone/submit',
+    method: 'POST',
+    contentType: 'application/json',
+    data
+  })
+}

src/components/CameraGuide.vue

@@ -0,0 +1,706 @@
+<template>
+  <div class="cameraGuide" v-if="visible">
+    <!-- ===== 拍摄引导页 ===== -->
+    <div class="cameraPage" v-show="step==='guide'">
+      <div class="cameraNav">
+        <van-icon name="arrow-left" class="backBtn" @click="handleClose" />
+        <span class="navTitle">{{ navTitle }}</span>
+      </div>
+
+      <div class="guideLayer">
+        <!-- 顶部主指令卡 -->
+        <div class="guideHero">
+          <div class="guideHeroIcon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="5" width="18" height="14" rx="2"></rect>
+              <path d="M3 9h18"></path>
+              <circle cx="8" cy="13.5" r="1.6"></circle>
+              <path d="M11 12.5h7M11 15h5"></path>
+            </svg>
+          </div>
+          <div class="guideHeroText">
+            <div class="guideHeroTitle">{{ heroTitle }}</div>
+            <div class="guideHeroSub">从卡套内拿出，避免反光</div>
+          </div>
+        </div>
+
+        <!-- 取景框 -->
+        <div class="guideFrameOuter">
+          <span class="corner tl"></span>
+          <span class="corner tr"></span>
+          <span class="corner bl"></span>
+          <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">
+                <div class="ltTitle">
+                  <div class="ltTitleLine">中华人民共和国机动车行驶证</div>
+                </div>
+                <div class="ltSeal">印章</div>
+              </div>
+            </div>
+            <!-- 副页模板：条形码 + 编号 -->
+            <div v-else-if="type==='back'" class="licenseTemplate ltBackPage">
+              <div class="ltInner">
+                <div class="ltBarcodeArea">
+                  <div class="ltBarcodeStrip">
+                    <div v-for="(bar, i) in barcodeBars" :key="i" class="ltBar" :class="bar"></div>
+                  </div>
+                  <div class="ltBarcodeNum">3701001234567</div>
+                </div>
+              </div>
+            </div>
+            <!-- 车辆照片模板：标题 + 车辆轮廓 -->
+            <div v-else class="licenseTemplate ltCarPage">
+              <div class="ltInner">
+                <div class="ltTitle">
+                  <div class="ltTitleLine">车辆照片</div>
+                </div>
+                <div class="ltCarOutline">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部取景要点 -->
+        <div class="guideTips">
+          <div class="tipItem ok">
+            <span class="tipIco">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 8V4h4M16 4h4v4M20 16v4h-4M8 20H4v-4"></path>
+              </svg>
+            </span>
+            <span class="tipLabel">四角入框</span>
+          </div>
+          <div class="tipItem ok">
+            <span class="tipIco">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 12h16M7 7h10M7 17h10"></path>
+              </svg>
+            </span>
+            <span class="tipLabel">平放正向</span>
+          </div>
+          <div class="tipItem warn">
+            <span class="tipIco">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="4"></circle>
+                <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M5 19l2-2"></path>
+              </svg>
+            </span>
+            <span class="tipLabel">避免反光</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="shootBar">
+        <div class="shootBtn" @click="takePhoto"></div>
+        <div class="shootLabel">点击拍照</div>
+      </div>
+    </div>
+
+    <!-- ===== 预览确认页 ===== -->
+    <div class="previewPage" v-show="step==='preview'">
+      <div class="cameraNav">
+        <van-icon name="arrow-left" class="backBtn" @click="handlePreviewBack" />
+        <span class="navTitle">照片预览</span>
+      </div>
+      <div class="previewImgWrap">
+        <img class="previewImg" :src="previewDataURL" alt="预览" />
+      </div>
+      <div class="previewBtns">
+        <button class="previewBtn btnRetake" @click="retake">重拍</button>
+        <button class="previewBtn btnConfirm" @click="confirmPhoto">确认使用</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 拍摄引导组件：WebRTC 取景 + 引导框 + 分页面证件模板 + 预览确认
+// props: type(front/back/car), visible
+// emit: confirm({blob, dataURL})、cancel、fallback(权限拒绝/相机不可用，父组件降级系统选择器)
+export default {
+  name: 'CameraGuide',
+  props: {
+    type: {
+      type: String,
+      default: 'front'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 父组件前置探测时已拿到的相机流，传入则直接复用（iOS 上避免二次 getUserMedia 黑屏）
+    stream: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    const heights = ['tall', 'short', 'medium wide', 'tall', 'short', 'medium', 'tall wide', 'short',
+      'medium', 'tall', 'short wide', 'medium', 'tall', 'short', 'medium wide', 'tall',
+      'short', 'medium', 'tall wide', 'short', 'medium', 'tall', 'short wide', 'medium',
+      'tall', 'short', 'medium wide', 'tall', 'short', 'medium', 'tall wide', 'short',
+      'medium', 'tall', 'short wide', 'medium', 'tall', 'short', 'medium wide', 'tall']
+    return {
+      step: 'guide', // guide 拍摄引导 | preview 预览确认
+      activeStream: null,
+      previewBlob: null,
+      previewDataURL: '',
+      barcodeBars: heights
+    }
+  },
+  computed: {
+    navTitle() {
+      return { front: '拍摄行驶证主页', back: '拍摄行驶证副页', car: '拍摄行驶证车辆照片' }[this.type] || '拍摄行驶证'
+    },
+    heroTitle() {
+      return { front: '请将主页对准取景框', back: '请将副页对准取景框', car: '请将车辆对准取景框' }[this.type] || '请将证件对准取景框'
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.step = 'guide'
+        this.previewBlob = null
+        this.previewDataURL = ''
+        this.$nextTick(() => this.startCamera())
+      } else {
+        this.stopCamera()
+      }
+    }
+  },
+  beforeDestroy() {
+    this.stopCamera()
+  },
+  methods: {
+    async startCamera() {
+      try {
+        // 优先复用父组件探测时拿到的流，未传入才自行申请
+        const stream = this.stream || await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'environment' },
+          audio: false
+        })
+        // 等待期间组件已被关闭或销毁，立即释放
+        if (!this.visible || this._isDestroyed || this._isBeingDestroyed) {
+          stream.getTracks().forEach(t => t.stop())
+          return
+        }
+        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
+          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.warn('getUserMedia error:', e && (e.name || e.message || e))
+        this.$emit('fallback', e)
+      }
+    },
+    stopCamera() {
+      if (this.activeStream) {
+        this.activeStream.getTracks().forEach(t => t.stop())
+        this.activeStream = null
+      }
+    },
+    takePhoto() {
+      const video = this.$refs.video
+      if (!video || !video.videoWidth) {
+        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 = 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) {
+          this.$toast('拍摄失败，请重试')
+          return
+        }
+        this.previewBlob = blob
+        this.previewDataURL = dataURL
+        this.step = 'preview'
+      }, 'image/jpeg', 0.92)
+    },
+    retake() {
+      // 重拍回到引导页，相机流保持
+      this.step = 'guide'
+    },
+    confirmPhoto() {
+      this.$emit('confirm', { blob: this.previewBlob, dataURL: this.previewDataURL })
+    },
+    handleClose() {
+      this.$emit('cancel')
+    },
+    handlePreviewBack() {
+      // 预览页返回 = 放弃拍摄，关闭并释放相机流
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.cameraGuide {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3000;
+  background: #F5F5F5;
+}
+.cameraPage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(160deg, #F7F9FC 0%, #EEF1F6 50%, #E6EAF1 100%);
+  overflow: hidden;
+}
+.cameraVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.cameraNav {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 52px;
+  padding-left: 14px;
+  padding-top: env(safe-area-inset-top);
+  background: #2C395F;
+  color: #fff;
+  .backBtn {
+    font-size: 22px;
+    width: 36px;
+    flex-shrink: 0;
+  }
+  .navTitle {
+    flex: 1;
+    text-align: left;
+    font-size: 18px;
+    font-weight: bolder;
+    letter-spacing: .5px;
+    padding-left: 4px;
+  }
+}
+.guideLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 80px;
+  /* 避让底部拍照栏（约 142px 高），防止小屏下提示被遮挡 */
+  padding-bottom: 150px;
+  padding-bottom: calc(150px + env(safe-area-inset-bottom));
+  pointer-events: none;
+}
+.guideHero {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #FFFFFF;
+  border: 1px solid #E9E9EA;
+  border-radius: 6px;
+  padding: 12px 15px;
+  margin-bottom: 24px;
+  max-width: 322px;
+  width: calc(100% - 48px);
+  box-sizing: border-box;
+  box-shadow: 0 2px 10px rgba(20, 30, 50, .08);
+  .guideHeroIcon {
+    width: 42px;
+    height: 42px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(53, 77, 147, .10);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #354D93;
+    svg {
+      width: 23px;
+      height: 23px;
+    }
+  }
+  .guideHeroTitle {
+    color: #222;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.3;
+    letter-spacing: .3px;
+  }
+  .guideHeroSub {
+    color: #5B606E;
+    font-size: 12.5px;
+    margin-top: 4px;
+    line-height: 1.4;
+  }
+}
+/* 取景框：宽约为屏宽 80%，宽高比约 1.43:1；小屏按可视高度自适应缩小，避免遮挡上下元素 */
+.guideFrameOuter {
+  position: relative;
+  width: 80%;
+  /* 纵向可用高度 ≈ 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，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;
+  width: 30px;
+  height: 30px;
+  border-color: #354D93;
+  border-style: solid;
+  z-index: 10;
+  animation: cornerFadeIn .45s ease both;
+  &.tl { top: -4px; left: -4px; border-width: 4px 0 0 4px; border-radius: 4px 0 0 0; }
+  &.tr { top: -4px; right: -4px; border-width: 4px 4px 0 0; border-radius: 0 4px 0 0; }
+  &.bl { bottom: -4px; left: -4px; border-width: 0 0 4px 4px; border-radius: 0 0 0 4px; }
+  &.br { bottom: -4px; right: -4px; border-width: 0 4px 4px 0; border-radius: 0 0 4px 0; }
+}
+@keyframes cornerFadeIn {
+  from { opacity: 0; transform: scale(1.15); }
+  to { opacity: 1; transform: scale(1); }
+}
+.guideFrameBorder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 3px solid #C2C8D2;
+  border-radius: 8px;
+  pointer-events: none;
+  z-index: 9;
+}
+.guideHole {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+/* 证件模板叠层（仅视觉辅助，不拦截事件） */
+.licenseTemplate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  border: 1.5px solid rgba(53, 77, 147, .55);
+  border-radius: 4px;
+  overflow: hidden;
+  pointer-events: none;
+  background: rgba(53, 77, 147, .06);
+}
+.ltInner {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.ltTitle {
+  text-align: center;
+  margin-bottom: 4px;
+}
+.ltTitleLine {
+  font-size: 10px;
+  color: rgba(53, 77, 147, .9);
+  font-weight: bold;
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+.ltSeal {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  width: 34px;
+  height: 34px;
+  border: 1.5px dashed rgba(255, 85, 59, .85);
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 5.5px;
+  color: rgba(255, 85, 59, .85);
+}
+.ltFrontPage .ltInner {
+  justify-content: flex-start;
+}
+.ltBackPage .ltInner {
+  justify-content: flex-end;
+}
+.ltBarcodeArea {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  padding-bottom: 6px;
+  padding-right: 8px;
+}
+.ltBarcodeStrip {
+  display: flex;
+  align-items: flex-end;
+  height: 28px;
+  gap: 1px;
+  .ltBar {
+    background: rgba(53, 77, 147, .6);
+    width: 1.5px;
+    border-radius: 0.5px;
+    &.wide { width: 2.8px; }
+    &.short { height: 50%; }
+    &.medium { height: 70%; }
+    &.tall { height: 100%; }
+  }
+}
+.ltBarcodeNum {
+  font-size: 8px;
+  color: rgba(53, 77, 147, .9);
+  letter-spacing: 2px;
+  font-family: 'Courier New', monospace;
+}
+.ltCarPage .ltCarOutline {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 60%;
+    opacity: .6;
+    color: #354D93;
+  }
+}
+.guideTips {
+  display: flex;
+  gap: 10px;
+  margin-top: 22px;
+  padding: 0 14px;
+  max-width: 340px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.tipItem {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  background: #FFFFFF;
+  border-radius: 6px;
+  padding: 11px 4px 9px;
+  border: 1px solid #E9E9EA;
+  box-shadow: 0 2px 8px rgba(20, 30, 50, .06);
+  .tipIco {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 17px;
+      height: 17px;
+    }
+  }
+  &.ok .tipIco {
+    background: rgba(53, 77, 147, .10);
+    color: #354D93;
+  }
+  &.warn .tipIco {
+    background: rgba(255, 85, 59, .12);
+    color: #FF553B;
+  }
+  .tipLabel {
+    color: #5B606E;
+    font-size: 11.5px;
+    line-height: 1.3;
+    text-align: center;
+  }
+}
+.shootBar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 12px;
+  padding-bottom: calc(32px + env(safe-area-inset-bottom));
+  background: #FFFFFF;
+  border-top: 1px solid #E9E9EA;
+}
+.shootBtn {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 4px solid #354D93;
+  background: #FFFFFF;
+  position: relative;
+  box-shadow: 0 0 0 2px rgba(53, 77, 147, .22), 0 6px 16px rgba(20, 30, 50, .18);
+  &:active {
+    transform: scale(.92);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 58px;
+    height: 58px;
+    border-radius: 50%;
+    background: #354D93;
+  }
+}
+.shootLabel {
+  color: #5B606E;
+  font-size: 12px;
+  margin-top: 10px;
+  letter-spacing: 1px;
+}
+/* ===== 预览确认页 ===== */
+.previewPage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #F5F5F5;
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+}
+.previewImgWrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  overflow: hidden;
+}
+.previewImg {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+  object-fit: contain;
+}
+.previewBtns {
+  display: flex;
+  gap: 16px;
+  padding: 0 20px 32px;
+  padding-bottom: calc(32px + env(safe-area-inset-bottom));
+}
+.previewBtn {
+  flex: 1;
+  height: 48px;
+  border-radius: 24px;
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  &:active {
+    opacity: .8;
+  }
+}
+.btnRetake {
+  background: #FFFFFF;
+  color: #354D93;
+  border: 1px solid #354D93;
+}
+.btnConfirm {
+  background: #354D93;
+  color: #fff;
+}
+</style>

src/components/StepBar.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="step-bar">
+    <div
+      v-for="(step, index) in steps"
+      :key="index"
+      class="step-item"
+      :class="getStepClass(index)"
+    >
+      <div class="step-circle" @click="onStepClick(index)">
+        <span v-if="getStatus(index) === 'finish'" class="step-check">✓</span>
+        <span v-else>{{ index + 1 }}</span>
+      </div>
+      <div class="step-label">{{ step }}</div>
+      <div v-if="index < steps.length - 1" class="step-line" :class="{'step-line-done': getStatus(index) === 'finish'}"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StepBar',
+  props: {
+    current: {
+      type: Number,
+      default: 1
+    },
+    steps: {
+      type: Array,
+      default: () => ['基本信息', '添加企微', '车辆信息', '驾驶员信息']
+    }
+  },
+  methods: {
+    getStatus(index) {
+      const stepNum = index + 1;
+      if (stepNum < this.current) return 'finish';
+      if (stepNum === this.current) return 'process';
+      return 'wait';
+    },
+    getStepClass(index) {
+      return `step-${this.getStatus(index)}`;
+    },
+    onStepClick(index) {
+      const stepNum = index + 1;
+      if (this.getStatus(index) === 'finish') {
+        this.$emit('step-click', stepNum);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.step-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 14px 10px 10px;
+  background: #fff;
+  position: relative;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.step-circle {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: bold;
+  z-index: 1;
+  position: relative;
+}
+
+.step-finish .step-circle {
+  background: #0E76F4;
+  color: #fff;
+  cursor: pointer;
+}
+
+.step-process .step-circle {
+  background: #0E76F4;
+  color: #fff;
+  box-shadow: 0 0 0 3px rgba(14, 118, 244, 0.2);
+}
+
+.step-wait .step-circle {
+  background: #e0e0e0;
+  color: #999;
+}
+
+.step-label {
+  font-size: 11px;
+  margin-top: 5px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.step-finish .step-label {
+  color: #0E76F4;
+}
+
+.step-process .step-label {
+  color: #0E76F4;
+  font-weight: bold;
+}
+
+.step-wait .step-label {
+  color: #999;
+}
+
+.step-line {
+  position: absolute;
+  top: 13px;
+  left: calc(50% + 13px);
+  right: calc(-50% + 13px);
+  height: 2px;
+  background: #e0e0e0;
+}
+
+.step-line-done {
+  background: #0E76F4;
+}
+
+.step-check {
+  font-size: 14px;
+}
+</style>

src/router/authentication-router.js

@@ -0,0 +1,51 @@
+const authenticationRouter = [
+    {
+        path: '/auditList',
+        name: 'auditList',
+        component: () => import('@/views/rvDriverAuthentication/auditList.vue'),
+        meta:{
+            title: '小板运输司机认证',
+        }
+    },
+    {
+        path: '/personAudit',
+        name: 'personAudit',
+        component: () => import('@/views/rvDriverAuthentication/personAudit.vue'),
+        meta:{
+            title: '实名认证',
+        }
+    },
+    {
+        path: '/carAudit',
+        name: 'carAudit',
+        component: () => import('@/views/rvDriverAuthentication/carAudit.vue'),
+        meta:{
+            title: '驾驶证认证',
+        }
+    },
+    {
+        path: '/carInfoAudit',
+        name: 'carInfoAudit',
+        component: () => import('@/views/rvDriverAuthentication/carInfoAudit.vue'),
+        meta:{
+            title: '车辆信息认证',
+        }
+    },
+    {
+        path: '/bankInfo',
+        name: 'bankInfo',
+        component: () => import('@/views/rvDriverAuthentication/bankInfo.vue'),
+        meta:{
+            title: '银行卡信息认证',
+        }
+    },
+    {
+        path: '/personList',
+        name: 'personList',
+        component: () => import('@/views/mine/personList.vue'),
+        meta:{
+            title: '人员信息',
+        }
+    },
+]
+export default authenticationRouter

src/router/index.js

@@ -5,11 +5,60 @@ import kpiRouter from './kpi-router'
 import invoiceRouter from "@/router/invoice-router";
 import secondHandRouter from "@/router/second-hand-router";
 import reportRouter from "@/router/report-router"
+import authenticationRouter from "@/router/authentication-router"
 const routes = [
     {
       path: '/',
       redirect: '/index'
     },
+    {
+        path: '/supplierAdd',
+        name: 'supplierAdd',
+        component: () => import('@/views/index/supplierAdd'),
+        meta:{
+            title: '信息录入',
+        }
+    },
+    {
+        path: '/supplierAddResult',
+        name: 'supplierAddResult',
+        component: () => import('@/views/index/supplierAddResult'),
+        meta:{
+            title: '审核中',
+        }
+    },
+    {
+        path: '/addWechat',
+        name: 'addWechat',
+        component: () => import('@/views/index/addWechat'),
+        meta:{
+            title: '添加微信',
+        }
+    },
+    {
+        path: '/supplierInfo',
+        name: 'supplierInfo',
+        component: () => import('@/views/index/supplierInfo'),
+        meta:{
+            title: '信息查看',
+        }
+    },
+    {
+        path: '/supplierTimePhone',
+        name: 'supplierTimePhone',
+        component: () => import('@/views/index/supplierTimePhone'),
+        meta:{
+            title: '供应商时段电话',
+        }
+    },
+    {
+        path: '/supplierTimePhoneEdit',
+        name: 'supplierTimePhoneEdit',
+        component: () => import('@/views/index/supplierTimePhoneEdit'),
+        meta:{
+            title: '编辑时段电话',
+        }
+    },
     {
       path: '/toDoList',
       name: 'toDoList',
@@ -131,6 +180,22 @@ const routes = [
             title: '查看发票'
         }
     },
+    {
+        path: '/damagePhotos',
+        name: 'damagePhotoList',
+        component: () => import('@/views/damagePhoto/damagePhotoList.vue'),
+        meta: {
+            title: '损伤照片'
+        }
+    },
+    {
+        path: '/environmentPhotos',
+        name: 'environmentPhotoList',
+        component: () => import('@/views/environmentPhoto/environmentPhotoList.vue'),
+        meta: {
+            title: '环境照片'
+        }
+    },
     {
         path: "/vehicleManage",
         name: 'vehicleManage',
@@ -144,7 +209,24 @@ 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: '拍摄行驶证'
+        }
+    },
+    {
+        path: "/continueInsurance",
+        name: 'continueInsurance',
+        component: () => import('@/views/index/continueInsurance'),
+        meta: {
+            title: '续保更新'
         }
     },
     {
@@ -291,10 +373,19 @@ const routes = [
             title:'电瓶详情'
         }
     },
+    {
+        path: '/goToApp',
+        name: 'goToApp',
+        component:()=>import('@/views/goToApp/goToApp.vue'),
+        meta: {
+            title:'小板运输司机端'
+        }
+    },
     ...kpiRouter,
     ...invoiceRouter,
     ...secondHandRouter,
-    ...reportRouter
+    ...reportRouter,
+    ...authenticationRouter
   ]
 
 const router = new VueRouter({

src/router/kpi-router.js

@@ -7,5 +7,13 @@ const kpiRouter = [
             title: 'kpi首页',
         }
     },
+    {
+        path: '/kpiCaseNew',
+        name: 'kpiCaseNew',
+        component: () => import('@/views/kpi/kpiCaseNew'),
+        meta:{
+            title: 'kpi服务商案件&车辆情况',
+        }
+    },
 ]
 export default kpiRouter

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/styles/common.scss

@@ -47,4 +47,84 @@ select{
   font-size: 14px;
   color: #000000;
 }
+.text_center {
+  text-align: center;
+}
+//同意协议勾选
+.protocol-list {
+  display: flex;
+  //align-items: top;
+  margin-top: 5px;
+  justify-content: center;
+  position: fixed;
+  bottom: 20px;
+  text-align: center;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  .protocol-text {
+    font-size: 12px;
+    color: #203152;
+    line-height: 18px;
+    //text-align: left;
+    .linkColor {
+      color: #3364B7;
+      word-break: keep-all;
+    }
+  }
+}
 
+.icon_register {
+  width: 100%;
+  height: auto;
+}
+.mr15 {
+  margin-right: 15px;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.flex_vertical_center {
+  display: flex;
+  align-items: center;
+}
+.flex {
+  display: flex;
+}
+.flex_between {
+  justify-content: space-between;
+}
+
+
+/*@mixin wh($w,$h) {
+  width: $w;
+  height: $h;
+}
+@mixin flex(){
+  display: flex;
+}
+@mixin alignCenter(){
+  @include flex();
+  align-items: center;
+}
+@mixin col(){
+  @include flex();
+  flex-direction: column;
+}
+@mixin colBothCenter(){
+  @include col();
+  justify-content: center;
+  align-items: center;
+}
+@mixin sizingPadding($t,$r,$b,$l) {
+  box-sizing: border-box;
+  padding: $t $r $b $l;
+}*/
+/*@mixin weigthSize($wei,$size){
+  font-weight:$wei ;
+  font-size: $size;
+}
+@mixin  weigthSizeColor($wei,$size,$col){
+  @include weigthSize($wei,$size);
+  color: $col;
+}*/

src/styles/docment.scss

@@ -23,6 +23,17 @@
   div {
     padding-top: 8px;
   }
+  .commonNum{
+    padding: 2px 5px;
+    background-color: #9C9C9C;
+    color: white;
+    border-radius: 3px;
+    font-size: 13px;
+    margin-left: 3px;
+  }
+  .notFinish{
+    background-color: red;
+  }
   .active {
     color: #3678FF;
     position: relative;

src/styles/driverDocment.scss

@@ -1,6 +1,6 @@
 @import "@/styles/mixin.scss";
 ::v-deep .van-nav-bar__content{
-  background-color: #3A3A3A !important;
+  //background-color: #3A3A3A !important;
 }
 .wrap{
   @include wh(100%,100%);

src/styles/infoShow.scss

@@ -0,0 +1,43 @@
+.carInfo{
+  margin-top: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 151px;
+  background: #FFFFFF;
+  padding:8px 23px 17px 30px ;
+  display: flex;
+  justify-content: space-between;
+  .left_wrap,.right_wrap{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .title {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #323643;
+    .mar_left{
+      margin-left: 8px;
+    }
+    .star {
+      color: red;
+      margin-right: 3px;
+    }
+  }
+  .right_wrap{
+    align-items: flex-end;
+    .phone{
+      font-size: 13px;
+      font-weight: 500;
+      color: #323643;
+    }
+    input{
+      font-size: 12px;
+      text-align: right;
+      &::-webkit-input-placeholder { /* WebKit browsers，webkit内核浏览器 */
+        color: #A1A1A1;
+      }
+    }
+  }
+}

src/styles/mixin.scss

@@ -104,4 +104,33 @@
 @mixin colHeight($col,$hei){
     color: $col;
     line-height: $hei;
+}
+@mixin width_height($width,$height){
+    width: $width;
+    height: $height;
+}
+@mixin  flex($row,$colum){
+    display: flex;
+    justify-content: $row;
+    align-items: $colum;
+}
+@mixin center(){
+    display: flex;
+    align-items: center;
+}
+@mixin direction($justify-content){
+    display: flex;
+    flex-direction: column;
+    justify-content: $justify-content;
+}
+@mixin iconImg($width,$height,$marginRight){
+    width: $width;
+    height: $height;
+    margin-right: $marginRight;
+}
+
+@mixin iconImgLeft($width,$height,$marginRight){
+    width: $width;
+    height: $height;
+    margin-left: $marginRight;
 }

src/utils/common.js

@@ -42,11 +42,89 @@ const timeFormat=(data) =>{
   return formattedDate;
 
 }
+// 认证状态
+const verifyStatus=(id)=> {
+  const ids = String(id)
+  const status = {
+    '0': 1,		   // 个人信息认证
+    '-1': 1,     // 已注册
+    '7': 1,      // 已发送待认证
+    '1': 2,		   // 驾照信息认证
+    '2': 3,      // 车辆信息审核
+    '3': 4,		   // 银行卡信息审核
+    '4': 5,		   // 认证中
+    '8': 6,      // 审核中
+    '11': 6,     // 审核失败
+    '12': 6      // 审核成功
+  }
+  return status[ids]
+}
+
+// 认证状态  简易版
+const verifyStatusSimple=(id)=> {
+  const ids = String(id)
+  const status = {
+    '0': 1,		   // 个人信息认证
+    '-1': 1,     // 已注册
+    '7': 1,      // 已发送待认证
+    '1': 3,		   // 驾照信息认证
+    '2': 3,      // 车辆信息审核
+    '3': 4,		   // 银行卡信息审核
+    '4': 5,		   // 认证中
+    '8': 6,      // 审核中
+    '11': 6,     // 审核失败
+    '12': 6      // 审核成功
+  }
+  return status[ids]
+}
+
+// 认证状态
+const tipString=(id)=> {
+  const ids = String(id)
+  const status = {
+    '0': {                     // 个人信息认证
+      tip: '认证待提交',
+      button: '待认证'
+    },
+    '1': {                     // 驾照信息认证
+      tip: '认证待提交',
+      button: '待认证'
+    },
+    '2': {                     // 车辆信息审核
+      tip: '认证待提交',
+      button: '待认证'
+    },
+    '3': {                     // 银行卡信息审核
+      tip: '认证待提交',
+      button: '待认证'
+    },
+    '4': {                     // 认证中
+      tip: '认证待提交',
+      button: '待认证'
+    },
+    '8': {                     // 审核中
+      tip: '认证审核中',
+      button: '审核中'
+    },
+    '11': {                     // 审核失败
+      tip: '认证审核失败',
+      button: '审核失败'
+    },
+    '12': {                     // 审核成功
+      tip: '认证审核成功',
+      button: '审核成功'
+    },
+  }
+  return status[ids]
+}
 
 module.exports = {
   formatNumber,
   formatDate,
   leftCopy,
   timeFormat,
-  formatDate1
+  formatDate1,
+  verifyStatus,
+  verifyStatusSimple,
+  tipString
 }

src/utils/http.js

@@ -19,6 +19,7 @@ if( token ) {
 service.interceptors.request.use(
     config => {
       let reqUrl=config.url
+        // console.log('config',config)
       config.data = config.contentType ? config.data : qs.stringify(config.data)
       if (config.testFlag) {
         config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
@@ -27,12 +28,17 @@ service.interceptors.request.use(
       let token = localStorage.getItem('token');
       // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1NTQyMjUyNX0.xzDZhaANJFnbeViIHJA0SEtOyTv7Ja3rKmXqRKRuFkc'
       // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJTSEhQWEIiLCJ1c2VySWQiOjU0NzI2LCJuYW1lIjoiI-a1i-ivleWwj-eZveeZvSIsInVzZXJOYW1lIjoiU0hIUFhCIiwic3VwcGxpZXJJZCI6MTAwMDE2NSwiZXhwIjoxNzQ0NTEwNzkwfQ.JPk0OA7slYJN3FIi_uhW4Y0CiWRvl6R1dK8MRTbyhD8'
-       if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
+      //  if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
-         if(token) {
+        if ((reqUrl=='/supplier/supplierTraining/trainingList' || reqUrl=='/supplier/supplierTraining/normalList') && config?.params?.type==1){
-           config.headers['Authorization'] = `${token}`;
+            console.log('司机app使用该请求不挂token')
-           config.headers['token'] = `${token}`;
+        } else {
-         }
+            if(token) {
-       }
+                config.headers['Authorization'] = `${token}`;
+                config.headers['token'] = `${token}`;
+            }
+        }
+
+       // }
       return config
     },
     error => {
@@ -42,6 +48,7 @@ service.interceptors.request.use(
 
 service.interceptors.response.use(
     response => {
+        console.log('response', response.data)
       const res = response.data
       if ( res.code === 401 || res.code === 400  || res.code == 500) {
           Toast(res.msg || 'Error')

src/utils/kpiMixins.js

@@ -0,0 +1,102 @@
+import dayjs from "dayjs";
+
+export const kpiMixins = {
+  data() {
+    return {
+      isMobile: false,
+      isZd: '',
+      current:'2024-10',
+      supplierId:'',
+      supplierName:'',
+      startMonthTime: '',
+      startTime: '',
+      endTime: '',
+    }
+  },
+  methods: {
+    applicateHandle() {
+      if (window.parent) {
+        const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
+        if (hasListener) {
+          const data = {
+            action: 'closeDialog',
+            message: this.supplierId,
+            // 其他需要传递的参数
+          };
+          window.parent.postMessage(data, '*');
+        } else {
+          window.history.back();
+        }
+      }
+    },
+    toOnlineHours(minutes) {
+      let _hours = parseInt(minutes / 60);
+      let _minutes = parseInt(minutes % 60);
+      return _hours + '时' + _minutes + '分'
+    },
+    // 初始化获取当月日期
+    initDate() {
+      const today = dayjs(); // 获取当前日期
+      const currentDay = today.date(); // 获取今天是几号（1-31）
+      let targetMonth = today; // 默认目标月份是当前月
+      if (currentDay === 1) {
+        targetMonth = today.subtract(1, 'month'); // 上个月
+      }
+      this.current = targetMonth.format('YYYY-MM');
+      this.startTime = targetMonth.startOf('month').format('YYYY-MM-DD HH:mm:ss');
+      let endTime;
+      if (targetMonth.isSame(today, 'month')) {
+        endTime = today.subtract(1, 'day').endOf('day');
+      } else {
+        endTime = targetMonth.endOf('month');
+      }
+      this.endTime = endTime.format('YYYY-MM-DD HH:mm:ss');
+      this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
+    },
+    //获取近四个月的开始时间
+    getStartTimeFromEndTime(endTimeStr) {
+      const startTime = dayjs(endTimeStr).subtract(3, 'month').startOf('month');
+      return startTime.format('YYYY-MM-DD HH:mm:ss');
+    },
+    padZero(num) {
+      return num < 10 ? `0${num}` : num;
+    },
+    checkMobile() {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+    },
+    // 通用函数，用于处理百分比数据
+    processPercentage(value) {
+      value *= 100;
+      if (value % 1 !== 0) {
+        value = value.toFixed(2);
+      }
+      return value;
+    },
+    formatPercentage(value) {
+      let result = value * 100;
+      if (Number.isInteger(result)) {
+        return result.toString() + '%';
+      } else {
+        return result.toFixed(2) + '%';
+      }
+    },
+    // 格式化承接案件量数据
+    formatCurrency(value) {
+      if (!value) return '';
+      let num = parseInt(value);
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    },
+    formatCurrency1(value) {
+      if (!value) return ''; // 如果值为空，返回空字符串
+      // 如果值已经包含逗号，直接返回原值
+      if (value.toString().includes(',')) {
+        return value;
+      }
+      // 否则，添加千分号
+      let num = parseInt(value);
+      if (isNaN(num)) return ''; // 如果转换失败，返回空字符串
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    },
+  }
+}

src/utils/myMixins.js

@@ -1,3 +1,6 @@
+import { getLog } from "@/api/order"
+
+let _setLogTimer = null
 
 export const myMixins = {
   data() {
@@ -5,6 +8,17 @@ export const myMixins = {
     }
   },
   methods: {
+    setLogHandler(data) {
+      if (_setLogTimer) return
+      _setLogTimer = setTimeout(() => { _setLogTimer = null }, 1000)
+      getLog(data)
+    },
+    showFun() {
+      if( localStorage.getItem('infoVerify') == 8 || localStorage.getItem('infoVerify') == 12  ) {
+        return false
+      }
+      return  true
+    },
     goPage(page, query) {
       this.$router.push({
         name: page,
@@ -88,6 +102,7 @@ export const myMixins = {
     isWebFunc(){
       let res=false
       var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      console.log('isMobile',isMobile)
       if (!isMobile) {// 是移动端不变
         res=true
       }

src/utils/validate.js

@@ -0,0 +1,51 @@
+/**
+ * 校验电话号码
+ * 支持：大陆手机号、大陆固话、400电话、港澳手机号
+ * @param {string} phone
+ * @returns {boolean}
+ */
+export function isValidPhone(phone) {
+  if (!phone) return false
+  // 大陆手机号
+  const mainlandMobile = /^1[3-9]\d{9}$/
+  // 大陆固话：区号(可选) + 7~8位号码
+  const mainlandLandline = /^(0\d{2,3}-?)\d{7,8}$/
+  // 400电话
+  const phone400 = /^400-?\d{3}-?\d{4}$/
+  // 港澳手机号（8位，首位5/6/8/9）
+  const hkMacaoMobile = /^[5689]\d{7}$/
+  // 港澳固话
+  const hkMacaoLandline = /^(\d{4}-?)?\d{4}$/
+
+  return (
+    mainlandMobile.test(phone) ||
+    mainlandLandline.test(phone) ||
+    phone400.test(phone) ||
+    hkMacaoMobile.test(phone) ||
+    hkMacaoLandline.test(phone)
+  )
+}
+
+/**
+ * 校验时段格式 HH:mm 及起止关系
+ * @param {string} startTime
+ * @param {string} endTime
+ * @returns {{valid: boolean, message?: string}}
+ */
+export function validateTimeRange(startTime, endTime) {
+  const timeRegex = /^([0-1]\d|2[0-3]):([0-5]\d)$/
+  if (!startTime || !endTime) {
+    return { valid: false, message: '请填写完整的起止时段' }
+  }
+  if (!timeRegex.test(startTime) || !timeRegex.test(endTime)) {
+    return { valid: false, message: '时段格式不正确，应为 00:00 ~ 23:59' }
+  }
+  const [startH, startM] = startTime.split(':').map(Number)
+  const [endH, endM] = endTime.split(':').map(Number)
+  const start = startH * 60 + startM
+  const end = endH * 60 + endM
+  if (start > end) {
+    return { valid: false, message: '开始时间不得晚于结束时间' }
+  }
+  return { valid: true }
+}

src/views/damagePhoto/damagePhotoList.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="wrap damage-photo-wrap">
+    <div class="navBar">
+      <van-nav-bar
+        title="损伤照片"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="h5GoBack"
+      />
+    </div>
+
+    <div class="content-wrap" v-if="loaded">
+      <!-- 案件信息 -->
+      <div class="info-card">
+        <div class="info-item">
+          <span class="info-label">案件号</span>
+          <span class="info-value">{{ info.caseNo || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">车辆标识</span>
+          <span class="info-value">{{ info.vehicleIdentity || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">起止路线</span>
+          <span class="info-value">{{ info.route || '-' }}</span>
+        </div>
+      </div>
+
+      <!-- 照片列表 -->
+      <div class="photo-list" v-if="photoList.length">
+        <div class="photo-card" v-for="(item, index) in photoList" :key="index">
+          <div class="photo-title">
+            <span>{{ item.title || '-' }}</span>
+            <span
+              v-if="item.replaced || (item.historyList && item.historyList.length)"
+              class="replaced-tag"
+              @click="showHistory(item)"
+            >被替换</span>
+          </div>
+          <div class="photo-image" @click="previewCurrent(item.currentUrl)">
+            <van-image
+                :src="item.currentUrl"
+                fit="cover"
+                width="100%"
+                height="160"
+                :error-icon="defaultImg"
+                error-icon-size="48"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 空态 -->
+      <div class="empty-state" v-else>
+        <van-empty description="暂无损伤照片" />
+      </div>
+    </div>
+
+    <!-- 历史照片弹框 -->
+    <van-popup
+      v-model="historyShow"
+      position="bottom"
+      round
+      closeable
+      :style="{ height: '70%' }"
+      @closed="currentHistory = []"
+    >
+      <div class="history-popup">
+        <div class="history-title">历史照片</div>
+        <div class="history-list" v-if="currentHistory.length">
+          <div
+            class="history-item"
+            v-for="(item, index) in currentHistory"
+            :key="index"
+            @click="previewHistory(item.url)"
+          >
+            <van-image
+              :src="item.url"
+              fit="cover"
+              width="100%"
+              height="120"
+              :error-icon="defaultImg"
+              error-icon-size="48"
+            />
+            <div class="history-time" v-if="item.replaceTime">替换时间：{{ item.replaceTime }}</div>
+          </div>
+        </div>
+        <div class="history-empty" v-else>
+          <van-empty description="暂无历史照片" />
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { getDamagePhotos } from '@/api/damagePhoto'
+import { myMixins } from '@/utils/myMixins'
+import { ImagePreview, Toast } from 'vant'
+
+export default {
+  name: 'damagePhotoList',
+  mixins: [myMixins],
+  data() {
+    return {
+      loaded: false,
+      info: {
+        caseNo: '',
+        vehicleIdentity: '',
+        route: ''
+      },
+      photoList: [],
+      historyShow: false,
+      currentHistory: [],
+      defaultImg: require('@/assets/empty.png')
+    }
+  },
+  async mounted() {
+    await this.fetchDamagePhotos()
+  },
+  methods: {
+    async fetchDamagePhotos() {
+      const userOrderId = this.$route.query.userOrderId
+      const taskOrderId = this.$route.query.taskOrderId
+      if (!userOrderId || !taskOrderId) {
+        Toast('缺少必要参数')
+        this.loaded = true
+        return
+      }
+      Toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0
+      })
+      try {
+        const res = await getDamagePhotos({
+          userOrderId: Number(userOrderId),
+          taskOrderId: Number(taskOrderId)
+        })
+        this.info = {
+          caseNo: res.data?.caseNo || '',
+          vehicleIdentity: res.data?.vehicleIdentity || '',
+          route: res.data?.route || ''
+        }
+        this.photoList = Array.isArray(res.data?.photos) ? res.data.photos : []
+      } finally {
+        Toast.clear()
+        this.loaded = true
+      }
+    },
+    previewCurrent(url) {
+      if (!url) return
+      ImagePreview({
+        images: [url],
+        startPosition: 0,
+        closeable: true
+      })
+    },
+    showHistory(item) {
+      this.currentHistory = Array.isArray(item.historyList) ? item.historyList : []
+      this.historyShow = true
+    },
+    previewHistory(url) {
+      if (!url) return
+      ImagePreview({
+        images: [url],
+        startPosition: 0,
+        closeable: true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+
+.wrap {
+  @include wh(100%, 100%);
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+
+.navBar {
+  height: 46px;
+  ::v-deep .van-nav-bar--fixed {
+    z-index: 9999 !important;
+  }
+}
+
+.content-wrap {
+  padding: 10px 15px 20px;
+}
+
+.info-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+
+  .info-item {
+    display: flex;
+    line-height: 24px;
+    font-size: 13px;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    .info-label {
+      color: rgba(0, 0, 0, 0.5);
+      width: 70px;
+      flex-shrink: 0;
+    }
+
+    .info-value {
+      color: #323643;
+      flex: 1;
+      word-break: break-all;
+    }
+  }
+}
+
+.photo-list {
+  .photo-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 12px 15px;
+    margin-bottom: 10px;
+
+    .photo-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: bold;
+      color: #323643;
+      margin-bottom: 10px;
+
+      .replaced-tag {
+        font-size: 12px;
+        font-weight: normal;
+        color: #fff;
+        background-color: #ee0a24;
+        padding: 2px 8px;
+        border-radius: 4px;
+      }
+    }
+
+    .photo-image {
+      width: 100%;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+  }
+}
+
+.empty-state {
+  margin-top: 30px;
+}
+
+.history-popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .history-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #323643;
+    text-align: center;
+    padding: 15px 0;
+    border-bottom: 1px solid #E9E9EA;
+  }
+
+  .history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+
+    .history-item {
+      margin-bottom: 15px;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .history-time {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        margin-top: 6px;
+      }
+    }
+  }
+
+  .history-empty {
+    flex: 1;
+  }
+}
+</style>
+
+<style>
+/* 确保图片预览及其遮罩层级高于底部弹框 */
+.van-image-preview {
+  z-index: 10000000003 !important;
+}
+.van-overlay.van-image-preview__overlay {
+  z-index: 10000000002 !important;
+}
+</style>

src/views/documentView/diverTrainDocment.vue

@@ -1,6 +1,28 @@
 <template>
 <div class="wrap">
   <div class="navBar">
+    <van-nav-bar
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goBack"
+    >
+      <template slot="title">
+        <div v-show="!show">培训文档</div>
+        <van-field v-model="keyword" placeholder="请输入关键词" v-show="show"   @input="getTrainingList"/>
+      </template>
+      <template slot="right">
+        <div class="rightWrap" @click="show = !show">
+          <img src="@/assets/serach.png" class="img2" v-show="!show"/>
+          <img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
+        </div>
+      </template>
+    </van-nav-bar>
+  </div>
+
+<!--  <div class="navBar">
     <van-nav-bar
         :border="false"
         :fixed="true"
@@ -24,7 +46,8 @@
       </template>
     </van-nav-bar>
   </div>
-  <div class="statisticContainer">
+  -->
+<!--  <div class="statisticContainer">
     <div class="statisticWrap">
       <div class="line1">
         <span>培训统计</span>
@@ -43,11 +66,12 @@
         </div>
       </div>
     </div>
-  </div>
+  </div>-->
-  <div class="driver_tab_wrap">
+  <div class="tab_wrap">
     <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
          @click="changeTab(index)">
-      {{ item.name }}
+      {{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
+      <!--      {{ item.name }}-->
     </div>
   </div>
   <div class="contentWrap" v-show="!showEmpty">
@@ -84,12 +108,14 @@ export default {
   mixins:[myMixins],
   data(){
     return{
-      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
+      tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
+      // tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
       activeIndex: 0,
       pageList:[],
       totalList:[],
       numInfo:'',
       keyword:'',
+      serviceTypeName:'',
       show:false,
       showEmpty:false,
       isLoading:false,
@@ -101,7 +127,8 @@ export default {
     const urlParams = new URLSearchParams(window.location.search);
     this.driverId = urlParams.get('driverId');
     this.time=timeFormat(Date.now())
-    this.keyword=urlParams.get('keyWord') || ''
+    this.keyword=urlParams.get('keyword') || ''
+    this.serviceTypeName=urlParams.get('serviceTypeName') || ''
     this.getTrainingList();
     document.addEventListener('visibilitychange', async (  ) => {
       let state = document.visibilityState
@@ -113,6 +140,10 @@ export default {
     });
   },
   methods:{
+    initShow(){
+      this.keyword= ''
+      this.getTrainingList()
+    },
     onRefresh() {
       this.getTrainingList()
       setTimeout(() => {
@@ -129,21 +160,42 @@ export default {
         type:1,
         id:this.driverId,
         text:this.keyword || '',
+        serviceTypeName:this.serviceTypeName || ''
       })
       this.totalList=[]
       this.pageList=[]
+      this.tabArr[0].count=0
+      this.tabArr[1].count=0
+      this.tabArr[2].count=0
       this.numInfo=res.data
-      this.totalList=res.data.list
+      if(res.data.totalNum){
-      let result=[]
+        this.tabArr[0].count=res.data.totalNum
+      }
+      if(res.data.readNum){
+        this.tabArr[1].count=res.data.readNum
+      }
+      if(res.data.notReadNum){
+        this.tabArr[2].count=res.data.notReadNum
+      }
+     /* this.totalList=res.data.list
       if(this.activeIndex === 0){
         result=this.totalList?.filter(q => q.title === '车型技术参数');
       }else if(this.activeIndex === 1){
         result=this.totalList?.filter(q => q.title === '中道服务规范');
       }else if(this.activeIndex === 2){
         result=this.totalList?.filter(q => q.title === '中道小课堂');
+      }*/
+      let result=[]
+      this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
+      if(this.activeIndex === 0){
+        result=this.totalList || []
+      }else if(this.activeIndex === 1){
+        result=this.totalList?.filter(item => item.alreadyRead==1) || []
+      }else if(this.activeIndex === 2){
+        result=this.totalList?.filter(item => item.alreadyRead!=1) || []
       }
       if(result){
-        this.pageList=result[0].materials
+        this.pageList=result
         this.time=timeFormat(Date.now())
       }
       if(this.pageList?.length === 0){
@@ -160,6 +212,19 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/docment.scss";
 @import "@/styles/driverDocment.scss";
+/*::v-deep .van-nav-bar__content{
+  background-color: #3A3A3A !important;
+}*/
+.tab_wrap {
+  .active:after {
+    width: 37px;
+    left: 0%;
+    transform: translateX(0%);
+  }
+  .active1:after {
+    width:48px !important;
+  }
+}
 .read{
   padding: 2px 8px;
   border-radius: 5px;

src/views/documentView/docmentList.vue

@@ -36,9 +36,6 @@
               v-model="keyword"
               placeholder="名称/关键词/简介"
           >
-            <!--          <template #button>
-                        <van-icon class="search" name="search" size="20"  @click="getTrainingList"/>
-                      </template>-->
           </van-field>
         </template>
         <template slot="left">
@@ -97,6 +94,7 @@ export default {
       showEmpty:false,
       supplierId:'',
       driverId:'',
+      serviceTypeName:'',
     }
   },
   mounted() {
@@ -104,32 +102,36 @@ export default {
     this.supplierId = urlParams.get('supplierId');
     this.driverId = urlParams.get('driverId');
     if(this.driverId){
-      this.keyword=urlParams.get('keyWord') || ''
+      this.keyword=urlParams.get('keyword') || ''
     }
+    this.serviceTypeName=urlParams.get('serviceTypeName') || ''
     this.getNormalList()
   },
   methods:{
     onRefresh() {
       this.getNormalList()
-      setTimeout(() => {
+      if(!this.isLoading){
+        this.$toast('刷新成功');
+      }
+     /* setTimeout(() => {
         this.$toast('刷新成功');
         this.isLoading = false;
-      }, 1000);
+      }, 1000);*/
     },
    async changeTab(index) {
     this.activeIndex = index
     await this.getNormalList()
   },
     async getNormalList(){
-      let res= await getNormalList({
+      this.isLoading = true;
-        type:this.supplierId ? 2 : 1,
-        // type:2,
-        id: this.supplierId ? this.supplierId : this.driverId,
-        // id:this.supplierId,//33041,
-        text:this.keyword || '',
-      })
       this.totalList=[]
       this.pageList=[]
+      let res= await getNormalList({
+        type:this.supplierId ? 2 : 1,
+        id: this.supplierId ? this.supplierId : this.driverId,
+        text:this.keyword || '',
+        serviceTypeName:this.serviceTypeName || ''
+      })
       this.totalList=res.data.list
       let result=[]
       if(this.activeIndex === 0){
@@ -149,9 +151,10 @@ export default {
       }else {
         this.showEmpty = false
       }
+      this.isLoading = false
     },
     initShow(){
-      this.keyword= '',
+      this.keyword= ''
       this.getNormalList()
     }
 }

src/views/documentView/trainDocment.vue

@@ -22,9 +22,9 @@
     </van-nav-bar>
   </div>
   <div class="tab_wrap">
-    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index,'active1':activeIndex==0}"
          @click="changeTab(index)">
-      {{ item.name }}
+      {{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
     </div>
   </div>
   <div class="contentWrap" v-show="!showEmpty">
@@ -61,22 +61,30 @@ export default {
   mixins:[myMixins],
   data(){
     return{
-      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
+      tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
       activeIndex: 0,
       pageNum:1,
       pageSize:10,
       pageList:[],
       totalList:[],
       keyword:'',
+      serviceTypeName:'',
       show:false,
       showEmpty:false,
       isLoading:false,
       supplierId:'',
+      numInfo:'',
     }
   },
+  activated() {
+    console.log('activated')
+  },
   mounted() {
+    console.log('mounted')
     const urlParams = new URLSearchParams(window.location.search);
     this.supplierId = urlParams.get('supplierId');
+    this.keyword=urlParams.get('keyword') || ''
+    this.serviceTypeName=urlParams.get('serviceTypeName') || ''
     this.getTrainingList();
     document.addEventListener('visibilitychange', async (  ) => {
       let state = document.visibilityState
@@ -104,20 +112,39 @@ export default {
         type:2,
         id: this.supplierId,
         text:this.keyword || '',
+        serviceTypeName:this.serviceTypeName || ''
       })
       this.totalList=[]
       this.pageList=[]
-      this.totalList=res.data.list
+      this.tabArr[0].count=0
+      this.tabArr[1].count=0
+      this.tabArr[2].count=0
+      this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
+      this.numInfo=res.data
+      if(res.data.totalNum){
+        this.tabArr[0].count=res.data.totalNum
+      }
+      if(res.data.readNum){
+        this.tabArr[1].count=res.data.readNum
+      }
+      if(res.data.notReadNum){
+        this.tabArr[2].count=res.data.notReadNum
+      }
+      // console.log(' this.totalList',this.totalList)
+      console.log(' this.tabArr',this.tabArr)
       let result=[]
       if(this.activeIndex === 0){
-        result=this.totalList?.filter(q => q.title === '车型技术参数');
+        result=this.totalList || []
+        // result=this.totalList?.filter(q => q.title === '车型技术参数');
       }else if(this.activeIndex === 1){
-        result=this.totalList?.filter(q => q.title === '中道服务规范');
+        // result=this.totalList?.filter(q => q.title === '中道服务规范');
+        result=this.totalList?.filter(item => item.alreadyRead==1) || []
       }else if(this.activeIndex === 2){
-        result=this.totalList?.filter(q => q.title === '中道小课堂');
+        result=this.totalList?.filter(item => item.alreadyRead!=1) || []
+        // result=this.totalList?.filter(q => q.title === '中道小课堂');
       }
       if(result){
-        this.pageList=result[0].materials
+        this.pageList=result
       }
       if(this.pageList?.length === 0){
         this.showEmpty  = true
@@ -126,7 +153,7 @@ export default {
       }
     },
     initShow(){
-      this.keyword= '',
+      this.keyword= ''
       this.getTrainingList()
     }
   }
@@ -136,6 +163,16 @@ export default {
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
 @import "@/styles/docment.scss";
+.tab_wrap {
+  .active:after {
+    width: 37px;
+    left: 0%;
+    transform: translateX(0%);
+  }
+  .active1:after {
+    width:48px !important;
+  }
+}
 .read{
   padding: 2px 8px;
   border-radius: 5px;

src/views/environmentPhoto/environmentPhotoList.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="wrap environment-photo-wrap">
+    <div v-if="loaded && photoList.length === 0" class="empty-tip">暂无环境照片</div>
+    <div v-for="(item, index) in photoList" :key="index" class="photo-item">
+      <div class="media-wrap">
+        <video
+          v-if="item.tag && item.tag.includes('video')"
+          :src="item.imageUrl"
+          controls
+          playsinline
+          class="media"
+        />
+        <img
+          v-else-if="item.tag && item.tag.includes('img')"
+          :src="item.imageUrl"
+          class="media"
+          @click="previewImage(index)"
+        />
+      </div>
+      <p v-if="item.title" class="photo-name">{{ item.title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast, ImagePreview } from 'vant'
+import { getBeforeDispatchImage } from '@/api/environmentPhoto'
+
+export default {
+  name: 'EnvironmentPhotoList',
+  data() {
+    return {
+      photoList: [],
+      loaded: false
+    }
+  },
+  async mounted() {
+    await this.fetchPhotos()
+  },
+  methods: {
+    async fetchPhotos() {
+      const userOrderId = this.$route.query.userOrderId
+      if (!userOrderId) {
+        Toast('缺少必要参数')
+        this.loaded = true
+        return
+      }
+      Toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        duration: 0
+      })
+      try {
+        const res = await getBeforeDispatchImage({ userOrderId: Number(userOrderId) })
+        this.photoList = Array.isArray(res.data) ? res.data : []
+      } finally {
+        Toast.clear()
+        this.loaded = true
+      }
+    },
+    previewImage(index) {
+      const urls = this.photoList
+        .filter(item => item.tag && item.tag.includes('img'))
+        .map(item => item.imageUrl)
+      ImagePreview({ images: urls, startPosition: index })
+    }
+  }
+}
+</script>
+
+<style scoped>.wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #F4F5F7;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.environment-photo-wrap {
+  padding: 12px;
+}
+.empty-tip {
+  text-align: center;
+  color: #999;
+  margin-top: 60px;
+  font-size: 14px;
+}
+.photo-item {
+  background: #fff;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.media-wrap {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.photo-item img,
+.photo-item video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.photo-name {
+  font-size: 13px;
+  color: #333;
+  padding: 8px 10px;
+  margin: 0;
+}
+</style>

src/views/goToApp/goToApp.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="wrap">
+    <div class="content">
+      <div class="goToBtn" @click="goAppHandler">立即打开</div>
+      <div class="content_tip">
+        <div class="font_cls">如未安装，请点击 <span @click="downLoadHandler">立即下载</span></div>
+      </div>
+    </div>
+
+    <!-- 微信内置浏览器引导 -->
+    <div v-if="showGuide" class="guide-mask" @click.self="closeGuide">
+      <img class="guide-img" src="@/assets/sucai.png" alt="引导在浏览器打开" />
+      <div class="guide-btn" @click="closeGuide">我知道了</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNewVersion, getLog } from "@/api/order"
+export default {
+  name: "goToApp",
+  data() {
+    return {
+      showGuide: false
+    }
+  },
+  mounted() {
+    getLog({
+      source: 'App下载页',
+      event: '页面浏览',
+      page: '/h5/supplier/dispatch/goToApp'
+    })
+    this.showGuide = this.isWeixin()
+  },
+  methods: {
+    isWeixin() {
+      const ua = navigator.userAgent.toLowerCase()
+      return ua.indexOf('micromessenger') !== -1
+    },
+    closeGuide() {
+      this.showGuide = false
+    },
+    goAppHandler() {
+      getLog({
+        source: 'App下载页',
+        event: '直接打开',
+        page: '/h5/supplier/dispatch/goToApp'
+      })
+      window.location.href = "rvdriver://page/pagesLogin/phoneLogin?source=h5Link";
+    },
+    async downLoadHandler() {
+      getLog({
+        source: 'App下载页',
+        event: '立即下载',
+        page: '/h5/supplier/dispatch/goToApp'
+      });
+      getNewVersion({
+        appType: 5
+      }).then((res) => {
+        window.location.href = res?.result?.path
+      }).catch(() => {
+        this.$message.error('请求版本失败，请重试');
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  width: 100%;
+  height: 100vh;
+  background-image: url('@/assets/toAppBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.content  {
+  width: 100%;
+  position: fixed;
+  top: 74vh;
+}
+.goToBtn {
+  width: 70%;
+  height: 45px;
+  margin-left: 15%;
+  background: linear-gradient( 270deg, #2347C0 0%, #72A3FF 100%);
+  border-radius: 23px;
+  //font-weight: bold;
+  font-size: 17px;
+  color: #FFFFFF;
+  letter-spacing: 2px;
+  line-height: 45px;
+  text-align: center;
+}
+.content_tip {
+  width: 100%;
+  margin-top: 15px;
+  .font_cls {
+    font-size: 14px;
+    color: #808080;
+    line-height: 20px;
+    text-align: center;
+    span {
+      color: #007BE9;
+    }
+  }
+}
+.guide-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.85);
+}
+.guide-img {
+  width: 90%;
+  margin-top: 0;
+  object-fit: contain;
+}
+.guide-btn {
+  width: 140px;
+  height: 40px;
+  margin-top: 40px;
+  border: 1px solid #FFFFFF;
+  border-radius: 20px;
+  font-size: 15px;
+  color: #FFFFFF;
+  line-height: 40px;
+  text-align: center;
+}
+</style>

src/views/index/addWechat.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="wrap">
+    <div class="top-wrap"></div>
+    <div class="center-info">
+      <div class="wei_code_wrap">
+        <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
+        <div class="wei_code_bg">
+          <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
+        </div>
+      </div>
+    </div>
+    <div class="btn_wrap">
+      <div class="btn" @click="nextStep">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import QRCode from 'qrcode'
+  import {getOrCodeInfo, getContactQrCodeResult, saveSupplier} from "@/api/mine"
+  import {myMixins} from "@/utils/myMixins"
+  import {Toast, Dialog} from "vant";
+  export default {
+    name: "addWechat",
+    mixins: [myMixins],
+    data() {
+      return {
+        name: '',
+        potentialFlag: '',
+        formPayload: null,
+        qrCodeUrl: '',
+        qrCode: '',
+        configId: '',
+        wechatId: '',
+        clickFlag: true,
+      }
+    },
+    async mounted() {
+      const urlParams = new URLSearchParams(window.location.search);
+      this.potentialFlag = this.$route.query.potentialFlag || urlParams.get('potentialFlag') || '';
+      const cached = localStorage.getItem('supplierAddForm');
+      if (cached) {
+        this.formPayload = JSON.parse(cached);
+        this.wechatId = this.formPayload.wechatId;
+        this.name = this.formPayload.name;
+      }
+      if (this.name) {
+        await this.QrCodeHandler();
+      }
+    },
+    methods: {
+      async QrCodeHandler() {
+        await this.QrCodeInfo();
+        await this.getQrCode();
+      },
+      async QrCodeInfo() {
+        let res = await getOrCodeInfo({ name: this.name });
+        this.configId = res?.configId;
+        this.qrCode = res?.qrCode;
+      },
+      async getQrCode() {
+        try {
+          this.qrCodeUrl = await QRCode.toDataURL(this.qrCode, {
+            width: 150,
+            margin: 2,
+            color: { dark: '#000000', light: '#FFFFFF' },
+          });
+        } catch (error) {
+          console.error('生成二维码失败:', error);
+        }
+      },
+      async nextStep() {
+        if (!this.clickFlag) return;
+        if(!this.wechatId) {
+          let res = await getContactQrCodeResult({ configId: this.configId, name: this.name });
+          this.wechatId = res?.data?.wechatId;
+        }
+        /*if (!this.wechatId) {
+          Toast('请先添加企微再继续');
+          return;
+        }*/
+        try {
+          this.clickFlag = false;
+          const res = await saveSupplier({
+            ...this.formPayload,
+            wechatId: this.wechatId,
+          });
+          if (res?.noToast) {
+            if (res?.code != 0) {
+              Dialog.alert({ title: '提示', message: '该服务商已存在，查看信息' }).then(() => {
+                localStorage.removeItem('supplierAddForm');
+                const target = { name: 'supplierInfo', query: { id: res?.code, potentialFlag: this.potentialFlag } };
+                localStorage.setItem('lastRoute', JSON.stringify(target));
+                this.goPage('supplierInfo', { id: res?.code, potentialFlag: this.potentialFlag });
+              });
+            } else {
+              Toast('该服务商已存在');
+            }
+          } else {
+            localStorage.removeItem('supplierAddForm');
+            const supplierId = res?.data;
+            const potentialFlag = this.potentialFlag;
+            const target = { name: 'supplierAddResult', query: { id: supplierId, potentialFlag } };
+            localStorage.setItem('lastRoute', JSON.stringify(target));
+            Dialog.confirm({
+              title: '提示',
+              message: '添加车辆和驾驶员会加快审核进度，是否去添加？',
+              confirmButtonText: '去添加',
+              cancelButtonText: '取消',
+            }).then(() => {
+              localStorage.setItem('lastRoute', JSON.stringify({ name: 'vehicleManage', query: { id: supplierId, potentialFlag } }));
+              this.goPage('vehicleManage', { id: supplierId, potentialFlag });
+            }).catch(() => {
+              localStorage.setItem('lastRoute', JSON.stringify({ name: 'supplierAddResult', query: { id: supplierId, potentialFlag } }));
+              this.goPage('supplierAddResult', { id: supplierId, potentialFlag });
+            });
+          }
+        } catch (e) {
+          Toast(e?.message || '提交失败');
+        } finally {
+          setTimeout(() => { this.clickFlag = true; }, 1000);
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap {
+    @include wh(100%, 100%);
+    box-sizing: border-box;
+    padding-bottom: 100px;
+    overflow-y: auto;
+    background: linear-gradient(180deg, #FBFDFE 0%, #F6FBFF 73%, #F0F7FF 100%);
+    backdrop-filter: blur(5.602678571428572px);
+  }
+  .top-wrap {
+    width: 100%;
+    height: 175px;
+    background: linear-gradient(180deg, #DAECFF 0%, rgba(233, 243, 255, 0) 100%);
+  }
+  .center-info {
+    text-align: center;
+  }
+  .wei_code_wrap {
+    margin-top: 10px;
+    .wei_title {
+      font-size: 15px;
+      color: #FF553B;
+      text-align: center;
+    }
+    .wei_code_bg {
+      width: 163px;
+      height: 173px;
+      background-image: url("~@/assets/supplier/weiCodeBg.png");
+      background-size: 100% 100%;
+      margin: 8px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .btn_wrap {
+    width: 100%;
+    padding: 15px 0;
+    position: fixed;
+    bottom: 10px;
+    z-index: 10000 !important;
+    .btn {
+      width: calc(100% - 80px);
+      margin-left: 40px;
+      height: 46px;
+      background: #0E76F4;
+      border-radius: 5px;
+      font-size: 15px;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 46px;
+    }
+  }
+</style>

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>