uniapp验证码倒计时60s的实现

摘要:发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;

发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;


data

show_again: 0, //  显示发送验证码||请稍后按钮
count: "", // 等待时间
timer: null, //定时器


html

<button  class="blue send" v-if="show_again==0" @click="sendCode">发送验证码</button>
<button  class="blue send" v-if="show_again==1" @click="sendCodeAgain">请稍后重试</button>


js

sendCode(){
	const count = 60;
	if (!this.timer) {
		this.count = count;
		_this.show_again = 1;
		this.timer = setInterval(() => {
			if (this.count > 0 && this.count <= count) {
				this.count--;
			} else {
				_this.show_again = 0;
				clearInterval(this.timer);
				this.timer = null;
			}
		}, 1000)
	}
},
sendCodeAgain() {
	const _this = this;
	uni.showToast({
		title:  `请稍后重试(${_this.count})`,
		icon: "none",
		duration: 1500
	})
},

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_9579