vue验证码发送倒计时

<template>
    <view>
        <view class="login-item">
            <input placeholder="请输入验证码" v-model="loginCode" name="input" class="login-code" maxlength="6" type="number"></input>
            <button class="login-getcode"  @click="getValCode" :disabled="disabled">{{codeTitle}}</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                disabled: false,
                codeTitle:'获取验证短信',
                loginCode:'',      //验证码
            };
        },methods:{
            //获取验证码
            getValCode(){
                let _this = this
                //这里写发送验证码接口
                loginApi.xxxxx({'phone':_this.telNumber}).then(res =>{
                    _this.tc.toast('验证码发送成功');
                })
                _this.disabled = true;
                _this.codeTitle = "请稍候...";
                setTimeout(() => {
                    _this.doLoop(60)
                }, 500)
            },
            //验证码倒计时
            doLoop: function(seconds) {
                let _this = this
                seconds = seconds ? seconds : 60;
                this.codeTitle = seconds + "s后获取";
                let countdown = setInterval(() => {
                    if (seconds > 0) {
                        _this.codeTitle = seconds + "s后获取"
                        --seconds;
                    } else {
                        _this.codeTitle = "获取验证码";
                        _this.disabled = false;
                        clearInterval(countdown);
                    }
                }, 1000);
            },
        }
    }
</script>

<style lang="less" scoped>

</style>