From 74ff93863e3cd8c488a04315e6692ea868a3ba43 Mon Sep 17 00:00:00 2001 From: zhoulinf <2507241354@qq.com> Date: Tue, 4 Aug 2026 16:12:41 +0800 Subject: [PATCH] =?UTF-8?q?CRM=5F26-08-05#story#9126,=E8=BD=A6=E8=BE=86?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=81=E6=9C=8D=E5=8A=A1=E5=95=86=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=B3=BB=E7=BB=9F=E9=9C=80=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CameraGuide.vue | 646 +++++++++++++++++++++++++++++++++ src/components/StepBar.vue | 136 +++++++ src/views/index/vehicleAdd.vue | 129 +++++-- 3 files changed, 886 insertions(+), 25 deletions(-) create mode 100644 src/components/CameraGuide.vue create mode 100644 src/components/StepBar.vue diff --git a/src/components/CameraGuide.vue b/src/components/CameraGuide.vue new file mode 100644 index 00000000..f950d6e5 --- /dev/null +++ b/src/components/CameraGuide.vue @@ -0,0 +1,646 @@ + + + + + diff --git a/src/components/StepBar.vue b/src/components/StepBar.vue new file mode 100644 index 00000000..819e3bea --- /dev/null +++ b/src/components/StepBar.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/src/views/index/vehicleAdd.vue b/src/views/index/vehicleAdd.vue index 8b8347a0..1401a3c7 100644 --- a/src/views/index/vehicleAdd.vue +++ b/src/views/index/vehicleAdd.vue @@ -17,42 +17,54 @@ 行驶证首页 - +
+ +
+
行驶证副页
- +
+ +
+
行驶证车辆照片页
- +
+ +
+
@@ -442,6 +454,14 @@
+ +
@@ -454,6 +474,7 @@ import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage userOperationPermissions,saveSupplierApproval} from "@/api/mine" import TwoCommonBtn from "@/components/twoBtnCommon.vue" import CellGroup from "@/components/cellGroup.vue"; +import CameraGuide from "@/components/CameraGuide.vue"; export default { name: "vehicleAdd", mixins:[myMixins], @@ -489,6 +510,8 @@ export default { oldSupplierServiceList:[], show:false, imageUrl: require('@/assets/arr_right.png'), + cameraGuideVisible: false, // 拍摄引导弹层显示 + cameraGuideType: 'front', // 当前拍摄槽位 front/back/car vehicleLicenseFrontList: [], vehicleLicenseBackList: [], vehicleLicenseCarPhotoList: [], @@ -920,6 +943,44 @@ export default { console.log(`压缩后为：${mb1}M`) return compressedFile; }, + isCameraSupported() { // 是否支持 getUserMedia（不支持则降级系统选择器） + return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) + }, + onLicenseSlotClick(type) { // 行驶证三槽位点击拦截：支持相机进引导页，不支持降级原系统选择器 + if (this.isCameraSupported()) { + this.cameraGuideType = type + this.cameraGuideVisible = true + } else { + this.triggerNativeUpload(type) + } + }, + triggerNativeUpload(type) { // 主动触发对应 uploader 的原生文件选择 + const refMap = { front: 'licenseFrontUploader', back: 'licenseBackUploader', car: 'licenseCarUploader' } + this.$nextTick(() => { + const uploader = this.$refs[refMap[type]] + const input = uploader && uploader.$el && uploader.$el.querySelector('.van-uploader__input') + if (input) input.click() + }) + }, + onCameraConfirm({ blob, dataURL }) { // 拍摄确认：构造 {file, content} 走现有压缩→上传→OCR 链路 + this.cameraGuideVisible = false + const type = this.cameraGuideType + const file = new File([blob], `vehicle_license_${type}_${Date.now()}.jpg`, { type: 'image/jpeg' }) + const handlerMap = { + front: 'vehicleLicenseFrontHandler', + back: 'vehicleLicenseBackHandler', + car: 'vehicleLicenseCarHandler' + } + this[handlerMap[type]]({ file, content: dataURL }) + }, + onCameraCancel() { // 返回放弃 + this.cameraGuideVisible = false + }, + onCameraFallback() { // 权限拒绝/相机不可用：降级为系统选择器 + this.cameraGuideVisible = false + this.$toast('请允许使用相机权限') + this.triggerNativeUpload(this.cameraGuideType) + }, async vehicleLicenseFrontHandler(file) { // 上传 行驶证首页 console.log('file',file) try { @@ -1591,7 +1652,8 @@ export default { }, components:{ CellGroup, - TwoCommonBtn + TwoCommonBtn, + CameraGuide } } @@ -1605,6 +1667,23 @@ export default {