一个函数解决订单列表所有倒计时!
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为假)

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