vue中实现订单支付倒计时

需求

创建订单后15分钟内进行支付，否则订单取消。

实现

思路：

获取订单创建时间、在创建时间的基础上增加15分钟作为结束时间（倒计时多久根据自己的实际需求，这里为15分钟），两时间戳相减获取间隔的毫秒数（ms，1s = 1000ms），然后利用 setInterval 每过一秒间隔时间 -1000，当间隔时间小于等于0时，倒计时结束支付超时，取消订单。

代码实现：

data(){
	return {
		minutes: '', //倒计时分钟
		seconds: '', //倒计时秒
		isEnd: false, //支付超时
	}
}
methods: {
        // 倒计时
        countDown(){    
            let createTime = new Date()  //开始时间（订单创建时间）
            let endTime = new Date(); 
            endTime.setMinutes(endTime.getMinutes() + 15) // 结束时间，获取创建订单15分钟后的时间

            // 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
            let totalTime = endTime - createTime

            let timer = setInterval(() => {
                if (totalTime >= 0) {
                    
                    //获取分钟数
                    let minutes = 
                        Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60);
                    //获取秒数
                    let seconds = 
                        Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60).toString().padStart(2, "0");;

                    this.minutes = minutes
                    this.seconds = seconds

                    totalTime -= 1000;
                    console.log(totalTime)
                } else {
                    clearInterval(timer); // 停止调用函数 
                    this.isEnd = true
                }
            }, 1000);
        },  
}

拓展

上面案例只需要进行分钟及秒的计算，倒计时时间长点的话可能会涉及到天数及小时数的计算，思路与上面案例相同，了解天数及小时数的时间戳转换公式即可，码代如下。

//totalTime: 时间间隔，单位ms
let totalTime = endTime - createTime
//获取天数
let day = Math.floor(totalTime / 1000 / 3600 / 24);
//获取小时数
let h = Math.floor((totalTime % (3600 * 24 * 1000)) / 1000 / 3600);