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 size="large" type="primary" @click="sureAccount('select')">发送验证请求</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-email',
    data () {
      return {
        state: {
          mobile: 'error',
          captcha: 'error'
        },
        valid: {
          mobile: '',
          captcha: ''
        },
        imgSrc: ''
      }
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      sureAccount (type) {
        if (this.state.mobile !== 'success' && this.state.captcha !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          param.append('mobile', this.valid.mobile)
          param.append('captcha', this.valid.captcha)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post(`/sso/resetPwd/checkCaptcha`, param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
              } else {
                this.getCode()
                this.downToast(response.data.errMsg)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      },
      getCode () {
        this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
      }
    }
  }
</script>