一个函数解决订单列表所有倒计时!

2019-01-02  本文已影响0人  地铁站的风

需求:订单列表页,所有未付款订单显示倒计时 ,30分钟后自动解除

实现:一个容器 完成所有订单倒计时功能

第一步:创建容器

count_down  :剩余时间容器

Interval  :定时器容器

sign  : 为每个调用time方法的对象进行标记

容器

第二步:创建方法

start :传入的下单时间

length :当前定时器 与 剩余时间插入的位置

箭头处注意:如果使用注释的方法,定时器每秒改变数组的时候,视图是不会更新的。(此为JavaScript语言限制) ----------------------    此处需要使用splice,当数组改变时视图也会更新。

方法

第三步:将所有未付款订单传入方法中

sign  :从0开始标记(此标记渲染时极为重要)

调用

第四步:渲染

item.sign有值,则为标记订单,显示倒计时

<!-- 以下代码为v-for中代码-->

v-if=" "处注意:如果不加  item.sign === 0 的判定 ,下标为0的数据是不会渲染的。(0为假)

按标记渲染

第五步:自行判定倒计时结束时,向服务器发起请求结束订单


超时结束当前定时器
上一篇下一篇

猜你喜欢

热点阅读