vue实现数据遍历多个倒计时列表

Posted 2022-02-20 zyfenblog

移动端效果图：

 

1、html显示代码：

 1 <template>
 2     <div class="activeList">
 3         <div class="list-box" v-for="(item,index) in activeDataList">
 4             <div class="list-title">
 5                 <p>item.title</p>
 6                 <span>已参加人数 <i class="addpeo">item.nowNumber</i> / <i>item.maxNumber</i>人</span>
 7                 <button :class="item.isSignStart ? ‘startBtn‘ : ‘nostartBtn‘" v-if="!item.signFinish" @click="goDetail(item.bindid,item.isActiveStart)">我要参加</button>
 8                 <button class="nostartBtn" v-if="item.isSigned" @click="goDetail(item.bindid,item.isActiveStart)">我已报名</button>
 9                 <button class="finishBtn" v-if="item.signFinish && !item.isFull">截至报名</button>
10                 <button class="finishBtn" v-if="item.isSigned && item.signFinish && !item.isFull">我已报名</button>
11                 <button class="finishBtn" v-if="item.isFull">已满额</button>
12             </div>
13             <div class="list-imgarea" @click="goDetail(item.bindid,item.isActiveStart)">
14                 <div class="active-status nostart" v-if="!item.isActiveStart || !item.isSignStart">未开始</div>
15                 <div class="active-status signed" v-if="item.isActiveStart || item.isSignStart">已开始</div>
16                 <div class="active-status finishBtn" v-if="item.signFinish">已结束</div>
17                 <div v-if="!item.signFinish && !item.isSigned" class="active-time">
18                     <span v-if="!item.isSignStart">距开始还剩</span>
19                     <span v-if="item.isSignStart">距截至还剩</span>  
20                     <i>item.dd</i> 天 <i>item.hh</i> : <i>item.mm</i> : <i>item.ss</i>    
21                 </div>                
22                 <img :src="item.imgUrl"/>
23             </div>
24         </div>        
25     </div>
26 </template>

 

2、js逻辑部分代码：

 1 <script>
 2 import configUrl from ‘@/config‘
 3 import  MessageBox  from ‘mint-ui‘
 4 export default
 5     name:"ActiveList",
 6     data()
 7         return
 8             activeDataList:[],
 9             isInitShowTime:true
10         
11     ,
12     mounted()        
13         this.getDataList();
14     ,
15     methods:
16         getDataList()
17             var _this = this;            
18             var sid = this.$route.query.sid; 
20             var url = "activelist.json";
21             this.$ajax(url).then(function(res)
22                 var myNewData = []
23                 res.data.data.map(((item,index) =>    
24                     myNewData.push(item)
25                     _this.$set(item,"ss",_this.getTimeList())
26                 ))
27                 _this.activeDataList = myNewData;
28                 
29             )
30             .catch(function(err)
31                 MessageBox(‘提示‘, ‘网络错误‘);                
32             )
33         ,        
34         goDetail(bindid,statu)
35             this.$router.push(
36                 path:‘/ActiveDetail‘,
37                 query:  //路由传参时push和query搭配使用 ，作用时传递参数
38                   sid:this.$route.query.sid,
39                   bindid:bindid
40                 
41             )            
42         ,
43         getTimeList()                    
44             var _this = this;
45             setInterval(function()
46                 for (var key in _this.activeDataList) 
47                     if(!_this.activeDataList[key]["isSignStart"])
48                         var end = new Date(_this.activeDataList[key]["startTime"].replace(/-/g,‘/‘)).getTime();
49                     
50                     else
51                         var end = new Date(_this.activeDataList[key]["endTime"].replace(/-/g,‘/‘)).getTime();
52                     
53                     var start = new Date().getTime();   
54                     var rightTime = end - start;     
55                     if (rightTime > 0) 
56                         var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
57                         var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
58                         var mm = Math.floor((rightTime / 1000 / 60) % 60);
59                         var ss = Math.floor((rightTime / 1000) % 60);
60                         dd = dd > 9 ? dd : ‘0‘ + dd
61                         hh = hh > 9 ? hh : ‘0‘ + hh
62                         mm = mm > 9 ? mm : ‘0‘ + mm
63                         ss = ss > 9 ? ss : ‘0‘ + ss  
64                         _this.activeDataList[key]["dd"] = dd;
65                         _this.activeDataList[key]["hh"] = hh;
66                         _this.activeDataList[key]["mm"] = mm;
67                         _this.activeDataList[key]["ss"] = ss;
68                     
69                     else
70                         _this.activeDataList[key]["dd"] = 0;
71                         _this.activeDataList[key]["hh"] = 0;
72                         _this.activeDataList[key]["mm"] = 0;
73                         _this.activeDataList[key]["ss"] = 0;                                         
74                                                
75                         if(_this.activeDataList[key]["isSignStart"] == false)
76                             _this.activeDataList[key]["isSignStart"] = true;
77                         
78                         else
79                             _this.activeDataList[key]["signFinish"] = true;
80                             
81                                                 
82                     
83                 
84             ,1000);
85             
86         
87     
88     
89 
90 </script>