一、功能和效果展示
1.组件功能
uniapp
（1）按钮初始显示“发送”，点击按钮后按钮显示倒计时60s；
（2）倒计时60s期间点击按钮，不会重置计时器；
（3）倒计时60s结束后，按钮恢复初始状态，显示“发送”；
2.效果展示
3.核心思路
- 点击“发送验证码”button，即可触发getCode()
- 设置time=60，timer为定时器
- 当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
- 若在timer定时器未被消除即time仍处于(0,60)范围时，点击“获取验证码”button触发的getCode()会直接return出去
getCode(){if(this.timer > 0) return//定时器timerthis.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 = nullexport 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 = 60this.$toast('验证码:'+res)//每秒 time--this.timer = setInterval(()=>{this.time--if(this.time<= 0){clearInterval(this.timer)}},1000)}).catch(err => {//若获取验证码失败this.$toast(err,'请稍后重试')})}},}
</script>
