vue 订单列表 多个倒计时

js

methods: {
  // 获取列表数据
  getList() {
    .
    .
    .
    // 判断数据是否含有倒计时
    this.orderData.forEach((item, index) => {
      // 有倒计时
      if (item.type == 1) {
        this.orderData[index].timer = setInterval(() => {
        this.Cuntdow(item.time, index)}, 1000)
      }
    })
    .
    .
    .
  },
  // 倒计时
    CountDown(time, index) {
      if (time > 0) {
        this.orderData[index].time--
      } else {
        clearInterval(this.order[index].timer)
      // 更新订单列表
         // update(OrderId)
      }
    },
}

 html

<template>
    <div>
    <ul>
      <li v-for="(item, index) in orderData" :key="index">
        <span v-if="item.type == 1 && item.time > 0">
          {{ item.time | formatStr }}
        </span>
      </li>
    </ul></div> </template>

 js(filter 过滤器格式化时间)

注:安装插件 moment 

import moment from 'moment'
.
.
.
filters: {
    // 格式化时间
    formatStr(Val) {
      let time = moment.duration(Val, 'seconds')
      let DD = time.days() > 0 ? time.days() + '天' : ''
      let HH = `${time.hours() > 9 ? time.hours() : '0' + time.hours()}时`
      let mm = `${time.minutes() > 9 ? time.minutes() : '0' + time.minutes()}分`
      let ss = `${time.seconds() > 9 ? time.seconds() : '0' + time.seconds()}秒`
      return '剩余' + DD + HH + mm + ss
    },
  },
.
.
.

 

上一篇:【K8s任务】对 DaemonSet 执行回滚


下一篇:kubernetes常用控制器之DaemonSet