vue uniapp拼团列表--倒计时

<template>
<view>
<view v-for="(item,index) in timelimitList" :key="index">
{{item.grouptime_d}}天
{{item.grouptime_h}}时
{{item.grouptime_m}}分
{{item.grouptime_s}}秒
</view>
</view>
</template>

<script>
import request from "../../static/common/common.js"
export default {
data() {
return {
timer: null, //重复执行
timelimitList: [],
}
},
methods: {
// 限时拼团倒计时
gettimelimitpuzzle() {
var that = this;
request.httpRequest({
url: 'api/index/timelimitpuzzles'
}).then(res => {
if (res.data.data == null) {
that.homeheight = 60;
that.timelimitListlen = 0;
} else {
that.timelimitListlen = res.data.data.length;
that.homeheight = 100;
for(var i = 0;i<res.data.data.length;i++){
res.data.data[i].grouptime_d = '';
res.data.data[i].grouptime_h = '';
res.data.data[i].grouptime_m = '';
res.data.data[i].grouptime_s = '';
}
that.timelimitList = res.data.data;
}
});
},
countdown() {
let that = this;
let timer = setInterval(function() {
for (let i = 0; i < that.timelimitList.length; i++) {
that.timelimitList[i].grouptime -= 1000
let t = that.timelimitList[i].grouptime
if (t > 0) {
let day = Math.floor(t / 86400000)
let hour = Math.floor((t / 3600000) % 24)
let min = Math.floor((t / 60000) % 60)
let sec = Math.floor((t / 1000) % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
that.timelimitList[i].grouptime_d = day;
that.timelimitList[i].grouptime_h = hour;
that.timelimitList[i].grouptime_m = min;
that.timelimitList[i].grouptime_s = sec;
} else {
// 进行判断 如果数据内所有的倒计时已经结束，那么结束定时器， 如果没有那么继续执行定时器
let flag = that.timelimitList.every((val, ind) =>val.grouptime <= 0);
if (flag){
clearInterval(timer);
}
that.timelimitList[i].grouptime_d = 0;
that.timelimitList[i].grouptime_h = 0;
that.timelimitList[i].grouptime_m = 0;
that.timelimitList[i].grouptime_s = 0;
}
}
}, 1000);
},
},
destroyed() {
let that = this;
that.timelimitList.forEach((val) => {
val.grouptime = 0
});
},
onLoad() {
this.gettimelimitpuzzle();
this.countdown();
}
}
</script>
<style lang="less" scoped>

</style>