sso-ssr/components/mobile/reset/stepMobile.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 v-text="mobileText">183*****08</strong>接收验证码</span>
      </div>
      <div class="page-part">
        <mt-field auto-complete="off"
                  placeholder="短信验证码"
                  v-model="token"
                  :state="state.token"
                  @blur.native.capture="validateCode">
          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
        </mt-field>
      </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-mobile',
    data () {
      return {
        state: {
          token: 'error'
        },
        mobileText: '183*****08',
        token: '',
        tokenCode: '',
        tokenText: '获取验证码',
        tokenTime: '60'
      }
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      // 警告弹窗
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证码验证
      validateCode () {
        if (!this.token) {
          this.downToast('请填写验证码信息')
          this.state.token = 'error'
        } else {
          this.state.token = 'success'
        }
      },
      // 获取验证码
      getCheckCode () {
        if (this.tokenTime > 0 && this.tokenTime < 60) {
          this.downToast('请稍后再点击，我在倒计时')
        } else {
          this.$indicator.open('获取中...')
          let _this = this
          this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.mobile}})
            .then(response => {
              this.$indicator.close()
              if (response.data) {
                this.tokenCode = response.data.token
                this.$toast({
                  message: '验证码已经发送到您的手机，请注意查收',
                  iconClass: 'el-icon-success'
                })
                this.tokenText = '已发送(' + this.tokenTime + 'S)'
                let setTime = setInterval(() => {
                  _this.tokenTime--
                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
                  if (this.tokenTime <= 0) {
                    clearInterval(setTime)
                    _this.tokenText = '获取验证码'
                    _this.tokenTime = 60
                  }
                }, 1000)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      },
      // 验证信息
      sureAccount (type) {
        if (this.state.token !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          param.append('code', this.valid.token)
          param.append('token', this.tokenCode)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/resetPwd/check/mobile', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
                this.$store.commit('login/GET_TOKEN', response.data.content.token)
              } else {
                this.getCode()
                this.downToast(response.data.errMsg)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      }
    }
  }
</script>