91 lines
1.6 KiB
Plaintext
91 lines
1.6 KiB
Plaintext
<template>
|
|
<view class="countdown-btn-wrap">
|
|
<text
|
|
class="countdown-btn-text"
|
|
:class="canSend ? 'countdown-btn-active' : 'countdown-btn-disabled'"
|
|
@tap="handleTap"
|
|
>{{ btnText }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
phone?: string
|
|
codeType?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
phone: '',
|
|
codeType: 'login'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'send', phone: string): void
|
|
}>()
|
|
|
|
const COUNTDOWN = 60
|
|
const canSend = ref(true)
|
|
const countdown = ref(COUNTDOWN)
|
|
const btnText = ref('获取验证码')
|
|
|
|
let timer : number | null = null
|
|
|
|
function handleTap() {
|
|
if (!canSend.value) return
|
|
emit('send', props.phone)
|
|
}
|
|
|
|
/**
|
|
* 开始倒计时 - 由父组件在发送成功后调用
|
|
*/
|
|
function startCountdown() {
|
|
canSend.value = false
|
|
countdown.value = COUNTDOWN
|
|
btnText.value = `${countdown.value}s后重发`
|
|
|
|
timer = setInterval(() => {
|
|
countdown.value--
|
|
if (countdown.value <= 0) {
|
|
stopCountdown()
|
|
} else {
|
|
btnText.value = `${countdown.value}s后重发`
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
function stopCountdown() {
|
|
if (timer !== null) {
|
|
clearInterval(timer)
|
|
timer = null
|
|
}
|
|
canSend.value = true
|
|
countdown.value = COUNTDOWN
|
|
btnText.value = '重新发送'
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
stopCountdown()
|
|
})
|
|
|
|
defineExpose({ startCountdown })
|
|
</script>
|
|
|
|
<style>
|
|
.countdown-btn-wrap {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.countdown-btn-text {
|
|
font-size: 14px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.countdown-btn-active {
|
|
color: #6C63FF;
|
|
}
|
|
|
|
.countdown-btn-disabled {
|
|
color: #BBBBBB;
|
|
}
|
|
</style>
|