menduner/src/directives/countDown/countTimer.vue

<template>
  <div class="countdown-timer" v-if="!isCountdownFinished">
    <div>{{ remainingTime }}</div>
    <div>浏览得积分 +{{ score }}</div>
  </div>
</template>

<script>
export default {
  name: 'CountdownTimer',
  props: {
    duration: {
      type: Number,
      require: true
    },
    onEnd: {
      type: Function,
      require: true
    },
    score: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      count: 100,
      remainingTime: this.duration,
      isCountdownFinished: false // 倒计时是否结束
    }
  },
  mounted() {
    this.startTimer()
  },
  beforeUnmount() {
    this.stopTimer()
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--
          // this.count = this.count - 6.67
        } else {
          this.stopTimer()
          this.isCountdownFinished = true // 设置倒计时结束状态
          this.onEnd()
        }
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.countdown-timer {
  position: fixed;
  right: 20px;
  top: 30%;
  text-align: center;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}
</style>