html:使用vant4 Field输入框 和 buttom按钮
<template>
<div class="login">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="username"
name="手机号码"
label="手机号码"
placeholder="请输入手机号码"
:rules="[{ required: true, message: '请填写手机号码' }]"
/>
<van-field
v-show="true"
v-model="Captcha"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
:rules="[{ required: true, message: '请填写验证码' }]"
>
<template #button>
<van-button round plain size="small" type="primary" @click="send" v-show="data.codeShow">发送验证码</van-button>
<van-button round plain size="small" type="primary" v-show="!data.codeShow" disabled >{{data.count}}秒后重试</van-button>
</template>
</van-field>
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
提交
</van-button>
</div>
</van-form>
</div>
</template>
js:
<script>
import 'vant/es/toast/style'
import 'vant/es/notify/style'
import { ref,reactive } from 'vue';
import {getCaptcha} from '@/request/api/home.js'
import { showNotify } from 'vant';
export default {
setup() {
const username = ref(''); //手机号
const Captcha = ref(''); //验证码
const data = reactive({
codeShow: true, //按钮显示
count: '', //倒计时
timer: null, //计时器
})
return {
username,
Captcha,
data
};
},
created(){ //刷新页面时重新取得计时并将计时丢给timeDown执行
let EndTime= sessionStorage.getItem('EndTime');
if(EndTime){
this.timeDown(EndTime);
}
},
methods:{
async send(){
let clicktime = new Date().getTime() + 60000; //未来60秒,这里也毫秒为单位
sessionStorage.setItem('EndTime', JSON.stringify(clicktime)); //存入sessionStorage
let res = await getCaptcha(this.username)
if (res.data.code == 200) {
showNotify({ type: 'success', message: '发送成功' });
this.timeDown(clicktime) //请求成功则触发timeDown并将时间携带过去
}else{
showNotify({ type: 'danger', message:res.data.message });
}
},
timeDown(time){
if (!this.data.timer) {
this.data.count = Math.ceil((JSON.parse(time) - new Date().getTime())/1000); //取出计时
this.data.codeShow = false;
this.data.timer = setInterval(() => {
if (this.data.count > 0) {
this.data.count--;
} else {
this.data.codeShow = true;
clearInterval(this.data.timer); //清除计时器
this.data.timer = null;
sessionStorage.removeItem('EndTime') //计时完后清除sessionStorage
}
}, 1000)
}
},
};
</script>
效果展示: