Vue实现订单支付倒计时功能
作者：Jiang_JY
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
需求
创建订单后15分钟内进行支付，否则订单取消。
实现
思路：
获取当前时间和支付超时时间（在创建时间的基础上增加15分钟即为超时时间，倒计时多久根据自己的实际需求，这里为15分钟），支付超时时间减去当前时间获取间隔的毫秒数（ms，1s = 1000ms），若为负数则表示订单超时，若为正数表示未超时，然后利用 setInterval 每过一秒间隔时间 -1000，当间隔时间小于等于0时，倒计时结束支付超时，取消订单。
代码实现：
data(){
return {
minutes: '', //倒计时分钟
seconds: '', //倒计时秒
isEnd: false, //支付超时
}
}
methods: {
// 倒计时
countDown(){
// 当前时间
let nowTime = new Date()
// 获取创建订单15分钟后的时间,this.payForm.create_time:订单创建时间
let endTime = new Date(this.payForm.create_time);
endTime.setMinutes(endTime.getMinutes() + 15) // 结束时间，获取创建订单15分钟后的时间
// 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
let totalTime = endTime - nowTime
// 结束时间大于现在的时间
if(totalTime>0){
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);
}else{
this.isEnd = true
}
}拓展
上面案例只需要进行分钟及秒的计算，倒计时时间长点的话可能会涉及到天数及小时数的计算，思路与上面案例相同，了解天数及小时数的时间戳转换公式即可，码代如下。
//totalTime: 时间间隔，单位ms let totalTime = endTime - createTime //获取天数 let day = Math.floor(totalTime / 1000 / 3600 / 24); //获取小时数 let h = Math.floor((totalTime % (3600 * 24 * 1000)) / 1000 / 3600);
到此这篇关于Vue实现订单支付倒计时功能的文章就介绍到这了,更多相关Vue订单支付倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！