完成房间pk榜单

view/yinmeng/activity/2023-anchorBattle/css/index.css

@@ -50,7 +50,7 @@ body {
   height: 1.21333rem;
   background: url(../images/time.png) no-repeat;
   background-size: 100% 100%;
-  position: relative;
+  position: absolute;
   top: 11.18667rem;
   left: 50%;
   transform: translateX(-50%);
@@ -88,7 +88,7 @@ body {
   width: 4.49333rem;
   height: 1.02667rem;
   position: relative;
-  top: 10.8rem;
+  top: 12.1rem;
   left: 50%;
   transform: translateX(-50%);
 }

view/yinmeng/activity/2023-anchorBattle/css/index.scss

@@ -54,7 +54,7 @@ body {
     height: px2rem(91);
     background: url(../images/time.png) no-repeat;
     background-size: 100% 100%;
-    position: relative;
+    position: absolute;
     top: px2rem(839);
     left: 50%;
     transform: translateX(-50%);
@@ -92,7 +92,7 @@ body {
     width: px2rem(337);
     height: px2rem(77);
     position: relative;
-    top: 10.8rem;
+    top: 12.1rem;
     left: 50%;
     transform: translateX(-50%);
 }

view/yinmeng/activity/2023-anchorBattle/index.html

@@ -29,8 +29,8 @@
     <img src="./images/title.png" alt="" class="title">
     <!-- 切换 -->
     <div class="tab">
-        <div class="tab1 act1"></div>
-        <div class="tab2"></div>
+        <div class="tab1"></div>
+        <div class="tab2 act2"></div>
         <div class="tab3"></div>
     </div>
     <!-- 时间结束展示tab -->

view/yinmeng/activity/2023-anchorBattle/js/index.js

@@ -27,6 +27,10 @@ const toastMsg = (content = '操作完成', time = 2) => {
     })
 }
 var leftTime;//倒计时暂存
+var timeOut2;//倒计时暂存
+var rankType = 1;//1日榜2总榜
+var date;//日期
+var dateArr = [];//存放昨日和今日时间
 // 初始化函数
 $(function () {
     getInfoFromClient()
@@ -47,22 +51,36 @@ $(function () {
                 window.webkit.messageHandlers.closeWebView.postMessage(null)
             }
         })
-        getRank();
+        getRank(rankType, date);
     }, 100)
 })
 // 获取榜单接口
 function getRank (rankType, date) {
     $('.list li').remove();
-    // showLoading()
+    showLoading()
     networkRequest({
         type: 'get',
-        url: urlPrefix + '',
+        url: urlPrefix + '/act/2023RoomPk/rank/getRank',
         data: { rankType, date },
         success (res) {
             if (res.code === 200) {
                 // 处理倒计时
                 leftTime = res.data.endTime - res.timestamp;
+                if (rankType == 1) {
+                    const curTime = res.timestamp
+                    const endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 23:59:59`).getTime())
+                    const hadEnd = (endTime - curTime) <= 0
+                    if (hadEnd) {
+                        rankType = 2;
+                        date = null;
+                        getRank(rankType, date)
+                        return
+                    }
+                }
+            
                 countup();
+                dateArr[0] = dateFormat(res.timestamp - 86400000, 'yyyy-MM-dd');
+                dateArr[1] = dateFormat(res.timestamp, 'yyyy-MM-dd');
                 // 处理前三
                 var top3 = res.data.rankList.slice(0, 3);
                 var notTop3 = res.data.rankList.slice(3);
@@ -112,8 +130,16 @@ function getRank (rankType, date) {
 // 榜单切换
 $('.tab div').click(function () {
     var i = $(this).index() + 1;
+    rankType = i == 1 || i == 2 ? 1 : 2;
     $('.tab div').removeClass('act1').removeClass('act3').removeClass('act2');
-    $(this).addClass(`act${i}`)
+    $(this).addClass(`act${i}`);
+    if (i == 1 || i == 2) {
+        date = dateArr[i - 1];
+    } else {
+        date = null;
+    }
+    getRank(rankType, date);
+
 })
 // 规则tab切换
 $('.rule .rule_in .tabs div').click(function () {
@@ -149,7 +175,7 @@ function countup () {
     var s = 0;
     //定义变量 d,h,m,s保存倒计时的时间
     var d, h, m, s;
-    if (leftTime >= 0) {
+    if (leftTime > 0) {
         d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
         h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
         m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
@@ -161,13 +187,15 @@ function countup () {
         $('.time .sp4').text(d);
         leftTime = leftTime - 1000;
         //递归每秒调⽤countTime⽅法，显⽰动态时间效果
+    } else if (leftTime == 0) {
+        getRank(rankType, date);
+        return
     } else {
+        //todo 展示活动已结束
         $('.timeOutTab').show();
         $('.timeOut').show();
         $('.tab').hide();
         $('.time').hide();
-        getRank(rankType, date);
-        return
     }
     timeOut2 = setTimeout(countup, 1000);
 }