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

操作步骤：
1、获取订单下单时间戳与订单限制付款时间，如：订单在60分钟会自动取消（与分钟为举例）
限制时间戳=获取订单下单时间戳+订单限制付款时间（分钟）*60;
把限制时间戳转为时间格式，方面js统一
2、用后台传过来的时间转为时间戳 -当前时间判断是否大于0，如果小于0，代表过期
代码如下：
效果图：

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();
let endTimeList = param;
let countDownArr = [];

// 对结束时间进行处理渲染到页面
endTimeList.forEach(o => {let endTime = new Date(o.exclostime).getTime();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;
},

})
PHP：

微信小程序多条订单倒计时显示相关推荐

解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序转头条/抖音小程序的方法
很多公司都在做小程序,现在主流小程序有不少:微信小程序/头条小程序/百度小程序/支付宝小程序/QQ小程序...,很多公司为了方便开发都会采用taro或uni等开发方式,直接多端使用,但是对于小公司这些 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
wx2tt 微信小程序转头条小程序工具
wx2tt 微信小程序转头条小程序工具安装 npm i wx2tt -g 复制代码使用方法 wx2tt <path/to/wxapp> <path/to/ttapp> [- ...

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

微信小程序多条订单倒计时显示相关推荐

最新文章

热门文章