//支付倒计时
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分钟倒计时的更多相关文章

  1. vue 15分钟倒计时

    HTML: <span>{{minute}}:{{second}}</span> script: 一          二 // 倒计时 num(n) { return n & ...

  2. mysql查超过15分钟未付款的订单,更新为失效状态

    个人打开自己的订单时,才检查超过15分钟未付款的订单, 暂不使用机器人,更新状态, Difference counter 差分计数器订单超过15分钟.mysql的时间戳差分比较 $sql =  TIM ...

  3. Vue 页面15分钟无操作时返回首页

    这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重 ...

  4. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  5. 10 分钟上手 Vue 组件 Vue-Draggable

    Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...

  6. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  7. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  8. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  9. ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!

    前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...

随机推荐

  1. cmd下查看应用端口情况

    在win10开始窗口右侧的空白处点击CMD,在上方弹出窗口中选择命令提示符,双击进入 在弹出命令界面中,输入netstat -na命令后回车,如下图所示,可以看到所有目前打开的端口 如果要查看打开端口 ...

  2. day67 crm(4) stark组件的增删改 以及 model_from使用和from组件回顾

        前情提要:Django  stark 组件开发的 增删改,  model_form组件的使用 form组件的回顾 一:list_display_link  创建 功能描述:   使包含的字段能 ...

  3. SpringBoot入门(IDEA篇)(一)

    一.SpringBoot简介 开发团队:Pivotal团队 主要目的:简化新Spring应用的初始搭建以及开发过程. 秉持理念:约定优于配置.(该框架使用了特定的方式来进行配置,从而使开发人员不再需要 ...

  4. ubuntu 下更新pip后发生 ImportError: cannot import name 'main'的问题解决

    今天刚使用ubuntu 由于安装的是pip 8的版本,我感觉pip版本有些低就随手将将pip更新了,刚新到pip 10版本的,没想到刚更新完就报错了, 发生 ImportError: cannot i ...

  5. 【数组】Jump Game

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...

  6. WebBench压力测试工具

    Webbench是有名的网站压力测试工具,它是由 Lionbridge公司(http://www.lionbridge.com)开发. Webbech能测试处在相同硬件上,不同服务的性能以及不同硬件上 ...

  7. Chapter 3 Phenomenon——13

    "Bella, I'm so sorry!""I'm fine, Tyler — you look awful, are you all right?" “Be ...

  8. 【Express系列】第2篇——主程序的改造

    上一篇对项目的目录结构和 app.js 等一些文件做了一些改造,然而那只是开始. 接下来将做进一步的改造和完善. 我们先看看几个主要的脚本文件,下面的代码是我稍微修改过并添加注释的,方便理解每句代码的 ...

  9. php的isset()和empty()区别

    转载:http://www.cnblogs.com/ndxsdhy/archive/2011/04/02/2003193.html 1.isset()函数 一般用来检测变量是否设置 (是否已经赋值) ...

  10. 【云+社区极客说】新一代大数据技术:构建PB级云端数仓实践

    本文来自腾讯云技术沙龙,本次沙龙主题为构建PB级云端数仓实践 在现代社会中,随着4G和光纤网络的普及.智能终端更清晰的摄像头和更灵敏的传感器.物联网设备入网等等而产生的数据,导致了PB级储存的需求加大 ...