验证码倒计时模板

<template>
    <view class="wai">
        <view class="box-phone">
            <view class="">手机号</view>
            <input class="input" placeholder="请输入手机号" type="text" />
        </view>
        <view class="box-phone">
            <view class="">验证码</view>
            <input class="input" placeholder="请输入验证码" type="text" />
            <view class="code" @click="getVerificationCode">{{ isCounting ? countdownText : '获取验证码' }}</view>
        </view>
        <view class="box-phone">
            <view class="">新密码</view>
            <input class="input" placeholder="请设置新密码" type="password" />
        </view>
        <view class="box-phone">
            <view class="">确认密码</view>
            <input class="input2" placeholder="请再次输入新密码" type="password" />
        </view>
        <!-- 按钮 -->
        <view class="btn">确定</view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
const countdown = ref(5); //倒计时
const isCounting = ref(false); //多次点击只执行一次,控制显示秒数
let timer = null;
// 计算倒计时的文本
const countdownText = computed(() => {
    if (isCounting.value) {
        return `${countdown.value}s重新获取`;
    }
});
// 点击获取验证码
const getVerificationCode = async () => {
    if (isCounting.value) return; // 如果已经在倒计时，则不执行
    isCounting.value = true; // 开始倒计时
    startCountdown();
};
// 倒计时函数
const startCountdown = () => {
    timer = setInterval(() => {
        if (countdown.value > 1) {
            //如果秒数大于零就--
            countdown.value--;
        } else {
            //如果不大于零就移除定时器,其他数据复原
            clearInterval(timer);
            isCounting.value = false; //结束倒计时
            countdown.value = 5; //秒数复原
        }
    }, 1000);
};
// 移除定时器
const resetCountdown = () => {
    clearInterval(timer);
    isCounting.value = false;
    countdown.value = 60;
};
onUnmounted(() => {
    // 组件卸载时清除定时器
    resetCountdown();
});
</script>

<style lang="scss" scoped>
.wai {
    .btn {
        background-color: #f8bf5a;
        width: 100%;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
        border-radius: 50rpx;
        margin-top: 60rpx;
    }
    .box-phone {
        .code {
            border-radius: 50rpx;
            color: #fff;
            background-color: #34d19d;
            padding: 20rpx;
            font-size: 30rpx;
        }
        .input2 {
            flex: 1;
            margin-left: 48rpx;
        }
        .input {
            flex: 1;
            margin-left: 76rpx;
        }
        height: 120rpx;
        border-bottom: 2rpx solid #f7f7f7;
        display: flex;
        align-items: center;
    }
    padding: 0 30rpx;
}
</style>