Vue3动态倒计时的代码实现

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>任务名称</th>
          <th>剩余时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>{{ task.name }}</td>
          <td>{{ task.remainingTime }} 秒</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted } from 'vue';

const tasks = reactive([
  { id: 1, name: '任务A', remainingTime: 60 },
  { id: 2, name: '任务B', remainingTime: 120 },
  { id: 3, name: '任务C', remainingTime: 180 },
]);

let intervalId;

onMounted(() => {
  intervalId = setInterval(() => {
    tasks.forEach(task => {
      if (task.remainingTime > 0) {
        task.remainingTime -= 1;
      }
    });
  }, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 审核时间列 -->
      <el-table-column
        label="审核时间"
        align="center"
        prop="appointmentReviewTime"
        :formatter="dateFormatter"
        width="170px"
      />

      <!-- 还柜时间列 -->
      <el-table-column
        label="还柜时间"
        align="center"
        prop="appointmentEndTime"
        :formatter="dateFormatter"
        width="170px"
      />

      <!-- 倒计时列 -->
      <el-table-column label="倒计时" align="center" width="170px">
        <template #default="scope">
          <span>{{ formatCountdown(scope.row.appointmentEndTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    // 表格数据，appointmentEndTime 是固定的时间
    const tableData = ref([
      {
        appointmentReviewTime: '2024-09-20 12:00:00',
        appointmentEndTime: '2024-09-20 14:00:00' // 固定时间
      },
      {
        appointmentReviewTime: '2024-09-21 15:00:00',
        appointmentEndTime: '2024-09-21 17:00:00' // 固定时间
      }
    ]);

    // 倒计时格式化函数
    const formatCountdown = (endTime) => {
      const now = new Date().getTime();
      const endTimestamp = new Date(endTime).getTime();
      const remainingTime = endTimestamp - now;

      // 如果已过期，返回 "已结束"
      if (remainingTime <= 0) {
        return '已结束';
      }

      const hours = Math.floor(remainingTime / (1000 * 60 * 60));
      const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

      return `${hours}小时 ${minutes}分钟 ${seconds}秒`;
    };

    // 使用 setInterval 动态更新倒计时
    const intervalId = ref(null);
    onMounted(() => {
      intervalId.value = setInterval(() => {
        // 强制触发视图更新
        tableData.value = [...tableData.value];
      }, 1000);
    });

    // 清除计时器
    onBeforeUnmount(() => {
      clearInterval(intervalId.value);
    });

    return {
      tableData,
      formatCountdown
    };
  }
};
</script>

const formatCountdown = (endTime) => {
  const now = new Date().getTime();
  const endTimestamp = new Date(endTime).getTime();
  const remainingTime = endTimestamp - now;

  // 如果已过期，返回 "已过期" 并标记为需要重新预约
  if (remainingTime <= 0) {
    return { text: '已过期', isExpired: true };
  }

  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  // 分时秒的格式化
  return { text: `${hours}小时 ${minutes}分钟 ${seconds}秒`, isExpired: false };
};

<el-table-column label="还柜剩余时间" align="center" width="155px">
  <template #default="scope">
    <span>{{ formatCountdown(scope.row.appointmentEndTime).text }}</span>
  </template>
</el-table-column>

<el-button
  link
  type="primary"
  @click="showRejectionReason(scope.row.id)"
  v-if="scope.row.appointmentEndTime !== null && formatCountdown(scope.row.appointmentEndTime).isExpired"
  v-hasPermi="['dangerous:appointment-commission:query']"
>
  重新预约
</el-button>

// 倒计时格式化函数
const formatCountdown = (endTime,id) => {
  const now = new Date().getTime();
  const endTimestamp = new Date(endTime).getTime();
  const remainingTime = endTimestamp - now;

  // 设置一个容忍时间范围（例如，1秒）
  const tolerance = 1000; // 1秒

  
  // 当时间接近到达时，发送请求到后端更新状态
  if (remainingTime <= tolerance && remainingTime > 0) {
    console.log(1); // 确保能够输出
  }

  // 如果已过期，返回 "已过期" 并标记为需要重新预约
  if (remainingTime < 0) {
    return { text: '已过期', isExpired: true };
  }

  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  // 分时秒的格式化
  return { text: `${hours}小时 ${minutes}分钟 ${seconds}秒`, isExpired: false };
};