vue组件 订单支付15分钟倒计时
//支付倒计时
ComputetTime(data) {
let st = data.currentTime.replace(/\-/g, "/"),//当前服务器时间
ct = data.formatCreateTime.replace(/\-/g, "/");//创建订单时间
let ts = new Date(st).getTime(),
tc = new Date(ct).getTime();
let cm = 15 * 60 * 1000 - (ts - tc);
this.runBack(cm);
},
runBack(cm) {
if (cm > 0) {
cm > 60000
? (this.rocallTime =
(new Date(cm).getMinutes() < 10
? "0" + new Date(cm).getMinutes()
: new Date(cm).getMinutes()) +
":" +
(new Date(cm).getSeconds() < 10
? "0" + new Date(cm).getSeconds()
: new Date(cm).getSeconds()))
: (this.rocallTime =
"00:" +
(new Date(cm).getSeconds() < 10
? "0" + new Date(cm).getSeconds()
: new Date(cm).getSeconds()));
let _msThis = this;
setTimeout(function() {
cm -= 1000;
_msThis.runBack(cm);
}, 1000);
} else {
this.changeOrderState();//调用改变订单状态接口
}
},
模板template:
<div id="recomTime" v-show="orderinfo.orderState=='1'">剩余支付时间 {{rocallTime}}</div>
当 this.orderinfo.orderState=='1' 调 this.ComputetTime(data) 即可
vue组件 订单支付15分钟倒计时的更多相关文章
- vue 15分钟倒计时
HTML: <span>{{minute}}:{{second}}</span> script: 一 二 // 倒计时 num(n) { return n & ...
- mysql查超过15分钟未付款的订单,更新为失效状态
个人打开自己的订单时,才检查超过15分钟未付款的订单, 暂不使用机器人,更新状态, Difference counter 差分计数器订单超过15分钟.mysql的时间戳差分比较 $sql = TIM ...
- Vue 页面15分钟无操作时返回首页
这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重 ...
- canvas实现倒计时效果示例(vue组件内编写)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...
随机推荐
- 使用泛型SwingWorker与EDT事件分发线程保持通讯
为什么要使用SwingWorker 在swing开发中,如果一个应用程序,执行一些任务,需要大量的时间来完成,比如下载一个大文件或执行一个复杂的数据库查询. 我们假设这些任务是由用户使用一个按钮触发的 ...
- 【DB2】SQL0437W Performance for this complex query may be sub-optimal
参考链接 Technote (troubleshooting) Problem(Abstract) Error [IBM][CLI Driver][DB2/6000] SQL0437W Perform ...
- Spring Boot 项目发布到 Tomcat 服务器
第 1 步:将这个 Spring Boot 项目的打包方式设置为 war.<packaging>war</packaging> SpringBoot 默认有内嵌的 tomcat ...
- javascript闭包获取table中tr的索引 分类: JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏
使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 忘记mysql密码的解决办法--针对windows系统
C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.5\bin C:\Program Files\MySQL\MySQ ...
- 如何使用Android Studio提高App质量
Android Studio作为现在谷歌主推的Android开发功能,除了提供了大量的功能帮助快速开发Android代码之外,在代码质量控制方面也提供了很多工具,这些工具都放在Analyze菜单下, ...
- centos6.7 安装 virtualBox 再安装 centos 7
Tag: 黄色为自己实际情况需要设置的部分,绿色部分为虚拟机名称(自定义) 1.创建虚拟机VBoxManage createvm --name centos7 --ostype Linux26_64 ...
- VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题 :没有显示共享文件夹
症状:主要表现在Win7中用VM11安装的Ubuntu14.04中,安装完自带的VMware Tools之后,/mnt/hgfs 中没有前面已经设置好的共享文件夹. 仔细查看了安装过程,发现在 ...
- 恶性bug解决,Encoding 1252 data could not be found. Make sure you have correct international codeset assembly installed and enabled
百度是没有的,google了下 这句话的意思是编码1252没找到,确保程序及是国际化格式 发生在我使用unity读取xlsx文件,在编辑器运行正常,但是发布出来不正常,报错 解决方案: 链接:http ...
- 全局描述符表(GDT)——《x86汇编语言:从实模式到保护模式》读书笔记09
在进入保护模式之前,我们先要学习一些基础知识.今天我们看一下全局描述符表(Global Descriptor Table, 简称GDT). 同实模式一样,在保护模式下,对内存的访问仍然使用段地址加偏移 ...