manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/test/clearStorage.vue

<template>
  <div>
    <div class="clear">
      <div class="clear_img">
        <img src="../../assets/img/chong.png" alt="">
      </div>
      <div style="width: 100%;text-align: center;">
        清除成功
      </div> 
      <div class="clear_text">
        页面将在{{ nowTime }}秒后返回登录页
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      timer: null,
      nowTime: 3
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    clearInterval(this.timer);
    this.countdown()
  },
  methods: {
    countdown() {
      let that = this;
      this.timer = setInterval(() => {
        if(that.nowTime != 0) {
          that.nowTime = +that.nowTime - 1
        } else {
          localStorage.clear()
          this.$router.push("/login");
        }
      }, 1000);
    }
  },
	beforeDestroy() {
	  if (this.timer) {
	    clearInterval(this.timer);
	  }
  },
};
</script>

<style scoped>
  .clear {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 25px;
    margin-top: 100px;
    flex-wrap: wrap;
    color: #a0a0a0;
  }
  .clear_img {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
  }
  .clear_img img {
    width: 100%;
  }
  .clear_text {
    margin-top: 20px;
    font-size: 18px;
    color: #a0a0a0;
  }
</style>