uni 获取验证码、倒计时

代码案例1

<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

代码案例2

<input type="text" class="inputCode" placeholder="请输入验证码" v-model="captcha">
<button class="getCode" @click="getCode" :disabled="disabled">{{getCodeText}}</button>

<script>
	export default {
		data() {
			return {
				// 输入金额
				inputMoney: '',
				// 验证码
				captcha: '',
				// 获取验证码
				getCodeText: '获取验证码',
				disabled: false,
			}
		},
		onLoad() {
		},
		methods: {
			// 获取验证码start
			Timer() {},
			getCode() {
				this.disabled = true
				this.getCodeText = "发送中..." //发送验证码
				setTimeout(() => {
					this.$common.msg('验证码已发送')
					// 调用短信接口
					this.codeMsg()
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			// 按钮恢复原样
			getcodeDefault(){
				// 清除定时器
				clearInterval(this.Timer); 
				this.getCodeText = '获取验证码'
				this.disabled = false
			},
			// 获取验证码end
			codeMsg() {
				this.$common.request('post', '/agent/login/send', {
					mobile: this.infos.phone,
					event: 'withdrawal'
				}).then(res => {
					if (res.code == 1) {
						console.log(res);
					}
				})
			},
			// 立即提现
			nowWithdrawal() {
				if (!uni.$u.test.amount(this.inputMoney)) {
					this.$common.msg('请输入数字金额')
					return;
				}
				if (!this.inputMoney) {
					this.$common.msg('请输入提现金额')
					return;
				}
				if (this.inputMoney <= 0) {
					this.$common.msg('请输入正确的提现金额')
					return;
				}
				if (parseFloat(this.inputMoney) > parseFloat(this.infos.balance)) {
					this.$common.msg('提现金额不能大于可提现金额')
					return;
				}
				if (uni.$u.test.isEmpty(this.captcha)) {
					this.$common.msg('请输入验证码')
					return;
				}
				this.$common.request('post', '/agent/Withdraws/withdraws', {
					money: this.inputMoney,
					mobile: this.infos.phone,
					captcha: this.captcha,
				}).then(res => {
					if (res.code == 1) {
						this.getData()
						this.inputMoney = ''
						this.captcha = ''
						this.getcodeDefault() //按钮默认样式
					}
				})
			},
		}
	}
</script>