uniapp | 发送手机验证码 button组件

一、功能和效果展示

1.组件功能

uniapp
（1）按钮初始显示“发送”，点击按钮后按钮显示倒计时60s；
（2）倒计时60s期间点击按钮，不会重置计时器；
（3）倒计时60s结束后，按钮恢复初始状态，显示“发送”；

2.效果展示

3.核心思路

1. 点击“发送验证码”button，即可触发getCode()
2. 设置time=60，timer为定时器
3. 当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
4. 若在timer定时器未被消除即time仍处于(0,60)范围时，点击“获取验证码”button触发的getCode()会直接return出去

getCode(){
    
    
  if(this.timer > 0) return
  //定时器timer
  this.timer = null
  //倒计时60秒
  this.time = 60
  //每秒 time--
  this.timer = setInterval(()=>{
    
    
    this.time--
    if(this.time<= 0){
    
    
      //当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
      clearInterval(this.timer)
    }
  },1000)
}

二、完整代码实现

1. 绑定手机号页面

插入code-btn组件，传递获取的手机号的值到code-btn组件。
@/pages/bind-phone.vue

<template>
  <view class="login-form">
    <view>绑定手机号</view>
    <view class="login-input">
      <uni-icons type="person" size="20"></uni-icons>
      <input type="tel" placeholder="请输入手机号" v-model="form.phone" /> 
    </view>
    <view>
      <uni-icons type="locked" size="20"></uni-icons>
      <input type="password" placeholder="验证码" v-model="form.phone" />
      //给code-btn组件传入手机号的值
      <code-btn phone="form.phone"></code-btn>
    </view>
    <view class="button-login" @click="submitPhone">绑定</view>
</template>

2.code-btn组件

@/components/code-btn.vue

<template>
  <view class="code-btn" @click="getCode">
    {
    
    {
    
    time ? time + 's':'发送'}}
  </view>
</template>
<script>
  let timer = null
  export default {
    
    
    name:"code-btn",
    props:{
    
    
      phone:{
    
    
        type:[Number, String],
        default:''
      },
    },
    data(){
    
    
      return {
    
    
        time:0
      };
    },
    methods:{
    
    
      getCode(){
    
    
        if(this.timer > 0) return
        //调用api接口，接收验证码
        this.$api.getCaptchat({
    
    
          phone:this.phone
        }).then(res => {
    
    
          //当成功获取验证码时
          this.time = 60
          this.$toast('验证码:'+res)
          //每秒 time--
          this.timer = setInterval(()=>{
    
    
            this.time--
            if(this.time<= 0){
    
    
              clearInterval(this.timer)
            }
          },1000)
        }).catch(err => {
    
    
          //若获取验证码失败
          this.$toast(err,'请稍后重试')
        })
      }
    },
  }
</script>