发送验证码及倒计时
<template>
<div class="forgot">
<van-form @submit="onSubmit" ref="ruleForm" :show-error="false">
<van-field
v-model.trim="ruleForm.phone"
clearable
name="phone"
label="手机号码"
placeholder="请输入手机号码"
:rules="rules.phone"
/>
<van-field
v-model.trim="ruleForm.verificationCode"
clearable
name="verificationCode"
label="验证码"
placeholder="请输入验证码"
:rules="rules.verificationCode"
>
<template #button>
<van-button
round
color="#FFBD3A"
plain
size="small"
native-type="button"
v-if="!isSendCode"
@click="getCode"
:loading="codeLoading"
:disabled="codeDisabled"
>{{ "获取验证码" }}</van-button
>
<van-button
size="small"
type="default"
native-type="button"
:disabled="true"
v-else
>{{ "重发" }}{{ ` ${t} s` }}</van-button
>
</template>
</van-field>
</van-form>
</div>
</template>
<script>
export default {
name: "Forgot",
data() {
return {
username: "",
password: "",
isSendCode: false,
t: 60,
codeLoading: false,
codeDisabled: false,
ruleForm: {
phone: "",
verificationCode: "",
newPassword: "",
confirmPassword: "",
},
};
},
methods: {
onSubmit(values) {
console.log("submit", values);
},
getCode() {
const name = "phone";
this.$refs.ruleForm.validate(name).then(() => {
console.log(1);
this.sendCode();
});
},
async sendCode() {
// try {
// let {
// verificationType,
// ruleForm: { phone, email, accountName, userName },
// } = this;
// accountName = this.accountName ? this.accountName : accountName;
// userName = this.userName ? this.userName : userName;
// this.codeLoading = true;
// this.codeDisabled = true;
// const { result } = await verifyContactApi({
// accountName,
// userName,
// verificationType,
// contact: verificationType === "PHONE" ? phone : email,
// language: this.language === "en-US" ? "ENGLISH" : "CHINESE",
// });
// if (result) {
// this.t = verificationType === "PHONE" ? 60 : 120;
// this.isSendCode = true;
// this.timer = window.setInterval(() => {
// if (this.t > 1) {
// this.t--;
// } else {
// window.clearInterval(this.timer);
// this.isSendCode = false;
// }
// }, 1000);
// this.codeLoading = false;
// this.codeDisabled = false;
// }
// } catch (error) {
// this.codeLoading = false;
// this.codeDisabled = false;
// }
this.codeLoading = true;
this.codeDisabled = true;
this.t = 60;
this.isSendCode = true;
this.timer = window.setInterval(() => {
if (this.t > 1) {
this.t--;
} else {
window.clearInterval(this.timer);
this.isSendCode = false;
}
}, 1000);
this.codeLoading = false;
this.codeDisabled = false;
},
},
};
</script>
网友评论