标签：uniapp vue -- res timelimitList let grouptime sec data

<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>

标签：uniapp,vue,--,res,timelimitList,let,grouptime,sec,data
来源： https://www.cnblogs.com/shoolnight/p/15545662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。