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() {
|
function goToPage() {
|
||||||
router.push('/countryRegion');
|
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 phoneNum = ref('')
|
||||||
const code = ref('')
|
const code = ref('')
|
||||||
const pane = ref(0)
|
const pane = ref(0)
|
||||||
@ -74,10 +85,11 @@ const getCode =async () => {
|
|||||||
})
|
})
|
||||||
loadingRef.value.loading1=false
|
loadingRef.value.loading1=false
|
||||||
if (res.status===0){
|
if (res.status===0){
|
||||||
|
|
||||||
pane.value = 1
|
pane.value = 1
|
||||||
vanSwipeRef.value?.swipeTo(pane.value)
|
vanSwipeRef.value?.swipeTo(pane.value)
|
||||||
showKeyboard.value=true
|
showKeyboard.value=true
|
||||||
|
startCountdown();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -132,8 +144,8 @@ const goLogin = () => {
|
|||||||
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
|
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
|
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
|
||||||
<div class="text-#2B53AC text-14px">
|
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
|
||||||
{{ $t('login.reSend') }}
|
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-[17px]">
|
<div class="mt-[17px]">
|
||||||
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" @click="goLogin">{{
|
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" @click="goLogin">{{
|
||||||
|
Loading…
Reference in New Issue
Block a user