uni |
您所在的位置：网站首页 › 取消十五分钟倒计时 › uni |
uni
|
uni-app实现订单支付倒计时，不会随着返回重新计时 uni-app实现订单支付倒计时最近开发时有一个倒计时功能，一开始使用uni-app中自带的uni-countdown倒计时，可以实现普通倒计时，但是并不能满足需求根据订单支付时间倒计时10分钟，每次刷新会重新计时，为了解决这个问题我尝试将获得的支付时间传入，取支付后的第十分钟作为截止时间。 获取下单时间template中写好一个定时器： 之后取消item.orderStatu == 1是待支付的状态，:show-day="false"表示不显示天数，timeupSecond是被绑定的时间值。 特别注意初始化timeupSecond时必须： timeupSecond:null, 定时器方法 // 倒计时 timeup(createTime) { var that = this; /**setInterval间歇调用 */ that.timer = setInterval(function () { //订单下单时间 var buy_time = createTime; //计算剩余时间 var time = (new Date(buy_time).getTime() + 10* 60 * 1000) - (new Date().getTime()); if(time>0){ //计算剩余的分钟 var minutes = parseInt(time / 1000 / 60 % 60, 10); //计算剩余的秒数 var seconds = parseInt(time / 1000 % 60, 10); that.timeupSecond=parseInt(time / 1000); // console.log(that.timeupSecond) //判断分钟和秒数小于10要在前面加个0. if(minutes seconds = '0' + seconds; } var timer = minutes + ":" + seconds; } }, 1000); if(that.timeupSecond==0) { uni.showToast({ title: '时间到' }) this.getOrderPage() } },timeup(createTime)里的createTime是从订单信息中获取的下单时间； new Date(buy_time).getTime() + 10* 60 * 1000是设置倒计时的截止时间为下单10分钟后； timeupSecond把时间转化成我需要的时间格式 如图为最终效果： 刷新或退出页面重新进入并不会重新倒计时，会一直到截止时间该倒计时样式会消失 |
【本文地址】
今日新闻 |
推荐新闻 |