sso-ssr/components/mobile/encryptedSetting/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>{{info | hide}}</strong>接收验证码</span>
      </div>
      <div class="page-part">
        <mt-field auto-complete="off"
                  placeholder="短信验证码"
                  v-model="code"
                  :state="state.code"
                  @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">下一步</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-mobile',
    props: ['info'],
    data () {
      return {
        state: {
          code: 'error'
        },
        code: '',
        tokenCode: '',
        tokenText: '获取验证码',
        tokenTime: '60'
      }
    },
    filters: {
      hide: function (value) {
        let reg = /^(\d{3})\d{6}(\d{2})$/
        return value.replace(reg, '$1******$2')
      }
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      // 警告弹窗
      downToast (type) {
        this.$toast({
          message: type,
          iconClass: 'el-icon-warning'
        })
      },
      // 验证码验证
      validateCode () {
        if (!this.code) {
          this.downToast('请填写验证码信息')
          this.state.code = 'error'
        } else {
          let param = new FormData()
          param.append('mobile', this.info)
          param.append('code', this.code)
          param.append('token', this.tokenCode)
          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.code = 'success'
              } else {
                this.state.code = 'error'
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.downToast(err.errMsg)
            })
        }
      },
      // 获取验证码
      getCheckCode () {
        if (this.tokenTime > 0 && this.tokenTime < 60) {
          this.downToast('请稍后再点击，我在倒计时')
        } else {
          this.$indicator.open('获取中...')
          let _this = this
          this.$http.get('/update/user/check/mobile', {params: {mobile: this.info}})
            .then(response => {
              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 () {
        if (this.state.code !== 'success') {
          this.downToast('请确认填写是否有误')
        } else {
          this.$indicator.open('验证过程中...')
          let param = new FormData()
          param.append('mobile', this.info)
          param.append('code', this.code)
          param.append('token', this.tokenCode)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/update/user/check/mobile', param, config)
            .then(response => {
              this.$indicator.close()
              if (response.data.success) {
                this.$emit('stepEvent', 'new')
                this.$emit('tokenEvent', response.data.content)
              } else {
                this.downToast(response.data.errMsg)
              }
            }).catch(() => {
              this.$indicator.close()
              this.downToast('请检查网络是否正常或联系服务商')
            })
        }
      }
    }
  }
</script>