uni-app 获取验证码倒计时

<template>
    <view class="content">
        <view class="mobile-box">
            <image class="mobile-img" src="/static/mobile.png" mode=""></image>
            <input placeholder-style="color:#0779B5" @input="getValue" data-id="1" placeholder="请输入手机号" class="input-mobile" type="text" value="" />
        </view>
        <view class="mobile-box" style="margin-top: 0upx;border-top: none;">
            <image class="mobile-img" src="/static/code.png" mode=""></image>
            <input placeholder-style="color:#0779B5" @input="getValue" data-id="2" placeholder="请输入验证码" class="input-mobile" style="padding-right: 35%;" type="text" value="" />
            <button @click="getCode" :disabled="disabled" class="get-vcode">
                {{countdown}} <text v-show="timestatus">秒重获</text>
            </button>
        </view>
    </view>
</template>

<script>
    import helper from "../../components/js/helper.js"
    export default {
        data() {
            return {
                code:'',
                mobile:'',
                countdown:'获取验证码',
                disabled:false,
                timestatus:false,
                clear:'',
            }
        },
        onLoad() {        
        },
        methods: {
            // 获取input内容
            getValue(event) {
                var that = this;
                var value = event.detail.value;
                var id = event.currentTarget.dataset.id;
                if (id == 1) {
                    that.mobile = value;
                }else{
                    that.code = value;
                }
            },
            // 获取验证码
            getCode(){
                var that = this;
                if(that.mobile==''){
                    uni.showToast({
                        title: '请输入手机号码',
                        icon: 'none'
                    });
                }else if(!helper.c_mobile.test(that.mobile)){
                    uni.showToast({
                        title: '手机号码错误',
                        icon: 'none'
                    });
                }else{
                    that.disabled = true;//禁用点击
                    uni.request({
                        url: helper.webUrl + 'index.php/App/verificCode',
                        method: 'GET',
                        data: {
                            mobile: that.mobile,
                            type:1
                        },
                        success: res => {
                            if(res.data.status==1){
                                uni.showToast({
                                    title: res.data.info,
                                    icon: 'none'
                                });
                                that.countdown = 60;
                                that.timestatus = true;
                                that.clear = setInterval(that.countDown,1000);
                            }else{
                                that.disabled = false; //获取失败开启点击
                            }
                        }
                    })
                }                
            },
            // 倒计时
            countDown(){
                var that = this;
                if(!that.countdown){                    
                    that.disabled = false;
                    that.timestatus = false;
                    that.countdown = '获取验证码';
                    clearInterval(that.clear);
                }else{
                    --that.countdown;
                }
            }

        },
    }    
</script>

<style>
    .content{
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: scroll;    
        top: 0upx;
        box-sizing: border-box;
        padding-top: 84upx;
    }
    .mobile-box{
        display: flex;
        width: 100%;
        height: 90upx;
        border-bottom: 1upx solid #CCCCCC;
        border-top: 1upx solid #CCCCCC;
        box-sizing: border-box;
        padding: 0upx 5% 0upx 5%;
        /* margin-top: 50upx; */
        background: #EFEFEF;
        position: relative;
    }
    .mobile-img{
        width: 60upx;
        height: 60upx;
        margin-top: 15upx;
    }
    .input-mobile{
        width: 100%;
        height: 90upx;
        line-height: 90upx;
        font-size: 32upx;
        color: #333333;
        color: #0779B5;
        box-sizing: border-box;
        padding-left: 15upx;
        padding-right: 15upx;
    }
    .get-vcode{
        position: absolute;
        right: 5%;
        top: 15upx;
        height: 60upx;
        line-height: 60upx;
        font-size: 30upx;
        color: #FFFFFF;
        background: #0779B5;
        border-radius: 50upx;
        border: 1upx solid #CCCCCC;
    }
</style>