Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9af26f9b32 | ||
|
|
4b71881ceb | ||
|
|
dd9d8f453e | ||
|
|
1b323a4bfa | ||
|
|
2dd5f41a3b | ||
|
|
cd2aaeef32 | ||
|
|
c9f5296e3c | ||
|
|
68fc21992b | ||
|
|
e28c8bb6f1 | ||
|
|
3976d086ba | ||
|
|
f6dc8ea98b | ||
|
|
ae77c69fe9 | ||
|
|
1f0d537c80 | ||
|
|
cad1bcc505 | ||
|
|
614bb875eb | ||
|
|
c404da3520 | ||
|
|
f5fab0dd16 | ||
|
|
74ff93863e | ||
|
|
18851a2070 | ||
|
|
8cfffb7704 | ||
|
|
9fcdd55af2 | ||
|
|
e42b86e05f | ||
|
|
4277989def | ||
|
|
4888d4964b | ||
|
|
5cb0f8f44d | ||
|
|
eb696e4409 | ||
|
|
a5b07e3f40 | ||
|
|
b95f325b3e | ||
|
|
1001244f38 | ||
|
|
fb65bf728b | ||
|
|
257d7fd4c6 | ||
|
|
6c0db0163a | ||
|
|
fa53771e59 | ||
|
|
e71976ba5f | ||
|
|
fd080aa39b | ||
|
|
e7bb5a23be | ||
|
|
da844d0e24 | ||
|
|
1d7b200f76 | ||
|
|
ddb3817d6e | ||
|
|
2ff9e7684f | ||
|
|
c7327de2e5 | ||
|
|
9c324fbff3 | ||
|
|
69469ed61f | ||
|
|
3a880c0f34 | ||
|
|
798a2a60c9 | ||
|
|
0ad22527a1 | ||
|
|
f30afdd1e9 | ||
|
|
1addd5112b | ||
|
|
cd51aec32a | ||
|
|
4a2513e100 | ||
|
|
7c40fbc4c5 | ||
|
|
336bb11c42 | ||
|
|
4aae54f9a5 | ||
|
|
57f839166e | ||
|
|
e4757849dd | ||
|
|
61e8418459 | ||
|
|
80c15dcf1b | ||
|
|
8a053c5a80 | ||
|
|
d5d777afd3 | ||
|
|
0483c2d0a7 | ||
|
|
3c1f238163 | ||
|
|
384a64b2c8 | ||
|
|
c55f6b4045 | ||
|
|
0b4127a0e2 | ||
|
|
2970dca3e0 | ||
|
|
15d5c4694e | ||
|
|
1f7ce0da6d | ||
|
|
2bd56d8a9e | ||
|
|
0b388414c9 | ||
|
|
b0b1abca01 | ||
|
|
4fdcd3e72e | ||
|
|
424ef98798 | ||
|
|
37aeba20da | ||
|
|
a9382c11a4 | ||
|
|
4b94c614ad | ||
|
|
b39ae0bdf1 | ||
|
|
709f125c42 | ||
|
|
a0c1a2700a | ||
|
|
8c25f5a195 | ||
|
|
ee50c3ba19 | ||
|
|
1477f94774 | ||
|
|
35fd987f00 | ||
|
|
b6491a21d1 | ||
|
|
030417ba9c | ||
|
|
c05bdb361b | ||
|
|
e288d1e180 | ||
|
|
a48e73bdb5 | ||
|
|
56a8ba66b7 | ||
|
|
8c62b8e704 | ||
|
|
f1a3f7b45b | ||
|
|
e7344a1f16 | ||
|
|
75dd0b9740 | ||
|
|
aa5b724bed | ||
|
|
ca99e068cf | ||
|
|
aafd7ffdb5 | ||
|
|
112f42669c | ||
|
|
9bf8e1253d | ||
|
|
4f9134249f | ||
|
|
318922bddc | ||
|
|
5d0d4541a8 | ||
|
|
17aa9b54ca | ||
|
|
9d3d822227 | ||
|
|
fbee7979e4 | ||
|
|
8e55d61a9e | ||
|
|
83f36b12a8 | ||
|
|
e800ee1b7e | ||
|
|
3fbcc7a125 | ||
|
|
c90bf52b4d | ||
|
|
c9ac87b104 | ||
|
|
47fdf8f528 | ||
|
|
9192625165 | ||
|
|
5ebbce5c1f | ||
|
|
dc5327c8e4 | ||
|
|
044832a8f7 | ||
|
|
19c5809af2 | ||
|
|
d41684d7ed | ||
|
|
60445b1523 | ||
|
|
534ef90f2e | ||
|
|
f8484391b8 | ||
|
|
414f2cd320 | ||
|
|
d12ef20726 | ||
|
|
ed7ce35a91 | ||
|
|
6b5bc0494c | ||
|
|
fed4ae6edf | ||
|
|
87546848d2 | ||
|
|
3a6d0878aa | ||
|
|
d18fec1ddc | ||
|
|
62f2c166c6 | ||
|
|
14a14e2c87 | ||
|
|
8a457952fa | ||
|
|
c657f3b5ac | ||
|
|
31d1388890 | ||
|
|
dc94c6d261 | ||
|
|
97c86dbee3 | ||
|
|
18ad0e0b2e | ||
|
|
f77b0fc53d | ||
|
|
8dee7c54df | ||
|
|
89cd821276 | ||
|
|
276a0b982e | ||
|
|
b2119b4fd7 | ||
|
|
63b6028690 | ||
|
|
22bf45eda2 | ||
|
|
9083f4ff30 | ||
|
|
783910ba84 | ||
|
|
ccf61a73ee | ||
|
|
c6b23f6bb3 | ||
|
|
d1eb15ed15 | ||
|
|
c5fca0a4f1 | ||
|
|
247d087c48 | ||
|
|
3ba634d602 | ||
|
|
58f1f5033d | ||
|
|
c8400442a5 | ||
|
|
6dbb1377be | ||
|
|
847fdc48c6 | ||
|
|
234853b603 | ||
|
|
91b3c069ad | ||
|
|
0732fdcb8e | ||
|
|
64b2099c8b | ||
|
|
ac08b52038 | ||
|
|
ebfb553829 | ||
|
|
77335a1850 | ||
|
|
159ce0fbde | ||
|
|
1cc79ba5f5 | ||
|
|
c3bdcc8251 | ||
|
|
78bfd97e0c | ||
|
|
ca5bb1520b | ||
|
|
cf6d94d54f | ||
|
|
5845ae76da | ||
|
|
0d2082ebaf | ||
|
|
0208136ac4 | ||
|
|
a2907a9fd1 | ||
|
|
c7a1d95346 | ||
|
|
911bf1f5e0 | ||
|
|
a3fd0d6f46 | ||
|
|
6fe09d9674 | ||
|
|
44552c5d35 | ||
|
|
75b727d8b2 | ||
|
|
4eb791c9c6 | ||
|
|
44e1af7262 | ||
|
|
e0f90ca3b2 | ||
|
|
7e73da59eb | ||
|
|
361f7f16f8 | ||
|
|
4734f236cf | ||
|
|
89cf401882 | ||
|
|
0fc9be28d1 | ||
|
|
1a567dee57 | ||
|
|
ecb87e5bc9 | ||
|
|
193e9c8006 | ||
|
|
94376c91b8 | ||
|
|
23984e78ec | ||
|
|
1f2af86b96 | ||
|
|
2c344eb2f5 | ||
|
|
552b56d5da | ||
|
|
f9acd76fcf | ||
|
|
b5f30b4c77 | ||
|
|
b9830e80eb | ||
|
|
5bc7c6b1e3 | ||
|
|
5a56d4fe1c | ||
|
|
f7f9bb7fd0 | ||
|
|
05ac89814c | ||
|
|
d178be1acd | ||
|
|
f0576476e9 | ||
|
|
01e2f9ca8d | ||
|
|
f9d72ee3cc | ||
|
|
0102cc2899 | ||
|
|
7f0109bfcc | ||
|
|
f3716466e9 | ||
|
|
811f232a73 | ||
|
|
72fe6cc266 | ||
|
|
75cf3db960 | ||
|
|
19ad185126 | ||
|
|
bb7ad8deb1 | ||
|
|
abd5657366 | ||
|
|
6e7a5a4b42 | ||
|
|
2c61085515 | ||
|
|
55321e5dc5 | ||
|
|
327d40318b | ||
|
|
5eefaa2223 | ||
|
|
ff0e25cfd0 | ||
|
|
ed324d1140 | ||
|
|
0d5ae66481 | ||
|
|
abffe924ad | ||
|
|
756b84e9de | ||
|
|
87e7c30d6c | ||
|
|
3d74bf8442 | ||
|
|
77b805855b | ||
|
|
6cd6b71a66 | ||
|
|
3fa9fef447 | ||
|
|
eacb0f3afe |
@@ -17,6 +17,8 @@ pnpm-debug.log*
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
.claude
|
||||
.kimi-code
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
|
||||
@@ -3,4 +3,7 @@
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
<component name="WebPackConfiguration">
|
||||
<option name="mode" value="DISABLED" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -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 宽屏的显示效果;文字不截断、按钮可点击 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"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",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"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",
|
||||
|
||||
@@ -56,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);
|
||||
|
||||
@@ -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化,与页面分离
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
After Width: | Height: | Size: 296 KiB |
@@ -70,3 +70,51 @@ export function driverRealName( data) {
|
||||
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'
|
||||
})
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -82,3 +82,40 @@ export function getDriverName(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
|
||||
});
|
||||
}
|
||||
|
||||
@@ -18,6 +18,15 @@ export function saveVehicle(data){
|
||||
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({
|
||||
@@ -63,10 +72,12 @@ 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
|
||||
})
|
||||
}
|
||||
|
||||
@@ -106,12 +117,20 @@ export function getSupplierInfo(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',
|
||||
contentType:'application/json',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -125,6 +144,15 @@ export function getContactQrCodeResult(data){
|
||||
})
|
||||
}
|
||||
|
||||
// 添加企微
|
||||
export function updateWechatId(data){
|
||||
return request({
|
||||
url:'/supplier/potential/updateWechatId',
|
||||
method:'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//司机列表
|
||||
export function driverList(data){
|
||||
return request({
|
||||
|
||||
@@ -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({
|
||||
@@ -159,3 +168,32 @@ export function getConfigByCode(data){
|
||||
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',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ export function userFeedback(data){
|
||||
data
|
||||
})
|
||||
}
|
||||
//二手拖车信息擦亮
|
||||
//擦亮
|
||||
export function usedCarPolish(data){
|
||||
return request({
|
||||
url: `/toc-user/car-app/usedCarPolish/${data}`,
|
||||
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 915 KiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 870 B |
@@ -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>
|
||||
@@ -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>
|
||||
@@ -39,5 +39,13 @@ const authenticationRouter = [
|
||||
title: '银行卡信息认证',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/personList',
|
||||
name: 'personList',
|
||||
component: () => import('@/views/mine/personList.vue'),
|
||||
meta:{
|
||||
title: '人员信息',
|
||||
}
|
||||
},
|
||||
]
|
||||
export default authenticationRouter
|
||||
|
||||
@@ -27,6 +27,14 @@ const routes = [
|
||||
title: '审核中',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/addWechat',
|
||||
name: 'addWechat',
|
||||
component: () => import('@/views/index/addWechat'),
|
||||
meta:{
|
||||
title: '添加微信',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/supplierInfo',
|
||||
name: 'supplierInfo',
|
||||
@@ -35,6 +43,22 @@ const routes = [
|
||||
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',
|
||||
@@ -156,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',
|
||||
@@ -169,7 +209,16 @@ const routes = [
|
||||
name: 'vehicleAdd',
|
||||
component: () => import('@/views/index/vehicleAdd'),
|
||||
meta: {
|
||||
title: '车辆新增或修改'
|
||||
title: '车辆新增或修改',
|
||||
cache: true // keep-alive 缓存:跳转拍摄页返回时保留表单,再次从其他页面进入时由 activated 重新初始化
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/cameraGuide",
|
||||
name: 'cameraGuide',
|
||||
component: () => import('@/views/index/cameraGuide'),
|
||||
meta: {
|
||||
title: '拍摄行驶证'
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -324,6 +373,14 @@ const routes = [
|
||||
title:'电瓶详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/goToApp',
|
||||
name: 'goToApp',
|
||||
component:()=>import('@/views/goToApp/goToApp.vue'),
|
||||
meta: {
|
||||
title:'小板运输司机端'
|
||||
}
|
||||
},
|
||||
...kpiRouter,
|
||||
...invoiceRouter,
|
||||
...secondHandRouter,
|
||||
|
||||
@@ -7,5 +7,13 @@ const kpiRouter = [
|
||||
title: 'kpi首页',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/kpiCaseNew',
|
||||
name: 'kpiCaseNew',
|
||||
component: () => import('@/views/kpi/kpiCaseNew'),
|
||||
meta:{
|
||||
title: 'kpi服务商案件&车辆情况',
|
||||
}
|
||||
},
|
||||
]
|
||||
export default kpiRouter
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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%);
|
||||
|
||||
@@ -19,7 +19,7 @@ if( token ) {
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
let reqUrl=config.url
|
||||
console.log('config',config)
|
||||
// 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})
|
||||
@@ -29,7 +29,7 @@ service.interceptors.request.use(
|
||||
// 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/trainingList' && config?.params?.type==1){
|
||||
if ((reqUrl=='/supplier/supplierTraining/trainingList' || reqUrl=='/supplier/supplierTraining/normalList') && config?.params?.type==1){
|
||||
console.log('司机app使用该请求不挂token')
|
||||
} else {
|
||||
if(token) {
|
||||
@@ -48,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')
|
||||
|
||||
@@ -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, ',');
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
import { getLog } from "@/api/order"
|
||||
|
||||
let _setLogTimer = null
|
||||
|
||||
export const myMixins = {
|
||||
data() {
|
||||
@@ -5,6 +8,11 @@ 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
|
||||
@@ -94,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
|
||||
}
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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 class="driver_tab_wrap">
|
||||
</div>-->
|
||||
<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,7 +108,8 @@ 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:[],
|
||||
@@ -115,6 +140,10 @@ export default {
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
initShow(){
|
||||
this.keyword= ''
|
||||
this.getTrainingList()
|
||||
},
|
||||
onRefresh() {
|
||||
this.getTrainingList()
|
||||
setTimeout(() => {
|
||||
@@ -135,18 +164,38 @@ export default {
|
||||
})
|
||||
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
|
||||
let result=[]
|
||||
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
|
||||
}
|
||||
/* 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){
|
||||
@@ -163,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;
|
||||
|
||||
@@ -154,7 +154,7 @@ export default {
|
||||
this.isLoading = false
|
||||
},
|
||||
initShow(){
|
||||
this.keyword= '',
|
||||
this.keyword= ''
|
||||
this.getNormalList()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,7 +61,7 @@ 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,
|
||||
@@ -73,9 +73,14 @@ export default {
|
||||
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') || ''
|
||||
@@ -111,17 +116,35 @@ export default {
|
||||
})
|
||||
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
|
||||
@@ -130,7 +153,7 @@ export default {
|
||||
}
|
||||
},
|
||||
initShow(){
|
||||
this.keyword= '',
|
||||
this.keyword= ''
|
||||
this.getTrainingList()
|
||||
}
|
||||
}
|
||||
@@ -140,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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -8,7 +8,7 @@
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="h5GoBack"
|
||||
@click-left="back"
|
||||
/>
|
||||
</div>
|
||||
<div class="addContentWrap">
|
||||
@@ -92,6 +92,57 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
|
||||
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')" style="align-items: center">
|
||||
<div class="titleType" style="width: 60px">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>保费</span>
|
||||
</div>
|
||||
<van-field
|
||||
type="number"
|
||||
class="vanIpt"
|
||||
v-model="liabilityInsuranceAmount"
|
||||
input-align="right"
|
||||
>
|
||||
<template slot="right-icon" >
|
||||
<span style="white-space: nowrap;">元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
|
||||
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>保额</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: flex-end">
|
||||
<el-select
|
||||
v-model="liabilityInsuranceQuota"
|
||||
value-key="name"
|
||||
class="elSelect"
|
||||
collapse-tags="collapse-tags"
|
||||
placeholder="请选择" style="width: 55%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in liabilityQuotaOptions"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select><span style="margin-right: 16px;opacity: .5;">万元</span>
|
||||
</div>
|
||||
<!-- <van-field
|
||||
type="number"
|
||||
class="vanIpt"
|
||||
v-model="liabilityInsuranceQuota"
|
||||
input-align="right"
|
||||
>
|
||||
<template slot="right-icon" >
|
||||
<span style="white-space: nowrap;">万元 </span>
|
||||
</template>
|
||||
</van-field>-->
|
||||
</div>
|
||||
</template>
|
||||
<common-btn title="保存" @submitClick="submitBtn"/>
|
||||
<van-calendar v-model="showDatePicker" :min-date="minDate"
|
||||
@@ -104,7 +155,7 @@
|
||||
import {Dialog} from "vant";
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {formatDate1} from "@/utils/common"
|
||||
import { uploadImage, updateInsurance, getInfoById} from "@/api/mine"
|
||||
import { uploadImage, updateInsurance, getInfoById,userOperationPermissions} from "@/api/mine"
|
||||
import CommonBtn from "@/components/commonBtn.vue"
|
||||
export default {
|
||||
name: "vehicleAdd",
|
||||
@@ -115,6 +166,7 @@ export default {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
liabilityQuotaOptions:[{value:10},{value:20},{value:30},{value:50},{value:70},{value:80},{value:100},{value:200}],
|
||||
minDate: new Date(1970, 0, 1), // 设置最小可选日期(1970年1月1日)
|
||||
maxDate: new Date(2099, 11, 31), // 设置最大可选日期(2099年12月31日)
|
||||
showDatePicker: false,
|
||||
@@ -130,6 +182,9 @@ export default {
|
||||
insurancePicturePhoto: '', // 保单照片
|
||||
isMultiple: false, // 是否支持多选
|
||||
insuranceCorp: '',
|
||||
liabilityInsuranceAmount:'',
|
||||
liabilityInsuranceQuota:'',
|
||||
permissonList:[],
|
||||
insuranceOptions: [{
|
||||
name: '太平洋',
|
||||
value: 1
|
||||
@@ -183,11 +238,24 @@ export default {
|
||||
|
||||
async mounted() {
|
||||
this.id=this.$route.params?.id
|
||||
await this.getPermissions()
|
||||
if( this.id){
|
||||
// await this.vehicleInfo()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
back() {
|
||||
this.$router.push({
|
||||
name:'vehicleAdd',
|
||||
params:{
|
||||
id: this.id
|
||||
}
|
||||
})
|
||||
},
|
||||
async getPermissions(){
|
||||
let res = await userOperationPermissions();
|
||||
this.permissonList = res.data
|
||||
},
|
||||
async vehicleInfo(){
|
||||
let res= await getInfoById({
|
||||
vehicleId:this.id
|
||||
@@ -259,6 +327,14 @@ export default {
|
||||
this.$toast('保单有效期不能为空')
|
||||
return
|
||||
}
|
||||
if(this.hasLiabilityInsurance == 1 && this.permissonList?.includes('hasInsuranceAudit') && !this.liabilityInsuranceAmount && this.liabilityInsuranceAmount!=0){
|
||||
this.$toast('保费不能为空')
|
||||
return
|
||||
}
|
||||
if(this.hasLiabilityInsurance == 1 && !this.liabilityInsuranceQuota && this.permissonList?.includes('hasInsuranceAudit')){
|
||||
this.$toast('保额不能为空')
|
||||
return
|
||||
}
|
||||
let timeObj;
|
||||
if(this.dateVal) {
|
||||
timeObj = this.formatDateTimeRange(this.dateVal)
|
||||
@@ -271,6 +347,8 @@ export default {
|
||||
insuranceCorp: this.hasLiabilityInsurance == 1 ? this.insuranceCorp : '',
|
||||
liabilityInsuranceStartTime: this.hasLiabilityInsurance == 1 ? (timeObj?.startTime || '' ) : '',
|
||||
liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '',
|
||||
liabilityInsuranceQuota:this.liabilityInsuranceQuota || '',
|
||||
liabilityInsuranceAmount:this.liabilityInsuranceAmount || '',
|
||||
})
|
||||
}
|
||||
await updateInsurance(params)
|
||||
@@ -280,7 +358,8 @@ export default {
|
||||
this.$toast('添加成功')
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.$router.back();
|
||||
// this.$router.back();
|
||||
this.back()
|
||||
},2000)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
accept="image "
|
||||
/>
|
||||
</div>
|
||||
<div class="lineBot"></div>
|
||||
<!-- <div class="lineBot"></div>
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
@@ -80,11 +80,12 @@
|
||||
:preview-size="54"
|
||||
accept="image "
|
||||
/>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="lineBot"></div>
|
||||
<div class="itemContent">
|
||||
<div class="titleType">
|
||||
<span>头像</span>
|
||||
<img class="startImg" src="@/assets/start.png" />
|
||||
<span>免冠正面照</span>
|
||||
</div>
|
||||
<van-uploader
|
||||
v-model="iconList"
|
||||
@@ -121,7 +122,7 @@
|
||||
<span>司机状态</span>
|
||||
</div>
|
||||
<div class="isJoin">
|
||||
<van-radio-group v-model="states" @change="isUse" class="joinWrap">
|
||||
<van-radio-group v-model="states" @change="isUse" :disabled="statesDisabled" :class="{ 'disabled-tree': statesDisabled }" class="joinWrap">
|
||||
<van-radio :name="1" style="margin-right: 26px" class="item">
|
||||
启用
|
||||
<img
|
||||
@@ -162,6 +163,7 @@ export default {
|
||||
// baseURL:'',
|
||||
// licenseOcrInfo:'',
|
||||
id:'',
|
||||
supplierId: '',
|
||||
driverName:"",
|
||||
driverPhone:"",
|
||||
identityCardNumber:"",
|
||||
@@ -183,6 +185,7 @@ export default {
|
||||
iconList: [],
|
||||
driverInfo: {},
|
||||
drivingLicenceName: '',
|
||||
potentialFlag: '',
|
||||
idCardAuthority:'',
|
||||
idCardValidStartTime:'',
|
||||
idCardValidEndTime:'',
|
||||
@@ -203,6 +206,7 @@ export default {
|
||||
let token=localStorage.getItem('token')
|
||||
this.authorization.Authorization=token;*/
|
||||
this.id = this.$route.params?.id;
|
||||
this.supplierId = this.$route.params?.supplierId || '';
|
||||
this.driverName = this.$route.params?.name;
|
||||
this.driverPhone = this.$route.params?.phone;
|
||||
this.drivingModel = this.$route.params?.drivingModel;
|
||||
@@ -219,6 +223,11 @@ export default {
|
||||
this.identityCardFront = this.$route.params?.identityCardFront;
|
||||
this.driverInfo.lssueDate = this.$route.params?.lssueDate;
|
||||
this.drivingLicenceName = this.$route.params?.drivingLicenceName;
|
||||
this.potentialFlag = this.$route.params?.potentialFlag || '';
|
||||
console.log('this.potentialFlagthis.potentialFlag', this.potentialFlag)
|
||||
if(!this.id && this.potentialFlag === '1') {
|
||||
this.states = 0;
|
||||
}
|
||||
if( this.identityCardFront ) {
|
||||
this.identityCardFrontList = [{ url : this.identityCardFront }];
|
||||
}
|
||||
@@ -239,7 +248,7 @@ export default {
|
||||
const selectedValue = selectElement.value;
|
||||
this.drivingModel=selectedValue
|
||||
});
|
||||
|
||||
console.log('statesDisabled', this.statesDisabled)
|
||||
},
|
||||
methods:{
|
||||
isUse(e){
|
||||
@@ -307,7 +316,7 @@ export default {
|
||||
let res = await uploadImage(formData)
|
||||
this.drivingLicenceContrary = res.data;
|
||||
},
|
||||
async iconListHandler(file) { // 上传头像
|
||||
async iconListHandler(file) { // 上传免冠正面照
|
||||
const formData = new FormData();
|
||||
formData.append("file" , file.file);
|
||||
let res = await uploadImage(formData)
|
||||
@@ -399,9 +408,13 @@ export default {
|
||||
this.$toast('驾驶证首页未上传')
|
||||
return
|
||||
}
|
||||
if(!this.drivingLicenceContrary) {
|
||||
/* if(!this.drivingLicenceContrary) {
|
||||
this.$toast('驾驶证副页未上传')
|
||||
return
|
||||
}*/
|
||||
if(!this.icon) {
|
||||
this.$toast('免冠正面照未上传')
|
||||
return
|
||||
}
|
||||
let drivingLicenceName=this.drivingLicenceName.replace(/[^\u4e00-\u9fff]+/g, '');
|
||||
let driverName=this.driverName.replace(/[^\u4e00-\u9fff]+/g, '');
|
||||
@@ -421,6 +434,7 @@ export default {
|
||||
}
|
||||
await saveDriver({
|
||||
driverId:this.id ? this.id : '',
|
||||
supplierId: this.supplierId || undefined,
|
||||
driverName:this.driverName ,
|
||||
driverPhone:this.driverPhone,
|
||||
identityCardNumber:this.identityCardNumber,
|
||||
@@ -448,6 +462,11 @@ export default {
|
||||
},2000)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
statesDisabled() {
|
||||
return !this.id && this.potentialFlag === '1';
|
||||
}
|
||||
},
|
||||
components:{
|
||||
TwoCommonBtn,
|
||||
CellGroup
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="司机管理"
|
||||
left-arrow
|
||||
:left-arrow="!supplierId"
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="goBack"
|
||||
>
|
||||
<template slot="right" v-if="permissonList.includes('driverAddBtn')">
|
||||
<template slot="right" v-if="permissonList.includes('driverAddBtn') || supplierId">
|
||||
<div class="rightWrap" @click="addDriver" >
|
||||
<img src="@/assets/addImg.png" />
|
||||
<span class="addTxt">添加</span>
|
||||
@@ -18,6 +18,43 @@
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
<van-search
|
||||
v-model="searchVal"
|
||||
show-action
|
||||
placeholder="请输入司机姓名、电话、身份证号"
|
||||
@search="resetHandler"
|
||||
>
|
||||
<template #action>
|
||||
<div @click="resetHandler">搜索</div>
|
||||
</template>
|
||||
</van-search>
|
||||
<div class="filterWrap">
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="idCardStatusList" placeholder="身份证录入状态" :class="{'customSel':true , 'has-value': idCardStatusList }" clearable>
|
||||
<el-option
|
||||
v-for="item in idCardStatusListOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="driverLicenseStatusList" placeholder="驾驶证录入状态" :class="{'customSel':true , 'has-value': driverLicenseStatusList }" clearable>
|
||||
<el-option
|
||||
v-for="item in driverLicenseStatusListOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStatusList" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStatusList }" clearable>
|
||||
<el-option
|
||||
v-for="item in authStatesOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="wrap_cls">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model="loading"
|
||||
@@ -25,13 +62,32 @@
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div class="itemWrap" v-for="(item,index) in driverList" :key="index">
|
||||
<div class="itemWrap" v-for="(item,index) in driverList" :key="index" @click.stop="!isMiniProgram(item) && updateDriver(item)">
|
||||
<div class="name-status">
|
||||
<div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}</div>
|
||||
<div class="twoBtn">
|
||||
<button v-if="permissonList.includes('driverModifyBtn')" class="del" @click="handleStatus(item)">{{ item.states?.label == '启用' ? '停用' : '启用' }}</button>
|
||||
<button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>
|
||||
<div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}
|
||||
<span style="margin-left: 10px" :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
|
||||
</div>
|
||||
<div class="twoBtn">
|
||||
<!-- 只有启用状态下才展示停用按钮,小程序来源司机不显示-->
|
||||
<button v-if="!isMiniProgram(item) && permissonList.includes('driverModifyBtn') && item.states?.code==1" class="del" @click.stop="handleStatus(item)">停用</button>
|
||||
<!-- <button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">录入状态</span>
|
||||
<span class="flex-right">
|
||||
<span class="common_cls" v-if="item.idCardStatusStr" :class="getClass(item.idCardStatus)?.className">{{item.idCardStatusStr}}</span>
|
||||
<span class="common_cls" v-if="item.driverLicenseStatusStr" :class="getClass(item.driverLicenseStatus)?.className">{{item.driverLicenseStatusStr}}</span>
|
||||
</span>
|
||||
<!-- <span class="flex-right" v-if="item.idCardStatusStr">
|
||||
<span class="common_cls" :class="getClass(item.idCardStatus)?.className">{{item.idCardStatusStr}}</span>
|
||||
</span>-->
|
||||
</div>
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">认证状态</span>
|
||||
<span class="flex-right" v-if="item.authStatusStr">
|
||||
<span class="common_cls" :class="getClass(item.authStatusStr)?.className">{{item.authStatusStr}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="" style="display: flex">
|
||||
<div class="sex" style="margin-right: 40px">
|
||||
@@ -47,22 +103,27 @@
|
||||
<span class="halfOpci">身份证号:</span>
|
||||
<span class="allOpci">{{ item.identityCardNumber }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<van-icon class="arrow_position" v-if="!isMiniProgram(item) && permissonList.includes('driverModifyBtn')" name="arrow" />
|
||||
<!-- <div>
|
||||
<span class="halfOpci">状 态:</span>
|
||||
<span :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
|
||||
</div>
|
||||
<div class="btn_wrap" v-if="supplierId">
|
||||
<div class="btn" @click="nextToResult">下一步</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {driverList,enableAction,userOperationPermissions} from "@/api/mine"
|
||||
import {driverList, enableAction, userOperationPermissions} from "@/api/mine"
|
||||
import {Dialog} from "vant";
|
||||
export default {
|
||||
name: "driverManage",
|
||||
mixins:[myMixins],
|
||||
@@ -73,24 +134,108 @@ export default {
|
||||
total:'',
|
||||
driverList:[],
|
||||
states:'',
|
||||
supplierId: '',
|
||||
routeId: '',
|
||||
initialized: false,
|
||||
potentialFlag: '',
|
||||
supplierType:'',
|
||||
count: 0,
|
||||
isLoading: false,
|
||||
loading: false,
|
||||
finished: false,
|
||||
permissonList:[],
|
||||
searchVal:'',
|
||||
idCardStatusList:[],
|
||||
driverLicenseStatusList:[],
|
||||
authStatusList:[],
|
||||
idCardStatusListOptions: [{
|
||||
name: '身份证未录入',
|
||||
value: 0
|
||||
},{
|
||||
name: '身份证核验通过',
|
||||
value: 1
|
||||
},{
|
||||
name: '身份证核验不通过',
|
||||
value: 2
|
||||
}],
|
||||
authStatesOptions: [{
|
||||
name: '免冠正面照未录入',
|
||||
value: 1
|
||||
},{
|
||||
name: '免冠正面照认证通过',
|
||||
value: 3
|
||||
},{
|
||||
name: '免冠正面照认证不通过',
|
||||
value: 2
|
||||
}],
|
||||
driverLicenseStatusListOptions: [{
|
||||
name: '驾驶证未录入',
|
||||
value: 0
|
||||
},{
|
||||
name: '驾驶证认证通过',
|
||||
value: 1
|
||||
},{
|
||||
name: '驾驶证认证不通过',
|
||||
value: 2
|
||||
}],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.supplierType = urlParams.get('supplierType');
|
||||
const rawId = this.$route.query.id || urlParams.get('id');
|
||||
this.supplierId = rawId ? Number(rawId) : '';
|
||||
const potentialId = this.$route.query.potentialId || urlParams.get('potentialId');
|
||||
this.routeId = potentialId;
|
||||
this.potentialFlag = this.$route.query.potentialFlag || urlParams.get('potentialFlag') || '';
|
||||
if(!rawId) {
|
||||
this.getPermissions();
|
||||
}
|
||||
// this.getDriverList()
|
||||
},
|
||||
methods:{
|
||||
nextToResult() {
|
||||
localStorage.setItem('lastRoute', JSON.stringify({ name: 'supplierAddResult', query: { id: this.routeId, potentialFlag: this.potentialFlag } }));
|
||||
this.goPage('supplierAddResult', { id: this.routeId, potentialFlag: this.potentialFlag });
|
||||
},
|
||||
isMiniProgram(item) {
|
||||
return item.registerFrom === '小程序' || (item.jobNumber && item.jobNumber.includes('小程序'))
|
||||
},
|
||||
getClass(id) {
|
||||
const ids = String(id)
|
||||
const steps = {
|
||||
0: {
|
||||
className: 'default_cls'
|
||||
},
|
||||
1: {
|
||||
className: 'success_cls'
|
||||
},
|
||||
2: {
|
||||
className: 'danger_cls'
|
||||
},
|
||||
'免冠正面照未录入': {
|
||||
className: 'default_cls'
|
||||
},
|
||||
'免冠正面照认证通过': {
|
||||
className: 'success_cls'
|
||||
},
|
||||
'免冠正面照认证不通过': {
|
||||
className: 'danger_cls'
|
||||
},
|
||||
}
|
||||
return steps[ids] || { className: 'default_cls' }
|
||||
},
|
||||
async resetHandler() {
|
||||
this.pageNum=1
|
||||
this.finished = false;
|
||||
this.total = 0;
|
||||
await this.getDriverList();
|
||||
},
|
||||
async onLoad(){
|
||||
await this.getDriverList()
|
||||
if (this.total>10){
|
||||
this.pageNum++;
|
||||
}
|
||||
// 加载状态结束
|
||||
this.loading = false;
|
||||
// 数据全部加载完成
|
||||
@@ -112,13 +257,19 @@ export default {
|
||||
}else{
|
||||
this.$router.push({
|
||||
name: 'driverAdd',
|
||||
params: { supplierId: this.supplierId || undefined, potentialFlag: this.potentialFlag || undefined }
|
||||
})
|
||||
}
|
||||
},
|
||||
async getDriverList(){
|
||||
let res = await driverList({
|
||||
pageNum:this.pageNum,
|
||||
pageSize:this.pageSize
|
||||
pageSize:this.pageSize,
|
||||
searchVal: this.searchVal,
|
||||
idCardStatusList: this.idCardStatusList,
|
||||
driverLicenseStatusList: this.driverLicenseStatusList,
|
||||
authStatusList: this.authStatusList,
|
||||
supplierId: this.supplierId || undefined,
|
||||
});
|
||||
if(res.code == 200){
|
||||
this.total=res.total
|
||||
@@ -130,12 +281,11 @@ export default {
|
||||
this.driverList = preList.concat(arr)
|
||||
}
|
||||
}
|
||||
console.log('this.driverList',this.driverList)
|
||||
},
|
||||
async getPermissions(){
|
||||
let res = await userOperationPermissions();
|
||||
this.permissonList = res.data
|
||||
// console.log("司机管理",this.permissonList.includes('driverAddBtn'))
|
||||
|
||||
},
|
||||
async handleStatus(item){
|
||||
if(item.states.code === 0){
|
||||
@@ -143,14 +293,23 @@ export default {
|
||||
}else{
|
||||
this.states = 0
|
||||
}
|
||||
Dialog.confirm({
|
||||
message: '当前状态为启用,是否要改为停用?',
|
||||
}).then(async () => {
|
||||
await enableAction({
|
||||
driverId:item.driverId,
|
||||
states:this.states
|
||||
})
|
||||
this.pageNum = 1;
|
||||
await this.getDriverList();
|
||||
}).catch(() => {
|
||||
});
|
||||
|
||||
},
|
||||
updateDriver(item){
|
||||
if(!this.permissonList.includes('driverModifyBtn')){//有权限才能修改
|
||||
return
|
||||
}
|
||||
// 在当前组件中进行路由跳转并传递参数对象
|
||||
this.$router.push({
|
||||
name: 'driverAdd', // 目标路由的名称
|
||||
@@ -185,7 +344,7 @@ export default {
|
||||
|
||||
.wrap {
|
||||
background: #F4F5F7;
|
||||
@include sizingPadding(13px,13px);
|
||||
//@include sizingPadding(13px,13px);
|
||||
@include wh(100%, 100%);
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -208,7 +367,7 @@ export default {
|
||||
}
|
||||
|
||||
.itemWrap {
|
||||
@include wh(100%, 104px);
|
||||
@include wh(100%, 140px);
|
||||
@include radiusSizing(6px);
|
||||
@include fontWeightSize(400, 12px);
|
||||
@include flexBetween;
|
||||
@@ -216,6 +375,7 @@ export default {
|
||||
box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
|
||||
margin-bottom: 10px;
|
||||
padding: 11px 13px 9px 15px;
|
||||
position: relative;
|
||||
.halfOpci {
|
||||
opacity: .5;
|
||||
margin-right: 5px;
|
||||
@@ -224,15 +384,15 @@ export default {
|
||||
opacity: 1;
|
||||
}
|
||||
.statusNo {
|
||||
color: #FF0000;
|
||||
color: red;
|
||||
}
|
||||
.statusYes {
|
||||
color: #09B820
|
||||
color: green
|
||||
}
|
||||
}
|
||||
|
||||
.name-status {
|
||||
@include flexColBet;
|
||||
@include flexBetCen;
|
||||
.namephone {
|
||||
@include fontWeightSize(bold, 14px)
|
||||
}
|
||||
@@ -256,6 +416,146 @@ export default {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.filterWrap {
|
||||
width: 100%;
|
||||
padding-right: 13px;
|
||||
padding-left: 13px;
|
||||
display: flex;
|
||||
overflow-x: auto; /* 允许横向滚动 */
|
||||
white-space: nowrap; /* 防止子元素换行 */
|
||||
padding-bottom: 10px;
|
||||
-webkit-overflow-scrolling: touch; /* 在iOS上平滑滚动 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
padding-bottom: 10px;
|
||||
/*padding: 10px;*/
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
.customSel {
|
||||
flex: 0 0 auto; /* 防止子元素被压缩 */
|
||||
width: calc(33% - 5px);
|
||||
/*width: 100%;*/
|
||||
height: 25px;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
color: #323233;
|
||||
margin-right: 5px;
|
||||
::v-deep .el-input__inner{
|
||||
padding: 0 2px;
|
||||
height: 25px;
|
||||
font-size: 10px;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__icon{
|
||||
line-height: 25px;
|
||||
font-size: 10px;
|
||||
width: 18px;
|
||||
color: #2A5094;
|
||||
}
|
||||
::v-deep .el-input__suffix{
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
.customInput{
|
||||
/*width: 49%;*/
|
||||
width: 130px;
|
||||
}
|
||||
.has-value ::v-deep .el-input__inner{
|
||||
background: #F1F6FF ;
|
||||
color: #007BE9;
|
||||
font-weight: bold;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.has-value ::v-deep .el-input__icon{
|
||||
color: #007BE9;
|
||||
}
|
||||
.priceSel{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #C0C4CC;
|
||||
.iconSpan{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
.has-price{
|
||||
color: #007BE9 !important;
|
||||
}
|
||||
}
|
||||
.wrap_cls {
|
||||
width: 100%;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.common_cls {
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.default_cls {
|
||||
background-color: #B0BEC5;
|
||||
}
|
||||
.danger_cls {
|
||||
background-color: red;
|
||||
}
|
||||
.success_cls {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
.info_cls {
|
||||
background-color: #FF9800;
|
||||
}
|
||||
.main_cls {
|
||||
background-color: #6C9BFF;
|
||||
}
|
||||
.arrow_position {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50px;
|
||||
font-size: 20px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.carType,.zdJuhe{
|
||||
opacity: .7;
|
||||
@include fontWeightSize(400,12px);
|
||||
margin-right: 8px;
|
||||
}
|
||||
/*.zdJuhe {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
margin-left: -10px;
|
||||
}*/
|
||||
.flex-between{
|
||||
line-height: 24px;
|
||||
}
|
||||
.btn_wrap {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
z-index: 10000;
|
||||
.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>
|
||||
|
||||
@@ -153,12 +153,17 @@ export default {
|
||||
if (this.notifyList.length >= this.total) {
|
||||
this.finished = true;
|
||||
}
|
||||
} else {
|
||||
// 未开票不需要分页,直接标记加载完成
|
||||
this.loading = false;
|
||||
this.finished = true;
|
||||
}
|
||||
},
|
||||
async changeTabHandler() {
|
||||
this.pageNum = 1;
|
||||
this.notifyList = [];
|
||||
this.checkList = [];
|
||||
this.finished = false;
|
||||
if (this.active == 1) { // 全部, 需要分页
|
||||
this.status = '';
|
||||
this.dispatchAppSearchInvoiced = '';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="error_bar" v-if="errorMsg">{{ errorMsg }}</div>
|
||||
<div class="top_banner">
|
||||
<img src="@/assets/supplier/topBg.png" alt="">
|
||||
</div>
|
||||
@@ -9,7 +10,7 @@
|
||||
<img class="title1" src="@/assets/supplier/title1.png" alt="">
|
||||
<div class="credentials_wrap">
|
||||
<div class="credentials_item">
|
||||
<div class="credentials_title">1. 法人身份证正面</div>
|
||||
<div class="credentials_title">1.法人身份证人像页</div>
|
||||
<van-uploader
|
||||
accept="image/*"
|
||||
v-model="idFrontPhotoList"
|
||||
@@ -22,7 +23,7 @@
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="credentials_item ml2">
|
||||
<div class="credentials_title">2. 法人身份证反面</div>
|
||||
<div class="credentials_title">2.法人身份证国徽页</div>
|
||||
<van-uploader
|
||||
accept="image/*"
|
||||
v-model="idBackPhotoList"
|
||||
@@ -35,7 +36,7 @@
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="credentials_item ml2">
|
||||
<div class="credentials_title">3. 营业执照</div>
|
||||
<div class="credentials_title">3.营业执照</div>
|
||||
<van-uploader
|
||||
accept="image/*"
|
||||
v-model="companyPhotoList"
|
||||
@@ -47,6 +48,19 @@
|
||||
</div>
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="credentials_item">
|
||||
<div class="credentials_title">4.开户许可证/基本存款账户信息</div>
|
||||
<van-uploader
|
||||
accept="image/*"
|
||||
v-model="licensePhotoList"
|
||||
:after-read="licensePhotoHandler"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
max-count="1">
|
||||
<div class="custom-background">
|
||||
<img src="@/assets/supplier/licensePhoto.png" alt="">
|
||||
</div>
|
||||
</van-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company_info">
|
||||
@@ -57,6 +71,7 @@
|
||||
<van-field :border="true" readonly v-model="form.legalName" class="required" name="legalName" label="法人姓名" placeholder="请输入" :rules="[{ required: true, message: '请输入法人姓名' }]" />
|
||||
<van-field :border="true" v-model="form.linkName" class="required" name="linkName" label="联系人姓名" placeholder="请输入" :rules="[{ required: true, message: '请输入联系人姓名' }]" />
|
||||
<van-field :border="true" v-model="form.linkPhone" class="required" name="linkPhone" label="联系电话" placeholder="请输入" :rules="phoneVerify" />
|
||||
<van-field :border="true" v-model="form.linkEmail" class="required" name="linkEmail" label="邮箱" placeholder="请输入" :rules="emailVerify" />
|
||||
<van-field :border="true" class="required" name="serviceType" label="服务能力">
|
||||
<template #input>
|
||||
<el-tree
|
||||
@@ -65,13 +80,13 @@
|
||||
ref="tree"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
:data="supplierServiceList"
|
||||
:data="bigServiceList"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field :border="true" v-model="form.trailCount" name="trailCount" label="拖车数量" placeholder="请输入" />
|
||||
<van-field :border="true" v-model="form.minorCount" name="minorCount" label="抢修车数量" placeholder="请输入" />
|
||||
<van-field :border="true" v-model="form.trailCount" type="digit" class="required" name="trailCount" label="拖车数量" placeholder="请输入" :rules="countVerify" />
|
||||
<van-field :border="true" v-model="form.minorCount" type="digit" class="required" name="minorCount" label="抢修车数量" placeholder="请输入" :rules="countVerify" />
|
||||
<van-field :border="true" class="required" label="服务区域" placeholder="请选择">
|
||||
<template #input>
|
||||
<el-cascader
|
||||
@@ -81,15 +96,16 @@
|
||||
ref="areaCascader"
|
||||
popper-class="responsive-cascader"
|
||||
:popper-append-to-body="false"
|
||||
filterable
|
||||
clearable></el-cascader>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="wei_code_wrap" v-if="form.name && !id">
|
||||
<!-- <div class="wei_code_wrap" v-if="form.name && !id">
|
||||
<div class="wei_title">请先添加企业微信,保证申请流程正常进行。</div>
|
||||
<div class="wei_code_bg">
|
||||
<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +126,7 @@
|
||||
<script>
|
||||
import {leftCopy} from "@/utils/common"
|
||||
import QRCode from 'qrcode'
|
||||
import { uploadImage, supplierServicePartTree, ocrHandler, unifiedOCRWithCompress, getArea, saveSupplier, getSupplierInfo, getOrCodeInfo, getContactQrCodeResult } from "@/api/mine"
|
||||
import { uploadImage, ocrHandler, unifiedOCRWithCompress, getArea, saveSupplier, getSupplierInfo, getOrCodeInfo, getContactQrCodeResult } from "@/api/mine"
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {Dialog} from "vant";
|
||||
export default {
|
||||
@@ -119,14 +135,19 @@
|
||||
data() {
|
||||
return {
|
||||
clickFlag: true,
|
||||
errorMsg: '',
|
||||
phoneVerify: [{ required: true, message: '请输入联系电话' }, { validator: value => { return /^1[3456789]\d{9}$/.test(value) }, message: '联系电话格式不正确' }],
|
||||
emailVerify: [{ required: true, message: '请输入邮箱' }, { validator: value => { return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value) }, message: '邮箱格式不正确' }],
|
||||
countVerify: [{ required: true, message: '请输入数量' }, { validator: value => /^\d+$/.test(value) && Number(value) >= 0, message: '请输入大于等于0的整数' }],
|
||||
id:'', //车辆Id
|
||||
idBackPhotoList: [],
|
||||
idBackPhoto: '',
|
||||
idFrontPhotoList: [],
|
||||
idFrontPhoto: '',
|
||||
companyPhotoList: [],
|
||||
licensePhotoList: [],
|
||||
companyPhoto: '',
|
||||
licensePhoto:'',
|
||||
form: {
|
||||
name: '',
|
||||
legalName: '',
|
||||
@@ -137,30 +158,65 @@
|
||||
trailCount: '',
|
||||
minorCount: '',
|
||||
serviceAreaCode: [],
|
||||
linkEmail:'',
|
||||
person:'',
|
||||
accountInfoDTO:{
|
||||
dutyParagraph:'',
|
||||
accountNumber:'',
|
||||
accountName:'',
|
||||
accountType:'',
|
||||
invoiceType:'',
|
||||
settlementType:'',
|
||||
shouldRate:'',
|
||||
realRate:'',
|
||||
unitName:'',
|
||||
bankNo:'',
|
||||
billingPhone:'',
|
||||
billingAddress:'',
|
||||
billHead:'',
|
||||
companyType:'',
|
||||
}
|
||||
},
|
||||
qrCodeUrl: '',
|
||||
qrCode: '',
|
||||
areaShow: false,
|
||||
areaList: [],
|
||||
supplierServiceList: [],
|
||||
bigServiceList: [{
|
||||
id: 1002,
|
||||
title: '拖车服务'
|
||||
}, {
|
||||
id: 1003,
|
||||
title: '抢修服务'
|
||||
}, {
|
||||
id: 1004,
|
||||
title: '困境救援'
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'title'
|
||||
label: 'title',
|
||||
},
|
||||
areaProps: { multiple: true, checkStrictly: true, value: 'id',label: 'title', emitPath: false, },
|
||||
areaProps: { multiple: true, checkStrictly: true, value: 'id',label: 'title', emitPath: false},
|
||||
configId: '',
|
||||
wechatId: '',
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const lastRoute = localStorage.getItem('lastRoute');
|
||||
this.id = this.$route.query.id || urlParams.get('id');
|
||||
if (lastRoute && !this.id) {
|
||||
const { name, query } = JSON.parse(lastRoute);
|
||||
this.$router.replace({ name, query });
|
||||
return;
|
||||
}
|
||||
|
||||
await this.getAreaTree();
|
||||
if(this.id) {
|
||||
await this.getInfoHandler();
|
||||
}
|
||||
|
||||
await this.getSupplierServiceTree();
|
||||
// await this.getSupplierServiceTree();
|
||||
},
|
||||
methods: {
|
||||
async QrCodeHandler() {
|
||||
@@ -173,7 +229,6 @@
|
||||
});
|
||||
this.configId = res?.configId;
|
||||
this.qrCode = res?.qrCode
|
||||
console.log('idid', res);
|
||||
},
|
||||
async getInfoHandler() {
|
||||
let res = await getSupplierInfo({
|
||||
@@ -184,7 +239,12 @@
|
||||
this.idFrontPhoto = _data?.idCardFrontUrl;
|
||||
this.idBackPhoto = _data?.idCardBackUrl;
|
||||
this.companyPhoto = _data?.businessLicense;
|
||||
this.wechatId = _data?.wechatId
|
||||
this.licensePhoto = _data?.accountUrl;
|
||||
this.wechatId = _data?.wechatId;
|
||||
this.form.person = _data.legalName;
|
||||
if( _data.failReason ) {
|
||||
this.showError(_data.failReason)
|
||||
}
|
||||
if(this.idFrontPhoto) {
|
||||
this.idFrontPhotoList = [{ url : this.idFrontPhoto }];
|
||||
}
|
||||
@@ -194,51 +254,74 @@
|
||||
if(this.companyPhoto) {
|
||||
this.companyPhotoList = [{ url : this.companyPhoto }];
|
||||
}
|
||||
if( _data.serviceType ) {
|
||||
this.$refs.tree.setCheckedKeys(_data.serviceType.split(','))
|
||||
if(this.licensePhoto){
|
||||
this.licensePhotoList= [{ url : this.licensePhoto }];
|
||||
}
|
||||
if( _data.service ) {
|
||||
this.$refs.tree.setCheckedKeys(_data.service.split(','))
|
||||
}
|
||||
if(_data?.serviceAreaCode) {
|
||||
this.$set(this.form, 'serviceAreaCode', _data?.serviceAreaCode.split(',').map(item => Number(item)));
|
||||
// this.form.serviceAreaCode = _data?.serviceAreaCode.split(',').map(item => Number(item));
|
||||
}
|
||||
},
|
||||
showError(msg) {
|
||||
this.errorMsg = msg;
|
||||
},
|
||||
async applyAdd() {
|
||||
this.errorMsg = '';
|
||||
if( !this.idFrontPhoto ) {
|
||||
this.$toast('法人身份证正面照未上传')
|
||||
this.showError('法人身份证人像页未上传')
|
||||
return
|
||||
}
|
||||
if( !this.idBackPhoto ) {
|
||||
this.$toast('法人身份证反面照未上传')
|
||||
this.showError('法人身份证国徽页未上传')
|
||||
return
|
||||
}
|
||||
if( !this.companyPhoto ) {
|
||||
this.$toast('营业执照未上传')
|
||||
this.showError('营业执照未上传')
|
||||
return
|
||||
}
|
||||
if(this.form.person != this.form.legalName){
|
||||
this.showError('身份证法人姓名和营业执照法人不一致')
|
||||
return
|
||||
}
|
||||
if( !this.licensePhoto ) {
|
||||
this.showError('开户许可证未上传')
|
||||
return
|
||||
}
|
||||
if( !(this.$refs.tree.getCheckedKeys().length > 0) ) {
|
||||
this.showError('服务能力不能为空')
|
||||
return
|
||||
}
|
||||
if( !(this.form.serviceAreaCode.length > 0) ) {
|
||||
this.$toast('服务区域不能为空')
|
||||
this.showError('服务区域不能为空')
|
||||
return
|
||||
}
|
||||
if(!this.wechatId) {
|
||||
await this.QrCodeResult();
|
||||
if( !this.wechatId ) {
|
||||
this.$toast('请先添加企微再申请')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if( this.$refs.tree.getCheckedKeys().length > 0 ) {
|
||||
await this.saveHandler()
|
||||
} else {
|
||||
this.$toast('服务能力不能为空')
|
||||
return
|
||||
let _node = this.$refs.areaCascader.getCheckedNodes();
|
||||
let checkArr = [];
|
||||
_node.map(item => { checkArr.push(item.data.id) });
|
||||
const payload = {
|
||||
id: this.id,
|
||||
...this.form,
|
||||
accountInfoJson: JSON.stringify(this.form.accountInfoDTO),
|
||||
accountInfoDTO: {},
|
||||
idCardFrontUrl: this.idFrontPhoto,
|
||||
idCardBackUrl: this.idBackPhoto,
|
||||
businessLicense: this.companyPhoto,
|
||||
accountUrl: this.licensePhoto,
|
||||
service: this.$refs.tree.getCheckedKeys().join(','),
|
||||
serviceAreaCode: checkArr.join(','),
|
||||
wechatId: this.wechatId,
|
||||
};
|
||||
localStorage.setItem('supplierAddForm', JSON.stringify(payload));
|
||||
this.goPage('addWechat', { potentialFlag: 1 });
|
||||
}
|
||||
},
|
||||
async QrCodeResult() { //获取添加企微结果
|
||||
let res = await getContactQrCodeResult({
|
||||
configId: this.configId
|
||||
});
|
||||
console.log('resres', res)
|
||||
this.wechatId = res?.data?.wechatId
|
||||
},
|
||||
async saveHandler() {
|
||||
@@ -253,36 +336,77 @@
|
||||
let res = await saveSupplier({
|
||||
id: this.id,
|
||||
...this.form,
|
||||
accountInfoJson:JSON.stringify(this.form.accountInfoDTO),
|
||||
accountInfoDTO:{},
|
||||
idCardFrontUrl: this.idFrontPhoto,
|
||||
idCardBackUrl: this.idBackPhoto,
|
||||
businessLicense: this.companyPhoto,
|
||||
serviceType: this.$refs.tree.getCheckedKeys().join(','),
|
||||
accountUrl:this.licensePhoto,
|
||||
service: this.$refs.tree.getCheckedKeys().join(',') ,
|
||||
serviceAreaCode: checkArr.join(','),
|
||||
wechatId: this.wechatId,
|
||||
});
|
||||
console.log('rererere', res)
|
||||
if( res?.noToast ) { // 服务商已存在
|
||||
this.showError('当前服务商已存在')
|
||||
if( res?.code != 0 ) {
|
||||
Dialog.alert({
|
||||
title: '提示',
|
||||
message: "该服务商已存在,查看信息"
|
||||
}).then(async () => {
|
||||
const target = { name: 'supplierAddResult', query: { id: res?.code } };
|
||||
localStorage.setItem('lastRoute', JSON.stringify(target));
|
||||
this.goPage('supplierAddResult', { id : res?.code })
|
||||
setTimeout(() => {
|
||||
this.clickFlag = true
|
||||
}, 1000)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
Dialog.alert({
|
||||
title: '提示',
|
||||
message: "操作成功"
|
||||
}).then(async () => {
|
||||
const target = { name: 'supplierAddResult', query: { id: res?.data } };
|
||||
localStorage.setItem('lastRoute', JSON.stringify(target));
|
||||
this.goPage('supplierAddResult', { id : res?.data })
|
||||
setTimeout(() => {
|
||||
this.clickFlag = true
|
||||
}, 1000)
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
this.showError(e)
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
this.clickFlag = true
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
async getAreaTree() {
|
||||
let res = await getArea();
|
||||
this.areaList = res?.data;
|
||||
let result = res?.data
|
||||
result?.map(item=>{
|
||||
if( item.parentId == 0 ) {
|
||||
this.$set(item , 'disabled' ,true)
|
||||
} else {
|
||||
this.$set(item , 'disabled' ,false)
|
||||
}
|
||||
})
|
||||
this.areaList = result;
|
||||
},
|
||||
async getSupplierServiceTree(){
|
||||
/*async getSupplierServiceTree(){
|
||||
let res = await supplierServicePartTree({
|
||||
serviceTypes: '1002,1003',
|
||||
serviceTypes: '1002,1003,1004',
|
||||
treeType: 2
|
||||
});
|
||||
this.supplierServiceList=res.data
|
||||
},
|
||||
this.bigServiceList = [];
|
||||
res.data.map(item => {
|
||||
let obj = {...item, children: null}
|
||||
this.bigServiceList.push(obj)
|
||||
})
|
||||
},*/
|
||||
confirmHandle(val){
|
||||
this.region=[]
|
||||
val?.forEach(item => this.region.push(item.name))
|
||||
@@ -325,6 +449,7 @@
|
||||
imageUrl: this.idFrontPhoto,
|
||||
cardSide: 'FRONT'
|
||||
})
|
||||
// 身份证法人名称
|
||||
this.form.legalName = res?.data?.name
|
||||
},
|
||||
async companyPhotoHandler(file) {
|
||||
@@ -344,7 +469,27 @@
|
||||
})
|
||||
this.form.name = res?.data?.name;
|
||||
this.form.areaName = res?.data?.address
|
||||
await this.QrCodeHandler();
|
||||
this.form.accountInfoDTO.dutyParagraph=res?.data?.regNum
|
||||
this.form.accountInfoDTO.unitName = res?.data?.name
|
||||
this.form.accountInfoDTO.companyType=res?.data?.type
|
||||
// 营业执照法人名称
|
||||
this.form.person = res?.data?.person
|
||||
// await this.QrCodeHandler();
|
||||
},
|
||||
async licensePhotoHandler(file){// 开户许可证
|
||||
const formData = new FormData();
|
||||
formData.append("file" , file.file);
|
||||
let res = await uploadImage(formData);
|
||||
this.licensePhoto = res.data
|
||||
await this.licenseOcrHandler()
|
||||
},
|
||||
async licenseOcrHandler(){// 开户许可证ocr识别
|
||||
let res = await ocrHandler({
|
||||
ocrType: 15,
|
||||
imageUrl: this.licensePhoto,
|
||||
})
|
||||
this.form.accountInfoDTO.accountNumber=res?.data?.accountNumber || ''
|
||||
this.form.accountInfoDTO.accountName = res?.data?.accountBank || ''
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
@@ -364,6 +509,17 @@
|
||||
padding-bottom: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.error_bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
background-color: #e53935;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
padding: 10px 16px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.top_banner {
|
||||
width: 100%;
|
||||
img {
|
||||
@@ -375,12 +531,13 @@
|
||||
padding: 0 20px;
|
||||
}
|
||||
.credentials_info {
|
||||
height: 170px;
|
||||
//height: 170px;
|
||||
}
|
||||
.credentials_wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
.credentials_item {
|
||||
width: 32%;
|
||||
text-align: center;
|
||||
@@ -551,4 +708,6 @@
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -19,15 +19,26 @@
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
potentialFlag: '',
|
||||
name: '',
|
||||
qrCodeUrl: '',
|
||||
qrCode: '',
|
||||
configId: '',
|
||||
wechatId: '',
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.id = this.$route.query.id || urlParams.get('id');
|
||||
this.potentialFlag = this.$route.query.potentialFlag || urlParams.get('potentialFlag') || '';
|
||||
if (this.id) {
|
||||
localStorage.setItem('lastRoute', JSON.stringify({ name: 'supplierAddResult', query: { id: this.id, potentialFlag: this.potentialFlag } }));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchInfo() {
|
||||
this.goPage('supplierInfo', { id : this.id })
|
||||
async searchInfo() {
|
||||
localStorage.setItem('lastRoute', JSON.stringify({ name: 'supplierInfo', query: { id: this.id, potentialFlag: this.potentialFlag } }));
|
||||
this.goPage('supplierInfo', { id: this.id, potentialFlag: this.potentialFlag })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,4 +91,23 @@
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,17 +28,22 @@
|
||||
<div class="common_title">证件照信息</div>
|
||||
<div class="credentials_wrap">
|
||||
<div class="credentials_item">
|
||||
<div class="credentials_title">1. 法人身份证正面</div>
|
||||
<div class="credentials_title">1.法人身份证人像页</div>
|
||||
<img :src="supplierInfo?.idCardFrontUrl" alt="">
|
||||
</div>
|
||||
<div class="credentials_item ml2">
|
||||
<div class="credentials_title">2. 法人身份证反面</div>
|
||||
<div class="credentials_title">2.法人身份证国徽页</div>
|
||||
<img :src="supplierInfo?.idCardBackUrl" alt="">
|
||||
</div>
|
||||
<div class="credentials_item ml2">
|
||||
<div class="credentials_title">3. 营业执照</div>
|
||||
<div class="credentials_title">3.营业执照</div>
|
||||
<img :src="supplierInfo?.businessLicense" alt="">
|
||||
</div>
|
||||
<div class="credentials_item">
|
||||
<div class="credentials_title">4.开户许可证/基本存款账户信息</div>
|
||||
<img v-if="supplierInfo?.accountUrl" :src="supplierInfo?.accountUrl" alt="">
|
||||
<div v-else class="empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company_info">
|
||||
@@ -72,17 +77,21 @@
|
||||
<div class="label">联系电话:</div>
|
||||
<div class="content">{{supplierInfo?.linkPhone}}</div>
|
||||
</div>
|
||||
<div class="info_item">
|
||||
<div class="label">邮箱:</div>
|
||||
<div class="content">{{supplierInfo?.linkEmail}}</div>
|
||||
</div>
|
||||
<div class="info_item">
|
||||
<div class="label">服务能力:</div>
|
||||
<div class="content service_color">{{supplierInfo?.serviceName}}</div>
|
||||
<div class="content service_color">{{supplierInfo?.serviceCategoryName}}</div>
|
||||
</div>
|
||||
<div class="info_item">
|
||||
<div class="label">拖车数量:</div>
|
||||
<div class="content">{{supplierInfo?.trailCount || ''}}</div>
|
||||
<div class="content">{{supplierInfo.trailCount>=0 ? supplierInfo.trailCount : ''}}</div>
|
||||
</div>
|
||||
<div class="info_item">
|
||||
<div class="label">抢修车数量:</div>
|
||||
<div class="content">{{supplierInfo?.minorCount || ''}}</div>
|
||||
<div class="content">{{supplierInfo.minorCount >= 0 ? supplierInfo.minorCount : ''}}</div>
|
||||
</div>
|
||||
<div class="info_item">
|
||||
<div class="label">服务区域:</div>
|
||||
@@ -115,7 +124,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="btn_wrap" style="margin-bottom: 5px">
|
||||
<div class="btn" @click="goAddVehicle">完善信息</div>
|
||||
</div>-->
|
||||
<div class="btn_wrap" v-if="type == 'show' && supplierInfo?.state == 99 && origin != 'web'">
|
||||
<div class="btn" @click="goModifyPage">修改信息</div>
|
||||
</div>
|
||||
@@ -143,6 +154,7 @@
|
||||
supplierInfo: {},
|
||||
type: 'show',
|
||||
origin: '',
|
||||
potentialFlag: '',
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
@@ -150,9 +162,15 @@
|
||||
this.id=this.$route.query.id || urlParams.get('id');
|
||||
this.type=this.$route.query.type || urlParams.get('type') || 'show';
|
||||
this.origin = this.$route.query.origin || ''
|
||||
this.potentialFlag = this.$route.query.potentialFlag || urlParams.get('potentialFlag') || '';
|
||||
await this.getInfoHandler();
|
||||
},
|
||||
methods: {
|
||||
goAddVehicle() {
|
||||
const supplierId = this.id
|
||||
localStorage.setItem('lastRoute', JSON.stringify({ name: 'vehicleManage', query: { id: supplierId, potentialFlag: this.potentialFlag } }));
|
||||
this.goPage('vehicleManage', { id: supplierId, potentialFlag: this.potentialFlag });
|
||||
},
|
||||
goModifyPage() {
|
||||
this.goPage('supplierAdd', { id : this.id })
|
||||
},
|
||||
@@ -191,7 +209,6 @@
|
||||
id: this.id,
|
||||
});
|
||||
this.supplierInfo = res?.data;
|
||||
console.log('res', res)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -259,7 +276,7 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
.supplier_content {
|
||||
padding: 0 24px;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -282,6 +299,7 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
.credentials_item {
|
||||
width: 32%;
|
||||
text-align: center;
|
||||
@@ -290,10 +308,14 @@
|
||||
color: #4A4A4A;
|
||||
padding: 10px 0;
|
||||
}
|
||||
img {
|
||||
img,.empty{
|
||||
width: 97px;
|
||||
height: 64px;
|
||||
}
|
||||
.empty{
|
||||
border: 1px solid silver;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.ml2 {
|
||||
margin-left: 2%;
|
||||
|
||||
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<van-nav-bar
|
||||
title="供应商时段电话"
|
||||
left-arrow
|
||||
@click-left="onNavBack"
|
||||
fixed
|
||||
placeholder
|
||||
class="nav-bar"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<!-- 审批状态提示条 -->
|
||||
<div v-if="inApproval" class="status-tip status-tip--pending">{{approvalStateName }}</div>
|
||||
<div v-else-if="rejected" class="status-tip status-tip--danger">
|
||||
<div class="status-tip__title">审批被驳回</div>
|
||||
<div v-if="approvalRemark" class="status-tip__desc">{{ approvalRemark }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 空态 -->
|
||||
<div v-if="!phoneList.length" class="empty-wrap">
|
||||
<div class="empty-text">暂无分时段电话,点击新增时段电话</div>
|
||||
</div>
|
||||
|
||||
<!-- 时段卡片列表 -->
|
||||
<div v-else class="card-list">
|
||||
<div v-for="(item, index) in phoneList" :key="index" class="time-card" @click="goEdit(index)">
|
||||
<div class="card-head">
|
||||
<span class="period">{{ item.startTime }} — {{ item.endTime }}</span>
|
||||
<div class="ops" @click.stop v-if="!inApproval">
|
||||
<span class="op-edit" @click="goEdit(index)">编辑</span>
|
||||
<span class="op-del" @click="deleteItem(index)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="phone-rows">
|
||||
<div v-for="phone in visiblePhones(item)" :key="phone.index" class="phone-row">
|
||||
<span class="phone-icon">☎</span>
|
||||
<span class="phone-num">{{ phone.num }}</span>
|
||||
<span v-if="phone.desc" class="tag">{{ phone.desc }}</span>
|
||||
<span v-if="phone.wx" class="tag tag-wx">微:{{ phone.wx }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="footer">
|
||||
<button v-if="!inApproval" class="btn btn-add" @click="goAdd">+ 新增时段</button>
|
||||
<button
|
||||
class="btn btn-submit"
|
||||
:disabled="inApproval || !phoneList.length"
|
||||
@click="onSubmitClick"
|
||||
>
|
||||
{{ inApproval ? '审核中' : '提交审批' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSupplierPhoneList, submitSupplierPhoneApproval } from '@/api/supplierPhone'
|
||||
import { myMixins } from '@/utils/myMixins'
|
||||
import { Dialog, Toast } from 'vant'
|
||||
|
||||
const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'
|
||||
|
||||
function getSupplierIdFromToken() {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) return null
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]))
|
||||
return payload.supplierId || null
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function getDraftKey(supplierId) {
|
||||
return `${DRAFT_KEY_PREFIX}${supplierId}`
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'supplierTimePhone',
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
supplierId: null,
|
||||
supplierName: '',
|
||||
approvalId: null,
|
||||
approvalState: null,
|
||||
approvalStateName: '',
|
||||
inApproval: false,
|
||||
rejected: false,
|
||||
approvalRemark: '',
|
||||
phoneList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.supplierId = urlParams.get('supplierId') || this.$route.query.supplierId || getSupplierIdFromToken()
|
||||
if (!this.supplierId) {
|
||||
Toast('未获取到服务商信息')
|
||||
return
|
||||
}
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
|
||||
try {
|
||||
const result = await getSupplierPhoneList({ supplierId: this.supplierId })
|
||||
const res=result?.data || ''
|
||||
this.supplierName = res?.supplierName || ''
|
||||
this.approvalId = res?.approvalId || null
|
||||
this.approvalState = res?.approvalState || null
|
||||
this.approvalStateName = res?.approvalStateName || ''
|
||||
this.inApproval = !!res?.inApproval
|
||||
this.rejected = !!res?.rejected
|
||||
this.approvalRemark = res?.approvalRemark || ''
|
||||
|
||||
const cached = this.getCachedDraft()
|
||||
if (cached && Array.isArray(cached.phoneList)) {
|
||||
this.phoneList = cached.phoneList
|
||||
} else {
|
||||
this.phoneList = res?.phoneList || []
|
||||
this.saveDraft()
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
Toast.clear()
|
||||
}
|
||||
},
|
||||
visiblePhones(item) {
|
||||
const list = []
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const num = item['phone' + i]
|
||||
if (num) {
|
||||
list.push({
|
||||
index: i,
|
||||
num,
|
||||
desc: item['phone' + i + 'Desc'],
|
||||
wx: item['phone' + i + 'WechatId']
|
||||
})
|
||||
}
|
||||
}
|
||||
return list
|
||||
},
|
||||
getCachedDraft() {
|
||||
try {
|
||||
const raw = localStorage.getItem(getDraftKey(this.supplierId))
|
||||
return raw ? JSON.parse(raw) : null
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
},
|
||||
saveDraft() {
|
||||
const draft = {
|
||||
approvalId: this.approvalId,
|
||||
approvalState: this.approvalState,
|
||||
phoneList: this.phoneList
|
||||
}
|
||||
localStorage.setItem(getDraftKey(this.supplierId), JSON.stringify(draft))
|
||||
},
|
||||
onNavBack() {
|
||||
localStorage.removeItem(getDraftKey(this.supplierId))
|
||||
this.goBack()
|
||||
},
|
||||
goAdd() {
|
||||
this.saveDraft()
|
||||
this.goPage('supplierTimePhoneEdit', { supplierId: this.supplierId, index: -1 })
|
||||
},
|
||||
goEdit(index) {
|
||||
this.saveDraft()
|
||||
this.goPage('supplierTimePhoneEdit', { supplierId: this.supplierId, index })
|
||||
},
|
||||
deleteItem(index) {
|
||||
Dialog.confirm({
|
||||
title: '提示',
|
||||
message: '确定删除该时段电话?'
|
||||
}).then(() => {
|
||||
this.phoneList.splice(index, 1)
|
||||
this.saveDraft()
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 将 HH:mm 转换为分钟数,兼容中英文冒号
|
||||
timeToMinutes(timeStr) {
|
||||
if (!timeStr) return null
|
||||
const normalized = String(timeStr).trim().replace(/:/g, ':')
|
||||
const [h, m] = normalized.split(':').map(Number)
|
||||
if (isNaN(h) || isNaN(m)) return null
|
||||
return h * 60 + m
|
||||
},
|
||||
// 校验时间段:重叠、00:00 开始、23:59 结束、遗漏(允许 1 分钟误差)
|
||||
validateTimePeriods(list) {
|
||||
const periods = list.map(item => ({
|
||||
start: this.timeToMinutes(item.startTime),
|
||||
end: this.timeToMinutes(item.endTime)
|
||||
}))
|
||||
if (periods.some(p => p.start === null || p.end === null)) {
|
||||
return '存在格式不正确的时间段'
|
||||
}
|
||||
periods.sort((a, b) => a.start - b.start)
|
||||
if (periods[0].start !== 0) {
|
||||
return '时间段未从 00:00 开始!'
|
||||
}
|
||||
if (periods[periods.length - 1].end !== 23 * 60 + 59) {
|
||||
return '时间段未到 23:59 结束!'
|
||||
}
|
||||
for (let i = 1; i < periods.length; i++) {
|
||||
if (periods[i].start < periods[i - 1].end) {
|
||||
return '时间段重叠'
|
||||
}
|
||||
if (periods[i].start - periods[i - 1].end > 1) {
|
||||
return '时间段有遗漏'
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
async onSubmitClick() {
|
||||
if (this.inApproval) return
|
||||
if (!this.phoneList.length) {
|
||||
Toast('请先添加至少一个时段电话')
|
||||
return
|
||||
}
|
||||
if (!this.phoneList.every(item => item.phone1)) {
|
||||
Toast('每条时段电话1均必填')
|
||||
return
|
||||
}
|
||||
const timeError = this.validateTimePeriods(this.phoneList)
|
||||
if (timeError) {
|
||||
Toast(timeError)
|
||||
return
|
||||
}
|
||||
|
||||
Toast.loading({ message: '提交中...', forbidClick: true, duration: 0 })
|
||||
try {
|
||||
await submitSupplierPhoneApproval({
|
||||
supplierId: this.supplierId,
|
||||
modifyReason: '',
|
||||
phoneList: this.phoneList
|
||||
})
|
||||
Toast.success('提交成功')
|
||||
localStorage.removeItem(getDraftKey(this.supplierId))
|
||||
this.loadData()
|
||||
} catch (e) {
|
||||
Toast(e?.message || '提交失败,请重试')
|
||||
} finally {
|
||||
Toast.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
box-sizing: border-box;
|
||||
background: #f4f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar {
|
||||
.van-nav-bar {
|
||||
background: #2b6cff;
|
||||
}
|
||||
.van-nav-bar__title,
|
||||
.van-nav-bar__arrow {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
&--pending {
|
||||
background: #eef3ff;
|
||||
color: #2b6cff;
|
||||
}
|
||||
&--danger {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
&__desc {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
.empty-text {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.time-card {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.period {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
background: #eef3ff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ops {
|
||||
font-size: 13px;
|
||||
color: #2b6cff;
|
||||
span {
|
||||
margin-left: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.op-del {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.phone-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 0;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.phone-icon {
|
||||
color: #2b6cff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.phone-num {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 6px;
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
.tag-wx {
|
||||
background: #e8f8ee;
|
||||
color: #1a8a4a;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-add {
|
||||
flex: 0 0 44%;
|
||||
background: #fff;
|
||||
color: #2b6cff;
|
||||
border: 1.5px solid #2b6cff;
|
||||
}
|
||||
.btn-submit {
|
||||
background: #2b6cff;
|
||||
color: #fff;
|
||||
&:disabled {
|
||||
background: #b9c8ee;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<van-nav-bar
|
||||
:title="isEdit ? '编辑时段电话' : '新增时段电话'"
|
||||
left-arrow
|
||||
@click-left="h5GoBack"
|
||||
fixed
|
||||
placeholder
|
||||
class="nav-bar"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<label class="field-label">时段(开始 — 结束,格式 00:00 ~ 23:59)</label>
|
||||
<div class="period-row">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="form.startTime"
|
||||
placeholder="开始时间"
|
||||
@click="openTimePicker('startTime')"
|
||||
/>
|
||||
<span class="sep">—</span>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="form.endTime"
|
||||
placeholder="结束时间"
|
||||
@click="openTimePicker('endTime')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="periodErr" class="err-msg">{{ periodErr }}</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-block" v-for="n in 3" :key="n">
|
||||
<div class="phone-block__head">
|
||||
<span>电话 {{ n }}{{ n === 1 ? '(必填)' : '(选填)' }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n]"
|
||||
:placeholder="'电话号码'"
|
||||
/>
|
||||
<div class="sub-grid">
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'Desc']"
|
||||
placeholder="备注/负责人"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'WechatId']"
|
||||
placeholder="微信号"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="phoneErr[n - 1]" class="err-msg">{{ phoneErr[n - 1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button class="btn btn-save" @click="save">保存</button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showTimePicker" round position="bottom">
|
||||
<van-datetime-picker
|
||||
v-if="showTimePicker"
|
||||
v-model="pickerValue"
|
||||
type="time"
|
||||
:formatter="timeFormatter"
|
||||
@confirm="onTimeConfirm"
|
||||
@cancel="showTimePicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { myMixins } from '@/utils/myMixins'
|
||||
import { isValidPhone, validateTimeRange } from '@/utils/validate'
|
||||
import { Toast } from 'vant'
|
||||
|
||||
const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'
|
||||
|
||||
function getSupplierIdFromToken() {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) return null
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]))
|
||||
return payload.supplierId || null
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function getDraftKey(supplierId) {
|
||||
return `${DRAFT_KEY_PREFIX}${supplierId}`
|
||||
}
|
||||
|
||||
function emptyRecord() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
phone1: '',
|
||||
phone1Desc: '',
|
||||
phone1WechatId: '',
|
||||
phone2: '',
|
||||
phone2Desc: '',
|
||||
phone2WechatId: '',
|
||||
phone3: '',
|
||||
phone3Desc: '',
|
||||
phone3WechatId: ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'supplierTimePhoneEdit',
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
supplierId: null,
|
||||
index: -1,
|
||||
form: emptyRecord(),
|
||||
periodErr: '',
|
||||
phoneErr: ['', '', ''],
|
||||
showTimePicker: false,
|
||||
pickerField: 'startTime',
|
||||
pickerValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.index >= 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.supplierId = this.$route.query.supplierId || getSupplierIdFromToken()
|
||||
this.index = Number(this.$route.query.index)
|
||||
if (Number.isNaN(this.index)) {
|
||||
this.index = -1
|
||||
}
|
||||
if (this.isEdit) {
|
||||
this.loadRecord()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
this.periodErr = ''
|
||||
this.phoneErr = ['', '', '']
|
||||
let valid = true
|
||||
|
||||
const timeRes = validateTimeRange(this.form.startTime, this.form.endTime)
|
||||
if (!timeRes.valid) {
|
||||
this.periodErr = timeRes.message
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (!this.form.phone1) {
|
||||
this.phoneErr[0] = '电话 1 为必填项'
|
||||
valid = false
|
||||
} else if (!isValidPhone(this.form.phone1)) {
|
||||
this.phoneErr[0] = '电话 1 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone1Desc) {
|
||||
this.phoneErr[0] = '电话 1 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (this.form.phone2) {
|
||||
if (!isValidPhone(this.form.phone2)) {
|
||||
this.phoneErr[1] = '电话 2 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone2Desc) {
|
||||
this.phoneErr[1] = '电话 2 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
if (this.form.phone3) {
|
||||
if (!isValidPhone(this.form.phone3)) {
|
||||
this.phoneErr[2] = '电话 3 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone3Desc) {
|
||||
this.phoneErr[2] = '电话 3 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
|
||||
return valid
|
||||
},
|
||||
loadRecord() {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
const raw = localStorage.getItem(key)
|
||||
if (!raw) {
|
||||
Toast('未找到时段数据')
|
||||
this.h5GoBack()
|
||||
return
|
||||
}
|
||||
try {
|
||||
const draft = JSON.parse(raw)
|
||||
const list = draft.phoneList || []
|
||||
if (this.index >= 0 && this.index < list.length) {
|
||||
this.form = { ...list[this.index] }
|
||||
} else {
|
||||
Toast('时段数据不存在')
|
||||
this.h5GoBack()
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
Toast('数据读取失败')
|
||||
this.h5GoBack()
|
||||
}
|
||||
},
|
||||
save() {
|
||||
if (!this.validate()) return
|
||||
|
||||
try {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
const draft = JSON.parse(localStorage.getItem(key) || '{}')
|
||||
const list = draft.phoneList || []
|
||||
const record = {
|
||||
startTime: this.form.startTime,
|
||||
endTime: this.form.endTime,
|
||||
phone1: this.form.phone1,
|
||||
phone1Desc: this.form.phone1Desc,
|
||||
phone1WechatId: this.form.phone1WechatId,
|
||||
phone2: this.form.phone2,
|
||||
phone2Desc: this.form.phone2Desc,
|
||||
phone2WechatId: this.form.phone2WechatId,
|
||||
phone3: this.form.phone3,
|
||||
phone3Desc: this.form.phone3Desc,
|
||||
phone3WechatId: this.form.phone3WechatId
|
||||
}
|
||||
if (this.isEdit) {
|
||||
list[this.index] = record
|
||||
} else {
|
||||
list.push(record)
|
||||
}
|
||||
draft.phoneList = list
|
||||
localStorage.setItem(key, JSON.stringify(draft))
|
||||
Toast('已保存')
|
||||
this.h5GoBack()
|
||||
} catch (e) {
|
||||
Toast('保存失败')
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
openTimePicker(field) {
|
||||
this.pickerField = field
|
||||
this.pickerValue = this.form[field] || '00:00'
|
||||
this.showTimePicker = true
|
||||
},
|
||||
onTimeConfirm(value) {
|
||||
this.form[this.pickerField] = value
|
||||
this.showTimePicker = false
|
||||
},
|
||||
timeFormatter(type, value) {
|
||||
return value.toString().padStart(2, '0')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
box-sizing: border-box;
|
||||
background: #f4f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar {
|
||||
.van-nav-bar {
|
||||
background: #2b6cff;
|
||||
}
|
||||
.van-nav-bar__title,
|
||||
.van-nav-bar__arrow {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.period-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.sep {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
border: 1px solid #dfe1e6;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
background: #fafbfc;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
&:focus {
|
||||
border-color: #2b6cff;
|
||||
background: #fff;
|
||||
}
|
||||
&[readonly] {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-block {
|
||||
border: 1px solid #eef0f3;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background: #fcfcfd;
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #2b6cff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sub-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn-save {
|
||||
background: #2b6cff;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-cancel {
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
.btn-del {
|
||||
background: #fff;
|
||||
color: #ff4d4f;
|
||||
border: 1.5px solid #ffccc7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -287,10 +287,10 @@
|
||||
if(!res.data.ocrInvoiceRes.data.sellerName.startsWith("国家税务总局") &&
|
||||
conList.every(a => {
|
||||
let items = a.itemName.split("*")
|
||||
return (!items[1].includes("现代服务") && !items[1].includes("运输服务")) || (!items[2].includes("拖车") && !items[2].includes("救援") && !items[2].includes("施救") && !items[2].includes("清障") && !items[2].includes("道路救援"))
|
||||
return (!items[1].includes("生产生活服务") && !items[1].includes("交通运输服务")) || (!items[2].includes("拖车") && !items[2].includes("救援") && !items[2].includes("施救") && !items[2].includes("清障") && !items[2].includes("道路救援"))
|
||||
})
|
||||
){
|
||||
errorStr = errorStr + "分类必须包含:现代服务/运输服务,服务名称必须包含:拖车/救援/施救/清障/道路救援 ;例如《*现代服务*拖车费》";
|
||||
errorStr = errorStr + "分类必须包含:生产生活服务/交通运输服务,服务名称必须包含:拖车/救援/施救/清障/道路救援 ;例如《*现代服务*拖车费》";
|
||||
}
|
||||
|
||||
if( !flag ) {
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="车辆管理"
|
||||
left-arrow
|
||||
:left-arrow="!supplierId"
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="goBack"
|
||||
>
|
||||
<template slot="right" v-if="permissonList.includes('vehicleAddBtn')">
|
||||
<div class="rightWrap" @click="goPage('vehicleAdd')">
|
||||
<template slot="right" v-if="permissonList.includes('vehicleAddBtn') || supplierId">
|
||||
<div class="rightWrap" @click="goPage('vehicleAdd', supplierId ? { supplierId, potentialFlag } : {})">
|
||||
<img src="@/assets/addImg.png" />
|
||||
<span class="addTxt">添加</span>
|
||||
</div>
|
||||
@@ -21,7 +21,7 @@
|
||||
<van-search
|
||||
v-model="searchVal"
|
||||
show-action
|
||||
placeholder="车辆名称/车牌号/车架号"
|
||||
placeholder="请输入车辆名称、车牌号、车架号"
|
||||
@search="resetHandler"
|
||||
>
|
||||
<template #action>
|
||||
@@ -39,6 +39,14 @@
|
||||
></i>
|
||||
</template>
|
||||
</el-input>-->
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStates" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStates }" clearable>
|
||||
<el-option
|
||||
v-for="item in authStatesOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="inputStatusList" placeholder="录入状态" :class="{'customSel':true , 'has-value': inputStatusList }" clearable>
|
||||
<el-option
|
||||
v-for="item in inputStatusListOptions"
|
||||
@@ -49,14 +57,6 @@
|
||||
</el-select>
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStates" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStates }" clearable>
|
||||
<el-option
|
||||
v-for="item in authStatesOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="liabilityInsuranceAuditList" placeholder="职业责任险" :class="{'customSel':true , 'has-value': liabilityInsuranceAuditList }" clearable>
|
||||
<el-option
|
||||
v-for="item in insuresOptions"
|
||||
@@ -71,6 +71,7 @@
|
||||
<div class="wrap_cls">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-if="initialized"
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@@ -79,11 +80,12 @@
|
||||
<div class="carItem" v-for="(item,index) in vehicleList" :key="index" @click.stop="updateVehicle(item)">
|
||||
<div class="carCode">
|
||||
<div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}
|
||||
<span class="ml10" @click.stop="updateStatus(item)" :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus == 2 ,'insuranceGray': !item.vehicleStatus }">{{ item.vehicleStatus == 1 ? '启用' :( item.vehicleStatus == 2 ? '停用' : '无状态') }} </span>
|
||||
<span class="ml10" :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus == 2 ,'insuranceGray': !item.vehicleStatus }">{{ item.vehicleStatus == 1 ? '启用' :( item.vehicleStatus == 2 ? '停用' : ( item.vehicleStatus == 12 ? '否-服务商停用' : '无状态')) }} </span>
|
||||
</div>
|
||||
|
||||
<div class="codeRight" v-if="item.vehicleStatus == 1" @click.stop="updateStatus(item)">停用</div>
|
||||
</div>
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">核验认证</span>
|
||||
<span class="flex-right">
|
||||
<span class="common_cls" v-if="item.inputStatusString" :class="getClass(item.inputStatusString)?.className">{{item.inputStatusString}}</span>
|
||||
<span class="common_cls" v-if="item.authStateString" :class="getClass(item.authStateString)?.className">{{item.authStateString}}</span>
|
||||
@@ -95,6 +97,12 @@
|
||||
<span class="common_cls" @click.stop="showTip(item.liabilityInsuranceAuditMsg)" :class="getClass(item.rescueInsurance)?.className">{{item.rescueInsurance}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="juhe flex-between">
|
||||
<span class="zdJuhe">车辆信息</span>
|
||||
<span class="flex-right" v-if="item.auditStatusStr">
|
||||
<span class="common_cls" @click.stop="showTip(item.auditMsg)" :class="getClass(item.auditStatusStr)?.className">{{item.auditStatusStr}}</span>
|
||||
</span>
|
||||
</div>-->
|
||||
<div class="juhe flex-between">
|
||||
<span class="zdJuhe">最近登录时间</span>
|
||||
<span class="flex-right">{{item.lastLoginTime}}</span>
|
||||
@@ -107,6 +115,9 @@
|
||||
</div>
|
||||
|
||||
<van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
|
||||
<div class="btn_wrap" v-if="supplierId">
|
||||
<div class="btn" @click="nextToDriver">下一步</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -114,7 +125,7 @@
|
||||
<script>
|
||||
import {Dialog} from "vant";
|
||||
import { myMixins} from "@/utils/myMixins";
|
||||
import {supplierVehicleList, deleteVehicle, userOperationPermissions, enableVehicle} from "@/api/mine"
|
||||
import {supplierVehicleList, deleteVehicle, userOperationPermissions, enableVehicle, supplierSelectById} from "@/api/mine"
|
||||
export default {
|
||||
name: "vehicleManage",
|
||||
mixins:[myMixins],
|
||||
@@ -123,6 +134,9 @@ export default {
|
||||
vehicleList:[],
|
||||
show:false,
|
||||
id:'',
|
||||
supplierId: '',
|
||||
routeId: '',
|
||||
initialized: false,
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
total:'',
|
||||
@@ -135,6 +149,7 @@ export default {
|
||||
searchVal: '',
|
||||
authStates: [],
|
||||
liabilityInsuranceAuditList: [],
|
||||
potentialFlag: '',
|
||||
inputStatusListOptions: [{
|
||||
name: '行驶证未录入',
|
||||
value: 0
|
||||
@@ -182,10 +197,31 @@ export default {
|
||||
}],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
async mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const rawId = this.$route.query.id || urlParams.get('id');
|
||||
this.potentialFlag = this.$route.query.potentialFlag || urlParams.get('potentialFlag') || '';
|
||||
if (rawId) {
|
||||
this.routeId = rawId;
|
||||
await this.getSupplierById(Number(rawId));
|
||||
} else {
|
||||
this.initialized = true;
|
||||
}
|
||||
let _token = localStorage.getItem('token')
|
||||
if( _token ) {
|
||||
this.getPermissions();
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
nextToDriver() {
|
||||
localStorage.setItem('lastRoute', JSON.stringify({ name: 'driverManage', query: { id: this.supplierId, potentialId: this.routeId, potentialFlag: this.potentialFlag } }));
|
||||
this.goPage('driverManage', { id: this.supplierId, potentialId: this.routeId, potentialFlag: this.potentialFlag });
|
||||
},
|
||||
async getSupplierById(id) {
|
||||
let res = await supplierSelectById({ id });
|
||||
this.supplierId = res?.data?.supplierId || '';
|
||||
this.initialized = true;
|
||||
},
|
||||
showTip(msg) {
|
||||
Dialog.alert({
|
||||
title: '未通过原因',
|
||||
@@ -243,7 +279,9 @@ export default {
|
||||
},
|
||||
async onLoad(){
|
||||
await this.getVehicleList()
|
||||
if(this.total>10){
|
||||
this.pageNum++;
|
||||
}
|
||||
// 加载状态结束
|
||||
this.loading = false;
|
||||
// 数据全部加载完成
|
||||
@@ -268,6 +306,7 @@ export default {
|
||||
inputStatusList: this.inputStatusList,
|
||||
authStates: this.authStates,
|
||||
liabilityInsuranceAuditList: this.liabilityInsuranceAuditList,
|
||||
supplierId: this.supplierId || undefined,
|
||||
})
|
||||
this.total=result.total
|
||||
if(this.pageNum == 1){// 第一页直接赋值
|
||||
@@ -326,7 +365,8 @@ export default {
|
||||
this.$router.push({
|
||||
name:'vehicleAdd',
|
||||
params:{
|
||||
id:item.vehicleId
|
||||
id:item.vehicleId,
|
||||
supplierId:item.supplierId
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -405,6 +445,12 @@ export default {
|
||||
.codeLeft{
|
||||
@include fontWeightSize(bold,14px)
|
||||
}
|
||||
.codeRight{
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.twoBtn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -569,5 +615,23 @@ export default {
|
||||
justify-content: flex-start;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.btn_wrap {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
z-index: 10000;
|
||||
.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>
|
||||
|
||||
@@ -1,41 +1,57 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="baseInfo common" :style="{'height':orderDetailInfo.contractParentId == 110 ? '300px' : '240px'}">
|
||||
<div class="baseInfo common">
|
||||
<div class="title">基本信息:</div>
|
||||
<div class="line"></div>
|
||||
<div class="infoWrap fontColor">
|
||||
<div class="leftTitle">
|
||||
<div class="leftItem">工单编号:</div>
|
||||
<div class="leftItem">合同:</div>
|
||||
<template v-if="orderDetailInfo.contractParentId == 110">
|
||||
<div class="leftItem">机构名称:</div>
|
||||
<div class="leftItem">销售人员:</div>
|
||||
<div class="leftItem">司机号码:</div>
|
||||
</template>
|
||||
<div class="leftItem">结算方式:</div>
|
||||
<div class="leftItem">客户姓名:</div>
|
||||
<div class="leftItem">客户电话:</div>
|
||||
<div class="leftItem">车牌号:</div>
|
||||
<div class="leftItem">车型品牌:</div>
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<div class="rightItem" style="display: flex;align-items: center;">
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">工单编号:</span>
|
||||
<span class="rightItem" style="display: flex;align-items: center;">
|
||||
<span id="copyText">{{orderDetailInfo.orderCode}}</span>
|
||||
<img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="infoRow" v-if="!([7,9,11,12].includes(Number(queryType)))">
|
||||
<span class="leftItem">合同:</span>
|
||||
<span class="rightItem">{{ orderDetailInfo.contractName }}</span>
|
||||
</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.contractName }}</div>
|
||||
<template v-if="orderDetailInfo.contractParentId == 110">
|
||||
<div class="rightItem">{{ orderDetailInfo.organizeName }}</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.saleName }}</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.driverPhone }}</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">机构名称:</span>
|
||||
<span class="rightItem">{{ orderDetailInfo.organizeName }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">销售人员:</span>
|
||||
<span class="rightItem">{{ orderDetailInfo.saleName }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">司机号码:</span>
|
||||
<span class="rightItem">{{ orderDetailInfo.driverPhone ? orderDetailInfo.driverPhone : ' '}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="rightItem">{{ orderDetailInfo.contractSettleType?.label }}</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.userName }}</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.userPhone }}</div>
|
||||
<div class="rightItem">{{ orderDetailInfo.plateNumber }}</div>
|
||||
<!-- <div class="rightItem" >理想智动LXA6500SHEVM理想智动LXA6500SHEVM</div>-->
|
||||
<div class="rightItem" >{{orderDetailInfo.model}}{{ orderDetailInfo.brand }}</div>
|
||||
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">结算方式:</span>
|
||||
<span class="rightItem">{{ orderDetailInfo.contractSettleType?.label }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">客户姓名:</span>
|
||||
<span class="rightItem">{{ [7,9,11,12].includes(Number(queryType)) ? maskName(orderDetailInfo.userName) : orderDetailInfo.userName }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">客户电话:</span>
|
||||
<span class="rightItem">{{ maskPhone(orderDetailInfo.userPhone) }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">车牌号:</span>
|
||||
<span class="rightItem">{{ [7,9,11,12].includes(Number(queryType)) ? maskPlate(orderDetailInfo.plateNumber) : orderDetailInfo.plateNumber }}</span>
|
||||
</div>
|
||||
<div class="infoRow">
|
||||
<span class="leftItem">车型品牌:</span>
|
||||
<span class="rightItem">{{orderDetailInfo.model}}{{ orderDetailInfo.brand }}</span>
|
||||
</div>
|
||||
<div class="infoRow" v-if="!([7,9,11,12].includes(Number(queryType)))">
|
||||
<span class="leftItem">车架号:</span>
|
||||
<span class="rightItem">{{orderDetailInfo.vinNo}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +62,7 @@
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">服务类型:</span><span class="rightContent">{{ orderDetailInfo.taskServiceName }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" v-if="orderDetailInfo?.userVehicleTypeString">
|
||||
<span class="leftTitle fontColor">车辆类型:</span><span class="rightContent">{{ orderDetailInfo.userVehicleTypeString }}<van-icon class="icon" name="question" @click="showCarTypeShow = true" /></span>
|
||||
</div>
|
||||
<div class="item">
|
||||
@@ -74,13 +90,38 @@
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}
|
||||
<span v-if="queryType == 5" class="driverPoiBtn" @click="noMultipleClicks(showMap)">查看司机位置</span>
|
||||
<span v-if="orderDetailInfo.driverName && orderDetailInfo.proprietary?.code==1" class="driverPoiBtn" @click="noMultipleClicks(createDriverInfo)">生成司机信息</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="item" v-if="queryType == 9 || queryType ==11 || queryType ==12">
|
||||
<div class="item" v-if="queryType == 9 || queryType ==11 || queryType ==12 || queryType ==5">
|
||||
<span class="leftTitle fontColor">工单照片:</span><span class="rightContent">
|
||||
<span class="driverPoiBtn" @click="checkPhoto">查看照片</span>
|
||||
<span class="driverPoiBtn" v-if="orderDetailInfo.beforeDispatchImages && orderDetailInfo.beforeDispatchImages.length > 0" @click="environmentPhoto">环境照片</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="orderDetailInfo.firstAggregateFailInfo" class="aggregate-fail-card">
|
||||
<div class="aggregate-fail-card__title">⚠ 首次聚合未接单</div>
|
||||
<div class="aggregate-fail-card__row">
|
||||
<span class="aggregate-fail-card__label">师傅姓名:</span>
|
||||
<span class="aggregate-fail-card__value">{{ orderDetailInfo.firstAggregateFailInfo.driverName || '—' }}</span>
|
||||
</div>
|
||||
<div class="aggregate-fail-card__row">
|
||||
<span class="aggregate-fail-card__label">师傅手机号:</span>
|
||||
<span class="aggregate-fail-card__value">{{ orderDetailInfo.firstAggregateFailInfo.driverPhone || '—' }}</span>
|
||||
</div>
|
||||
<div class="aggregate-fail-card__row">
|
||||
<span class="aggregate-fail-card__label">车辆:</span>
|
||||
<span class="aggregate-fail-card__value">{{ aggregateFailVehicle }}</span>
|
||||
</div>
|
||||
<div class="aggregate-fail-card__row">
|
||||
<span class="aggregate-fail-card__label">失败原因:</span>
|
||||
<span class="aggregate-fail-card__value aggregate-fail-card__value--warning">{{ orderDetailInfo.firstAggregateFailInfo.failReason || '—' }}</span>
|
||||
</div>
|
||||
<div class="aggregate-fail-card__row">
|
||||
<span class="aggregate-fail-card__label">聚合时间:</span>
|
||||
<span class="aggregate-fail-card__value">{{ orderDetailInfo.firstAggregateFailInfo.dispatchTime || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceInfo common" v-if="orderDetailInfo.batteryNo">
|
||||
@@ -114,7 +155,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import {myMixins} from '@/utils/myMixins'
|
||||
import {getOrderDetail,showVehiclePositionInfo, getConfigByCode} from "@/api/order"
|
||||
import {getOrderDetail,showVehiclePositionInfo, getConfigByCode,getDriverInfo} from "@/api/order"
|
||||
import minePosition from '@/assets/minePosition.png';
|
||||
import vehiclePosition from '@/assets/vehiclePosition.png';
|
||||
import desitationPosition from '@/assets/desitationPosition.png'
|
||||
@@ -136,6 +177,16 @@ export default {
|
||||
carTypeList: []
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
aggregateFailVehicle(){
|
||||
const info = this.orderDetailInfo.firstAggregateFailInfo
|
||||
if(!info) return '—'
|
||||
const plate = info.licensePlate || ''
|
||||
const type = info.vehicleTypeName || ''
|
||||
if(plate && type) return `${plate}(${type})`
|
||||
return plate || type || '—'
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// 获取当前 URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
@@ -152,7 +203,7 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.initMap();
|
||||
});
|
||||
|
||||
console.log('queryType', this.queryType)
|
||||
},
|
||||
methods:{
|
||||
async getConfigByCodeHandler() {
|
||||
@@ -161,6 +212,26 @@ export default {
|
||||
});
|
||||
this.carTypeList = res?.data?.userVehicleType
|
||||
},
|
||||
async getDriverInfo(){
|
||||
let result=await getDriverInfo({
|
||||
driverId:this.orderDetailInfo.driverId
|
||||
})
|
||||
if(result.data){
|
||||
// console.log('--result--',result.data)
|
||||
let params=`姓名:${this.orderDetailInfo.driverName}\n身份证:${result.data.identityCardNumber}\n车牌:${this.orderDetailInfo.vehiclePlateNumber}\n手机:${this.orderDetailInfo.driverPhone}`
|
||||
// console.log('params',params)
|
||||
let data = {"action":"copyToClipboard","params":params}
|
||||
var u = navigator.userAgent;
|
||||
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||||
if(isiOS){
|
||||
window.webkit.messageHandlers.nativeObject.postMessage(data);
|
||||
}else {
|
||||
window.android.copyToClipboard(params);
|
||||
}
|
||||
}else {
|
||||
this.$toast('未获取到司机信息')
|
||||
}
|
||||
},
|
||||
async getDetail(){
|
||||
let result=await getOrderDetail({
|
||||
queryType:this.queryType,
|
||||
@@ -176,6 +247,9 @@ export default {
|
||||
this.showPopup = true;
|
||||
this.mapMarkers();
|
||||
},
|
||||
async createDriverInfo(){//生成司机信息
|
||||
await this.getDriverInfo()
|
||||
},
|
||||
checkPhoto(){
|
||||
let isAllowImage = this.queryType == 9 ? 0 : 1
|
||||
let data = {
|
||||
@@ -195,6 +269,12 @@ export default {
|
||||
window.android.sendMessage("orderPhoto,"+this.userOrderId+","+this.orderCode+","+this.taskOrderId+","+isAllowImage);
|
||||
}
|
||||
},
|
||||
environmentPhoto() {
|
||||
this.$router.push({
|
||||
path: '/environmentPhotos',
|
||||
query: { userOrderId: this.userOrderId }
|
||||
})
|
||||
},
|
||||
initMap() {
|
||||
this.map = new AMap.Map('container',{
|
||||
zoom:14,//级别(缩放比例 3-20 )
|
||||
@@ -238,6 +318,21 @@ export default {
|
||||
this.map.add(marker2);
|
||||
this.map.setFitView([marker,marker1,marker2])
|
||||
},
|
||||
maskName(name) {
|
||||
if (!name) return '';
|
||||
return name.slice(0, 1) + '*'.repeat(name.length - 1);
|
||||
},
|
||||
maskPhone(phone) {
|
||||
if (!phone) return '';
|
||||
const str = String(phone);
|
||||
if (str.length <= 7) return str;
|
||||
return str.slice(0, 3) + '*'.repeat(str.length - 7) + str.slice(-4);
|
||||
},
|
||||
maskPlate(plate) {
|
||||
if (!plate) return '';
|
||||
if (plate.length <= 2) return plate;
|
||||
return plate.slice(0, 1) + '*'.repeat(plate.length - 2) + plate.slice(-1);
|
||||
},
|
||||
async getDriverPoi(){
|
||||
let res=await showVehiclePositionInfo({
|
||||
userOrderId:this.userOrderId,
|
||||
@@ -294,19 +389,26 @@ export default {
|
||||
}
|
||||
.baseInfo{
|
||||
width: 100%;
|
||||
//@include wh(100%,260px);
|
||||
margin-bottom: 12px;
|
||||
.infoWrap{
|
||||
.infoRow{
|
||||
display: flex;
|
||||
.leftTitle{
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
.leftItem{
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 5px;
|
||||
margin-right: 6px;
|
||||
@include wh(60px,189px);
|
||||
opacity: .5;
|
||||
}
|
||||
.rightContent{
|
||||
height: 189px;
|
||||
width: calc(100% - 60px);
|
||||
.rightItem{
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -349,6 +451,38 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.aggregate-fail-card{
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: #FFF7F0;
|
||||
border: 1px solid #FFBB96;
|
||||
border-radius: 6px;
|
||||
&__title{
|
||||
@include fontWeightSize(bold,13px);
|
||||
color: #FA541C;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&__row{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
line-height: 22px;
|
||||
}
|
||||
&__label{
|
||||
width: 78px;
|
||||
flex-shrink: 0;
|
||||
@include fontWeightSize(400,12px);
|
||||
color: #000000;
|
||||
opacity: .65;
|
||||
}
|
||||
&__value{
|
||||
flex: 1;
|
||||
@include fontWeightSize(bold,12px);
|
||||
color: #000000;
|
||||
&--warning{
|
||||
color: #FA541C;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
@include fontWeightSize(bold,14px);
|
||||
@include colorOpa(#323643,0.6);
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<el-table :data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
v-loading="loading"
|
||||
class="custom-table">
|
||||
<el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
|
||||
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fit-table",
|
||||
props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
::v-deep .el-table{
|
||||
font-size: 11px;
|
||||
}
|
||||
::v-deep .el-table thead{
|
||||
color: #1D2129;
|
||||
font-weight: bold;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
background-color: #E5E6EB;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell{
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -39,7 +39,7 @@
|
||||
<van-tabs v-model="active" sticky @click="tabClickHandle">
|
||||
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
|
||||
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
|
||||
<div v-if="isMobile && !([9,10, 11].includes(active))" class="tipArrow right">>>></div>
|
||||
<div v-if="isMobile && !([7,8, 9].includes(active))" class="tipArrow right">>>></div>
|
||||
</van-tabs>
|
||||
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
|
||||
<!--<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||||
@@ -232,13 +232,13 @@
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9,10, 11].includes(active)">
|
||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9].includes(active)">
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
|
||||
></noFit-table>
|
||||
</div>
|
||||
<el-pagination
|
||||
v-if="active !== 10"
|
||||
v-if="active !== 8"
|
||||
small
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:current-page.sync="pageNum"
|
||||
@@ -263,6 +263,7 @@ import {
|
||||
getDriverName,getDriverStatisticsKpi,
|
||||
getRecentSupplierKpi,
|
||||
} from "@/api/kpi.js"
|
||||
import { getUserBO } from "@/api/order"
|
||||
// querySupplierDriverStatisticsScore
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
||||
@@ -279,8 +280,8 @@ export default {
|
||||
activeIndex: 0,
|
||||
//
|
||||
tabArr: [
|
||||
{name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
|
||||
{name: '超时明细'}, {name: '催促明细'},{name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} , {name: '聚合失败案件明细'}
|
||||
{name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '月/师傅'}, {name: '日/师傅'}, /*{name: '拒单明细'},*/
|
||||
/*{name: '超时明细'},*/ {name: '催促明细'},{name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} , {name: '聚合失败案件明细'}
|
||||
],
|
||||
list: [ {name: '服务评价'}, {name: 'APP使用情况'}, {name: ' 时效 '}],
|
||||
// driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||||
@@ -330,6 +331,10 @@ export default {
|
||||
showScoreChart:true,
|
||||
continueMonthKpi:[],
|
||||
isBtn:false,//是否有信息变更申请按钮权限
|
||||
source: 'App',
|
||||
currentSupplierId: '',
|
||||
userId: '',
|
||||
enterTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -338,13 +343,41 @@ export default {
|
||||
this.isZd = urlParams?.get('isZd') || ''
|
||||
this.supplierId = urlParams?.get('supplierId') || ''
|
||||
this.isBtn= Number(urlParams?.get('isBtn'))
|
||||
this.source = urlParams?.get('source') || 'App'
|
||||
},
|
||||
async mounted() {
|
||||
await this.checkMobile();
|
||||
await this.initDate();
|
||||
await this.selectSupplierNameHandle();
|
||||
await this.getUserInfo();
|
||||
document.addEventListener('visibilitychange', async ( ) => {
|
||||
let state = document.visibilityState
|
||||
if (state == 'hidden') { // 用户离开了
|
||||
if( this.source == 'App' ) {
|
||||
this.setLogHandler({
|
||||
supplierId: this.currentSupplierId, // 服务商 id
|
||||
userId: this.userId, // userId
|
||||
source: '服务商KPI',
|
||||
event: this.source, // 区分 App 还是 system
|
||||
openTime: this.enterTime, // log 时间,其中 阅读时长是由 enter 和 leave 的时间计算而来
|
||||
leaveTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
});
|
||||
}
|
||||
}
|
||||
if (state == 'visible') {
|
||||
this.enterTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getUserInfo() {
|
||||
let res = await getUserBO();
|
||||
this.userId = res.data.id;
|
||||
this.currentSupplierId = res.data.supplierId
|
||||
console.log('getUserBO', res)
|
||||
},
|
||||
applicateHandle() {
|
||||
if (window.parent) {
|
||||
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
|
||||
@@ -1096,7 +1129,7 @@ export default {
|
||||
|
||||
this.loading = false;
|
||||
} */
|
||||
else if ([ 5,6,7, 8,9,10,11].includes(this.active)) {
|
||||
else if ([ 5,6,7, 8,9].includes(this.active)) {
|
||||
this.detailList = []
|
||||
this.labelList = []
|
||||
let result = await getKpiDetailsData({
|
||||
@@ -1113,7 +1146,7 @@ export default {
|
||||
return {...item, date: formatVal};
|
||||
});
|
||||
this.loading = false
|
||||
if (this.active === 5) {//拒单明细
|
||||
/*if (this.active === 5) {//拒单明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1133,7 +1166,8 @@ export default {
|
||||
{label: '超时时间', prop: 'time'},
|
||||
{label: '超时原因', prop: 'reason'},
|
||||
]
|
||||
} else if (this.active === 7) {//催促明细
|
||||
} else */
|
||||
if (this.active === 5) {//催促明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '二级合同名称', prop: 'contractName'},
|
||||
@@ -1146,11 +1180,11 @@ export default {
|
||||
{label: '服务车辆', prop: 'vehicleName'},
|
||||
{label: '服务完成状况', prop: 'orderStatusString'},
|
||||
{label: '案件完成时间', prop: 'finishTime'},
|
||||
{label: '省(B)', prop: 'bProvince'},
|
||||
{label: '市(B)', prop: 'bCity'},
|
||||
{label: '省(B)', prop: 'bprovince'},
|
||||
{label: '市(B)', prop: 'bcity'},
|
||||
{label: '区(B)', prop: 'area'},
|
||||
]
|
||||
} else if (this.active === 8) {//投诉明细
|
||||
} else if (this.active === 6) {//投诉明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1159,7 +1193,7 @@ export default {
|
||||
{label: '投诉类型', prop: 'complainTypeString'},
|
||||
{label: '责任供应商扣罚金额', prop: 'compensateFee'},
|
||||
]
|
||||
} else if (this.active === 9) {//不使用App案件明细
|
||||
} else if (this.active === 7) {//不使用App案件明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1168,7 +1202,7 @@ export default {
|
||||
{label: '案件创建时间', prop: 'orderCreateTime'},
|
||||
{label: '事发地', prop: 'vehiclePointAddress'},
|
||||
]
|
||||
} else if (this.active === 10) {//车辆在线情况
|
||||
} else if (this.active === 8) {//车辆在线情况
|
||||
this.labelList = [
|
||||
// {label: '总车辆数', prop: 'totalCount'},
|
||||
{label: '在线车辆数(取每日的12点)', prop: 'twelveClockVehicleCount'},
|
||||
@@ -1177,7 +1211,7 @@ export default {
|
||||
{label: '在线率(在线车辆数/总车辆数)', prop: 'onlineRate'},
|
||||
// {label: '车辆平均在线时长', prop: ''},
|
||||
]
|
||||
} else if (this.active === 11) {//聚合失败案件明细
|
||||
} else if (this.active === 9) {//聚合失败案件明细
|
||||
this.labelList = [
|
||||
{label: '案件编号', prop: 'orderCode'},
|
||||
{label: '服务内容', prop: 'serviceName'},
|
||||
@@ -1326,7 +1360,8 @@ export default {
|
||||
columnObj.label = item.month // 每一列的标题的名称
|
||||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||||
this.etlLabelList.push(columnObj)
|
||||
let mappings = [ 'complainOrderCount', 'complainOrderRate', 'pinganFavorableCount','pinganFavorableRate' ];
|
||||
// 'pinganFavorableCount','pinganFavorableRate'
|
||||
let mappings = [ 'complainOrderCount', 'complainOrderRate' ];
|
||||
for (let i = 0; i < mappings.length; i++) {
|
||||
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
|
||||
}
|
||||
@@ -1605,32 +1640,32 @@ export default {
|
||||
},
|
||||
setType(type) {
|
||||
switch (type) {
|
||||
case 5:
|
||||
/*case 5:
|
||||
return 1;
|
||||
case 6:
|
||||
return 2;
|
||||
case 7:
|
||||
return 2;*/
|
||||
case 5:
|
||||
return 7;
|
||||
case 8:
|
||||
case 6:
|
||||
return 3;
|
||||
case 9:
|
||||
case 7:
|
||||
return 4;
|
||||
case 10:
|
||||
case 8:
|
||||
return 5;
|
||||
case 11:
|
||||
case 9:
|
||||
return 6;
|
||||
}
|
||||
},
|
||||
getTitle(type) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return '接单时效';
|
||||
case 1:
|
||||
return '客户评价';
|
||||
case 2:
|
||||
case 1:
|
||||
return 'APP使用';
|
||||
case 3:
|
||||
case 2:
|
||||
return '时效';
|
||||
/* case 3:
|
||||
return '时效';*/
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -13,23 +13,20 @@
|
||||
</div>
|
||||
<div class="contentWrap">
|
||||
<div>
|
||||
为降低日常救援工作中的不可预期的车损赔付带来的运营风险和资金压力,减少由此衍生而来的可能投诉,顺应行业服务标准不断增长的局势,中道救援自有车辆已全部投保了救援职业责任险。
|
||||
为降低日常救援工作中的不可预期的车损赔付带来的运营风险和资金压力,减少由此衍生而来的投诉,顺应行业服务标准不断增长的局势,中道救援自有车辆已全部投保了救援职业责任险。
|
||||
</div>
|
||||
<div>
|
||||
通过日常的交流了解,此险种对于服务商而言,投保相对较难,很多服务商在无投保渠道的情况下选择了对于我们救援场景保障能力稍弱、不太匹配的货物险,从而从形成了现在很多救援车无保障、或者特殊场景货物险理赔难的局面。
|
||||
</div>
|
||||
<div>
|
||||
为此中道救援经过与保司沟通协调,特为与中道救援合作紧密的服务商,提供救援职业责任险参保渠道,提升服务商服务能力,降低运营风险,实现共同进步。
|
||||
通过交流了解,我们的合作服务商日常运营中会遇到责任险或者货物险的“投保难、理赔难”的问题,为此我们与保司沟通协调,特为与中道救援合作紧密的服务商,提供救援职业责任险参保渠道,解决大家的实际困难,实现共同进步。
|
||||
</div>
|
||||
<div>一、救援职业责任险简介:</div>
|
||||
<div> 1、综合保额100万元(其中救援责任50万元,物流责任50万元),可全方位覆盖我们日常的经营活动。</div>
|
||||
<div> 1、保额有50万和100万两套方案可选。</div>
|
||||
<div> 2、保费支付可采用救援服务费抵扣的方式,降低资金压力。</div>
|
||||
<div> 3、详细保险条款、保费和其他问题,如需了解,请与辖区区域经理联系。</div>
|
||||
<div> 二、其他意见建议如需交流,请与18621558505曲仁杰联系。</div>
|
||||
<div> 三、如确认参保,请点击下方“参保”按钮,会有专人与贵司联系。</div>
|
||||
<div> 3、其他详情如需了解,请与辖区区域经理联系。</div>
|
||||
<div> 二、如有好的建议需要交流,请与18621558505曲仁杰联系。</div>
|
||||
<div> 三、如有参保需要,请点击下方“参保”按钮,我们会与您联系。</div>
|
||||
</div>
|
||||
<div class="upload_btn_wrap">
|
||||
<div class="btn_save" :style="{'backgroundColor':used ? '#cccccc' : '#354D93'}" @click="showPoup = true">参保</div>
|
||||
<div class="btn_save" :style="{'backgroundColor':used ? '#cccccc' : '#354D93'}" @click="showPoup = true">我想咨询</div>
|
||||
</div>
|
||||
<div class="poupCommon" v-if="showPoup">
|
||||
<div class="showPoupContainer">
|
||||
@@ -37,12 +34,10 @@
|
||||
<img class="insure" src="@/assets/insured.png">
|
||||
<div class="con">
|
||||
<template v-if="used">
|
||||
<div class="title">您已成功申请参保,请等待</div>
|
||||
<div class="title">专人与贵司联系。</div>
|
||||
<div class="title">咨询已收到,我们会与您联系。</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="title">请确认</div>
|
||||
<div class="title">是否参保救援职业责任险</div>
|
||||
<div class="title">请确认咨询</div>
|
||||
</template>
|
||||
<div class="btnWrap">
|
||||
<div v-if="used" class="btn confirmBtn" @click="showPoup = false">确认</div>
|
||||
@@ -65,6 +60,7 @@ export default {
|
||||
return {
|
||||
showPoup: false,
|
||||
used:false,
|
||||
saveLoading: true,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
@@ -73,12 +69,19 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async saveHandle() {
|
||||
if( this.saveLoading ) {
|
||||
try {
|
||||
this.saveLoading = false;
|
||||
await sendInsuranceEmail();
|
||||
this.$toast('操作成功');
|
||||
this.showPoup=false
|
||||
setTimeout(()=>{
|
||||
this.showPoup = false
|
||||
setTimeout(() => {
|
||||
this.goBack()
|
||||
},1500)
|
||||
}, 1500)
|
||||
} finally {
|
||||
this.saveLoading = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,496 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="人员信息"
|
||||
:left-arrow="Boolean(!isWebFunc())"
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="goBack"
|
||||
/>
|
||||
</div>
|
||||
<div :class="{'tipWrap':true,'yelBg':type==3,'greBg':type==4}">
|
||||
<img v-show="[1,2].includes(type)" src="@/assets/unpass.png" />
|
||||
<img v-show="[3].includes(type)" src="@/assets/yelTip.png" />
|
||||
<img v-show="[4].includes(type)" src="@/assets/greTip.png" />
|
||||
<span v-if="type==1">请立即核对或修改以下信息:姓名/身份/电话/微信号/邮箱</span>
|
||||
<span v-else-if="type==2">“角色”无法修改,如需修改“角色”请联系区域经理。提交审批后请到【管理人员】模块进行查看。</span>
|
||||
<span v-else-if="type==3">当前信息正在确认中,如需调整请联系区域经理。</span>
|
||||
<span v-else-if="type==4">当前信息已确认,如需调整请联系区域经理。</span>
|
||||
</div>
|
||||
<van-loading v-show="personList.length<=0" class="loadingWrap" type="spinner" color="#1989fa" />
|
||||
<div class="contentWrap" v-show="personList.length>0"
|
||||
:style="{'height':([1,2].includes(type) && isMaster) ? 'calc(100% - 160px)' : 'calc(100% - 90px)'}">
|
||||
<div class="itemWrap" v-for="(item,index) in personList" :key="index">
|
||||
<div class="opaCol">人员{{(index+1)}}:</div>
|
||||
<div class="line"></div>
|
||||
<div class="item">
|
||||
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>姓名:</span></div>
|
||||
<div class="right">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.name" placeholder="请输入" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left opaCol"><span class="star" style="opacity: 0">*</span><span>角色:</span></div>
|
||||
<div class="right" :class="{'opaCol':type==2}">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.roleDisplay" placeholder="请输入" />
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.hasRelationRole">
|
||||
<div class="item" v-for="(row, rIndex) in item.relationRows" :key="'relation-' + rIndex">
|
||||
<div class="left relationLeft" :class="{'opaCol':type!=2}"><span class="star" :style="{opacity: type==2 ? 1 : 0}">*</span><span>{{ item.relationRows.length > 1 ? row.base : '关系' }}:</span></div>
|
||||
<div class="right">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="row.relation" placeholder="请输入关系" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="item">
|
||||
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>电话1:</span></div>
|
||||
<div class="right">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model.number="item.phone1" placeholder="请输入" @blur="blurHandle" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left" :class="{'opaCol':type!=2}"><span class="star" style="opacity: 0">*</span><span>电话2:</span></div>
|
||||
<div class="right">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model.number="item.phone2" @blur="blurHandle" placeholder="请输入" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>微信号:</span></div>
|
||||
<div class="right wechatRight">
|
||||
<span class="reviseBtn" v-show="type==2" @click="wechatRevise(item,index)">修改</span>
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.wechatName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left" :class="{'opaCol':type!=2}"><span class="star" style="opacity: 0">*</span><span>邮箱:</span></div>
|
||||
<div class="right">
|
||||
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.email" placeholder="请输入" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnWrap" v-if="isMaster && [1,2].includes(type)">
|
||||
<div v-show="type==2" class="audit common" @click="auditHandle">提交审批</div>
|
||||
<div v-show="type==1" class="revise common" @click="reviseHandle">立即修改</div>
|
||||
<div v-show="type==1" class="confirm common" @click="confirmHandle">确认信息无误</div>
|
||||
</div>
|
||||
<van-dialog v-model="dialogShow" title="请将此二维码发送至相应人员进行添加,成功添加后将更新微信号。" show-cancel-button
|
||||
confirmButtonText="确认已添加" confirmButtonColor="#354E93" className="customDialog"
|
||||
@confirm="wechatConfirm" @cancel="cancelHandle">
|
||||
<img v-if="wechatInfo?.qrCode" :src="wechatInfo.qrCode" style="width: 83%"/>
|
||||
</van-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {getConfirmPerson,getConfirmStatus,getQrCode,confirmAddWechat,confirm,submitConfirm} from "@/api/authentication";
|
||||
import { Dialog } from 'vant';
|
||||
// 带关系角色(存储格式:角色名-关系)
|
||||
const RELATION_ROLES = ['其他', '法人关系人', '实控人关系人', '合伙人']
|
||||
export default {
|
||||
name: "personList",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
noClick:true,
|
||||
id:'',
|
||||
type:'',//1确认信息 2修改 3审批中 4已确认
|
||||
personList:[],
|
||||
dialogShow:false,
|
||||
reviseIndex:-1,
|
||||
supplierId:'',
|
||||
wechatInfo:'',
|
||||
personInfoId:'',
|
||||
personInfo:'',
|
||||
isMaster:false,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data === 'dialogClosed') {
|
||||
// console.log('Dialog 已关闭 // 执行关闭后的逻辑');
|
||||
}
|
||||
});
|
||||
// console.log('isWebFunc()',this.isWebFunc())
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.id=this.$route.query.id || urlParams.get('id');
|
||||
this.supplierId=this.$route.query.supplierId || urlParams.get('supplierId');
|
||||
// this.supplierId=1128
|
||||
console.log('1111',this.supplierId)
|
||||
await this.getPersonList()
|
||||
},
|
||||
methods:{
|
||||
blurHandle(e){
|
||||
let val= e.target.value || ''
|
||||
let flag=this.validatePhone(val)
|
||||
// console.log('flag',flag)
|
||||
if(!flag){
|
||||
this.$toast('电话号码格式不正确')
|
||||
}
|
||||
},
|
||||
validatePhone(val) {
|
||||
console.log('val',val)
|
||||
if(!val){
|
||||
return true
|
||||
}
|
||||
const purePhone = String(val).trim()
|
||||
const mobileReg = /^1[3-9]\d{9}$/ // 大陆手机号正则表达式
|
||||
const hkMobileReg = /^[569]\d{3}[\s-]?\d{4}$/ // 香港手机号正则表达式,允许使用空格或 "-" 分隔
|
||||
const macauMobileReg = /^6\d{3}[\s-]?\d{4}$/ // 澳门手机号正则表达式,允许使用空格或 "-" 分隔
|
||||
const telReg = /^(0\d{2,3})([\s-])?\d{7,8}$/ // 大陆座机号正则表达式,允许区号和座机号用空格或 "-" 分开
|
||||
const hkTelReg = /^\(?\d{2,4}\)?[\s-]?\d{4}[\s-]?\d{4}$/ // 香港座机号正则表达式,允许使用空格或 "-" 分隔
|
||||
const macauTelReg = /^\(?\d{2,4}\)?[\s-]?\d{4}[\s-]?\d{4}$/ // 澳门座机号正则表达式,允许使用空格或 "-" 分隔
|
||||
const phone400Reg = /^400[\s-]?\d{3}[\s-]?\d{4}$/ // 以 "400" 开头的号码正则表达式,允许使用空格或 "-" 分隔
|
||||
// 情况1:12位且首位是0、第二位是1 → 去0后按大陆手机号校验
|
||||
if (/^01[0-9]{10}$/.test(purePhone)) {
|
||||
return true
|
||||
}
|
||||
// 匹配任意一种格式即为合法
|
||||
if (mobileReg.test(purePhone) || hkMobileReg.test(purePhone) || macauMobileReg.test(purePhone) ||
|
||||
telReg.test(purePhone) || hkTelReg.test(purePhone) || macauTelReg.test(purePhone) ||
|
||||
phone400Reg.test(purePhone)) {
|
||||
return true
|
||||
}
|
||||
// 其他情况 → 不合法
|
||||
return false
|
||||
},
|
||||
async getPersonList(){
|
||||
let result=await getConfirmStatus({supplierId:this.supplierId})
|
||||
if(result.data?.wechatConfirmStatus==2){
|
||||
this.type=3
|
||||
}else if(result.data?.wechatConfirmStatus==3){
|
||||
this.type=4
|
||||
}else if(!result.data?.wechatConfirmStatus || result.data?.wechatConfirmStatus==1){
|
||||
this.type=1
|
||||
}
|
||||
this.isMaster=result.data.isMaster
|
||||
// this.type=2
|
||||
let res=await getConfirmPerson({supplierId:this.supplierId})
|
||||
if(res.data && res.data.length>0){
|
||||
this.personList=res.data.map(item => this.buildRoleDisplay(item))
|
||||
}else{
|
||||
this.personList=[]
|
||||
}
|
||||
},
|
||||
// 拆分带关系角色:roleName 按逗号拆项,识别 `角色名-关系`,按第一个 '-' 拆出基础角色与关系
|
||||
buildRoleDisplay(item){
|
||||
const parts = (item.roleName || '').split(',').filter(Boolean).map(raw => {
|
||||
const dashIndex = raw.indexOf('-')
|
||||
if (dashIndex > -1 && RELATION_ROLES.includes(raw.substring(0, dashIndex))) {
|
||||
return { raw, base: raw.substring(0, dashIndex), relation: raw.substring(dashIndex + 1) }
|
||||
}
|
||||
return { raw, base: raw, relation: null }
|
||||
})
|
||||
item.roleParts = parts
|
||||
item.roleDisplay = parts.map(p => p.relation != null ? p.base : p.raw).join(',')
|
||||
item.relationRows = parts.filter(p => p.relation != null)
|
||||
item.hasRelationRole = item.relationRows.length > 0
|
||||
return item
|
||||
},
|
||||
async wechatConfirm(){//确认已添加微信按钮
|
||||
Dialog.confirm({
|
||||
message:'请确认相关人员是否已添加该二维码。',
|
||||
confirmButtonText:'确认',
|
||||
cancelButtonText:'取消',
|
||||
confirmButtonColor:'#354E93',
|
||||
}).then(async() => {
|
||||
let res=await confirmAddWechat({supplierId:this.supplierId,supplierPersonInfoId:this.personInfoId})
|
||||
console.log('res',this.personInfo,res.data?.name,this.personInfo.wechatName)
|
||||
if((res.data?.name == this.personInfo.wechatName) || (!res.data && this.personInfo.wechatName)){
|
||||
console.log('11111111')
|
||||
this.$set(this.personList[this.reviseIndex],'isChange',false)
|
||||
}else {
|
||||
console.log('2222222')
|
||||
this.$set(this.personList[this.reviseIndex],'isChange',true)
|
||||
}
|
||||
console.log('this.personList',this.personList)
|
||||
let flagRevise=this.personList.some(item => 'isChange' in item && !item.isChange)
|
||||
console.log('存在未修改',flagRevise)
|
||||
if(res.data){
|
||||
this.personList[this.reviseIndex].wechatId=res.data?.externalUserId
|
||||
this.personList[this.reviseIndex].wechatName=res.data?.name
|
||||
}
|
||||
await this.cancelHandle()
|
||||
}).catch(async () => {
|
||||
await this.cancelHandle()
|
||||
|
||||
});
|
||||
},
|
||||
cancelHandle(){
|
||||
this.dialogShow=false
|
||||
this.wechatInfo=''
|
||||
this.reviseIndex=-1
|
||||
this.personInfoId=''
|
||||
},
|
||||
async wechatRevise(item,index){
|
||||
console.log('item,index',item,index)
|
||||
// console.log('item',item)
|
||||
this.personInfoId=item.id
|
||||
this.reviseIndex=index
|
||||
this.personInfo=item
|
||||
await this.getCode()
|
||||
this.dialogShow=true
|
||||
},
|
||||
async getCode(){//获取二维码
|
||||
let res = await getQrCode({supplierId:this.supplierId,supplierPersonInfoId:this.personInfoId})
|
||||
// console.log('res--getCode',res)
|
||||
this.wechatInfo=res.data || ''
|
||||
},
|
||||
async auditHandle(){//提交审批
|
||||
let flag=this.personList.every(item => item.name && item.phone1 && item.wechatId && item.wechatName)
|
||||
if(!flag){
|
||||
this.$toast('必填项不可为空')
|
||||
return
|
||||
}
|
||||
console.log('----',this.personList)
|
||||
let flagRevise=this.personList.some(item => 'isChange' in item && !item.isChange)
|
||||
console.log('存在未修改',flagRevise)
|
||||
if(flagRevise){
|
||||
this.$toast('您仍未修改微信号,请先修改再提交审批。')
|
||||
return
|
||||
}
|
||||
let phone1Flag= this.personList.every(item => this.validatePhone(item.phone1))
|
||||
let phone2Flag= this.personList.every(item => (item.phone2 && this.validatePhone(item.phone2) || !item.phone2))
|
||||
console.log('phone1Flag',phone1Flag)
|
||||
console.log('phone2Flag',phone2Flag)
|
||||
if(!phone1Flag || !phone2Flag){
|
||||
this.$toast('电话号码格式不正确')
|
||||
return
|
||||
}
|
||||
// 带关系角色:关系必填校验,并将 roleDisplay + relation 重新拼接为 `角色名-关系` 写回 roleName
|
||||
for (const item of this.personList) {
|
||||
if (item.hasRelationRole) {
|
||||
for (const row of item.relationRows) {
|
||||
if (!row.relation || !String(row.relation).trim()) {
|
||||
this.$toast(`请填写${row.base}关系`)
|
||||
return
|
||||
}
|
||||
}
|
||||
item.roleName = item.roleParts.map(p => p.relation != null ? `${p.base}-${String(p.relation).trim()}` : p.raw).join(',')
|
||||
}
|
||||
}
|
||||
await submitConfirm({supplierId:this.supplierId,infos:this.personList})
|
||||
this.$toast('操作成功')
|
||||
if(this.isWebFunc()){
|
||||
setTimeout(()=>{
|
||||
this.closeParentDialog()
|
||||
},1500)
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
this.goBack()
|
||||
},1500)
|
||||
}
|
||||
},
|
||||
async reviseHandle(){//修改
|
||||
this.type=2
|
||||
},
|
||||
async confirmHandle(){//确认信息无误
|
||||
let flag=this.personList.every(item => item.name && item.phone1 && item.wechatId && item.wechatName)
|
||||
if(!flag){
|
||||
this.$toast('必填项不可为空,请点击“立即修改”将信息补充完整')
|
||||
return
|
||||
}
|
||||
Dialog.confirm({
|
||||
message:'请务必仔细确认信息是否无误。',
|
||||
confirmButtonText:'确认无误',
|
||||
cancelButtonText:'返回',
|
||||
confirmButtonColor:'#354E93',
|
||||
}).then(async() => {
|
||||
// console.log('确认无误')
|
||||
await confirm({supplierId:this.supplierId})
|
||||
this.$toast('操作成功')
|
||||
if(this.isWebFunc()){
|
||||
setTimeout(()=>{
|
||||
this.closeParentDialog()
|
||||
},1500)
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
this.goBack()
|
||||
},1500)
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.customDialog {
|
||||
.van-dialog__content{
|
||||
text-align: center !important;
|
||||
}
|
||||
.van-dialog__header {
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/common.scss";
|
||||
@import '@/styles/mixin.scss';
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
position: relative;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.tipWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 8px 8px 18px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
background-color: #FFF6F2;
|
||||
img{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
//vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
span{
|
||||
color: #FC3C06;
|
||||
}
|
||||
}
|
||||
.yelBg{
|
||||
background-color: #FFFFED ;
|
||||
span{
|
||||
color: #F36708;
|
||||
}
|
||||
}
|
||||
.greBg{
|
||||
background-color: #E8FFF3;
|
||||
span{
|
||||
color: #19AC43;
|
||||
}
|
||||
}
|
||||
/*.headerWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.back{
|
||||
@include wh(15px,15px);
|
||||
}
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #203152;
|
||||
}
|
||||
}*/
|
||||
.loadingWrap{
|
||||
width: 100%;
|
||||
height: calc(100% - 90px);
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
.contentWrap{
|
||||
//height: calc(100% - 160px);
|
||||
//height: calc(100% - 90px);//没有按钮时
|
||||
overflow-y: auto;
|
||||
.itemWrap{
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding:10px 15px 10px 20px;
|
||||
.line{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid;
|
||||
opacity: 0.16;
|
||||
margin-top: 10px;
|
||||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||||
}
|
||||
.item{
|
||||
//line-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 66px;
|
||||
}
|
||||
.right{
|
||||
flex: 1;
|
||||
}
|
||||
.wechatRight{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.reviseBtn{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background-color: #354D93;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opaCol{
|
||||
color: #323643;
|
||||
opacity: .65;
|
||||
}
|
||||
.item .left.relationLeft{
|
||||
width: auto;
|
||||
min-width: 66px;
|
||||
white-space: nowrap;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.star{
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #FF0808;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnWrap{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #F6F6F6;
|
||||
.common{
|
||||
background: #354D93;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.audit{
|
||||
width: 100%;
|
||||
}
|
||||
.revise{
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
color: #354D93;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #354D93;
|
||||
}
|
||||
.confirm{
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="bottom_wrap">
|
||||
<div class="report_item" v-for="(item, index) in reportList" @click="goReportHandler(item)" :key="index">
|
||||
<img class="report_icon" :src="item?.iconUrl" alt="">
|
||||
<div class="report_title">{{item.name}}</div>
|
||||
<!-- <div class="report_title">{{item.name}}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -43,8 +43,8 @@ export default {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
.report_icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.report_title {
|
||||
color: rgba(53, 53, 53, 0.67);
|
||||
|
||||
@@ -0,0 +1,581 @@
|
||||
<template>
|
||||
<!-- <van-pull-refresh v-model="isLoading" class="custom-pull-refresh safe-pull-refresh" @refresh="onRefresh">-->
|
||||
<div class="main_wrap">
|
||||
<div class="top_bg" :class="{'dispatch' : type == 1 , 'driver' : type != 1}">
|
||||
<!-- <div class="title">报备中心</div>-->
|
||||
</div>
|
||||
<div class="service_wrap">
|
||||
<service-item :order-info="orderInfo" @refresh="onRefreshHandler"></service-item>
|
||||
</div>
|
||||
<div class="chat_list" ref="chatList" >
|
||||
<!--ai对话框 s -->
|
||||
<div v-for="(item, index) in recordList" :key="index">
|
||||
<template v-if="item.messageType == 4">
|
||||
<div class="top_tip_wrap">为了快速解决问题,请选择下方咨询类型</div>
|
||||
<div class="ai_chat" >
|
||||
<div class="ai_left">
|
||||
<img class="report_ai" src="@/assets/report/report_ai.png" alt="">
|
||||
</div>
|
||||
<div class="ai_right">
|
||||
<div class="ai_title">{{ orderInfo?.driverName }}你好,请选择报备内容</div>
|
||||
<ul>
|
||||
<li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="[2, 3].includes(Number(item.messageType))">
|
||||
<!--ai对话框 e -->
|
||||
<div class="tip_wrap">{{item.createTime}}</div>
|
||||
<!--客服对话框 s -->
|
||||
<div class="customer_item mb20">
|
||||
<div class="customer_left">
|
||||
<img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
|
||||
</div>
|
||||
<div class="common_right customer_cls">
|
||||
<div class="customer_status">{{item.reportConfigName}}</div>
|
||||
<div class="response_con">{{item.remark}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.messageType == 1">
|
||||
<!--服务人员对话框 e -->
|
||||
<div class="tip_wrap">{{item.createTime}}</div>
|
||||
<!--服务人员对话框 s -->
|
||||
<div class="server_item mb20">
|
||||
<div class="common_right service_cls">
|
||||
<div class="service_status">{{item.reportConfigName}}</div>
|
||||
<div class="response_con">{{item.remark}}</div>
|
||||
</div>
|
||||
<div class="customer_left">
|
||||
<img class="profile_photo ml" v-if="type == 1" src="@/assets/report/report_dispatch.png" alt="">
|
||||
<img class="profile_photo ml" v-else src="@/assets/report/report_driver.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!--服务人员对话框 e -->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
|
||||
<van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
|
||||
<div class="dialog_wrap">
|
||||
<img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
|
||||
<div class="report_content">
|
||||
<template v-if="currentInfo.component == 'time'">
|
||||
<!--预约时间报备 s -->
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>预约时间</span>
|
||||
</div>
|
||||
<div class="report_time_content" @click="showDatetime = true">
|
||||
<div class="report_time_left">
|
||||
<img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
|
||||
<span>{{appointTime || '请选择时间'}}</span>
|
||||
</div>
|
||||
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
|
||||
</div>
|
||||
<!--预约时间报备 e -->
|
||||
</template>
|
||||
<template v-if="currentInfo.component == 'address'">
|
||||
<!--修改地址报备 s -->
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>修改地址</span>
|
||||
</div>
|
||||
<div class="report_time_content" @click="goPage('addressMap')">
|
||||
<div class="report_time_left">
|
||||
<img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
|
||||
<span>{{address || '请选择地址'}}</span>
|
||||
</div>
|
||||
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
|
||||
</div>
|
||||
<!--修改地址报备 e -->
|
||||
</template>
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>补充报备内容</span>
|
||||
</div>
|
||||
<div class="report_common_content">
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="remark"-->
|
||||
<!-- class="report_textarea"-->
|
||||
<!-- placeholder="点击这里输入补充报备内容" />-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="report_btn" @click="saveHandler">
|
||||
提交报备
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showDatetime" round position="bottom">
|
||||
<van-datetime-picker
|
||||
class="dataTime"
|
||||
v-if="showDatetime"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:filter="filter"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showDatetime = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
<!-- </van-pull-refresh>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReportListByOrder, reportHistory, newOrderReporting, getOrderInfo } from "@/api/report"
|
||||
import { myMixins} from "@/utils/myMixins";
|
||||
import {timeFormat} from "@/utils/common";
|
||||
import reportListItem from '@/views/report/components/report-list-item'
|
||||
import serviceItem from "@/views/report/components/service-item"
|
||||
import {Dialog, Toast} from "vant";
|
||||
export default {
|
||||
name: "reportIndex",
|
||||
components: { serviceItem, reportListItem },
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
addReportShow: false,
|
||||
remark: '',
|
||||
showDatetime: false,
|
||||
appointTime: '',
|
||||
minDate: new Date(),
|
||||
address: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
reportList: [],
|
||||
recordList: [],
|
||||
orderInfo: {},
|
||||
type: '', // 1 调度 2 司机
|
||||
currentInfo: '',
|
||||
userOrderId: '',
|
||||
userOrderCode: '',
|
||||
driverId: '',
|
||||
clickFlag: true,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.userOrderId = this.$route.query.userOrderId || urlParams.get('userOrderId');
|
||||
this.userOrderCode = this.$route.query.userOrderCode || urlParams.get('userOrderCode');
|
||||
this.type = this.$route.query.type || urlParams.get('type');
|
||||
this.driverId = this.$route.query.driverId || urlParams.get('driverId');
|
||||
await this.getReportList();
|
||||
await this.getDetail();
|
||||
await this.getRecordList();
|
||||
await this.scrollToBottom();
|
||||
},
|
||||
activated() {
|
||||
let addressSession = sessionStorage.getItem('reportAddress');
|
||||
if(addressSession) {
|
||||
let _obj = JSON.parse(addressSession)
|
||||
this.address = _obj.startPoiAddress;
|
||||
this.lat = _obj.startLat;
|
||||
this.lng = _obj.startLng;
|
||||
this.adCode = _obj.adCode;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
return options;
|
||||
},
|
||||
onRefreshHandler() {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
this.recordList = [];
|
||||
await this.getReportList();
|
||||
await this.getDetail();
|
||||
await this.getRecordList();
|
||||
await this.scrollToBottom();
|
||||
} finally {
|
||||
this.isLoading = false; // 结束加载状态
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
// 添加滚动方法
|
||||
scrollToBottom() {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.chatList
|
||||
container.scrollTop = container.scrollHeight
|
||||
})
|
||||
},
|
||||
async getRecordList() {
|
||||
let recordList = await reportHistory({
|
||||
userOrderId: this.userOrderId,
|
||||
userOrderCode: this.userOrderCode,
|
||||
driverId: this.driverId,
|
||||
source: Number(this.type),
|
||||
})
|
||||
this.recordList = recordList.data;
|
||||
},
|
||||
async saveHandler() {
|
||||
if( this.clickFlag ) {
|
||||
let data = {
|
||||
source: Number(this.type),
|
||||
reportContent: this.remark,
|
||||
userOrderId: Number(this.userOrderId),
|
||||
reportConfigId: this.currentInfo.id,
|
||||
userOrderCode: this.userOrderCode,
|
||||
driverId: this.driverId,
|
||||
}
|
||||
if(this.currentInfo.component == 'time') {
|
||||
if( !this.appointTime ) {
|
||||
Toast('预约时间不能为空')
|
||||
return
|
||||
}
|
||||
if( new Date(this.appointTime).getTime() <= new Date().getTime() ) {
|
||||
Toast('预约时间不能小于当前时间')
|
||||
return
|
||||
}
|
||||
data.time = this.appointTime
|
||||
}
|
||||
if(this.currentInfo.component == 'address') {
|
||||
if( !this.address ) {
|
||||
Toast('地址不能为空')
|
||||
return
|
||||
}
|
||||
data.address = this.address
|
||||
data.lat = this.lat;
|
||||
data.lng = this.lng;
|
||||
}
|
||||
if( !this.remark ) {
|
||||
Toast('备注内容不能为空')
|
||||
return
|
||||
}
|
||||
this.clickFlag = false;
|
||||
try {
|
||||
await newOrderReporting(data)
|
||||
Dialog.alert({
|
||||
title: '提示',
|
||||
message: "报备添加成功"
|
||||
}).then(async () => {
|
||||
await this.getRecordList()
|
||||
this.addReportShow = false
|
||||
this.scrollToBottom();
|
||||
this.initDialogData();
|
||||
this.clickFlag = true
|
||||
});
|
||||
} finally {
|
||||
this.clickFlag = true
|
||||
}
|
||||
}
|
||||
},
|
||||
initDialogData() {
|
||||
this.appointTime = '';
|
||||
this.address = '';
|
||||
this.lat = '';
|
||||
this.lng = '';
|
||||
this.remark = '';
|
||||
},
|
||||
addReportHandler(data) { // 点击添加报备弹框
|
||||
console.log('currentInfocurrentInfo', data)
|
||||
this.currentInfo = data;
|
||||
this.remark = '';
|
||||
this.addReportShow = true
|
||||
},
|
||||
getReportHandler(data) { // 点击获取当前报备信息
|
||||
console.log('dadadada', data.child)
|
||||
this.recordList.push({
|
||||
messageType: 4,
|
||||
content: data.child
|
||||
})
|
||||
this.scrollToBottom();
|
||||
if( data.child?.length == 1 ) {
|
||||
this.addReportHandler(data.child[0])
|
||||
}
|
||||
},
|
||||
async getDetail(){ // 订单详情
|
||||
if(this.userOrderId) {
|
||||
let result = await getOrderInfo({
|
||||
userOrderId: this.userOrderId,
|
||||
userOrderCode: this.userOrderCode
|
||||
})
|
||||
this.orderInfo = result.data
|
||||
} else {
|
||||
this.orderInfo = {}
|
||||
}
|
||||
|
||||
},
|
||||
async getReportList() { // 报备大类
|
||||
let res = await getReportListByOrder({
|
||||
orderId: this.userOrderId
|
||||
});
|
||||
this.reportList = res.data
|
||||
},
|
||||
onConfirm(data) {
|
||||
this.appointTime = timeFormat(new Date(data))
|
||||
this.showDatetime = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.custom-pull-refresh {
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
#app {
|
||||
background: #F9FCFF !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main_wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F9FCFF !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// 添加以下样式确保正确的高度计算
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.top_bg {
|
||||
width: 100%;
|
||||
height: 87px;
|
||||
/*.title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding-top: 52px;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}*/
|
||||
}
|
||||
.dispatch { // 调度app头部背景色
|
||||
background: #354683;
|
||||
}
|
||||
.driver { // 司机app头部背景色
|
||||
background: #334885;
|
||||
}
|
||||
.service_wrap {
|
||||
margin-top: -75px;
|
||||
/*margin-bottom: 20px;*/
|
||||
}
|
||||
.chat_list {
|
||||
flex: 1;
|
||||
/*overflow: auto;*/
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch; // 为了iOS平滑滚动
|
||||
padding-top: 10px;
|
||||
/* 修复 iOS 滚动问题 */
|
||||
transform: translateZ(0);
|
||||
.top_tip_wrap {
|
||||
color: #7C8698;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tip_wrap {
|
||||
color: #7C8698;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ai_chat {
|
||||
padding: 25px 10px 20px;
|
||||
display: flex;
|
||||
.ai_left {
|
||||
.report_ai {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
.ai_right {
|
||||
.ai_title {
|
||||
color: #203152;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
font-size: 13px;
|
||||
color: #267EF0;
|
||||
line-height: 18px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
li::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #5680FA;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*客服人员,服务人员对话弹框样式 s*/
|
||||
.profile_photo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.mr {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.ml {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.customer_item {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
padding-right: 64px;
|
||||
.customer_left {
|
||||
}
|
||||
}
|
||||
.common_right {
|
||||
padding: 11px 13px;
|
||||
flex: 1;
|
||||
.customer_status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #5680FA;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
.customer_status {
|
||||
font-size: 14px;
|
||||
color: #267EF0;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.service_status {
|
||||
font-size: 14px;
|
||||
color: #F07926;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.service_status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #F07926;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.customer_cls {
|
||||
border-radius: 0px 6px 6px 6px;
|
||||
background: #E3F0FF;
|
||||
}
|
||||
.service_cls {
|
||||
background: #FAEBD8;
|
||||
border-radius: 0px 6px 6px 6px;
|
||||
}
|
||||
.server_item {
|
||||
display: flex;
|
||||
padding-right: 10px;
|
||||
padding-left: 64px;
|
||||
}
|
||||
.response_con {
|
||||
font-size: 13px;
|
||||
color: #242A37;
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
/*客服人员,服务人员对话弹框样式 e*/
|
||||
.dialog_wrap {
|
||||
.add_report_bg {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
}
|
||||
.report_content {
|
||||
width: calc(100% - 12px);
|
||||
margin: -30px auto 0;
|
||||
padding-right: 14px;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
padding-top: 25px;
|
||||
border-radius: 10px;
|
||||
.report_title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #267EF0;
|
||||
line-height: 22px;
|
||||
margin-bottom: 10px;
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
.report_time_content {
|
||||
padding: 13px;
|
||||
background: #F2F7FF;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E2EAF6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
.report_time_left {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.add_report_time {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.report_arrow {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.report_common_content {
|
||||
margin-bottom: 27px;
|
||||
.report_textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #F8FAFC;
|
||||
border-radius: 6px;
|
||||
min-height: 95px;
|
||||
border: 1px solid #E2EAF6;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.report_btn {
|
||||
width: calc(100% - 80px);
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
background: #005DD5;
|
||||
border-radius: 23px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
}
|
||||
::v-deep .van-popup__close-icon {
|
||||
color: #0F458E;
|
||||
}
|
||||
</style>
|
||||
@@ -57,16 +57,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
|
||||
<van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
|
||||
<van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" z-index="500" closeable duration="0" round position="bottom">
|
||||
<div class="dialog_wrap">
|
||||
<img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
|
||||
<div class="report_content">
|
||||
<div class="report_title" style="margin-bottom: 10px;"><span>{{currentInfo.name}}</span></div>
|
||||
<template v-if="currentInfo.component == 'time'">
|
||||
<!--预约时间报备 s -->
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>预约时间</span>
|
||||
</div>
|
||||
<!--<el-date-picker class="report_time_content owner_time high-zindex-picker"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:picker-options="pickerOptions"
|
||||
:minutes-step="5"
|
||||
format="yyyy-MM-dd HH:mm:00"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>-->
|
||||
<!--<el-date-picker
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>-->
|
||||
<div class="report_time_content" @click="showDatetime = true">
|
||||
<div class="report_time_left">
|
||||
<img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
|
||||
@@ -91,17 +105,15 @@
|
||||
</div>
|
||||
<!--修改地址报备 e -->
|
||||
</template>
|
||||
<template v-if="currentInfo.component != 'time'">
|
||||
<div class="report_title">
|
||||
<img class="dot" src="@/assets/report/add_report_dot.png" alt="">
|
||||
<span>补充报备内容</span>
|
||||
<span>补充反馈内容</span>
|
||||
</div>
|
||||
<div class="report_common_content">
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="remark"-->
|
||||
<!-- class="report_textarea"-->
|
||||
<!-- placeholder="点击这里输入补充报备内容" />-->
|
||||
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充反馈内容" v-model.trim="remark"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="report_btn" @click="saveHandler">
|
||||
提交报备
|
||||
@@ -109,15 +121,16 @@
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showDatetime" round position="bottom">
|
||||
<van-popup v-model="showDatetime" round position="bottom" :close-on-click-overlay="false">
|
||||
<van-datetime-picker
|
||||
class="dataTime"
|
||||
v-if="showDatetime"
|
||||
v-model="appointTime"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:filter="filter"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showDatetime = false"
|
||||
@cancel="cancelHandler"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
@@ -155,6 +168,12 @@
|
||||
driverId: '',
|
||||
clickFlag: true,
|
||||
isLoading: false,
|
||||
pickerOptions: {
|
||||
// 可选:限制预约时间不能小于当前时间(复用你原有逻辑)
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() <= new Date().getTime();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
@@ -179,6 +198,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
return options;
|
||||
},
|
||||
onRefreshHandler() {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
@@ -238,10 +263,10 @@
|
||||
data.lat = this.lat;
|
||||
data.lng = this.lng;
|
||||
}
|
||||
if( !this.remark ) {
|
||||
/*if( !this.remark ) {
|
||||
Toast('备注内容不能为空')
|
||||
return
|
||||
}
|
||||
}*/
|
||||
this.clickFlag = false;
|
||||
try {
|
||||
await newOrderReporting(data)
|
||||
@@ -268,15 +293,21 @@
|
||||
this.remark = '';
|
||||
},
|
||||
addReportHandler(data) { // 点击添加报备弹框
|
||||
console.log('currentInfocurrentInfo', data)
|
||||
this.currentInfo = data;
|
||||
this.remark = '';
|
||||
this.addReportShow = true
|
||||
},
|
||||
getReportHandler(data) { // 点击获取当前报备信息
|
||||
console.log('dadadada', data.child)
|
||||
this.recordList.push({
|
||||
messageType: 4,
|
||||
content: data.child
|
||||
})
|
||||
this.scrollToBottom();
|
||||
if( data.child?.length == 1 ) {
|
||||
this.addReportHandler(data.child[0])
|
||||
}
|
||||
},
|
||||
async getDetail(){ // 订单详情
|
||||
if(this.userOrderId) {
|
||||
@@ -299,6 +330,10 @@
|
||||
onConfirm(data) {
|
||||
this.appointTime = timeFormat(new Date(data))
|
||||
this.showDatetime = false;
|
||||
},
|
||||
cancelHandler() {
|
||||
this.appointTime = ''
|
||||
this.showDatetime = false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -535,6 +570,9 @@
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.owner_time {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.report_common_content {
|
||||
margin-bottom: 27px;
|
||||
.report_textarea {
|
||||
@@ -565,4 +603,22 @@
|
||||
::v-deep .van-popup__close-icon {
|
||||
color: #0F458E;
|
||||
}
|
||||
::v-deep .el-date-editor.el-input,::v-deep .el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: none !important;
|
||||
}
|
||||
::v-deep .el-picker-panel {
|
||||
z-index: 100000000 !important;
|
||||
}
|
||||
.el-picker-panel{
|
||||
z-index: 100000000 !important;
|
||||
}
|
||||
::v-deep .high-zindex-picker {
|
||||
z-index: 9999 !important; // 高于 van-popup 默认层级(通常 1000-2000)
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -478,6 +478,21 @@ export default {
|
||||
otherPhoto:this.otherImgSrc?.join(',')
|
||||
})
|
||||
this.clearStorageFormInfo()
|
||||
if(res.code == 200 && !res.msg){
|
||||
this.$toast('发布成功')
|
||||
if(this.isWebFunc()){
|
||||
setTimeout(()=>{
|
||||
this.closeParentDialog()
|
||||
},1000)
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
this.$router.push({ name: "mineRelease"})
|
||||
sessionStorage.setItem('mineActiveTab',String(1) )
|
||||
},1000)
|
||||
}
|
||||
}else{
|
||||
this.$toast(res.msg)
|
||||
}
|
||||
console.log("车源发布publishCarInfo",res)
|
||||
} catch (e){
|
||||
console.log('e',e)
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<img class="mine" src="@/assets/secondHandCar/mine.png" @click="goMine" />
|
||||
<el-input
|
||||
@blur="getList"
|
||||
placeholder="请输入"
|
||||
placeholder="牌照|车辆类型|落板|排放|品牌|描述|底座|刹车|自营"
|
||||
v-model.trim="topSearch">
|
||||
<img slot="suffix" class="search" src="@/assets/secondHandCar/search.png"/>
|
||||
</el-input>
|
||||
@@ -99,6 +99,11 @@
|
||||
></i>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="customSel wantSourceSel" @click.stop="toggleWantSource">
|
||||
<img v-if="wantSource === 1" class="checkIcon" src="@/assets/secondHandCar/checked.png" />
|
||||
<img v-else class="checkIcon" src="@/assets/secondHandCar/uncheck.png" />
|
||||
<span :class="{'has-price': wantSource === 1}">想要的车源</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" v-show="!show">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||
@@ -223,6 +228,7 @@ export default {
|
||||
showDatePicker: false,
|
||||
areaShow:false,
|
||||
isClearing:false,
|
||||
wantSource: 0,
|
||||
minDate: new Date(1970, 0, 1), // 设置最小可选日期(1970年1月1日)
|
||||
maxDate: new Date(2099, 11, 31) // 设置最大可选日期(2099年12月31日)
|
||||
}
|
||||
@@ -267,6 +273,10 @@ export default {
|
||||
this.setSearchVal();
|
||||
this.getList()
|
||||
},
|
||||
wantSource(){
|
||||
this.setSearchVal();
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getSearchVal();
|
||||
@@ -281,6 +291,9 @@ export default {
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
toggleWantSource(){
|
||||
this.wantSource = this.wantSource === 1 ? 0 : 1;
|
||||
},
|
||||
confirmHandle(val){
|
||||
if(val[0].name.includes('市')){
|
||||
this.areaName=val[0].name
|
||||
@@ -356,6 +369,7 @@ export default {
|
||||
sessionStorage.setItem('dateVal',this.dateVal);
|
||||
sessionStorage.setItem('brandModel',this.brandModel);
|
||||
sessionStorage.setItem('underpanBrand',this.underpanBrand);
|
||||
sessionStorage.setItem('wantSource',String(this.wantSource));
|
||||
},
|
||||
getSearchVal(){
|
||||
this.activeTab = Number(sessionStorage.getItem('indexActiveTab')) || 0;
|
||||
@@ -371,6 +385,7 @@ export default {
|
||||
this.dateVal=sessionStorage.getItem('dateVal') || '';
|
||||
this.brandModel=sessionStorage.getItem('brandModel') || '';
|
||||
this.underpanBrand=sessionStorage.getItem('underpanBrand') || '';
|
||||
this.wantSource=Number(sessionStorage.getItem('wantSource')) || 0;
|
||||
},
|
||||
goMine(){//我的发布
|
||||
this.$router.push({ name: "mineRelease"})
|
||||
@@ -434,6 +449,7 @@ export default {
|
||||
endTime:this.endTime,
|
||||
brandModel:this.brandModel,
|
||||
underpanBrand:this.underpanBrand,
|
||||
wantSource:this.wantSource,
|
||||
})
|
||||
this.total=res.total
|
||||
if(this.pageNum == 1){// 第一页直接赋值
|
||||
@@ -526,6 +542,9 @@ export default {
|
||||
border-radius: 20px;
|
||||
border: 2px solid #264B94;
|
||||
}
|
||||
::v-deep .el-input__inner::placeholder{
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-input__suffix{
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
@@ -622,6 +641,22 @@ export default {
|
||||
.has-price{
|
||||
color: #007BE9 !important;
|
||||
}
|
||||
.wantSourceSel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
width: 68px;
|
||||
cursor: pointer;
|
||||
.checkIcon{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
span{
|
||||
font-size: 10px;
|
||||
color: #323233;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
width: 100%;
|
||||
|
||||
@@ -54,6 +54,11 @@
|
||||
<span
|
||||
class="content">{{ orderInfo.carClothingToolAmount }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="titleLeft">免拖:</span>
|
||||
<span
|
||||
class="content">{{ orderInfo.customerDistanceLimit }} {{orderInfo.hedgingMileage && orderInfo.hedgingMileage > 0 ? '(超限对冲,只结免拖)' : ''}}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="titleLeft">换电瓶费用:</span>
|
||||
<span
|
||||
@@ -72,35 +77,35 @@
|
||||
<div class="inpInfo">
|
||||
<div class="titleContent">
|
||||
<div class="flex-between" v-show="abState">
|
||||
<div> 到事发地距离:</div>
|
||||
<div><span style="color: red;">*</span> 到事发地距离:</div>
|
||||
<div class="halfOpcity"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="bcState">
|
||||
<div> 拖车里程:</div>
|
||||
<div><span style="color: red;">*</span> 拖车里程:</div>
|
||||
<div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="caState">
|
||||
<div>返程里程:</div>
|
||||
<div><span style="color: red;">*</span>返程里程:</div>
|
||||
<div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="bridgeAbState">
|
||||
<div>ab路桥费:</div>
|
||||
<div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>ab路桥费:</div>
|
||||
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountAb"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="bridgeBcState">
|
||||
<div>bc路桥费:</div>
|
||||
<div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>bc路桥费:</div>
|
||||
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountBc"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="bridgeCaState">
|
||||
<div>ca路桥费:</div>
|
||||
<div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>ca路桥费:</div>
|
||||
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountCa"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="waitAmountState">
|
||||
<div>等候费:</div>
|
||||
<div><span style="color: red;">*</span>等候费:</div>
|
||||
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierWaitAmount"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="tyreAmountState">
|
||||
<div>小轮个数:</div>
|
||||
<div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>小轮个数:</div>
|
||||
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.tyreNumber"/>个</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="tyreAmountState">
|
||||
@@ -108,11 +113,11 @@
|
||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" disabled type="number" v-model="form.supplierTyreAmount"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
|
||||
<div>困境费:</div>
|
||||
<div><span style="color: red;">*</span>困境费:</div>
|
||||
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierDilemmaAmount"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between" v-show="basementFeeState">
|
||||
<div>地库费:</div>
|
||||
<div><span v-show="isBasementSettle && !isUnsuccessfulSettle" style="color: red;">*</span>地库费:</div>
|
||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle || isUnsuccessfulSettle" />元</div>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
@@ -120,7 +125,7 @@
|
||||
<div class="halfOpcity inputContent"><input type="number" class="ipt" v-model="form.supplierCustomerAmount"/>元</div>
|
||||
</div>
|
||||
<div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } ">
|
||||
<div>基本费用:</div>
|
||||
<div><span v-show="!basePriceDisabled && !isBasementSettle" style="color: red;">*</span>基本费用:</div>
|
||||
<div class="halfOpcity inputContent "><input class="disable" type="number" :readonly="basePriceDisabled || isBasementSettle"
|
||||
v-model="form.supplierBasePrice"/><span>元</span></div>
|
||||
</div>
|
||||
@@ -493,13 +498,7 @@ export default {
|
||||
console.log("ii", i)
|
||||
},
|
||||
goback() {
|
||||
this.$router.push({
|
||||
name: "workOrderReconciliation",
|
||||
params: {
|
||||
activeIndex: this.index,
|
||||
queryTime: this.queryTime,
|
||||
}
|
||||
})
|
||||
this.$router.back()
|
||||
},
|
||||
async compute() {
|
||||
if(this.orderInfo.contractSettleTypeString == '车主现收'){
|
||||
@@ -657,6 +656,49 @@ export default {
|
||||
this.goback()
|
||||
},
|
||||
async save() {
|
||||
const isBlank = (v) => v === '' || v === null || v === undefined || parseFloat(v) < 0
|
||||
if (this.abState && isBlank(this.form.supplierSettleMileageAb)) {
|
||||
this.$toast('请填写到事发地距离'); return;
|
||||
}
|
||||
if (this.bcState && isBlank(this.form.supplierSettleMileageBc)) {
|
||||
this.$toast('请填写拖车里程'); return;
|
||||
}
|
||||
if (this.caState && isBlank(this.form.supplierSettleMileageCa)) {
|
||||
this.$toast('请填写返程里程'); return;
|
||||
}
|
||||
if (this.bridgeAbState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountAb)) {
|
||||
this.$toast('请填写ab路桥费'); return;
|
||||
}
|
||||
if (this.bridgeBcState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountBc)) {
|
||||
this.$toast('请填写bc路桥费'); return;
|
||||
}
|
||||
if (this.bridgeCaState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountCa)) {
|
||||
this.$toast('请填写ca路桥费'); return;
|
||||
}
|
||||
if (this.waitAmountState && isBlank(this.form.supplierWaitAmount)) {
|
||||
this.$toast('请填写等候费'); return;
|
||||
}
|
||||
if (!this.auditFormShow && this.tyreAmountState && !this.isUnsuccessfulSettle && isBlank(this.form.tyreNumber)) {
|
||||
this.$toast('请填写小轮个数'); return;
|
||||
}
|
||||
if (this.dilemmaAmountState && this.basePriceDisabled && isBlank(this.form.supplierDilemmaAmount)) {
|
||||
this.$toast('请填写困境费'); return;
|
||||
}
|
||||
if (this.basementFeeState && this.isBasementSettle && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBasementFee)) {
|
||||
this.$toast('请填写地库费'); return;
|
||||
}
|
||||
if (!this.basePriceDisabled && !this.isBasementSettle && isBlank(this.form.supplierBasePrice)) {
|
||||
this.$toast('请填写基本费用'); return;
|
||||
}
|
||||
if (
|
||||
this.orderInfo.customerDistanceLimit &&
|
||||
parseFloat(this.form.supplierSettleMileageBc) > parseFloat(this.orderInfo.customerDistanceLimit)
|
||||
) {
|
||||
if (!this.form.supplierCustomerAmount || parseFloat(this.form.supplierCustomerAmount) == 0) {
|
||||
this.$toast('拖车里程超出免拖范围,请填写收取客户金额');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.form.supplierOtherAmount > 0) {
|
||||
if (this.form.supplierOtherAmountRemark == '') {
|
||||
this.$toast('请填写其他费用说明');
|
||||
@@ -694,6 +736,7 @@ export default {
|
||||
await this.compute();
|
||||
const formData = new FormData();
|
||||
let obj = this.form;
|
||||
console.log('obj',obj)
|
||||
Object.keys(obj).forEach((key) => {
|
||||
formData.append(key, obj[key]);
|
||||
});
|
||||
@@ -725,6 +768,45 @@ export default {
|
||||
this.$toast('已进入后续流程,不允许操作');
|
||||
return;
|
||||
}
|
||||
const isBlank = (v) => v === '' || v === null || v === undefined || parseFloat(v) < 0
|
||||
if (this.abState && isBlank(this.form.supplierSettleMileageAb)) {
|
||||
this.$toast('请填写到事发地距离'); return;
|
||||
}
|
||||
if (this.bcState && isBlank(this.form.supplierSettleMileageBc)) {
|
||||
this.$toast('请填写拖车里程'); return;
|
||||
}
|
||||
if (this.caState && isBlank(this.form.supplierSettleMileageCa)) {
|
||||
this.$toast('请填写返程里程'); return;
|
||||
}
|
||||
if (this.bridgeAbState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountAb)) {
|
||||
this.$toast('请填写ab路桥费'); return;
|
||||
}
|
||||
if (this.bridgeBcState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountBc)) {
|
||||
this.$toast('请填写bc路桥费'); return;
|
||||
}
|
||||
if (this.bridgeCaState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountCa)) {
|
||||
this.$toast('请填写ca路桥费'); return;
|
||||
}
|
||||
if (this.waitAmountState && isBlank(this.form.supplierWaitAmount)) {
|
||||
this.$toast('请填写等候费'); return;
|
||||
}
|
||||
if (this.dilemmaAmountState && this.basePriceDisabled && isBlank(this.form.supplierDilemmaAmount)) {
|
||||
this.$toast('请填写困境费'); return;
|
||||
}
|
||||
if (this.basementFeeState && this.isBasementSettle && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBasementFee)) {
|
||||
this.$toast('请填写地库费'); return;
|
||||
}
|
||||
if (!this.basePriceDisabled && !this.isBasementSettle && isBlank(this.form.supplierBasePrice)) {
|
||||
this.$toast('请填写基本费用'); return;
|
||||
}
|
||||
if (
|
||||
this.orderInfo.customerDistanceLimit &&
|
||||
parseFloat(this.form.supplierSettleMileageBc) > parseFloat(this.orderInfo.customerDistanceLimit)
|
||||
) {
|
||||
if (!this.form.supplierCustomerAmount || parseFloat(this.form.supplierCustomerAmount) == 0) {
|
||||
this.$toast('拖车里程超出免拖范围,请填写收取客户金额'); return;
|
||||
}
|
||||
}
|
||||
this.loading1 = true;
|
||||
this.form.supplierExtraPrice = this.form.extraPrice || 0
|
||||
this.form.supplierBasePrice = this.form.basePrice || 0
|
||||
@@ -942,7 +1024,7 @@ img {
|
||||
}
|
||||
|
||||
.baseInfo {
|
||||
@include wh(100%, 344px);
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||