vue 循环每个列表配置倒计时

//此处代码 复制即用 可能数据不同 替换下数据就行了
<template>
   <div class="all" ref="providall">
      <ul>
        <li v-for="(item,index) of iconlistall" :key="index">
           <div class="lileft">
              <p class="lilefttop">
                 <span class="spanleft">
                   已完成
                 </span>
                 <span>(提供帮助123456)</span>
              </p>
              <!-- <p>订单编号:123456</p>
              <p>预约时间：2018/10/10  14:31:56</p>
              <p>到期打款时间：</p> -->
              <p v-if="item.pre_at > 0">计时：{{time(item.pre_at)}}</p>
              <p v-else>计时: 已超时</p>
              <p>付款方式：支付宝</p>
            </div>
            <div class="liright">
               <p class="lirighttop">2000$</p>
               <p class="butp">查看截图</p>
               <p class="butp">详细资料</p>
            </div>
        </li>
      </ul>
   </div>
</template>

<script>
export default {
  data() {
    return {
      iconlist: [],
      ticker: null,
      d: "",
      h: "",
      m: "",
      s: ""
    };
  },
  computed:{ //这里是监听自定义数组的变化 因为有一个计时器每秒都会减去数组中字段的时间 所以 数组是每秒更新的
    iconlistall:{
      get(){
        return this.iconlist
      }
    }
  },
  methods: {
    beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
      this.ticker = setInterval(() => {
        for (let i = 0, len = this.iconlist.length; i < len; i++) {
          const item = this.iconlist[i];
          if (item.pre_at > 0) {
            item.pre_at = item.pre_at - 1000;
          }
        }
      }, 1000);
    },
    time(time) { //这个函数是每秒把时间重新计算下
      if (time >= 0) {
        let d = Math.floor(time / 1000 / 60 / 60 / 24);
        let h = Math.floor((time / 1000 / 60 / 60) % 24);
        let m = Math.floor((time / 1000 / 60) % 60);
        let s = Math.floor((time / 1000) % 60);
         return '还有'+d+'天'+h+'时'+m+'分'+s+'秒';
      }
    },
  },
  created() {
  //这里是假的数据
    let list = [
      {
        pre_at: "2019-03-01"
      },
      {
        pre_at: "2019-03-01 16:18:36"
      },
      {
        pre_at: "2019-03-04"
      }
    ];
    //首先循环数组 在 正常的情况下这个数组是后台传递过来的 然后将这个数组中的最后截止时间减去当前时间获得时间戳
    for (let i = 0, len = list.length; i < len; i++) {
      const item = list[i];
      item.pre_at = new Date(item.pre_at).getTime() - new Date().getTime();
    }
    this.iconlist = list; //将改变后的数组赋值给自定义的数组 然后调用计时器 每秒减去指定字段的时间戳 -1000毫秒
    if (this.ticker) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.ticker);
    }
    this.beginTimer(); //启动计时器减指定字段的时间
  },
  mounted() {
    //当页面加载时计算盒子的高度
    let html = document.getElementsByTagName("html")[0];
    let homeall = html.clientHeight - 44;
    this.$refs.providall.style.height = homeall + "px";
  },
  destroyed() {}
};
</script>

<style scoped lang='scss'>
.all {
  overflow-y: auto;
  display: flex;
  padding: 0rem 0.3rem;
  background: #ffffff;
  ul {
    width: 100%;
  }
  li {
    height: 2.1rem;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    background-color: #f5f5f5;
    border-radius: 0.1rem;
    .lileft {
      text-align: left;
      p {
        font-size: 0.24rem;
        color: #999999;
        margin-bottom: 0.11rem;
      }
      .lilefttop {
        font-size: 0.3rem;
        color: #999999;
        .spanleft {
          color: #333333;
        }
      }
    }
    .liright {
      text-align: right;
      .lirighttop {
        font-size: 0.3rem;
        color: #333333;
      }
      .butp {
        width: 1.4rem;
        height: 0.5rem;
        background-color: #999999;
        border-radius: 0.1rem;
        font-size: 0.24rem;
        color: #ffffff;
        line-height: 0.5rem;
        text-align: center;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>