136 lines
2.3 KiB
Vue
136 lines
2.3 KiB
Vue
<script setup>
|
||
/**
|
||
* 获取验证码组件
|
||
*/
|
||
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
onBeforeUnmount,
|
||
} from 'vue'
|
||
// 工具库
|
||
import util from '@/common/js/util.js'
|
||
// api
|
||
import api from '@/api/index.js'
|
||
|
||
// 传入参数
|
||
const props = defineProps({
|
||
// 内容
|
||
event: {
|
||
type: String,
|
||
default: 'register',
|
||
},
|
||
// 倒计时
|
||
count: {
|
||
type: Number,
|
||
default: 60,
|
||
},
|
||
// 手机号
|
||
phone: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
})
|
||
// 时间
|
||
const time = ref(60)
|
||
// 定时器
|
||
const timer = ref(null)
|
||
// 进度 1获取验证码 2秒后获取 3重新获取验证码
|
||
const plan = ref(1)
|
||
|
||
onMounted(() => {
|
||
// 赋值倒计时
|
||
time.value = props.count
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
// 设置进度
|
||
plan.value = 1
|
||
|
||
// 清除定时器
|
||
clearInterval(timer.value)
|
||
})
|
||
|
||
// 获取验证码
|
||
function getCode() {
|
||
// 判断有无手机号
|
||
if (!props.phone) {
|
||
// if (!props.phone.match(util.reg.tel)) {
|
||
util.alert('手机号不正确')
|
||
return false;
|
||
}
|
||
|
||
// 判断当前进度
|
||
if (plan.value == 2) {
|
||
// 弹窗提示
|
||
util.alert('请稍后获取验证码')
|
||
return false;
|
||
}
|
||
|
||
// 设置进度
|
||
plan.value = 2
|
||
|
||
// 定时器
|
||
timer.value = setInterval(() => {
|
||
// 清除定时器
|
||
if (time.value > 0) {
|
||
// 减少时间
|
||
time.value--
|
||
} else {
|
||
// 设置进度
|
||
plan.value = 3
|
||
|
||
time.value = props.count
|
||
|
||
// 清除定时器
|
||
clearInterval(timer.value)
|
||
}
|
||
}, 1000);
|
||
|
||
// 发送验证码
|
||
api.login.getCaptcha({
|
||
query: {
|
||
phoneNumber: props.phone,
|
||
}
|
||
}).then(rs => {
|
||
console.log(rs)
|
||
// 返回成功
|
||
if (rs.code == 200) {
|
||
// 弹窗提示
|
||
util.alert('验证码已发送')
|
||
} else {
|
||
//弹窗提示用户
|
||
util.alert(rs.msg)
|
||
|
||
// 设置进度
|
||
plan.value = 3
|
||
|
||
// 清除定时器
|
||
clearInterval(timer.value)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 恢复初始化
|
||
function clear() {
|
||
clearInterval(timer.value) // 清除定时器
|
||
plan.value = 1;
|
||
time.value = 60;
|
||
}
|
||
</script>
|
||
|
||
<template name="getSms">
|
||
<view class="getCode" @click="getCode">
|
||
<text v-show="plan == 1">发送</text>
|
||
<text v-show="plan == 2">（{{time}}s）</text>
|
||
<text v-show="plan == 3">重新发送</text>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
// 获取验证码
|
||
.getCode {
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
</style> |