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

男娘i 2022-05-20 00:55 257阅读 0赞

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

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

![70][] ![70 1][]

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="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 组件，需要引入，注重上面两个方法即可

[70]: https://img-blog.csdn.net/20180709214510929?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220520/8c3153a813b74f67a6358d56b71994a7.png