获取验证码倒计时

黑色滴夜

<input type="number" v-model:value="code" maxlength="10" placeholder="验证码" class="code_input"/>
<view :class="isGain ? 'gray' : 'orange'" @click="getCode">{{codeTxt}}</view>

var timeId = null;
data() {
    return {
        isGain: false, //是否获取
        second: 60, //倒计时
        codeTxt: '获取验证码',
        code: '',
        mobile: '',
    }
},

mounted() {
    clearInterval(timeId); //先清理循环，避免缓存
},

// 获取验证码
getCode() {
    if (this.isGain) {
        return;
    }
    if (!/^1\d{10}$/.test(this.mobile)) {
        uni.showToast({
            title: '手机号格式不对',
            icon: 'none',
            duration: 2000,
            position: 'center'
        })
        return;
    }
    this.isGain = true;
    this.codeTxt = this.second + '秒';
    timeId = setInterval(() => {
        this.second--;
        if (this.second === 0) {
            this.isGain = false;
            clearInterval(timeId);
            this.codeTxt = '获取验证码';
            this.second = 60;
            return;
        }
        this.codeTxt = this.second + '秒';
    }, 1000);
},

changjianwei

好家伙，可以的