列表内容出现倒计时

列表内容出现倒计时

html页

<div class="content_list" v-for='(item,index) of gameDataList' :key='index'>
      <div class="list_data">
        <div class="img_box fw">
          <img v-if='item.picture' :src="`/service/mooc-file-server/file/browse/${item.picture}`" alt="" />
          <img v-else src="@/assets/game.png" alt="" />
        </div>
        <div class="data_describe fw" style="flex:4">
          <h1><a @click="detailGame(item.id)" style="cursor: pointer;">{{item.name}}</a></h1>
          <h1>竞赛时间：{{item.startTime | timeFilter}} -- {{item.endTime | timeFilter}}</h1>
          <p>赛事规则<br>{{item.notice}}</p>
        </div>
        <div class="data_time fw">
          <div v-if='item.status==0'>
            <p>开始时间</p>
            <p>{{item.startTime | timeFilter}}</p>
          </div>
          <div v-else-if='item.status==null'>
            <p>结束时间</p>
            <p>{{item.endTime | timeFilter}}</p>
          </div>
          <div v-else>
            <p>剩余时间</p>
            <p>{{time(item.surplus)}}</p>
          </div>

        </div>
        <div class="data_status fw">
          <h1 v-if='item.status===0' style='color:#bfbf00'>未开始</h1>
          <h1 v-else-if='item.status===1' style='color:#70b603'>进行中</h1>
          <h1 v-else='item.status===2' style='color:#d9001b'>已结束</h1>
        </div>
        <div class="data_btn fw" style="flex:1">
          <el-button size="small" v-bind:disabled="item.status == 1" @click='updateHandle(item.id)'>比赛编辑</el-button>
          <el-button size="small" @click='delayGame(item)'>比赛延时</el-button>
          <el-button size="small" @click='closeGame(item)'>关闭比赛</el-button>
          <el-button size="small" :disabled='item.status==1' @click='scoreList(item.id)'>比赛成绩</el-button>
          <el-button size="small" v-if="item.status == 1" disabled @click='deleteGame(item.id)'>删除比赛</el-button>
          <el-button size="small" v-else @click='deleteGame(item.id)'
            style=" color: #fff; background-color: rgba(217, 0, 27, 1);">删除比赛</el-button>
        </div>
      </div>
    </div>

script

1. 从后台接口获取数据

getGameList() {
        api.getList().then(data => {
          if (data) {
            this.gameDataList = data.resultData;
            for (let i = 0; i < this.gameDataList.length; i++) {
              this.gameDataList[i].surplus = this.gameDataList[i].endTime - new Date().getTime(); //给列表加属性，剩余时间字段
            }
            this.total = data.totalRecord;
            this.beginTimer(); //启动计时器减指定字段的时间
          }
        })
      },

2.运用定时器实时减去时间

//定时器
      beginTimer() {
        if (this.timer != null) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          for (let i = 0, len = this.gameDataList.length; i < len; i++) {
            const item = this.gameDataList[i];
            if (item.surplus > 0) {
              item.surplus = Math.abs(item.surplus - 1000);
              this.$set(item, 'surplus', item.surplus);
            }
          };
          this.$forceUpdate(); //这句很重要，要不列表不刷新
        }, 1000);
      },

3. 重新计算时间

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;
        }
      },