当前位置：首页 > news >正文

uni-app vue3 实现72小时倒计时功能

news 来源：原创 2025/4/29 5:28:22

功能介绍，数组项有一个下单时间，比如今天下单在72小时内可以继续支付，超过则默认取消订单

在这里插入图片描述

页面按钮处加上倒计时

<!-- 倒计时 -->
<text v-if="item.timeLeft > 0">{{ formatTime(item.remaining) }}</text>

逻辑处理

// 第一步 处理接口返回的数据 原本是没有倒计时 remaining这个值的 我们根据状态给数组项加上
console.log("列表数据", res);
res.forEach((item) => {if (item.actions.pay) {const createTime = new Date(item.create_time).getTime(); // 下单时间处理item.endTime = createTime + 72 * 3600 * 1000; // 计算72小时截止时间item.remaining = 0; // 剩余时间（毫秒）item.timeLeft = true; // 倒计时状态}
})
updateAllTimers();// 第二步 统一定时器
let timer;// 第三步 更新所有倒计时
const updateAllTimers = () => {const now = Date.now();listData.value.forEach(item => {const diff = item.endTime - now;item.remaining = diff;item.timeLeft = diff > 0;});
};// 第四步 时间格式化函数
const formatTime = (milliseconds) => {if (milliseconds <= 0) return '00:00:00';const totalSeconds = Math.floor(milliseconds / 1000);const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');const seconds = (totalSeconds % 60).toString().padStart(2, '0');return `${hours}:${minutes}:${seconds}`;
};// 生命周期管理
onMounted(() => {timer = setInterval(updateAllTimers, 1000);
});// 卸载
onUnmounted(() => {clearInterval(timer);
});