story#7189,回程车小程序司机端-迁移认证页面

src/views/rvDriverAuthentication/carInfoAudit.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="content">
+    <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>
+    <tip-bar :title="'应国家政策要求：从事货运行业的司机用户，身份证照片、驾驶证信息、行驶证信息、人车合影及承运资质信息必须进行实名认证。'"></tip-bar>
+    <div class="titleWrap">
+      <div class="natureWrap">
+        <span class="title"><span class="star">*</span>业务性质</span>
+        <radio-group @change="radioChange"  class="flexWrap">
+          <label class="flexWrap labelWrap1" v-for="(item, index) in options" :key="item.value">
+            <div class="flexWrap center"><radio :value="item.value" :checked="(index+1) === Number(form.businessNature)" />{{item.name}}</div>
+          </label>
+        </radio-group>
+      </div>
+      <div class="natureWrap regionWrap" v-if="form.businessNature == 2">
+        <span class="title"><span class="star">*</span>所在地区</span>
+        <picker class="pickerWrap" mode="region" @change="bindRegionChange"  :value="region">
+          <div class="picker">{{regionspan}}</div>
+        </picker>
+      </div>
+    </div>
+    <photo-item title="上传行驶证" :left-url="form.vehicleLicenseFront || driveFront" :right-url="form.vehicleLicenseBack || driveBack" v-if="type != 'simple'"
+                :show="show" @leftImg="vehicleFrontHandler" @rightImg="vehicleBackHandler"></photo-item>
+    <photo-item title="上传车辆照片" :left-url="form.vehicleFrontPhoto || carHead" :right-url="form.peopleVehiclePhoto || personCar" v-if="type != 'simple'"
+                :show="show" @leftImg="carPhotoHandler" @rightImg="personPhotoHandler"></photo-item>
+    <photo-item title="是否有救援责任险/货物运输险" :url-list="form.carrierLiabilityInsurancePhoto" :in-sure="form.hasInsurancePhoto"
+                :show="show" @urlList="carrierHandler" @insureHandle="insureHandle"></photo-item>
+    <div class="titleWrap">
+      <div class="natureWrap">
+        <span class="title"><span class="star">*</span>随车小轮个数</span>
+        <radio-group @change="wheelChange"  class="flexWrap">
+          <label class="flexWrap labelWrap2" v-for="(item, index) in tyreOptions" :key="item.value">
+            <div class="flexWrap center"><radio :value="item.value" :checked="(index*2) === Number(form.wheelNum)" />{{item.name}}</div>
+          </label>
+        </radio-group>
+      </div>
+    </div>
+    <div class="carInfo" v-if="type != 'simple'">
+      <div class="left_wrap title">
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>车牌号</span>
+          </div>
+          <span class="phone">{{form.licensePlateNumber}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>车架号</span>
+          </div>
+          <span class="phone">{{form.vinCode}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>车型</span>
+          </div>
+          <span class="phone">{{form.vehicleType}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>品牌车型</span>
+          </div>
+          <span class="phone">{{form.vehicleLicenseModel}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>行驶证人</span>
+          </div>
+          <span class="phone">{{form.vehicleLicenseOwner}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span>检验记录</span>
+          </div>
+          <span class="phone">{{form.inspectionRecord}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>总质量</span>
+          </div>
+          <span class="phone">{{form.totalWeight}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>整备质量</span>
+          </div>
+          <span class="phone">{{form.curbWeight}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>外廓尺寸</span>
+          </div>
+          <span class="phone">{{form.overallDimension}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star"></span>
+            <span>档案编号</span>
+          </div>
+          <span class="phone">{{form.vehicleLicenseRecordNumber}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star"></span>
+            <span>行驶证备注</span>
+          </div>
+          <span class="phone">{{form.vehicleLicenseRemarks}}</span>
+        </div>
+        <div class="form_item">
+          <div>
+            <span class="star">*</span>
+            <span>车头照片中的车牌号码</span>
+          </div>
+          <span class="phone">{{form.carNumber}}</span>
+        </div>
+      </div>
+    </div>
+    <fixed-button @myClick="clickHandler" v-if="showFun()" :noBg="true"></fixed-button>
+<!--    <protocol-dialog></protocol-dialog>-->
+  </div>
+</template>
+
+<script>
+  // import protocolDialog from "./component/protocolDialog";
+  import fixedButton from "./component/fixedButton";
+  import photoItem from "./component/photoItem";
+  import tipBar from "./component/tipBar";
+  import { ocrRecognize, driverInfoVerify, driverInfoVerifyDetail } from '@/api/authentication.js'
+  import { leftCopy } from '@/utils/common.js'
+  import { myMixins } from '@/utils/myMixins.js'
+  export default {
+    name: "carInfoAudit",
+    components: {
+      tipBar,
+      photoItem,
+      fixedButton,
+      // protocolDialog
+    },
+    mixins: [myMixins],
+    data() {
+      return {
+        region: [],
+        driveFront: require('@/assets/authentication/carInfo_icon1.png'),
+        driveBack: require('@/assets/authentication/carInfo_icon2.png'),
+        carHead:require('@/assets/authentication/carInfo_icon3.png'),
+        personCar:require('@/assets/authentication/carInfo_icon4.png'),
+        liabilityInsurance:require('@/assets/authentication/carInfo_icon5.png'),
+        form: {
+          vehicleLicenseFront: '',   // 行驶证主页照片
+          vehicleLicenseBack: '',    // 行驶证副页照片
+          vehicleLicenseAddress: '', // 行驶证地址
+					engineNumber: '',          // 行驶证发动机号
+          licensePlateNumber: '',    // 车牌号
+          vinCode: '',               // 车架号
+          vehicleType: '',           // 车型
+          vehicleLicenseModel: '',   // 行驶证车辆品牌车型
+          vehicleLicenseOwner: '',   // 行驶证所有人
+          inspectionRecord: '',      // 检验记录
+          totalWeight: '',           // 总质量
+          curbWeight: '',            // 整备质量
+          overallDimension: '',      // 外廓尺寸
+          vehicleLicenseRecordNumber: '',          // 行驶证档案编号
+          vehicleLicenseRemarks: '',               // 行驶证备注
+          vehicleFrontPhoto: '',     // 车头照片
+          carNumber: '',             // 车头照片中的车牌号码
+          peopleVehiclePhoto: '',    // 人车合影照片
+          carrierLiabilityInsurancePhoto: [],   // 承运人责任险照片,如多张用英文逗号分开
+          businessNature:'',
+          areaCode:'',
+          hasInsurancePhoto:'',
+          wheelNum:-1,
+          region:[],
+        },
+        show: undefined,
+        type: localStorage.getItem('type'),
+        options:[{value:1,name:'全国跑圈业务'},{value:2,name:'固定区域救援业务'}],
+        tyreOptions:[{value:0,name:'0'},{value:2,name:'2'},{value:4,name:'4'}]
+      }
+    },
+    async onLoad(options) {
+      if(options?.show) {
+        this.show = options.show
+      }
+      if( this.show ) {
+        await this.getDetail()
+      }
+    },
+    async onShow() {
+
+    },
+    methods: {
+      bindRegionChange(e){
+        this.region=e?.detail?.value
+        let code=e?.detail?.code
+        this.form.areaCode=code[code.length - 1]
+      },
+      radioChange(val){
+        this.form.businessNature=val?.detail?.value
+        if(this.form.businessNature==1){
+          this.region=[]
+          this.form.areaCode=''
+        }
+      },
+      wheelChange(val){
+        this.form.wheelNum=val?.detail?.value
+      },
+      async getDetail() {   // 认证详情
+        let res = await driverInfoVerifyDetail( {
+          verifyType: 3
+        })
+        leftCopy(this.form, {...res?.data?.vehicleInfoData})
+        this.form.carrierLiabilityInsurancePhoto=this.form.carrierLiabilityInsurancePhoto ? res?.data?.vehicleInfoData?.carrierLiabilityInsurancePhoto?.split(',') : []
+        if(this.form.businessNature==2){
+          this.region=res?.data?.vehicleInfoData?.region
+          if(this.region[0].includes('市')){
+            this.region?.unshift(this.region[0])
+            // console.log('第一个包含市')
+          }
+        }else {
+          this.region=[]
+        }
+        // this.form.hasInsurancePhoto=1
+        // this.form.carrierLiabilityInsurancePhoto=['http://file.sino-assist.com/group1/M00/07/78/wKgBzGij5QSAFO1hAAEBNU8G9Ww026.jpg?date=2025-08-19','http://file.sino-assist.com/group1/M00/07/78/wKgBzGij5QqADCNWAAZMtM4Se54125.png?date=2025-08-19']
+      },
+      async clickHandler() {
+        if( this.type != 'simple' ) {
+          if(!this.form.businessNature){
+            this.$toast('请选择业务性质')
+            return
+          }
+          if(this.form.businessNature==2 && !this.form.areaCode){
+            this.$toast('请选择所在地区')
+            return
+          }
+          if(!this.form.vehicleLicenseFront) {
+            this.$toast('行驶证主页未上传')
+            return
+          }
+          if(!this.form.licensePlateNumber || !this.form.vehicleType ) {
+            this.$toast('行驶证主页信息识别错误')
+            return
+          }
+          if(!this.form.vehicleLicenseBack) {
+            this.$toast('行驶证副页未上传')
+            return
+          }
+          if(!this.form.totalWeight) {
+            this.$toast('行驶证副页信息识别错误')
+            return
+          }
+          if(!this.form.carNumber) {
+            this.$toast('车辆信息识别错误')
+            return
+          }
+          if( !this.form.peopleVehiclePhoto ) {
+            this.$toast('人车合影未上传')
+            return
+          }
+          if(this.form.hasInsurancePhoto == -1){
+            this.$toast('请选择是否有救援责任险')
+            return
+          }
+          if(this.form.hasInsurancePhoto==1 && this.form.carrierLiabilityInsurancePhoto?.length<=0){
+            this.$toast('救援责任险/货物运输险未上传')
+            return
+          }
+          if(this.form.wheelNum==-1){
+            this.$toast('请选择随车小轮个数')
+            return
+          }
+        }
+        await driverInfoVerify( {
+          verifyType: 3,
+          type: this.type || 'full',
+          ...this.form,
+          carrierLiabilityInsurancePhoto:this.form.carrierLiabilityInsurancePhoto?.length>0 ? this.form.carrierLiabilityInsurancePhoto?.join(',') : ''
+        })
+        this.$toast('操作成功')
+        await this.getRegisterInfo({
+          verifyType: 3
+        })
+        setTimeout(() => {
+          this.h5GoBack()
+        }, 100)
+      },
+      carrierHandler(data) {    // 承运人责任险照片
+        this.form.carrierLiabilityInsurancePhoto = data
+      },
+      insureHandle(val){
+        this.form.hasInsurancePhoto=val
+      },
+      vehicleFrontInit() {
+        this.form.licensePlateNumber = ''
+        this.form.vinCode = ''
+        this.form.vehicleType = ''
+        this.form.vehicleLicenseModel = ''
+        this.form.vehicleLicenseOwner = ''
+      },
+      async vehicleFrontHandler(data) {   // 行驶证正面照，及ocr识别
+        await this.vehicleFrontInit()
+        this.form.vehicleLicenseFront = data
+        let vehicleInfo = await this.orcHandler(this.form.vehicleLicenseFront, 3)
+        let tempInfo = vehicleInfo?.data?.data?.face?.data
+        this.form.licensePlateNumber = tempInfo.licensePlateNumber
+        this.form.vinCode = tempInfo.vinCode
+        this.form.vehicleType = tempInfo.vehicleType
+        this.form.vehicleLicenseModel = tempInfo.model
+        this.form.vehicleLicenseOwner = tempInfo.owner
+        this.form.vehicleLicenseAddress = tempInfo.address
+				this.form.engineNumber = tempInfo.engineNumber
+      },
+      vehicleBackInit() {
+        this.form.inspectionRecord = ''
+        this.form.totalWeight = ''
+        this.form.curbWeight = ''
+        this.form.overallDimension = ''
+        this.form.vehicleLicenseRecordNumber = ''
+        this.form.vehicleLicenseRemarks = ''
+      },
+      async vehicleBackHandler(data) {
+        await this.vehicleBackInit()
+        this.form.vehicleLicenseBack = data
+        let vehicleInfo = await this.orcHandler(this.form.vehicleLicenseBack, 3)
+        let tempInfo = vehicleInfo?.data?.data?.back?.data
+        this.form.inspectionRecord = tempInfo.inspectionRecord
+        this.form.totalWeight = tempInfo.totalWeight
+        this.form.curbWeight = tempInfo.curbWeight
+        this.form.overallDimension = tempInfo.overallDimension
+        this.form.vehicleLicenseRecordNumber = tempInfo.recordNumber
+        this.form.vehicleLicenseRemarks = tempInfo.remarks
+      },
+      async carPhotoHandler(data) {   // 车头照
+        this.form.carNumber = ''
+        this.form.vehicleFrontPhoto = data
+        let carInfo = await this.orcHandler(this.form.vehicleFrontPhoto, 6)
+        this.form.carNumber = carInfo?.data
+      },
+      personPhotoHandler(data){     // 人车合影
+        this.form.peopleVehiclePhoto = data
+      },
+      async orcHandler(url, type) {     // ocr 识别
+        let res = await ocrRecognize( {
+          ocrType: type,
+          imageUrl: url
+        });
+        return res;
+      },
+    },
+    computed: {
+      regionText() {
+        return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
+      }
+    },
+  }
+</script>
+
+<style lang="scss">
+  @import "@/styles/common.scss";
+  @import "@/styles/infoShow.scss";
+  page {
+    background: #F4F5F7;
+  }
+  .navBar{
+    margin-bottom: 46px;
+  }
+  .content {
+    /*padding-bottom: 86px;*/
+  }
+  .carInfo .title {
+    width: 100% !important;
+  }
+  .form_item {
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .carInfo {
+    padding-bottom: 86px;
+  }
+  .star{
+    color: red;
+    margin-right: 3px;
+  }
+  .titleWrap{
+    margin-bottom: 10px;
+    background-color: #FFFFFF;
+    padding: 15px 12px 15px 17px;
+    .natureWrap{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 13px !important;
+    }
+    .regionWrap{
+      margin-top: 8px;
+    }
+    .flexWrap{
+      display:flex;
+    }
+    .labelWrap1{
+      margin-left: 10px;
+    }
+    .labelWrap2{
+      margin-left: 15px;
+    }
+    radio{
+      width: 24px;
+      transform: scale(0.7);
+      transform-origin: center; /* 保持中心点不变 */
+    }
+    .center{
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>