CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求

src/views/index/vehicleAdd.vue

@@ -17,42 +17,54 @@
       <img class="startImg" src="@/assets/start.png" />
       <span>行驶证首页</span>
     </div>
-    <van-uploader
-      v-model="vehicleLicenseFrontList"
-      :after-read="vehicleLicenseFrontHandler"
-      @delete="vehicleLicenseFrontDelete"
-      max-count="1"
-      :preview-size="54"
-      accept="image/*"
-    />
+    <div class="uploadSlotWrap">
+      <van-uploader
+        ref="licenseFrontUploader"
+        v-model="vehicleLicenseFrontList"
+        :after-read="vehicleLicenseFrontHandler"
+        @delete="vehicleLicenseFrontDelete"
+        max-count="1"
+        :preview-size="54"
+        accept="image/*"
+      />
+      <div class="slotClickMask" @click="onLicenseSlotClick('front')"></div>
+    </div>
   </div>
   <div class="itemContent">
     <div class="titleType">
       <img class="startImg" src="@/assets/start.png" />
       <span>行驶证副页</span>
     </div>
-    <van-uploader
-      v-model="vehicleLicenseBackList"
-      :after-read="vehicleLicenseBackHandler"
-      @delete="vehicleLicenseBackDelete"
-      max-count="1"
-      :preview-size="54"
-      accept="image/*"
-    />
+    <div class="uploadSlotWrap">
+      <van-uploader
+        ref="licenseBackUploader"
+        v-model="vehicleLicenseBackList"
+        :after-read="vehicleLicenseBackHandler"
+        @delete="vehicleLicenseBackDelete"
+        max-count="1"
+        :preview-size="54"
+        accept="image/*"
+      />
+      <div class="slotClickMask" @click="onLicenseSlotClick('back')"></div>
+    </div>
   </div>
   <div class="itemContent">
     <div class="titleType">
       <img class="startImg" src="@/assets/start.png" />
       <span>行驶证车辆照片页</span>
     </div>
-    <van-uploader
-      v-model="vehicleLicenseCarPhotoList"
-      :after-read="vehicleLicenseCarHandler"
-      @delete="vehicleLicenseCarPhotoDelete"
-      max-count="1"
-      :preview-size="54"
-      accept="image/*"
-    />
+    <div class="uploadSlotWrap">
+      <van-uploader
+        ref="licenseCarUploader"
+        v-model="vehicleLicenseCarPhotoList"
+        :after-read="vehicleLicenseCarHandler"
+        @delete="vehicleLicenseCarPhotoDelete"
+        max-count="1"
+        :preview-size="54"
+        accept="image/*"
+      />
+      <div class="slotClickMask" @click="onLicenseSlotClick('car')"></div>
+    </div>
   </div>
   <div class="itemContent">
     <div class="titleType">
@@ -442,6 +454,14 @@
     </div>
   </van-popup>
 
+  <camera-guide
+    :visible="cameraGuideVisible"
+    :type="cameraGuideType"
+    @confirm="onCameraConfirm"
+    @cancel="onCameraCancel"
+    @fallback="onCameraFallback"
+  />
+
 </div>
 </template>
 
@@ -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
   }
 }
 </script>
@@ -1605,6 +1667,23 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+/* 行驶证三槽位透明点击拦截层 */
+.uploadSlotWrap{
+  position: relative;
+  display: inline-block;
+  .slotClickMask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+  }
+  /* 已上传图片的删除按钮置于拦截层之上，保证可删除重传 */
+  ::v-deep .van-uploader__preview-delete{
+    z-index: 11;
+  }
+}
 .mySelect{
   @include fontWeightSize(bold,13px);
   color: #323643;