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

<template>
  <div class="f-main">
    <div class="content-top">
      <p>验证手机</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="新手机号码"
                  v-model="valid.mobile"
                  :state="state.mobile"
                  type="tel"
                  @blur.native.capture="validateMobile"
        ></mt-field>
      </div>
      <div class="page-part">
        <mt-field auto-complete="off"
                  placeholder="短信验证码"
                  v-model="valid.token"
                  :state="state.token"
                  @blur.native.capture="validateCode">
          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
        </mt-field>
      </div>
      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-one',
    props: ['tokenId'],
    data () {
      return {
        state: {
          mobile: 'error',
          token: 'error'
        },
        valid: {
          mobile: '',
          token: ''
        },
        tokenCode: '',
        tokenTime: 60,
        tokenText: '获取验证码'
      }
    },
    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.downToast('请填写正确的手机号')
            this.state.mobile = 'warning'
          } else {
            this.$http.get(`/update/user/mobile/hasRegister`, {params: {mobile: this.valid.mobile}})
              .then(response => {
                if (response.data.content.hasRegister) {
                  this.$toast({
                    message: '该手机号已被注册',
                    iconClass: 'el-icon-error'
                  })
                } else {
                  this.state.mobile = 'success'
                }
              })
          }
        }
      },
      // 验证正确的验证码
      validateCode () {
        if (!this.valid.token) {
          this.downToast('请先填写验证码')
          this.state.token = 'error'
        } else {
          if (!this.valid.mobile) {
            this.downToast('请先填写正确的手机号码')
            this.state.token = 'warning'
          } else {
            if (this.tokenCode) {
              let param = new FormData()
              param.append('mobile', this.valid.mobile)
              param.append('token', this.tokenCode)
              param.append('code', this.valid.token)
              let config = {
                headers: {'Content-Type': 'multipart/form-data'}
              }
              this.$http.post('/update/user/checkCode/mobile', param, config)
                .then(response => {
                  if (response.data.success) {
                    this.state.token = 'success'
                  } else {
                    this.$toast({
                      message: response.data.errMsg,
                      iconClass: 'el-icon-error'
                    })
                    this.state.token = 'error'
                  }
                }).catch(() => {
                  this.downToast('请检查网络是否正常或联系服务商')
                })
            } else {
              this.downToast('请点击先获取验证码信息')
              this.state.token = 'warning'
            }
          }
        }
      },
      // 获取验证码
      getCheckCode () {
        console.log('获取', this.tokenId)
        if (this.tokenTime > 0 && this.tokenTime < 60) {
          this.downToast('请稍后再点击，我在倒计时')
        } else {
          if (this.state.mobile === 'success') {
            this.$indicator.open('获取中...')
            let _this = this
            this.$http.get('/update/user/setMobile', {params: {mobile: this.valid.mobile, token: this.$route.query.token ? this.$route.query.token : this.tokenId}})
              .then(response => {
                console.log('de', response.data)
                this.$indicator.close()
                if (response.data) {
                  this.tokenCode = response.data.content.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.mobile !== 'success' ||
          this.state.token !== 'success') {
          this.downToast('请确认填写部分是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          param.append('mobile', this.valid.mobile)
          param.append('code', this.valid.token)
          param.append('token', this.tokenCode)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/update/user/setMobile', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', type)
                this.$emit('lastEvent', 'last')
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      }
    }
  }
</script>