feat(login): 添加短信验证码倒计时功能
- 实现了一个倒计时函数 startCountdown,用于在发送验证码后启动 60 秒倒计时 - 在登录表单中添加了倒计时显示,当倒计时大于 0 时禁用重新发送按钮 - 成功发送验证码后启动倒计时
This commit is contained in:
parent
4ab0a5ca81
commit
bbf3466085
@ -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">{{
|
||||
|
Loading…
Reference in New Issue
Block a user