倒计时30分钟

勒布朗-前端

于 2024-02-07 01:00:00 发布

阅读量535

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_51225684/article/details/135968710

版权

文章介绍了如何在Vue中使用`ref`和自定义函数实现支付倒计时功能，包括获取当前时间和创建订单时间的计算，以及定时更新显示的剩余时间并触发状态变化的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { ref } from "vue";

export const useTime = () => {
    const recallTime = ref("");

    //支付倒计时
    const ComputeTime = (data: { currentTime: string; formatCreateTime: string }) => {
        let st = data.currentTime.replace(/-/g, "/"),
        //当前服务器时间 
        ct = data.formatCreateTime.replace(/-/g, "/");
        //创建订单时间 
        let ts = new Date(st).getTime(), tc = new Date(ct).getTime();
        let cm = 30 * 60 * 1000 - (ts - tc); runBack(cm);
    };

    const runBack = (cm: number) => {
        if (cm > 0) {
            cm > 60000 ? (recallTime.value = (new Date(cm).getMinutes() < 10 ? "0" + new Date(cm).getMinutes : 
            new Date(cm).getMinutes()) + ":" + (new Date(cm).getSeconds() < 10 ? "0" + new Date(cm).getSeconds()
             : new Date(cm).getSeconds())) : (recallTime.value = "00:" + (new Date(cm).getSeconds() < 10 ? "0" + new Date(cm).getSeconds() 
             : new Date(cm).getSeconds())); 
              setTimeout(function () { cm -= 1000; runBack(cm); 
                }, 1000);
        } else { 
            // changeOrderState();
            //调用改变订单状态接口 
        } 
    };
};