67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template>
|
|
<div class="login-code">
|
|
<el-button
|
|
class="x_btns login-code-img"
|
|
size="default"
|
|
type="primary"
|
|
style="width: 100%"
|
|
@click.prevent="getCode"
|
|
:disabled="isDisabled"
|
|
>
|
|
<span>{{ buttonName }}</span>
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCodeImg } from "@/api/login";
|
|
|
|
const props = defineProps({
|
|
mobile: String,
|
|
});
|
|
|
|
const disabled = ref(true);
|
|
const buttonName = ref("获取验证码");
|
|
const isDisabled = ref(false);
|
|
const time = ref(60);
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
function getCode() {
|
|
const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
|
|
if (!reg.test(props.mobile))
|
|
return proxy.$modal.msgError("请输入正确的手机号码");
|
|
isDisabled.value = true;
|
|
let interval = setInterval(function () {
|
|
buttonName.value = time.value + "后重新发送";
|
|
--time.value;
|
|
if (time.value < 0) {
|
|
buttonName.value = "重新发送";
|
|
time.value = 60;
|
|
isDisabled.value = false;
|
|
clearInterval(interval);
|
|
}
|
|
}, 1000);
|
|
getCodeImg({ mobile: props.mobile })
|
|
.then((res) => {})
|
|
.catch(() => {
|
|
isDisabled.value = false;
|
|
clearInterval(interval);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login-code {
|
|
width: 30%;
|
|
height: 38px;
|
|
float: right;
|
|
img {
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.login-code-img {
|
|
height: 36px;
|
|
}
|
|
</style> |