Vue實現(xiàn)訂單支付倒計時功能

更新時間：2023年08月16日 09:55:43 作者：Jiang_JY

這篇文章主要給大家介紹了Vue實現(xiàn)訂單支付倒計時功能,倒計時這要運用在創(chuàng)建訂單后15分鐘內(nèi)進行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細講解,需要的朋友可以參考下

需求

創(chuàng)建訂單后15分鐘內(nèi)進行支付，否則訂單取消。

實現(xiàn)

思路：

獲取當前時間和支付超時時間（在創(chuàng)建時間的基礎上增加15分鐘即為超時時間，倒計時多久根據(jù)自己的實際需求，這里為15分鐘），支付超時時間減去當前時間獲取間隔的毫秒數(shù)（ms，1s = 1000ms），若為負數(shù)則表示訂單超時，若為正數(shù)表示未超時，然后利用 setInterval 每過一秒間隔時間 -1000，當間隔時間小于等于0時，倒計時結(jié)束支付超時，取消訂單。

代碼實現(xiàn)：

data(){
	return {
		minutes: '', //倒計時分鐘
		seconds: '', //倒計時秒
		isEnd: false, //支付超時
	}
}
methods: {
        // 倒計時
        countDown(){    
        	// 當前時間
            let nowTime = new Date()
            // 獲取創(chuàng)建訂單15分鐘后的時間,this.payForm.create_time:訂單創(chuàng)建時間
            let endTime = new Date(this.payForm.create_time);
            endTime.setMinutes(endTime.getMinutes() + 15) // 結(jié)束時間，獲取創(chuàng)建訂單15分鐘后的時間
            // 兩個日期相差的時間戳，以毫秒為單位（1000ms = 1s）
            let totalTime = endTime - nowTime
            // 結(jié)束時間大于現(xiàn)在的時間
            if(totalTime>0){
                let timer = setInterval(() => {
                    if (totalTime >= 0) {
                        //獲取分鐘數(shù)
                        let minutes = 
                            Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60);
                        //獲取秒數(shù)
                        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); // 停止調(diào)用函數(shù) 
                        this.isEnd = true
                    }
                }, 1000); 
            }else{
                this.isEnd = true
            }  
}

拓展

上面案例只需要進行分鐘及秒的計算，倒計時時間長點的話可能會涉及到天數(shù)及小時數(shù)的計算，思路與上面案例相同，了解天數(shù)及小時數(shù)的時間戳轉(zhuǎn)換公式即可，碼代如下。

//totalTime: 時間間隔，單位ms
let totalTime = endTime - createTime
//獲取天數(shù)
let day = Math.floor(totalTime / 1000 / 3600 / 24);
//獲取小時數(shù)
let h = Math.floor((totalTime % (3600 * 24 * 1000)) / 1000 / 3600);

到此這篇關于Vue實現(xiàn)訂單支付倒計時功能的文章就介紹到這了,更多相關Vue訂單支付倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: