Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
需求
創(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實(shí)現(xiàn)數(shù)據(jù)請求攔截
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)請求攔截,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例
這篇文章主要為大家介紹了vue實(shí)現(xiàn)excel文件的導(dǎo)入導(dǎo)出實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07vue中keep-alive、activated的探討和使用詳解
這篇文章主要介紹了vue中keep-alive、activated的探討和使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07element使用自定義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-07vue實(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-11Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼,文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04vue打包部署到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)用后端接口),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07