VUE-发送短信验证码，60秒后点击重发

<template>
  <div class="common-input-wrap" :class="{ warningBorder: warningCodeText?true:false }" >
    <input type="tel" maxlength="6" class="mobile code" v-model.trim="form.code" placeholder="请输入短信验证码" />
    <button class="send-code" @click="getCode" :disabled="getCodeisWaiting" :class="{ disabled: getCodeisWaiting }" >{{ getCodeText }}</button>
    <p class="warning">{{ warningCodeText }}</p>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                Timer: null,
                form: {
                  code: ''                
                },
                getCodeisWaiting: '',
                getCodeText: '获取验证码',
                getCodeisWaiting: false, // 禁止多次点击
                warningCodeText: ''// 报错信息 
            }
        },
        methods: {
            getCode() {
              this.setTimer()
            },
            setTimer() {
                let holdTime = 60;
                this.getCodeisWaiting = true;
                this.Timer = setInterval(() => {
                if (holdTime <= 0) {
                    this.getCodeisWaiting = false;
                    this.warningCodeText = "短信验证码已失效，请重新获取";
                    this.getCodeText = "获取验证码";
                    this.form.code=''
                    clearInterval(this.Timer);
                    return;
                }
                this.getCodeText = holdTime + "s";
                holdTime--;
                }, 1000);
            },
            // 清楚页面的定时器
            stopAllTimer() {
              clearInterval(this.Timer);
              this.Timer = null;
              this.getCodeisWaiting = false;
              this.getCodeText = "获取验证码";
            },
        }
    }
</script>
<style scoped lang="scss">
.warningBorder {
    border-bottom: 1px solid #ea0000 !important;
}
.common-input-wrap {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #ebecf1;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
    input {
        border: none;
        padding: 0 10px;
        outline: none;
        font-size: 14px;
    }
    .mobile.code {
        width: 150px;
    }
    .send-code {
        border: none;
        display: inline-block;
        vertical-align: middle;
        height: 40px;
        line-height: 40px;
        width: 90px;
        text-align: center;
        // float: right;
        cursor: pointer;
        font-size: 14px;
        position: absolute;
        right: 0;
        bottom: 3px;
        border-radius: 4px;
        outline: none;
        color: #ffffff;
        background-color: #1d2a75;
    }
    .disabled {
        color: #888888;
        background: #ebecf1;
    }
    .warning {
        font-size: 12px;
        color: #ea0000;
        position: absolute;
        bottom: -18px;
        width: 100%;
    }
}
<style>