kuangshan-project/src/views/ningdongyunying/puzzle/Cutdown.vue

<template>
  <div>
      <div class="deloy">倒计时：<span id="time">{{count}}</span></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 180,
      dealTime:0,
      timer: null
    };
  },

  props:{
      success:{
        type: Boolean,
        default :false
      },
  },

  created(){
      this.cutDown();
  },
//   mounted(){
// this.cutDown();
//   },

  methods: {
    cutDown() {
    //   const TIME_COUNT = 180;
      if (!this.timer) {
        // this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 ) {
            this.count--;
            if(this.success) {
                this.stopCutdown();
            }
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    initTime(){ // 返回的时候初始化倒计时
        // this.clearTimer();
         clearInterval(this.timer);
        this.timer = null;
        this.count = 180;
        this.cutDown();
    },
    stopCutdown(){ //拼图成功要清理掉倒计时,然后向父组件传递用时
       
        this.dealTime = 180-this.count;
        this.$emit('overtime',this.dealTime);
        clearInterval(this.timer);
        this.timer = null;
    },
    clearTimer(){ //拼图成功后清除定时器
        clearInterval(this.timer);
        this.timer = null;
    }
  }
};
</script>

<style  scoped>
.play-page .deloy {
  padding: 10px 20px;
  color: #fff;
}
</style>