vue 倒数秒数 手机验证码

参考：
参考链接
Html

<template>
  <div>
    <van-row class="header">
      <van-col span="24">
        <van-image :src="fang" alt class="img" @click="goupper" />
        <h6>修改密码</h6>
      </van-col>
    </van-row>
    <div class="margin_top"></div>
    
<van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" color='#FC705C' @click="showTime(60)" v-show="isShowBtn">获取验证码</van-button>
    <van-button size="small" color='#cccccc'  v-show="isShareCount">
      <span id="showtimes"></span>
      <span>s后重试</span>
    </van-button>
  </template>
</van-field>
    <van-field v-model="oldpassword" type="password" placeholder='请输入旧密码' label="密码：" />
    <van-field v-model="newpassword" type="password" placeholder='请输入新密码' label="密码：" />
  <div style="margin: 59px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="submitbutton()"
          style=" font-size:18px;background: linear-gradient(27deg, #fc5c56 0%, #fb9867 100%);border:0"
        >提 &nbsp;&nbsp;&nbsp;&nbsp; 交
        </van-button>
  </div>
  </div>
</template>

Js

<script>
export default {
    components: {
    
    },
  data() {
    return {      
      fang: require("../assets/qita/fang.png"),     // 图
      sms:'',
      isShowBtn:true,
      isShareCount:false,
      oldpassword:'',
      newpassword:'',
    };
  },
  beforeCreate() {
    // 设置成灰色
  document
  .querySelector('body')
  .setAttribute('style', 'background-color:#f2f2f2')
    },
  created() {

  },
      filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      return formatDateTime(time, "yyyy-MM-dd hh:mm:ss");
    }
  },
  methods: {
  // 显示秒数
    showTime(countdown){
        let self = this;
        self.isShowBtn = false;
        self.isShareCount = true;
        if (countdown == 0) {
            self.isShareCount = false;
            self.isShowBtn = true;
            // document.getElementById('showtimes').innerHTML = "";
            localStorage.removeItem('showtimes');
        } else {
            countdown -= 1;
            setTimeout(function () {
                self.showTime(countdown);
            }, 1000);
            localStorage.setItem('showtimes',countdown)
        }
        document.getElementById('showtimes').innerHTML = localStorage.getItem('showtimes');
    },
// 提交
submitbutton(){

},
    // 返回上一级
    goupper() {
      this.$router.go(-1);
    }
  }
};
</script>

Css

<style lang="scss" scoped >

.margin_top{
  margin-top: 1.125rem;
}
.header {
  width: 100%;
  height: 4rem;
  background: linear-gradient(
    90deg,
    rgba(252, 60, 60, 1) 0%,
    rgba(253, 104, 104, 1) 100%
  );
  display: flex;
}
.img {
  height: 1rem;
  width: 0.5625rem;
  margin-top: 1.5625rem;
  margin-left: 0.5rem;
}
.header h6 {
  font-size: 1.125rem;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-top: -1.5rem;
}

</style>