supplier-dispatch-h5/src/views/rvDriverAuthentication/carAudit.vue

<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>
    <photo-item title="上传驾驶证" :left-url="form.drivingLicenceFront || carFront" :right-url="form.drivingLicenceContrary || carBack"
                :show="show" @leftImg="carFrontHandler" @rightImg="carBackHandler"></photo-item>
    <div class="carInfo">
      <div class="left_wrap title">
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>姓名</span>
          </div>
          <span class="phone">{{form.name}}</span>
        </div>
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>身份证号</span>
          </div>
          <input class="phone" type="text" placeholder="请输入持卡人身份证号" v-model="form.licenseNumber">
        </div>
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>准驾类型</span>
          </div>
          <span class="phone">{{form.approvedType}}</span>
        </div>
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>初次领证日期</span>
          </div>
          <span class="phone">{{form.initialIssueDate}}</span>
        </div>
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>有效期限</span>
          </div>
          <span class="phone">{{form.validPeriod}}</span>
        </div>
        <div class="form_item">
          <div>
            <span class="star">*</span>
            <span>档案编号</span>
          </div>
          <span class="phone">{{form.recordNumber}}</span>
        </div>
      </div>
    </div>
    <fixed-button  @myClick="clickHandler" v-if="showFun()"></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: "carAudit",
    components: {
      tipBar,
      photoItem,
      fixedButton,
      // protocolDialog
    },
    mixins: [ myMixins ],
    data() {
      return {
        carFront: require('@/assets/authentication/car_icon1.png'),
        carBack: require('@/assets/authentication/car_icon2.png'),
        form: {
          name: '',
          drivingLicenceFront: '',
          drivingLicenceContrary: '',
          licenseNumber: '',
          approvedType: '',   // 准驾车型
          initialIssueDate: '',     // 初次领证日期
          validPeriod: '',          // 有效期
          recordNumber: '',    // 档案编号
        },
        show: undefined,
        type: localStorage.getItem('type'),
      }
    },
    async mounted() {
      // if(options?.show) {
        this.show = true
      // }
      if( this.show ) {
        await this.getDetail()
      }
    },
    async onShow() {
    },
    methods: {
      backInit() {
        this.form.recordNumber = ''
      },
      frontInit() {
        this.form.licenseNumber = ''
        this.form.approvedType = ''
        this.form.initialIssueDate = ''
        this.form.validPeriod = ''
      },
      async carFrontHandler(data) {
        await this.frontInit();
        this.form.drivingLicenceFront = data
        await this.idOrcHandler(this.form.drivingLicenceFront)
      },
      async carBackHandler(data) {
        await this.backInit();
        this.form.drivingLicenceContrary = data
        await this.idOrcHandler(this.form.drivingLicenceContrary, 'back')
      },
      async idOrcHandler(url, type = 'front') {     // ocr 识别
        let res = await ocrRecognize({
          ocrType: 2,
          imageUrl: url
        });
        let carInfo
        if(type == 'back') {
          carInfo = res?.data?.data?.back?.data
          this.form.recordNumber = carInfo?.recordNumber || ''
        } else {
          carInfo = res?.data?.data?.face?.data
          leftCopy(this.form, {...carInfo})
        }

      },
      async getDetail() {   // 认证详情
        let res = await driverInfoVerifyDetail( {
          verifyType: 2
        })
        leftCopy(this.form, {...res?.data?.drivingLicenseInfoData})
        console.log('carAudit', res)
      },
      async clickHandler() {  // 点击去认证
        if( !this.form.drivingLicenceFront ) {
          this.$toast('驾驶证正面照片未上传')
          return
        }
        if( !this.form.drivingLicenceContrary ) {
          this.$toast('驾驶证反面照片未上传')
          return
        }
        if(!this.form.licenseNumber || !this.form.initialIssueDate || !this.form.validPeriod) {
          this.$toast('驾驶证正面识别错误，请重新上传')
          return
        }
        if(!this.form.recordNumber) {
          this.$toast('驾驶证反面识别错误，请重新上传')
          return
        }
        await driverInfoVerify({
          verifyType: 2,
          type: this.type || 'full',
          ...this.form,
        })
        this.$toast('操作成功')
        await this.getRegisterInfo({
          verifyType: 2
        })
        setTimeout(() => {
          this.h5GoBack()
        }, 100)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/common.scss";
  @import "@/styles/infoShow.scss";
  page {
    background: #F4F5F7;
  }
  .content{
    height: 100%;
    overflow-y: auto;
  }
  .navBar{
    margin-bottom: 46px;
  }
  .carInfo .title {
    width: 100% !important;
  }
  .form_item {
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .phone  {
    flex: 1;
    text-align: right;
  }
</style>