微信小程序多条订单倒计时显示

最新推荐文章于 2024-06-07 16:35:02 发布
最新推荐文章于 2024-06-07 16:35:02 发布
阅读量949 收藏 12
点赞数 3
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45472548/article/details/108541903
版权

操作步骤：
1、获取订单下单时间戳与订单限制付款时间，如：订单在60分钟会自动取消（与分钟为举例）
限制时间戳=获取订单下单时间戳+订单限制付款时间（分钟）*60;
把限制时间戳转为时间格式，方面js统一
2、用后台传过来的时间转为时间戳 -当前时间判断是否大于0，如果小于0，代表过期
注意：苹果手机不兼容时间“-”格式，要换成“/”格式，如：new Date(‘2018-09-03 15:46:13’.replace(/-/g,"/"))！！时间戳：new Date(‘2018-09-03 15:46:13’.replace(/-/g,"/")).getTime()

代码如下：
效果图：
在这里插入图片描述


var all_timer; //全部订单的定时器
var pay_timer; //待付款的定时器
Page({

  /**
   * 页面的初始数据
   */
  data: {
    headList: ['全部', '待付款', '待提货'],

     allList: [{
        createtime: "2019-12-17 15:27:51.0",
        exclostime: "2020-12-17 16:27:51",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217636",
        num: "1",
        orgprice: "2000.00",
      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000"
      },
      {
        createtime: "2019-12-17 14:16:56.0",
        exclostime: "2020-12-17 15:16:56",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217628",
        num: "1",
        orgprice: "2000.00",
        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000",
      },
      {
        createtime: "2019-12-17 14:16:48.0",
        exclostime: "2019-12-17 15:16:48",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217627",
        num: "1",
        orgprice: "2000.00",
        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000",
      },
      {
        createtime: "2019-12-17 14:16:42.0",
        exclostime: "2020-12-17 15:16:42",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217625",
        num: "1",
        orgprice: "2000.00",
        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000",
      },
    ],
    payList: [{
        createtime: "2019-12-17 15:27:51.0",
        exclostime: "2020-12-17 16:27:51",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217636",
        num: "1",
        orgprice: "2000.00",
      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000"
      },
      {
        createtime: "2019-12-17 14:16:56.0",
        exclostime: "2020-12-17 15:16:56",
        goodsdesc: "农家土鸡蛋",
        goodsname: "农家土鸡蛋",
        id: "od191217628",
        num: "1",
        orgprice: "2000.00",
        pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
        replacecash: "10",
        state: "02",
        tkamount: "500.00",
        transamt: "1.00",
        type: "3",
        typeid: "tktg191212000"
      },
    ],
    bringList: [{
      createtime: "2019-12-16 20:45:19.0",
      exclostime: "2020-12-16 21:45:19",
      goodsdesc: "农家土鸡蛋",
      goodsname: "农家土鸡蛋",
      id: "od191216577",
      num: "1",
      orgprice: "2000.00",
      pictureurl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576582226487&di=4c8436594e96a02b48d6d73706d52695&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F24%2F014a98260eb4f6599775e39033e31893.jpg%2521%2Ffwfh%2F804x618%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
      replacecash: "10",
      state: "03",
      tkamount: "500.00",
      transamt: "1.00",
      type: "3",
      typeid: "tktg191212000"
    }, ],
    actEndTimeList: [],

 

  },
  time_format: function(param) {
    return param.substring(0, 4) + '-' + param.substring(4, 6) + '-' + param.substring(6, 8) + ' ' + param.substring(8, 10) + ':' + param.substring(10, 12) + ':' + param.substring(12, 14)
  },
  onLoad: function(options) {
    var ts = this;
    if (options.tabnum) {
      ts.setData({
        tabnum: options.tabnum
      })
    }

    ts.allListDraw();
    ts.payListDraw();
    // ts.bringListDraw();

  },



//所有订单页面
  allListDraw() {
    var ts = this;

    all_timer && clearInterval(all_timer);
    all_timer = setInterval(function() {
      ts.changeTime(ts.data.allList, "0")
    }, 1000);

  },
  // 待付款页面
  payListDraw() {
    var ts = this;


    pay_timer && clearInterval(pay_timer);

    pay_timer = setInterval(function() {
      ts.changeTime(ts.data.payList, "1")
    }, 1000);

  },
  
  changeTime: function(param, type) {
    let endTimeList = [];
    // 将活动的结束时间参数提成一个单独的数组，方便操作
    // param.forEach(o => { endTimeList.push(o.exclostime) })
    // this.setData({ actEndTimeList: endTimeList });
    // 执行倒计时函数
    this.countDown(param, type);
  },




  countDown(param, type) { //倒计时函数
    // 获取当前时间，同时得到活动结束时间数组
   // let newTime = new Date().getTime(); 苹果手机不兼容，换成Y/m/d  H:i:s
   var date = new Date();
      let Y = date.getFullYear() + '/'
     let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
     let D = date.getDate()>9?date.getDate() + ' ':'0' + date.getDate() + ' ';
     let h = date.getHours()>9?date.getHours() + ':':'0' + date.getHours() + ':';
     let m = date.getMinutes()>9?date.getMinutes() + ':':'0' + date.getMinutes() + ':';
     let s = date.getSeconds()>9?date.getSeconds():'0' + date.getSeconds();
     
     var newTime=Y + M + D + h + m + s;
     newTime=new Date(newTime).getTime();
    let endTimeList = param;
    let countDownArr = [];

    // 对结束时间进行处理渲染到页面
    endTimeList.forEach(o => {
      let endTime = new Date(o.exclostime.replace(/-/g,"/")).getTime();  //时间Y-m-d  H:i:s苹果不兼容，换成Y/m/d  H:i:s
      let obj = null;
      // 如果活动未结束，对时间进行处理
      if (endTime - newTime > 0) {
        let time = (endTime - newTime) / 1000;
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24));
        let hou = parseInt(time % (60 * 60 * 24) / 3600);
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);

        o.day = this.timeFormat(day);
        o.hou = this.timeFormat(hou);
        o.min = this.timeFormat(min);
        o.sec = this.timeFormat(sec);

      } else { //活动已结束，全部设置为'00'
        o.day = "00";
        o.hou = "00";
        o.min = "00";
        o.sec = "00";

      }
    })
    // 渲染，然后每隔一秒执行一次倒计时函数
    if (type == "1") {
      this.setData({
        payList: endTimeList
      })
    } else if (type == "0") {
      this.setData({
        allList: endTimeList
      })
    }
  },
  timeFormat(param) { //小于10的格式化函数
    return param < 10 ? '0' + param : param;
  },

 
})

如果想要单条数据倒计时，把里面遍历取消，并且不要那么多可能的条件，后续会补充。。。。，最后感谢那位大佬的帮助，代码是学习他的，记录一下自己学习，谢谢

码农PHP666
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序：批量订单倒计功能的实现
semoon的博客
12-17 1049
微信小程序：批量订单倒计时功能的设计与实现需要满足的基本需求一.订单模块分为 全部---待付款---待提货1.效果图二.全部订单列表中，只倒计时“待付款”状态的订单三.待付款的订单，当倒计时结束时，置订单状态为“已过期” 需要满足的基本需求 一.订单模块分为 全部—待付款—待提货 1.效果图 二.全部订单列表中，只倒计时“待付款”状态的订单 三.待付款的订单，当倒计时结束时，置订单状态为“已过期...
微信小程序实现订单倒计时
10-16
主要为大家详细介绍了微信小程序实现订单倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序实现订单倒计时功能
12-09
最近项目遇到了 一个小问题，当订单需要支付的时候，超过指定时间，自动关闭这个订单，未到达订单结束时间时，需要显示订单还有多久关闭, 如下图： 写出的这个方法支持多个对象，看到技术群有很多人问这个问题，而没有人回答，决定把这个解决方案贡献出来（不知道算不算好的解决方案） 我的解决方案是: 后台给出订单的结束时间，然后再去请求服务器当前的时间，互相转换成时间戳，然后相减 得出的结果是 xxx毫秒 然后 / 1000 就是真正的相差时间了。 JS文件 page({ data: { }, onLoad: function(){ var that = this; // this 的指向性问题
微信小程序下单倒计时设计，前端设计方案思路
最新发布
rnnf_yyds的博客
06-07 783
在后端中比如一个订单生成后，那么在C端用户下单之后跳转到另外一个界面这个时候倒计时该如何设计呢？
微信小程序之订单倒计时实现
coldriversnow的专栏
04-06 2198
倒计时 之前在做一个有拼团功能项目的时候遇到过倒计时的问题，由于当时技术不熟在这方面耽搁了好些时间，所以这里整理出来希望能为后来人提供些许启发。 1.实现思路： 求出发起拼团时间与拼团结束时间的时间差 再将时间差格式化得到我们想要的格式如： 时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数，让这个函数每隔一秒执行一次。 效果图： 2.实现中的难点 若是要实现单个倒计时如60s发送验证码倒不是很难，难的是多条倒计时。 不同的订单下单时间是不一样的时间差ti
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够...
微信小程序-拼图游戏，绘图API-拼图
04-24
微信小程序是一种轻量级的应用开发平台，由腾讯推出，它允许开发者通过JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）来创建功能丰富的移动应用。在这个项目中，我们聚焦于“微信小程序-拼图...
基于微信小程序的论坛和答题游戏
04-21
总之，这个项目涵盖了微信小程序的基础开发、数据管理、用户交互等多个方面，对于初学者来说，是一个全面了解和实践小程序开发的好机会。在实际操作中，你不仅会学到技术，还能提升解决问题和项目管理的能力。
微信小程序开发-工具类-画布：时钟案例源码.zip
08-15
通过这个时钟案例，开发者可以学习到如何将实际功能（如计时）与Canvas绘图相结合，以及如何利用微信小程序的生命周期和API实现动态效果。同时，这也是对JavaScript基础、时间和日期处理、图形绘制能力的综合锻炼。...
微信小程序实现单个或多个倒计时功能
01-18
微信小程序 实现单个/多个倒计时显示 单个倒计时 多个倒计时 思路：首先获取到每个倒计时的结束时间，然后把结束时间跟当前时间转换成时间戳，结束时间减去当前时间再除以1000（因为时间戳是毫秒级）就是该结束时间距离当前时间的秒数了，然后根据公式计算出时分秒，最后使用定时器每秒跑一次就实现成功啦~ 两种倒计时思路差不多，多个倒计时多了遍历数组步骤，遍历拿到数组中每个对象结束时间来计算时间 好啦！说完思路先上效果图看看 单个倒计时 上代码，上代码！！！重点来啦 wxml: // 单个倒计时-----wxml <view class=countdown> <view class=i
微信小程序完整源码，购物车，个人中心，分销，多店，商品分类等功能完整。
08-08
微信小程序完整源码，购物车，个人中心，分销，多店，商品分类等功能完整。
微信小程序小技巧系列《十二》支付倒计时效果，滑动删除效果 ... ...
03-29
本系列为小技巧或知识点聚合，如果你想看更多相关内容，请在本系列文章的相关文章内查看： 一：支付倒计时 作者：莫兰迪不会没有瓶子，来自授权地址 (此图片来源于网络，如有侵权，请联系删除! ) 由于web 经验弱爆- -  一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- -  我居然忽略了生命周期，生命周期+线程不就完全OK吗～  事实证明，线程还是王道啊，一开始就应该这么搞嘛～ 度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练 思路： onLoad:function(options)调用倒计时方法函数 定义线程进行数据动
微信小程序——订单列表倒计时
飞龙在天
12-27 6878
       由于最近两三个月一直在做一个项目，导致这短时间也没有时间写博客，现在项目基本结束，下面就将项目中遇到的问题记录下，便于以后查阅方便，同时给需要的人一点思路        今天主要讲解下微信小程序中遇到的一个问题——订单列表中待支付订单的支付倒计时问题。废话不多说，先给出主要解决代码： /** * 未支付订单倒计时 */ countDown:function(...
微信小程序-支付倒计时
柠檬不萌
12-26 1万+
微信小程序 支付倒计时 看效果 由于web 经验弱爆- -  一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- - 我居然忽略了生命周期，生命周期+线程不就完全OK吗～ 事实证明，线程还是王道啊，一开始就应该这么搞嘛～ 度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练 思路： onLoad:
小程序待支付倒计时的实现
青红造了个大白之成长记
05-25 938
1、遵循框架taro语法 componentDidMount() { this.fetchInitData(); } fetchInitData = () => { let { id } = this.$router.params; console.warn('detail get id ', id) if (id) { this.props.dispatch({ type: 'order/personOr
小程序列表多个批量倒计时
热门推荐
ly2983068126的博客
12-22 1万+
修复更新-----2019-11-22 订单列表中倒计时-wxml <view wx:for="{{wearList.datetime}}" wx:for-item="item" wx:key="id"> <view class='dates'>{{item.difftime}}</view> </view> 在封装倒计时之前，需...
vue 列表倒计时
Salunone的博客
12-10 698
<div class=""> <div v-for="(item,index) in list" :key="index">{{item.countDownTime }}</div> </div> data(){ return { list: [{endTime:"2021-12-10 17:46:36"}, {endTime:"2021-12-12 16:06:36"}, {end...
小程序 订单倒计时系列
死肥仔Meiko
08-01 7747
  最近项目遇到了 一个小问题, 当订单需要支付的时候 , 超过指定时间  自动关闭这个订单, 未到达订单结束时间时 , 需要显示订单还有多久关闭, 如下图： 写出的这个方法支持多个对象, 看到技术群有很多人问这个问题  而没有人回答 , 决定把这个解决方案贡献出来(不知道算不算好得解决方案) 我的解决方案是: 后台给出订单的结束时间  然后再去请求服务器当前的时间  互相转换成时间戳 ...
微信小程序写一个倒计时
06-06
好的，以下是一个简单的微信小程序倒计时的示例代码： ```html <view>倒计时: {{countDown}}</view> ``` ```javascript Page({ data: { countDown: 60, // 初始倒计时时间 }, onLoad: function () { // 开始倒计时 this.startCountDown(); }, startCountDown: function () { var that = this; var countDown = that.data.countDown; var timer = setInterval(function () { if (countDown <= 0) { clearInterval(timer); that.setData({ countDown: 0 }); return; } countDown--; that.setData({ countDown: countDown }); }, 1000); } }) ``` 在这个示例中，我们首先在数据中定义了一个 `countDown` 变量，表示倒计时剩余的时间。然后，在页面加载时调用了 `startCountDown` 方法，开始倒计时。`startCountDown` 方法使用了 `setInterval` 定时器，每隔1秒更新一次倒计时时间。当倒计时时间为 0 时，清除定时器并停止倒计时。最后，我们在页面中显示倒计时时间。 需要注意的是，这个示例只是一个简单的倒计时功能，没有考虑到页面切换、后台运行等情况，实际应用中可能需要做更多的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值