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

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

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

第一步:创建容器

count_down  :剩余时间容器

Interval  :定时器容器

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


容器

第二步:创建方法

start :传入的下单时间

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

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


方法

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

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


调用

第四步:渲染

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

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

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


按标记渲染

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


超时结束当前定时器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,059评论 0 13
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,145评论 1 32
  • 他们的目标是武汉。 他微信给郝泉,说来找她。她说,没有必要。等一些烦心的事解决了,就会回去。没有说具体是什么事,含...
    树懒日记阅读 219评论 0 1
  • 不重要的事情就忘记吧
    Raindropcw阅读 227评论 0 0
  • 这节课是对整个自在人生的课程做一个梳理。 一,什么是自在人生? 1,你来听自在人生并按照功课来修的话,你的人生一定...
    可可cocoa阅读 776评论 0 3