vue 实现获取验证码时间递减功能

vue 实现获取验证码时间递减功能

    关于获取验证码时间递减的情况，最常用的是出现在注册界面，当我们点击获取验证码之后，然后时间通常为60s递减，那么vue是怎么实现的呢？首先看一下效果图。获取验证码接口就自己去琢磨了哈

vue如下：

<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class="bg" v-loading="loading" :style="{backgroundImage:`url(${backImgUrl})`}">
    <div class="login">
      <div class="left">
        <div class="loginTitle">
          <h3>用户注册</h3>
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 40px;">
          <el-form-item prop="phone">
            <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.repassword" placeholder="再次请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
          </el-form-item>
          <!-- <el-form-item class="modifyVerification">
            <div class="verificationCode">
              <el-input v-model="loginForm.password" placeholder="请输入验证码"></el-input>
              <div class="verficationImage"></div>
            </div>
          </el-form-item> -->
           <el-form-item class="phoneVerification">
            <div class="phoneVerificationCode">
              <el-input v-model="loginForm.validateCode" placeholder="请输入收到的验证码"></el-input>
              <div class="phoneVerficationImage" @click="getValidate()">{{validateName}}</div>
            </div>
          </el-form-item>
          <div class="agreeText">
              <div>
                <el-checkbox v-model="checked">同意<span>注册协议</span>
                </el-checkbox>
              </div>
              <div>
                <a @click="goToLogin()"><span>已有账号登录</span></a>
              </div>
          </div>
          <el-form-item>
            <el-button type="primary" style="width: 100%; margin: 30px 0" @click="submitForm()">立即注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <img :src="imgCode"/>
        <p>扫一扫<br>下载嗨黔东南</p>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import imgCode from 'assets/images/code.jpg'
import backImgUrl from 'assets/images/landr/login-bg.jpg'

let countDown = 60
export default {
  data () {
    return {
      validateName: '获取验证码',
      checked: false,
      backImgUrl,
      imgCode,
      loading: false,
      loginForm: {
        phone: '',
        password: '',
        repassword: '',
        validateCode: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    document.title = '登录-嗨黔东南'
  },
  methods: {
    submitForm () {
      const _self = this
      if (this.loginForm.password !== this.loginForm.repassword) {
        _self.$message({
          showClose: true,
          message: '两次输入的密码不一致',
          type: 'error'
        })
        return
      } else if (this.loginForm.validateCode === '' || this.loginForm.validateCode === null) {
        _self.$message({
          showClose: true,
          message: '未验证手机验证码',
          type: 'error'
        })
        return
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _self.loading = true
          _self.$http.post(`/v1/sms/${_self.loginForm.phone}/${_self.loginForm.validateCode}`, null).then(data => {
            _self.loading = false
            _self.$http.post('/v1/phoneRegister', {phone: _self.loginForm.phone, password: _self.loginForm.password}).then(data => {
              this.$store.commit('setUserInfo', data)
              _self.loading = false
              _self.$message({
                showClose: true,
                message: '注册成功',
                type: 'sucess'
              })
              _self.$router.push('/login')
            }).catch(errMsg => {
              _self.loading = false
              _self.$message({
                showClose: true,
                message: errMsg,
                type: 'error'
              })
            })
          }).catch(errMsg => {
            _self.loading = false
            _self.$message({
              showClose: true,
              message: errMsg,
              type: 'error'
            })
          })
        }
      })
    },
    goToLogin () {
      this.$router.push('/login')
    },
    // 手机验证码定时器
    setTimeDown () {
      if (countDown === 0) {
        this.validateDisabled = false
        this.validateName = '重新获取'
        countDown = 60
        return
      } else {
        this.validateDisabled = true
        this.validateName = countDown + 's'
        countDown--
      }
      const _self = this
      this.timer = setTimeout(() => {
        _self.setTimeDown()
      }, 1000)
    },
    getValidate () {
      if (this.validateDisabled) {
        return
      }
      if (this.loginForm.phone === null || this.loginForm.phone === '') {
        const _self = this
        _self.$message({
          showClose: true,
          message: '手机号不能为空',
          type: 'error'
        })
        return
      }
      if (countDown >= 60) {
        const _self = this
        this.$http.get(`/v1/sms/` + this.loginForm.phone, null).then(data => {
          _self.$message({
            showClose: true,
            message: '发送验证码成功',
            type: 'sucess'
          })
        }).catch(errMsg => {
          _self.$message({
            showClose: true,
            message: errMsg,
            type: 'error'
          })
        })
      }
      this.setTimeDown()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.bg
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  width 100%
  height 100%
  background-repeat: no-repeat;
  background-size: cover;
  background-position 50% 50%;
  z-index 500
.login
  padding 18px
  background #ffffff
  border-radius 5px
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  display flex
  .forget
    text-align right
    margin-top -21px
    cursor pointer
    color $color-theme
    &:hover
      text-decoration underline
.left
  width 300px
  padding 12px
  padding-right 24px
  .loginTitle
    left 0px
    top 0px
    position fixed
    width 100%
    line-height 50px
    height 50px
    background-color #58D0FF
    text-align center
    color white
    font-size 18px
.right
  padding 70px 10px 0 20px
  border-left 1px solid $color-border
  text-align center
  img
    width 180px
    height 180px
  p
    font-size 15px
    color #797979
    line-height 24px
    margin-top 30px
    text-align center
    width 180px
    line-height 1.8
    letter-spacing 4px
.divider
  display flex
  justify-content space-between
  align-items center
  white-space nowrap
  height auto
  overflow hidden
  line-height 1
  text-align center
  padding 10px 0
  color #666
  margin-top 24px
  &:before
  &:after
    content ''
    display block
    position relative
    width 100px
    height 1px
    background $color-border
.third-login
  display flex
  justify-content space-around
  text-align center
  margin-top 15px
  i
    font-size 48px
    color $color-theme
  p
    color #666

.modifyVerification {
  .verificationCode {
    display flex
    .verficationImage {
      background-color #79c757
      width 55%
      height 40px
      margin-left 10px
    }
  }
}
.phoneVerification {
  .phoneVerificationCode {
    display flex
    .phoneVerficationImage {
      cursor pointer
      background-color #ffad4d
      width 55%
      height 40px
      margin-left 10px
      color white
      text-align center
    }
  }
}
.agreeText {
  display flex
  justify-content space-between
}

a {
  text-decoration none
  color black
}
</style>

定时主要关注getValidate()和setTimeDown()方法即可，欢迎留言，项目要上线来不及时间解释。

使用的是elementUi 组件，需要引入，注重上面两个方法即可