<template>
  <div>
    <h2>距離活動(dòng)開始還有 {{ countdown }} 秒</h2>
    <button @click="startCountdown">開始倒計(jì)時(shí)</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 60, // 初始倒計(jì)時(shí)秒數(shù)
      intervalId: null // 存儲(chǔ)setInterval返回的ID
    };
  },
  methods: {
    startCountdown() {
      if (!this.intervalId) {
        this.intervalId = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          } else {
            clearInterval(this.intervalId);
            alert('倒計(jì)時(shí)結(jié)束！');
          }
        }, 1000);
      }
    }
  }
};
</script>

methods: {
  startCountdown() {
    if (!this.intervalId) {
      this.intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.intervalId);
          this.countdown = 60; // 重置倒計(jì)時(shí)
          this.startCountdown(); // 重新啟動(dòng)計(jì)時(shí)器
        }
      }, 1000);
    }
  }
}

computed: {
  formattedCountdown() {
    let hours = Math.floor(this.countdown / 3600);
    let minutes = Math.floor((this.countdown % 3600) / 60);
    let seconds = this.countdown % 60;
    return `${hours}小時(shí)${minutes}分鐘${seconds}秒`;
  }
}

<button @click="stopCountdown">停止倒計(jì)時(shí)</button>

methods: {
  stopCountdown() {
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    const redirectAfterCountdown = () => {
      clearInterval(intervalId);
      router.push('/target-page');
    };

    return {
      redirectAfterCountdown
    };
  }
};