uni 获取验证码、倒计时

代码

<button :disabled="disabled" class="getCode" :style="{
     
     'color':getCodeBtnColor}" @click.stop="getCode()">{
   
   {getCodeText}}
</button>

data() {
    
    
	return {
    
    
		// 获取验证码
		getCodeText: '获取验证码',
		getCodeBtnColor: "#ffffff",
		getCodeisWaiting: false,
		disabled:false
	}
},

// 获取验证码start
Timer() {
    
    },
getCode() {
    
    
	this.disabled = true
	this.getCodeText = "发送中..." //发送验证码
	this.getCodeisWaiting = true;
	this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
	//示例用定时器模拟请求效果
	//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
	setTimeout(() => {
    
    
		//this.$common.msg('验证码已发送')
		 uni.showToast({
    
    
		 	title: '验证码已发送',
		 	icon: "none"
		 }); //弹出提示框
		this.setTimer(); //调用定时器方法
	}, 1000)
},
//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
setTimer() {
    
    
	let holdTime = 60; //定义变量并赋值
	this.getCodeText = "重新获取(60)"
	//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
	//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
	this.Timer = setInterval(() => {
    
    
		if (holdTime <= 0) {
    
    
			this.disabled = false
			this.getCodeisWaiting = false;
			this.getCodeBtnColor = "#ffffff";
			this.getCodeText = "获取验证码"
			clearInterval(this.Timer); //清除该函数
			return; //返回前面
		}
		this.getCodeText = "重新获取(" + holdTime + ")"
		holdTime--;
	}, 1000)
}
// 获取验证码end