uni 获取验证码、倒计时
获取 验证码 uni 倒计时
2023-09-14 09:04:08 时间
代码案例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>
相关文章
- android 获取收到短信验证码,Android自动获取短信验证码
- C++获取字符串长度详解
- JSP jsp:getProperty:数据获取标签
- 时间Oracle 获取开始时间的方法(oracle取第一天)
- Linux操作系统:轻松获取高效率(linuxef)
- 无法获取解决Oracle存储过程出参无法获取问题(oracle存储过程出参)
- Oracle数据库中如何获取准确的时间?(oracle如何获取时间)
- PHP轻松访问MySQL数据:使用简明易懂的方法获取数据(php获取mysql数据)
- MySQL如何获取表字段名字(mysql 获取表字段名)
- 实现安全从redis中获取验证码(获取redis的验证码)
- 使用Redis提升数据获取效率(redis 获取数据效率)
- MySql获取某个字段存在于哪个表的sql语句
- ASP.NET使用Subtract方法获取两个日期之间的天数
- DevExpress获取节点下可视区域子节点集合的实现方法