<template>
<view class="get-phone-box">
<view class="main">
<view class="item-wrap cy-flex">
<text class="label">手机号</text>
<input class="input" type="number" placeholder="请输入手机号" v-model="formData.phone" maxlength="11" />
</view>
<view class="item-wrap cy-flex">
<text class="label">验证码</text>
<input class="input" type="number" placeholder="请输入验证码" v-model="formData.vercode" maxlength="6" />
<button class="send" @click="sendMobileCode" :disabled="counting">{{ counting ? `${count}秒后重新获取` : '获取验证码' }}</button>
</view>
<button type="default" class="save-btn" @click="checkCode" :disabled="isDisabled">确定</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
count: 60, // 倒计时时长,单位为秒
counting: false, // 是否正在倒计时
formData: {
phone: '',
vercode: ''
}
}
},
methed:{
// 发送手机动态码
sendMobileCode() {
if (this.counting) return;
var reg = /^1[3456789]\d{9}$/;
if (!reg.test(this.formData.phone)) {
uni.showToast({
title: '请输入正确的手机格式',
icon: 'none'
})
return
}
this.counting = true;
const timer = setInterval(() => {
this.count--;
if (this.count <= 0) {
clearInterval(timer);
this.counting = false;
this.count = 60; // 重置倒计时时长
}
}, 1000);
this.getCaptcha()
},
// 获取验证码的接口
async getCaptcha() {
try {
let res = await sendNumberCode({ //调用后台接口,把参数传给后台
phone: this.formData.phone,
type: 1
});
if (res.code == 0) { //调用成功之后的操作
uni.showToast({
title: res.data,
icon: 'none'
})
}
} catch (err) {
console.log(err);
//TODO handle the exception
}
}
}
}
</script>
uniapp——获取验证码倒计时功能
于 2024-04-22 18:04:05 首次发布