vue中实现订单支付倒计时

需求

创建订单后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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/82509.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

后端开发12.商品模块

概述 简介 商品模块这个设计的非常复杂 效果图 数据库

FPGA原理与结构——ROM IP的使用与测试

一、前言 本文介绍Block Memory Generator v8.4 IP核 实现ROM,在学习一个IP核的使用之前,首先需要对于IP核的具体参数和原理有一个基本的了解,具体可以参考: FPGA原理与结构——块RAM(Block RAM,BRAM)http…

KUST_LI计算机视觉实验室服务器安装与管理

第一步:安装 Linux-Ubuntu系统 系统语言设置为英文 ENGLISH,防止系统 BUG;选择-清除整个磁盘并安装系统;设置用户名和密码,实验室统一其余全部默认设置 开机后设置磁盘挂载 在系统设置中找到 desk 打开,…

从零开始 Spring Cloud 12:Sentinel

从零开始 Spring Cloud 12:Sentinel 1.初识 Sentinel 1.1雪崩问题 1.1.1什么是雪崩问题 微服务中,服务间调用关系错综复杂,一个微服务往往依赖于多个其它微服务。 如图,如果服务提供者I发生了故障,当前的应用的部分…

简单认识Docker的资源控制

文章目录 一、CPU资源限制1.设置CPU使用率上限2.设置CPU资源占用比(设置多个容器才有效)3.设置容器与CPU绑核 二、内存资源限制三、对磁盘I/O配额的限制 一、CPU资源限制 1.设置CPU使用率上限 Linux通过CFS(Completely Fair Scheduler&#…

【jenkins】jenkins流水线构建打包jar,生成docker镜像,重启docker服务的过程,在jenkins上一键完成,实现提交代码自动构建的功能

【jenkins】jenkins流水线构建打包jar,生成docker镜像,重启docker服务的过程,在jenkins上一键完成,实现提交代码自动构建,服务重启,服务发布的功能。一键实现。非常的舒服。 1. 启动脚本 shell脚本 这是 s…

vue3 路由缓存问题

目录 解决问题的思路: 解决问题的方案: 1、给roter-view添加key(破坏复用机制,强制销毁重建) 2、使用beforeRouteUpdate导航钩子 3、使用watch监听路由 vue3路由缓存:当用户从/users/johnny导航到/use…

【王道-进程与线程】

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.0 引言No.1 进程的概念、组成、特征一、进程的概念二、进程的组成1、PCB进程控制块2、程序段/数据段 三、程序是如何运行的?四、进程的特征五、总结 No.2 进程的状态转换和组织一、进程的状态1、创建态、就绪态…

(牛客网)链表相加(二)

嗯哼~ 题目 描述 假设链表中每一个节点的值都在 0 - 9 之间,那么链表整体就可以代表一个整数。 给定两个这种链表,请生成代表两个整数相加值的结果链表。 数据范围:0 ≤ n,m ≤ 1000000,链表任意值 0 ≤ val ≤ 9 要求&#x…

c++优先级队列的模拟实现代码

了解: 1.优先队列是一种容器适配器,根据严格的弱排序标准,它的第一个元素总是它所包含的元素中最大的。 2. 类似于堆,在堆中可以随时插入元素,并且只能检索最大堆元素(优先队列中位于顶部的元素)。 3. 优先队列被实现为…

IDEA 如何制作代码补丁?IDEA 生成 patch 和使用 patch

什么是升级补丁? 比如你本地修复的 bug,需要把增量文件发给客户,很多场景下大家都需要手工整理修改的文件,并整理好目录,这个很麻烦。那有没有简单的技巧呢?看看 IDEA 生成 patch 和使用 patch 的使用。 介…

Ubuntu安装Apache+Php

环境:ubuntu 22.04 虚拟机 首先更新一下 sudo apt-get update sudo apt-get upgrade安装Apache2: sudo apt-get install apache2 输入y,继续。等着他恐龙抗浪抗浪的下载安装就好了 打开浏览器访问http://localhost/ 安装php: …

【Linux】进程信号篇Ⅰ:信号的产生(signal、kill、raise、abort、alarm)、信号的保存(core dump)

文章目录 一、 signal 函数:用户自定义捕捉信号二、信号的产生1. 通过中断按键产生信号2. 调用系统函数向进程发信号2.1 kill 函数:给任意进程发送任意信号2.2 raise 函数:给调用进程发送任意信号2.3 abort 函数:给调用进程发送 6…

【C语言】数组概述

🚩纸上得来终觉浅, 绝知此事要躬行。 🌟主页:June-Frost 🚀专栏:C语言 🔥该篇将带你了解 一维数组,二维数组等相关知识。 目录: 📘前言:&#x1f…

vue3+ts+vite使用el-breadcrumb实现面包屑组件,实现面包屑过渡动画

简介 使用 element-plus 的 el-breadcrumb 组件&#xff0c;实现根据页面路由动态生成面包屑导航&#xff0c;并实现面包屑导航的切换过渡动画 一、先看效果加粗样式 1.1 静态效果 1.2 动态效果 二、全量代码 <script lang"ts" setup> import { ref, watch…

JVM基础了解

JVM 是java虚拟机。 作用&#xff1a;运行并管理java源码文件锁生成的Class文件&#xff1b;在不同的操作系统上安装不同的JVM&#xff0c;从而实现了跨平台的保证。一般在安装完JDK或者JRE之后&#xff0c;其中就已经内置了JVM&#xff0c;只需要将Class文件交给JVM即可 写好的…

安装pyrender和OSMesa

1&#xff09;安装 pyrender Pyrender是一个基于OpenGL的库&#xff0c;可以加载和渲染三维网格、点云、相机等对象3。 pip install pyrender 2&#xff09;理解PyOpenGL和OSMesa的关系是: PyOpenGL是Python的OpenGL绑定库&#xff08;接口壳子&#xff09;,它提供了在Python中…

day9 STM32 I2C总线通信

I2C总线简介 I2C总线介绍 I2C&#xff08;Inter-Integrated Circuit&#xff09;总线&#xff08;也称IIC或I2C&#xff09;是由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备&#xff0c;是微电子通信控制领域广泛采用的一种总线标准。 它是同步通…

基于ACF,AMDF算法的语音编码matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .......................................................................... plotFlag …

day-25 代码随想录算法训练营(19)回溯part02

216.组合总和||| 思路&#xff1a;和上题一样&#xff0c;差别在于多了总和&#xff0c;但是数字局限在1-9 17.电话号码的字母组合 思路&#xff1a;先纵向遍历第i位电话号码对于的字符串&#xff0c;再横向递归遍历下一位电话号码 93.复原IP地址 画图分析&#xff1a; 思…