135 lines
2.3 KiB
Vue
135 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: [props.phone, props.event],
|
|||
|
|
path: [props.phone, props.event],
|
|||
|
|
}).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>
|