sso-ssr/components/mobile/reset/stepEmail.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>183****08@qq.com</strong> 进行验证，有效期7天</span>
      </div>
      <div class="page-part">
        <mt-button :disabled="hasSend" size="large"
                   type="primary"
                   @click="sureAccount('select')"
                   v-text="secretEmail">发送验证请求</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-email',
    data () {
      return {
        secretEmail: '发送验证请求',
        hasSend: false
      }
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      // 警告弹窗
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 发送邮件
      sureAccount (type) {
        this.$indicator.open('发送过程中...')
        this.$http.get(`/sso/resetPwd/check/email`)
          .then(response => {
            this.$indicator.close()
            if (response.data.success) {
              this.$emit('stepEvent', type)
              this.hasSend = true
              this.secretEmail = '已发送验证邮件，请查收'
            } else {
              this.hasSend = false
              this.downToast(response.data.errMsg)
            }
          }).catch(() => {
            this.$indicator.close()
            this.downToast('请检查网络是否正常或联系服务商')
          })
      }
    }
  }
</script>