vue实现发送验证码60秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<van-cell-group class="home-congratulation-from">
<van-field ref="phone" type="tel" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
keyboardType="UIKeyboardTypeDecimalPad;" v-model="phone" maxlength="11" placeholder="请输入手机号" />
<div>
<van-field type="tel" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
keyboardType="UIKeyboardTypeDecimalPad;" v-model="verifycode" maxlength="6" center clearable
placeholder="请输入验证码" />
<van-button :color="(types==1?`#09BB07`:`#2480FF`)" class="home-congratulation-from-button"
@click="sendVerifycode()" type="primary" round :disabled="!disabledCodeBtn">{{codeText}}</van-button>
</div>
<div>
<van-button :color="(types==1?`#09BB07`:`#2480FF`)" slot="button" type="primary" round block
@click="login()" native-type="submit">立即领取</van-button>
</div>
</van-cell-group>
<script>
export default {
data() {
return {
phone: "",
verifycode: "",
codeText: "获取验证码",
disabledCodeBtn: true,
}
},
methods: {
// 向后台要验证码方法
sendVerifycode() {
if (this.verifyPhone()) {
Toast(this.verifyPhone());
} else {
let data = {
phone: this.phone
};
axios
.post(store.state.baseURL + "xxxxxxx", data, {
headers: {
"content-type": "application/x-www-form-urlencoded"
}
})
.then(res => {
console.log(res);
if (res.data.error == 0) {
alert(res.data.error_reason);
this.countDown(60);
} else if (res.data.error != 0) {
alert(res.data.error_reason);
}
})
.catch(error => {
console.log(error);
});
}
},
// 表单校验方法
verifyPhone() {
if (!this.phone) {
return "请输入手机号";
} else if (this.phone.length !== 11) {
return "请输入11位手机号";
} else {
return false;
}
},
// 倒计时方法
countDown(time) {
if (time === 0) {
this.disabledCodeBtn = true;
this.codeText = "获取验证码";
return;
} else {
this.disabledCodeBtn = false;
this.codeText = "重新发送(" + time + ")";
time--;
}
setTimeout(() => {
this.countDown(time);
}, 1000);
},
async login() {
if (this.verifyPhone()) {
Toast(this.verifyPhone());
} else if (this.verifycode == "") {
Toast("请输入验证码");
} else {
let list = {
phone: this.phone,
code: this.verifycode
};
let resq = await request("xx验证验证码接口路径xx", list);
if (resq.error == 0) {
let data = {
id: this.money.id,
phone: this.phone,
money: this.money.money,
total_money: this.total_amount,
uniqueid: this.user_id,
type: this.types
};
let res = await request(
"xx接口路径xx",
data
);
if (res.error == 0) {
Toast(res.error_reason);
this.$router.push({
path: "要跳转的页面"
});
} else {
Toast(res.error_reason);
}
} else {
Toast(resq.error_reason);
}
}
}
}
}
</script>
</body>
</html>
