supplier-dispatch-h5/src/views/rvDriverAuthentication/auditList.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>
    <img class="icon_register" mode="widthFix" src="@/assets/authentication/icon_register.png" />
    <tip-bar :title="'应国家政策要求：从事货运行业的司机用户，身份证照片、驾驶证信息、行驶证信息、人车合影及承运资质信息必须进行实名认证。'"></tip-bar>
    <div class="audit_list">
      <audit-item title="个人信息" tip="上传本人头像和身份证"
                  :url="currentFlag(1) ? personActiveUrl : personUrl"
                  :pass="currentFlag(1)" :current-class="currentStep == 1"
                  @detail="showDetail('personAudit')" @upload="showDetail('personAudit')"></audit-item>
      <audit-item title="驾照信息" tip="上传驾驶证" :url="currentFlag(2) ? driverActiveUrl : driverUrl" v-if="type != 'simple'" :pass="currentFlag(2)" :current-class="currentStep == 2"
                  @detail="showDetail('carAudit')" @upload="showDetail('carAudit')"></audit-item>
      <audit-item title="车辆信息" tip="上传行驶证与车辆照片" :url="currentFlag(3) ? carActiveUrl : carUrl" :pass="currentFlag(3)" :current-class="currentStep == 3"
                  @detail="showDetail('carInfoAudit')" @upload="showDetail('carInfoAudit')"></audit-item>
      <audit-item title="银行卡信息" tip="上传本人银行卡信息" :url="currentFlag(4) ? bankActiveUrl :bankUrl" :pass="currentFlag(4)" :current-class="currentStep == 4"
                  @detail="showDetail('bankInfo')" @upload="showDetail('bankInfo')"></audit-item>
      <audit-item title="审核信息" :tip="auditTip" :status="statusStr" :url="currentFlag(5) ? bankActiveUrl :bankUrl" :pass="currentFlag(5)" :current-class="currentStep == 5" :button-hide="false"
                  ></audit-item>
    </div>
    <fixed-button v-if="verifyStatus == 11" @myClick="showDetail('personAudit')" title="重新认证"></fixed-button>
    <success-dialog ref="successDialog"></success-dialog>s
  </div>
</template>

<script>
  import successDialog from "./component/successDialog.vue";
  import auditItem from "./component/auditItem";
  import tipBar from "./component/tipBar";
  import { verifyStatus, verifyStatusSimple ,tipString} from '@/utils/common';
  import { myMixins } from '@/utils/myMixins.js';
  import fixedButton from "./component/fixedButton";
  import {infoVerifyProgress} from "@/api/authentication"
  export default {
    name:"auditList",
    data() {
      return {
        personUrl: require('@/assets/authentication/audit_icon4_gray.png'),
        personActiveUrl: require('@/assets/authentication/audit_icon4.png'),
        driverUrl: require('@/assets/authentication/audit_icon1_gray.png'),
        driverActiveUrl: require('@/assets/authentication/aduit_icon1.png'),
        carUrl: require('@/assets/authentication/audit_icon2_gray.png'),
        carActiveUrl: require('@/assets/authentication/audit_icon2.png'),
        bankUrl: require('@/assets/authentication/audit_icon3_gray.png'),
        bankActiveUrl: require('@/assets/authentication/audit_icon3.png'),
        currentStep: undefined,
        auditTip: '',
        statusStr: '',
        verifyStatus: '',
        type: 'full',
      }
    },
    mixins: [ myMixins ],
    components: {
      tipBar,
      auditItem,
      fixedButton,
      successDialog
    },
    // onLoad() {
    // },
    // async onPullDownRefresh() {
    //   await this.refresh()
    //   uni.stopPullDownRefresh()
    // },
    async mounted() {
      // await this.$onLaunched;
      // 禁止双击放大
      let lastTouchEnd = 0;
      document.addEventListener('touchend', (event) => {
        const now = Date.now();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault(); // 阻止双击放大
        }
        lastTouchEnd = now;
      }, { passive: false });

      await this.refresh()
    },
    methods: {
      async getRegisterInfo(data) {
        let res = await infoVerifyProgress( data)
        // console.log("res",res)
       localStorage.setItem('infoVerify', res?.data?.infoVerify?.code)
       localStorage.setItem('failReason', res?.data?.verifyRemark)
       localStorage.setItem('authIsSuccess', res?.data?.authIsSuccess)
       localStorage.setItem('name', res?.data?.name)
      },
      async refresh() {
        await this.getRegisterInfo()
        await this.getVerifyStatus()
        let obj = await tipString(localStorage.getItem('infoVerify'))
        this.verifyStatus = localStorage.getItem('infoVerify')
        if( this.verifyStatus == 11 ) {
          this.auditTip = localStorage.getItem('failReason')
          localStorage.setItem('authIsSuccess', 0)
        } else {
          this.auditTip = obj.tip
        }
        if( this.verifyStatus == 12 && parseInt(localStorage.getItem('authIsSuccess')) != 1) {   // 审核通过
          this.$refs.successDialog.openHandler()
        }
        this.statusStr = obj.button
      },
      currentFlag(status) {
        return this.currentStep > status
      },
      showDetail(path) {
        this.goPage(path,{
          token:localStorage.getItem('token')
        })
      },
      getVerifyStatus() {
        if( this.type == 'simple' ) {
          this.currentStep = verifyStatusSimple(localStorage.getItem('infoVerify'))
        } else {
          this.currentStep = verifyStatus(localStorage.getItem('infoVerify'))
        }
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/common.scss";
  .navBar{
    margin-bottom: 46px;
  }
  .content {
    font-size: 0;
    padding-bottom: 80px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 启用iOS惯性滚动 */
    scroll-behavior: smooth; /* 平滑滚动（部分浏览器支持） */
  }
  .audit_list {
    padding: 20px 30px;
    .audit_item:after{
      left: 18px;
      position: absolute;
      content: '';
      display: block;
      width: 2px;
      top: 56px;
      height: 48px;
      background: rgba($color: #B2C2E4, $alpha: 0.59);
    }
    .audit_item:last-child {
      &::after{
        display: none !important;
      }
    }
  }
</style>