sso-ssr/components/mobile/validation/ValidationEmailStepEmail.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>验证邮箱</p>
      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
    </div>
    <div class="f-form">
      <div class="page-part">
        <span>使用电子邮箱 <strong>{{info | hide}}</strong> 进行验证，有效期7天</span>
      </div>
      <div class="page-part">
        <mt-button :disabled="hasSend" size="large"
                   type="primary"
                   @click="sureAccount()"
                   v-text="secretEmail">发送验证请求</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-email',
    props: ['info'],
    data () {
      return {
        secretEmail: '发送验证请求',
        hasSend: false
      }
    },
    filters: {
      hide: function (value) {
        let getEmailIndex = value.indexOf('@')
        if (getEmailIndex > 3) {
          let len = value.substring(3, getEmailIndex)
          value = value.replace(len, '***')
        }
        return value
      }
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      // 警告弹窗
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 发送邮件
      sureAccount () {
        this.$indicator.open('发送过程中...')
        this.$http.get(`/update/user/check/email`, {params: {email: this.info, operate: 'email'}})
          .then(response => {
            this.$indicator.close()
            if (response.data.success) {
              this.hasSend = true
              this.secretEmail = '已发送验证邮件，请查收'
            } else {
              this.hasSend = false
              this.downToast(response.data.errMsg)
            }
          }).catch(() => {
            this.$indicator.close()
            this.downToast('请检查网络是否正常或联系服务商')
          })
      }
    }
  }
</script>