欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年08月16日 09:55:43   作者:Jiang_JY  
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下

需求

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

實(shí)現(xiàn)

思路:

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

代碼實(shí)現(xiàn):

data(){
	return {
		minutes: '', //倒計(jì)時(shí)分鐘
		seconds: '', //倒計(jì)時(shí)秒
		isEnd: false, //支付超時(shí)
	}
}
methods: {
        // 倒計(jì)時(shí)
        countDown(){    
        	// 當(dāng)前時(shí)間
            let nowTime = new Date()
            // 獲取創(chuàng)建訂單15分鐘后的時(shí)間,this.payForm.create_time:訂單創(chuàng)建時(shí)間
            let endTime = new Date(this.payForm.create_time);
            endTime.setMinutes(endTime.getMinutes() + 15) // 結(jié)束時(shí)間,獲取創(chuàng)建訂單15分鐘后的時(shí)間
            // 兩個(gè)日期相差的時(shí)間戳,以毫秒為單位(1000ms = 1s)
            let totalTime = endTime - nowTime
            // 結(jié)束時(shí)間大于現(xiàn)在的時(shí)間
            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
            }  
}

拓展

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

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

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

相關(guān)文章

  • Vue使用Ref跨層級獲取組件的步驟

    Vue使用Ref跨層級獲取組件的步驟

    這篇文章主要介紹了Vue使用Ref跨層級獲取組件的步驟,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2021-01-01
  • Vue實(shí)現(xiàn)數(shù)據(jù)請求攔截

    Vue實(shí)現(xiàn)數(shù)據(jù)請求攔截

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)請求攔截,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例

    vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例

    這篇文章主要為大家介紹了vue實(shí)現(xiàn)excel文件的導(dǎo)入導(dǎo)出實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • vue中keep-alive、activated的探討和使用詳解

    vue中keep-alive、activated的探討和使用詳解

    這篇文章主要介紹了vue中keep-alive、activated的探討和使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue組件如何自動按需引入詳析

    Vue組件如何自動按需引入詳析

    剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動按需引入的相關(guān)資料,需要的朋友可以參考下
    2021-12-12
  • element使用自定義icon圖標(biāo)的兩種解決方式

    element使用自定義icon圖標(biāo)的兩種解決方式

    因?yàn)榘惭b原型圖設(shè)計(jì)實(shí)現(xiàn)頁面,在element自帶的圖標(biāo)庫好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下
    2022-07-07
  • vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件詳細(xì)教程

    vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件詳細(xì)教程

    在項(xiàng)目開發(fā)中需要使用vue實(shí)現(xiàn)tab頁簽切換功能,所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼

    Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼

    這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼,文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下
    2018-04-04
  • vue打包部署到springboot并通過tomcat運(yùn)行的操作方法

    vue打包部署到springboot并通過tomcat運(yùn)行的操作方法

    這篇文章主要介紹了vue打包部署到springboot并通過tomcat運(yùn)行的操作方法,本文通過實(shí)例圖文并茂的形式給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-05-05
  • 關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)

    關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)

    這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評論