feat(login): 添加短信验证码倒计时功能

- 实现了一个倒计时函数 startCountdown,用于在发送验证码后启动 60 秒倒计时
- 在登录表单中添加了倒计时显示,当倒计时大于 0 时禁用重新发送按钮
- 成功发送验证码后启动倒计时
This commit is contained in:
xingyy 2025-01-16 16:28:21 +08:00
parent 4ab0a5ca81
commit bbf3466085

View File

@ -19,6 +19,17 @@ const isReal=ref(false) //isReal 是否实名过
function goToPage() {
router.push('/countryRegion');
}
const startCountdown=()=> {
countdown.value = 60;
const interval = setInterval(() => {
if (countdown.value > 0) {
countdown.value--;
} else {
clearInterval(interval);
}
}, 1000);
}
const countdown = ref(0);
const phoneNum = ref('')
const code = ref('')
const pane = ref(0)
@ -74,10 +85,11 @@ const getCode =async () => {
})
loadingRef.value.loading1=false
if (res.status===0){
pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value=true
startCountdown();
}
}
@ -132,8 +144,8 @@ const goLogin = () => {
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
</div>
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
<div class="text-#2B53AC text-14px">
{{ $t('login.reSend') }}
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
</div>
<div class="mt-[17px]">
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" @click="goLogin">{{