ebiz-h5/src/views/ebiz/YB_agentSign/step1.vue

<template>
  <div style="height: 100vh;background: #fff;">
    <div style="display: flex;align-items: center;justify-content: center;padding-top: 60px;">
      <img style="width: 40px;" src="@/assets/images/logo.png" />
      <span style="margin-left: 15px;">请您填写以下正确信息</span>
    </div>
    <div style="margin-top: 120px;">
      <van-cell-group>
        <van-field v-model="name" v-validate="'required|salename'" label="姓名" name="姓名"/>
        <van-field v-model="idNo" v-validate="'required|idNo'" label="身份证号" name="身份证号" maxlength="18"/>
      </van-cell-group>
    </div>
    <van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">确定</van-button>
    <van-dialog class="text-center" v-model="isCaptchaModalShow" title="请输入验证码">
      <div style="margin-top: 20px;margin-bottom: 20px;">
        <van-field v-model="mobile" label="手机号码" readonly/>
        <van-field v-model="code" type="number" v-validate="'required|onlyNumber'" maxlength="6" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="danger" :disabled="countDownNum !== 0" @click="getCaptcha">{{
              countDownNum === 0 ? '获取验证码' : countDownNum | countDownText
              }}</van-button>
          </template>
        </van-field>
      </div>
      <div class="bottom">
        <van-button type="danger" @click="onCaptchaConfirm" style="width:80%;margin-bottom: 20px;">确定</van-button>
      </div>
    </van-dialog>
    <van-dialog class="text-center nobutton" v-model="isNoButtonModalShow" title="提示">
      <div style="margin-top: 20px;margin-bottom: 70px;margin-top: 50px;">
        <span>系统不存在该人员或已离职！</span>
      </div>
    </van-dialog>
  </div>
</template>
<script>

import {Field, CellGroup} from "vant";
import { getContractInfo, putContractInfo, getAuthCode, checkSignYB } from '@/api/ebiz/YB_agentSign/YB_agentSign'

export default {
  name: 'YB_agentSign_step1',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
  },
  data() {
    return {
      name:'',
      idNo:'',
      isCaptchaModalShow:false,
      isNoButtonModalShow: false,
      mobile:'',
      oldmobile:'',
      code:'',
      countDownNum: 0,
      uuid: ''
    }
  },
  mounted() {

  },
  methods: {
    async nextStep(){
      let valid = await this.$validator.validate()
      if (true === valid) {
        let params = {
          idType: "0",
          idNo: this.idNo,
          name: this.name
        }
        getContractInfo(params).then(res => {
          if (res.result == 0) {
            if(res.content.uuid){
              this.isCaptchaModalShow = true
              this.uuid = res.content.uuid
              if(res.content.phone){
                this.oldmobile = res.content.phone
                this.mobile = this.dataMaskingMobile(this.oldmobile)
              }else{
                this.$toast('当前代理人没有手机号码信息')
              }
            }else{
              this.$toast(res.content.message)
            }
          } else {
            this.$toast(res.resultMessage)
            return false
          }
        })
        // this.isNoButtonModalShow = true
      } else {
        return this.$toast(this.$validator.errors.all()[0])
      }
    },
    async getCaptcha() {
      if(!this.oldmobile){
        this.$toast('当前代理人没有手机号码信息,不能获取验证码');
        return false
      }
      let data = {
        operateType: 'appntInfoEntry',
        type: 'H5',
        operateCode: this.oldmobile,
        system: 'agentApp',
        operateCodeType: '0'
      }
      // 获取验证码
      let res = await getAuthCode(data)
      if (res.result === '0') {
        this.$toast(res.resultMessage)
        this.sid = res.sessionId
        this.countDownNum = 60
        this.countDownTimer = setInterval(() => {
          this.countDownNum--
          if (this.countDownNum <= 0) {
            clearInterval(this.countDownTimer)
            this.countDownTimer = null
          }
        }, 1000)
      } else {
        this.$toast(res.resultMessage)
      }
    },
    async onCaptchaConfirm(){
      if (!this.sid) {
        return this.$toast('请先获取验证码')
      }
      if (!this.code.trim()) {
        return this.$toast('请输入验证码')
      }
      let res = await checkSignYB({
        smsId: this.sid,
        code: this.code
      })
      if (res.result === '0') {
        this.code = ''
        this.isCaptchaModalShow = false
        this.$store.commit('updateYBidNo', this.idNo)
        this.$store.commit('updateYBname', this.name)
        this.$store.commit('updateYBuuid', this.uuid)
        this.$router.push({ path: '/YB_agentSign/step2'})
      } else {
        this.$toast(res.resultMessage)
      }
    },
    dataMaskingMobile(mobile) {
      let str = ''
      if (mobile && mobile.trim().length == 11) {
        str = mobile.trim().replace(/^(\S{0})(\S*)(\S{4})$/, function(all, u1, u2, u3) {
          return u1 + new Array(u2.length + 1).join('*') + u3
        })
      }
      return str
    }
  },
  filters: {
    countDownText(val) {
      if (isNaN(parseFloat(val))) {
        return val
      } else {
        return `${val} s`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .van-cell{
    padding: 18px 15px;
  }
  /deep/.van-dialog__confirm{
    color: #fff!important;
    background: #e9332e;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 80%;
  }
  /deep/.van-field__label{
    margin-left: 15px;
  }
  .text-center{
    /deep/.van-field__label{
      margin-left: 15px;
      text-align: left;
    }
  }
  .nobutton{
    /deep/ .van-dialog__footer{
      display: none;
    }
  }
  /deep/ .van-dialog__footer{
    display: none;
  }
</style>