微信小程序订单倒计时

实现效果

实现关键：

***为每条数据计算倒计时

***确保每次回调订单列表时先清除定时器，否则会出现重复数据的情况

1、获取当前手机系统

onLoad(options) {let platform;wx.getSystemInfo({success: function (res) {platform = res.platform}});this.platform = platform
}onUnload: function () {clearInterval(this.data.timer);this.data.timer = null
},onHide() {clearInterval(this.data.timer);this.data.timer = null
},

2、处理订单列表数据

 getMyOrder(status) {let par = {}  //获取订单所需参数myOrderList(par).then(res => {wx.hideLoading()let orderList = this.data.orderList //订单列表数据if (res.data.content.length > 0) {orderList = orderList.concat(res.data.content)for (let i = 0; i < orderList.length; i++) {let inDate = orderList[i].deliveryTime; //入住时间let inNum = orderList[i].list[0].refundedNum; //入住天数if (platform == 'ios') {inDate = inDate.replace(/-/g, '/')}let outDate = utils.getAddDateTime(inDate, 0, 0, inNum)inDate = utils.getAddDateTime(inDate)orderList[i].inInfo = inDate.substring(0, 10) + ' 至 ' + outDate.substring(0, 10) + ' 共' + inNum + '晚'// orderList[i].countdown = this.countDown(orderList[i].updatedTime,orderList)}this.setData({orderList: orderList,pages: res.data.totalPages})if (status != '30') {  //用来判断当前查询状态，如果是全部订单或者待付款订单，进行倒计时处理，否则清除倒计时（可结合上边图片来看，根据自己接口数据对应的状态进行修改即可）this.countDown(res.data.content)} else {// 清除以后需要重新赋值this.setData({orderList: orderList,pages: res.data.totalPages})clearInterval(this.data.timer);}} else {// clearInterval(this.data.timer);}})},

3、处理每条数据对应的倒计时

 // 订单列表实现倒计时countDown: function () {let that = this,orderList = this.data.orderList// let num = 0;clearInterval(this.data.timer)that.data.timer = setInterval(function () {for (let i = 0; i < orderList.length; i++) {let orderStatus = orderList[i].orderStatus;if (orderStatus == '10') {  //如果此条数据是待支付的，则计算倒计时let createdTime = orderList[i].createdTimeif (that.platform == 'ios') {createdTime = createdTime.replace(/-/g, '/')}// 30分钟-半小时let tmp = 30 //自定义倒计时--时间let lastTime = new Date(new Date(createdTime).getTime() + (1 / 60) * tmp * 3600 * 1000)let nowTime = new Date()let flag = that.compareDate(lastTime, nowTime)if (flag > 0) {// console.log(createdTime,moment(lastTime).format('YYYY-MM-DD HH:mm:ss'))orderList[i].countdown = moment(flag).format('mm分钟ss秒')} else {delete orderList[i].countdown// 30分钟后自动取消未付款的点单--不确定需要需要这个操作// that.cancelOrderF(orderList[i])}}}that.setData({orderList})// num++}, 1000)},

4、计算时间差

 compareDate(date1, date2) {let tmp1 = date1.getTime();let tmp2 = date2.getTime();return tmp1 - tmp2},

=====辅助====utils

//日期计算
function getAddDateTime(date, addYear = 0, addMonth = 0, addDay = 0, addHour = 0, addMinute = 0, addSecond = 0) {var timestamp = Date.parse(date);var newTimestamp = timestamp + addDay * 24 * 60 * 60 * 1000;newTimestamp = newTimestamp + addHour * 60 * 60 * 1000;newTimestamp = newTimestamp + addMinute * 60 * 1000;newTimestamp = newTimestamp + addSecond * 1000;let newDate = new Date(newTimestamp);const year = newDate.getFullYear() + addYear;const month = newDate.getMonth() + addMonth + 1;const day = newDate.getDate();const hour = newDate.getHours();const minute = newDate.getMinutes();const second = newDate.getSeconds();return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}
module.exports = { getAddDateTime }

微信小程序订单倒计时相关推荐

微信小程序订单倒计时
话不多少直接上代码我的页面是有分页的分页的数据大家参考一下即可我的数组是多个的单个到倒计时大家调整一下数组即可 js const moment = require('../../utils/ ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序动态倒计时
微信小程序之倒计时插件 wxTimer 1.在全局app.js引入下载: wxTimer 然后把wxTimer文件放在js中 for (let i = 0; i < addEvaluate.l ...
微信小程序订单扫码结算的步骤
微信小程序订单扫码结算的步骤,在小程序结算中,如果用户下单后到店自提或货到付款的方式,这种情况用户可以提现下单或预定下单,下单成功后,用户到店里自提或等待商家配送到家,在收到订单产品之后,商家扫码用 ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...

微信小程序订单倒计时

微信小程序订单倒计时相关推荐

最新文章

热门文章