sso-ssr/components/mobile/realNameCertification/stepOne.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>实名认证{{valid.realName}}</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="真实姓名"
                  v-model="valid.realName"
                  :state="state.realName"
                  @blur.native.capture="validateRealName"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="身份证号"
                  v-model="valid.idCard"
                  :state="state.idCard"
                  @blur.native.capture="validateIdCard"
        ></mt-field>
      </div>
      <div class="page-part">
        <div>
        <!--<checkbox v-model="checked"></checkbox>-->
        <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
        </div>
        </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('await')">提 交</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-one',
    data () {
      return {
        state: {
          realName: 'error',
          idCard: 'error'
        },
        valid: {
          realName: '',
          idCard: ''
        }
      }
    },
    methods: {
      // 弹窗处理
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证姓名
      validateRealName () {
        if (!this.valid.realName) {
          this.downToast('请先填写您的姓名')
          this.state.realName = 'error'
        } else {
          if (this.valid.realName.length > 20) {
            this.downToast('输入长度过长，限定20个字符以内')
            this.state.realName = 'warning'
          } else {
            this.state.realName = 'success'
          }
        }
      },
      // 验证身份证
      validateIdCard () {
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (!this.valid.idCard) {
          this.downToast('请填写您的身份证号')
          this.state.idCard = 'error'
        } else {
          if (!reg.test(this.valid.idCard)) {
            this.downToast('您的身份证有误，请检查')
            this.state.idCard = 'warning'
          } else {
            this.$http.get(`/api/user/idCard/valid`, {params: {idCard: this.valid.idCard}})
              .then(response => {
                if (!response.data.content.isValid) {
                  this.state.idCard = 'success'
                } else {
                  this.state.idCard = 'warning'
                  this.downToast('身份已被认证，请确认。')
                }
              }).catch((err) => {
                this.$indicator.close()
                this.downToast(err.errMsg)
              })
          }
        }
      },
      sureAccount (type) {
        if (this.state.realName !== 'success' ||
          this.state.idCard !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          param.append('realName', this.valid.realName)
          param.append('idCard', this.valid.idCard)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/valid/user/identity/submit', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      }
    }
  }
</script>