vue组件 订单支付15分钟倒计时

vue组件 订单支付15分钟倒计时//支付倒计时ComputetTime(data){letst=data.currentTime.replace(/\-/g,”/”),//当前服务器时间ct=data.formatCreateTime.replace(/\-/g,”/”);//创建订单时间letts=newDate(st).getTime…

大家好,又见面了,我是你们的朋友全栈君。

//支付倒计时
    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) 即可

转载于:https://www.cnblogs.com/jrg-Archer/p/8385898.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/138796.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 差模信号和共模信号彻底理解_形容理解的不全面

    差模信号和共模信号彻底理解_形容理解的不全面前言AOP英文名为AspectOrientedProgramming,意为面向切面编程,通过预编译方式和运行期间动态代理实现程序功能统一维护的一种技术。AOP是OOP的延续,是Spring框架中的一个重要内容,利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。通过以上定义似乎还是不能理解AOP到底是什么,下面通过一个现实中的实例来说明。先看一下传统程序的流程,比如银行系统会有一个取款流程我们可以把方框里的流程

    2022年8月11日
    8
  • 深入了解ZooKeeper(一)

    1.内容思维导图2.分布式协调技术在进程间通讯中为了防止资源的竞争和抢占,我们有很多方法(如原子函数,互斥锁,事件,信号等)去实现临界资源的有序访问。那么处于分布式的环境中时,我们又该如何去处

    2021年12月28日
    61
  • 【Mac 教程系列第 10 篇】如何在 Mac 上破解带有密码的 ZIP 压缩文件[通俗易懂]

    【Mac 教程系列第 10 篇】如何在 Mac 上破解带有密码的 ZIP 压缩文件[通俗易懂]如何在Mac上破解带有密码的ZIP压缩文件。下载fcrackzip

    2022年5月30日
    192
  • Java程序员常用软件

    Java程序员常用软件目录1、IDE2、应用服务器3、分布式版本控制4、项目管理5、数据库管理工具6、Web服务器7、接口测试工具8、SSH工具9、抓包工具10、其他一些软件工欲善其事必先利其器,作为有多年开发经验的Java程序员,应该都会有一些常用的软件来辅助自己的工作,下面分享从业几年来一直在用的一些软件。1、IDEEclipseEclipse是一…

    2022年7月8日
    128
  • 28.多表查询——跨关联关系的多表查询

    28.多表查询——跨关联关系的多表查询多表查询—跨关联关系的查询**Django提供一种强大而又直观的方式来“处理”查询中的关联关系,它在后台自动帮你处理JOIN。若要跨越关联关系,只需使用关联的模型字段的名称,并使用双下划线分隔,直至你想要的字段:**上实战训练——更直观理解:(得到的都是QuerySet型数据!)fromdjango.httpimportHttpResponsefrom.modelsimportDepartment,Student,Course,Stu_detaildefadd_u

    2022年5月31日
    45
  • docker(1)下载安装for mac[通俗易懂]

    docker(1)下载安装for mac[通俗易懂]前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

    2022年7月30日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号