sso-ssr/components/mobile/reset/stepFirst.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="原手机号"
                  :state="state.mobile"
                  @blur.native.capture="validateMobile"
                  v-model="valid.mobile"></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="验证码"
                  :state="state.captcha"
                  auto-complete="off"
                  @blur.native.capture="validateCode"
                  v-model="valid.captcha">
          <img :src="imgSrc" height="45px" width="100px" @click="getCode">
        </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-one',
      data () {
        return {
          state: {
            mobile: 'error',
            captcha: 'error'
          },
          valid: {
            mobile: '',
            captcha: ''
          },
          imgSrc: ''
        }
      },
      mounted () {
        this.$nextTick(() => {
          this.getCode()
        })
      },
      methods: {
        // 警告弹窗
        downToast (type) {
          this.$toast({
            message: type,
            iconClass: 'el-icon-warning'
          })
        },
        // 验证手机号
        validateMobile () {
          let reg = /^1[0-9]{10}$/
          if (!this.valid.mobile) {
            this.downToast('请先填写手机号 ')
            this.state.mobile = 'error'
          } else {
            if (reg.test(this.valid.mobile)) {
              this.state.mobile = 'success'
            } else {
              this.state.mobile = 'warning'
              this.downToast('请填写正确的手机号码')
            }
          }
        },
        // 验证码验证
        validateCode () {
          if (!this.valid.captcha) {
            this.downToast('请填写验证码信息')
            this.state.captcha = 'error'
          } else {
            this.state.captcha = 'success'
          }
        },
        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((err) => {
                this.$indicator.close()
                this.downToast(err.errMsg)
              })
          }
        },
        getCode () {
          this.imgSrc = '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf()
        }
      }
    }
</script>