[JavaScript知识库]vue倒计时

<template>
  <main-area :title="title" class="fullfill" :buttonArray='buttonArray'>
    <div class="divTitle">交易信息确认</div>

    <div class="content">
      <y-table class=""
               :data="tableData.data"
               :pagination="pagination">
        <el-table-column type="index"
                         align="center"
                         width="100"
                         label="序号">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="PrdName"
                         label="交易类型">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="PrdCode"
                         label="手机号码">
        </el-table-column>
      </y-table>
    </div>

    <div class="divTitle1">
      签约手机号：
      <el-input ref="contractMobilePhoneNo" class="el-input" v-model="contractMobilePhoneNo"></el-input>
    </div>

    <div class="divTitle1">
      短信验证码：
      <el-input ref="verifyCode" class="el-input1"></el-input>
      <el-button id="getVerifyCode" round :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">
        {{getCode}}
      </el-button>
    </div>

    <div class="divTip" id="divTip" v-show="showTip">请输入11位手机号码！</div>
  </main-area>
</template>


<script>
  import config from '@/config'

  require('@/styles/index.scss')

  export default {
    data() {
      return {
        showTip: false,
        verificationCode: '',
        contractMobilePhoneNo: '',
        title: '',
        staticResourcePath: config.staticResourcePath,
        buttonArray: [{}, {}, {}, {}, {}, {}, {}, {}],
        tableData: {
          total: 0,
          data: []
        },
        pagination: {
          total: 0,
          currentPage: 1,
          pageSize: 1,
          mode: 'page'
          //all:一次加载所有数据，前端进行分页控制
          // page:每次翻页都去后端读取一次数据
          // cache:前端在翻页过程中，没有数据后才发送查询到后端，后端根据分页情况加载缺失的数据并追加到数据池中（风险，缓存中的数据有变更）
        },
        getCode: '发送验证码',
        isGeting: false,
        count: 10,
        disable: false
      }
    },

    computed: {},

    created() {
      let messages = this.$i18n.messages;
      this.buttonArray = [
        //F1
        {
          show: true,
          text: {
            //zh: messages.zh.main.btn.cancel,
            //en: messages.en.main.btn.cancel
          },
          photo: {
            normal: `${config.staticResourcePath}/img/home.png`
          }
        },

        //F2
        {
          show: true,
          text: {
            //zh: messages.zh.main.btn.cancel,
            //en: messages.en.main.btn.cancel
          },
          photo: {
            normal: `${config.staticResourcePath}/img/srcb_return.png`
          }
        },

        //F3
        {},

        //F4
        {
          show: true,
          text: {
            //zh: messages.zh.main.btn.cancel,
            //en: messages.en.main.btn.cancel
          },
          photo: {
            normal: `${config.staticResourcePath}/img/srcb_ADMConfirm.png`
          }
        },

        //F5
        {
          show: true,
          text: {
            //zh: messages.zh.main.btn.cancel,
            //en: messages.en.main.btn.cancel
            zh: '滑动退出'
          },
          photo: {
            normal: `${config.staticResourcePath}/img/btnDown.png`
          },
        },

        //F6
        {},

        //F7
        {},

        //F8
        {}
      ]
      this.buttonArray = [...this.buttonArray];
      //获取选中的数据
      this.tableData.data.push(parent.MARS.getDataPoolValue("Tran_TableRow"));
      console.log(this.tableData.data);
      //获取手机号
      this.contractMobilePhoneNo = parent.MARS.getDataPoolValue("Tran:ContractMobilePhoneNo");
      //获取验证码 Tran:VerificationCode
      this.verificationCode = parent.MARS.getDataPoolValue("Tran:VerificationCode");
    },

    mounted() {
      let messages = this.$i18n.messages;
    },

    methods: {
      getVerifyCode() {
        //校验手机号
        let contractMobilePhoneNo = this.$refs.contractMobilePhoneNo.value;
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(contractMobilePhoneNo)) {
          parent.MARS.setDataPoolValue("Tran:ContractMobilePhoneNo", contractMobilePhoneNo);
          var countDown = setInterval(() => {
            if (this.count < 1) {
              this.isGeting = false;
              this.disable = false;
              this.getCode = '获取验证码';
              this.count = 10;
              clearInterval(countDown);
            } else {
              this.isGeting = true;
              this.disable = true;
              this.getCode = '重新发送（' + this.count-- + '）'
            }
          }, 1000);
        } else {
          this.showTip = true;
          console.log("请输入正确的手机号");
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    width: 100%;
    margin-top: 2%;
  }

  .divTitle {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    margin-top: 1%;
  }

  .divTitle1 {
    font-size: 25px;
    font-weight: bold;
    margin-top: 1%;
  }

  .divTip {
    font-size: 20px;
    font-weight: lighter;
    margin-top: 1%;
    color: red;
  }

  /deep/ .el-table th {
    font-weight: lighter;
  }

  .el-input {
    width: 30%;
  }

  .el-input1 {
    width: 15%;
  }

  .el-button {
    margin-left: 1%;
    width: 14%;
    font-size: 20px;
    font-weight: bold;
  }

  .codeGeting {
    background: #cdcdcd;
    border-color: #cdcdcd;
  }
</style>