小游戏活动接口

view/molistar/activity/gameChallenge/css/index.css

@@ -55,7 +55,7 @@ body {
   bottom: 1.1733333333rem;
   right: 0;
 }
-.header .coin_status {
+.header .receive {
   width: 2.5333333333rem;
   height: 0.8rem;
   background: url(../images/receive.png) no-repeat center/100% 100%;
@@ -68,6 +68,9 @@ body {
   bottom: 0.96rem;
   right: 0.2rem;
 }
+.header .done {
+  background: url(../images/done.png) no-repeat center/100% 100%;
+}
 
 .descBox {
   position: relative;
@@ -526,7 +529,7 @@ body {
   width: 0.9066666667rem;
   height: 0.44rem;
   position: absolute;
-  bottom: 0.3466666667rem;
+  bottom: 0.4666666667rem;
   left: 1.4rem;
 }
 .page1 .my .info {
@@ -590,7 +593,7 @@ body {
   height: 0.6666666667rem;
   background: url(../images/bottomBg.png) no-repeat;
   background-size: 100% 100%;
-  margin: -0.2rem auto 0;
+  margin: -0.4rem auto 0;
 }
 .page2 .content {
   width: 10rem;
@@ -618,9 +621,10 @@ body {
 }
 .page2 .content .box .history_week {
   width: 100%;
+  padding-bottom: 0.2rem;
 }
 .page2 .content .box .history_week .title {
-  padding: 0.6rem 0 0.4rem;
+  padding: 0.4rem 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -886,7 +890,7 @@ body {
 .coins_pop .coins_pop_in .btn {
   width: 3.3866666667rem;
   height: 1.2rem;
-  background: url(../images/done.png) no-repeat center/100% 100%;
+  background: url(../images/receive.png) no-repeat center/100% 100%;
   margin: 0 auto;
   font-weight: 500;
   font-size: 0.3466666667rem;
@@ -894,6 +898,9 @@ body {
   line-height: 1.2rem;
   text-align: center;
 }
+.coins_pop .coins_pop_in .done {
+  background: url(../images/done.png) no-repeat center/100% 100%;
+}
 .coins_pop .coins_pop_in h2 {
   font-weight: 400;
   font-size: 0.32rem;

view/molistar/activity/gameChallenge/css/index.scss

@@ -62,7 +62,7 @@ body {
     right: 0;
   }
 
-  .coin_status {
+  .receive {
     width: px2rem(190);
     height: px2rem(60);
     background: url(../images/receive.png) no-repeat center/100% 100%;
@@ -75,6 +75,10 @@ body {
     bottom: px2rem(72);
     right: px2rem(15);
   }
+
+  .done {
+    background: url(../images/done.png) no-repeat center/100% 100%;
+  }
 }
 
 .descBox {
@@ -582,7 +586,7 @@ body {
       width: px2rem(68);
       height: px2rem(33);
       position: absolute;
-      bottom: px2rem(26);
+      bottom: px2rem(35);
       left: px2rem(105);
     }
 
@@ -655,7 +659,7 @@ body {
     height: px2rem(50);
     background: url(../images/bottomBg.png) no-repeat;
     background-size: 100% 100%;
-    margin: -0.2rem auto 0;
+    margin: -0.4rem auto 0;
   }
 
   .content {
@@ -687,8 +691,9 @@ body {
 
       .history_week {
         width: 100%;
+        padding-bottom: px2rem(15);
         .title {
-          padding: px2rem(45) 0 px2rem(30);
+          padding: px2rem(30) 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -988,7 +993,7 @@ body {
     .btn {
       width: px2rem(254);
       height: px2rem(90);
-      background: url(../images/done.png) no-repeat center/100% 100%;
+      background: url(../images/receive.png) no-repeat center/100% 100%;
       margin: 0 auto;
       font-weight: 500;
       font-size: px2rem(26);
@@ -997,6 +1002,10 @@ body {
       text-align: center;
     }
 
+    .done {
+      background: url(../images/done.png) no-repeat center/100% 100%;
+    }
+
     h2 {
       font-weight: 400;
       font-size: px2rem(24);

view/molistar/activity/gameChallenge/index.html

@@ -20,7 +20,7 @@
     <div class="header">
         <div class="rule text3"></div>
         <img src="./images/coin_bg.png" alt="" class="coin_bg">
-        <div class="coin_status">Receive</div>
+        <div class="receive">Receive</div>
     </div>
     <!-- 说明 -->
     <div class="descBox">
@@ -97,7 +97,7 @@
         </div>
         <div class="content">
             <ul>
-                <li>
+                <!-- <li>
                     <div class="num">04</div>
                     <img src="./images/null.png" alt="" class="tx">
                     <img src="" alt="" class="icon">
@@ -109,20 +109,7 @@
                         <b>0K</b>
                         <img src="./images/m.png" alt="">
                     </div>
-                </li>
-                <li>
-                    <div class="num">04</div>
-                    <img src="./images/null.png" alt="" class="tx">
-                    <img src="" alt="" class="icon">
-                    <div class="info">
-                        <p>名字</p>
-                        <span>ID:1234567</span>
-                    </div>
-                    <div class="score">
-                        <b>0K</b>
-                        <img src="./images/m.png" alt="">
-                    </div>
-                </li>
+                </li> -->
             </ul>
             <div class="more">More</div>
         </div>
@@ -149,8 +136,8 @@
                     Ranking only shows theTop10 users in the history.<br>
                     (Regardless of whether they have received coins)
                 </h1>
-                <img src="./images/none.png" class="none" alt="">
-                <div class="history_week">
+                <!-- <img src="./images/none.png" class="none" alt=""> -->
+                <!-- <div class="history_week">
                     <div class="title">
                         <img src="./images/left.png" alt="">
                         <b>01/01/2024-03/01/2024</b>
@@ -202,7 +189,7 @@
                             </div>
                         </li>
                     </ul>
-                </div>
+                </div> -->
             </div>
         </div>
         <div class="bottom"></div>

view/molistar/activity/gameChallenge/js/countNumber.js

@@ -16,7 +16,9 @@
     rollNum.prototype = {
         initHtml: function (obj, options) {
             // console.log(obj, options.deVal)
-            var nameDeVal = options.deVal.split('');
+            // var nameDeVal = options.deVal.split('');
+            var nameDeVal = options.deVal.toString().split('');
+            
             var strHtml = '<ul class="' + options.className + ' inrow">';
             var valLen = options.digit || (options.deVal + '').length;
             if (obj.find('.' + options.className).length <= 0) {

view/molistar/activity/gameChallenge/js/index.js

@@ -57,13 +57,15 @@ $(function () {
         langReplace = window.lang.replace;
         localLang = window.lang;
         translateFun();
-        // getConfig();
+        getInit();
+        getHisRank()
+        // render()
     }, 100)
 
     $(window).scroll(function () {
         if (($("#dataNums").offset().top - $(window).scrollTop()) < $(window).height()) {
             $("#dataNums").rollNum({
-                deVal: '19.00'
+                deVal: jackpotPool
             });
         };
     });
@@ -73,6 +75,8 @@ $(function () {
 function translateFun() {
     var langReplace = window.lang.replace;
     var localLang = window.lang;
+    $('.header .receive').html(langReplace(localLang.demoModule.receive));
+    $('.coins_pop .btn').html(langReplace(localLang.demoModule.receive));
     $('.text1').html(langReplace(localLang.demoModule.text1));
     $('.text2').html(langReplace(localLang.demoModule.text2));
     $('.text3').html(langReplace(localLang.demoModule.text3));
@@ -95,68 +99,74 @@ function translateFun() {
     $('.text19').html(langReplace(localLang.demoModule.text19));
     $('.text20').html(langReplace(localLang.demoModule.text20));
     $('.more').html(langReplace(localLang.demoModule.more));
-    $('.gift').attr('src',langReplace(localLang.demoModule.gift));
+    $('.gift').attr('src', langReplace(localLang.demoModule.gift));
     if (browser.ios) {
         $('.bottomText').text(langReplace(localLang.demoModule.text12))
     } else {
         $('.bottomText').text(langReplace(localLang.demoModule.text122))
     }
 }
-// 配置接口
-function getConfig() {
+
+var jackpotStatus = false // 奖金状态
+var jackpotPool = 0 //奖池金币数
+var countdownSecond = 0 //本周倒计时秒数
+function getInit() {
     showLoading()
     networkRequest({
         type: 'get',
-        url: urlPrefix + '/activity/h5/template/rank',
-        data: { actKey: "valentinesDay" },
+        url: urlPrefix + '/miniGame/weekJackpotRank/getRank',
         success(res) {
             if (res.code === 200) {
-                // 处理日期
-                // var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
-                // var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
-                // $('.header .date .text22').text(`${startTime} - ${endTime}`);
                 // 处理倒计时
-                countup(res.data.endTime - res.timestamp);
-                // 处理限定礼物
-                res.data.gifts.forEach((res, i) => {
-                    $(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
-                    $(`.giftBox .gift .gift${i} span`).text(res.giftName);
-                })
+                countdownSecond = res.data.countdownSecond;
+                countTime();
+                // 处理奖金
+                jackpotStatus = res.data.jackpotStatus;
+                if (!jackpotStatus) {
+                    $('.header .receive').html(langReplace(localLang.demoModule.done));
+                    $('.header .receive').addClass('done');
+                    $('.coins_pop .btn').html(langReplace(localLang.demoModule.done));
+                    $('.coins_pop .btn').addClass('done');
+                }
+                jackpotPool = res.data.jackpotPool.toFixed(2);
                 // 处理榜单
                 var listTo3 = res.data.rankList.slice(0, 3);
                 notListTo3 = res.data.rankList.slice(3);
                 // 处理前三
                 if (listTo3.length < 3) {
                     let arr = new Array(3 - listTo3.length).fill({
-                        avatar: './images/logo.png',
+                        avatar: './images/null.png',
                         name: langReplace(localLang.demoModule.waiting),
                         erbanNo: null,
-                        totalNum: null
+                        score: null
                     })
                     listTo3.push(...arr)
                 }
                 listTo3.forEach((res, i) => {
                     $(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
-                    $(`.page1 .top .top${i + 1} .name b`).text(res.name);
-                    $(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
-                    $(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
-                    $(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
+                    $(`.page1 .top .top${i + 1} .name`).html(res.name);
+                    $(`.page1 .top .top${i + 1} .icon`).attr('src', res.vipLevel ? `./images/vip/${res.vipLevel}.png` : '');
+                    $(`.page1 .top .top${i + 1} .id`).html('ID:' + res.erbanNo);
+                    $(`.page1 .top .top${i + 1} .score b`).html(langReplace(localLang.demoModule.Behind) + unitProcessingAr(res.score, 2));
                     if (res.erbanNo == null) {
-                        $(`.page1 .top .top${i + 1} .name img`).hide();
+                        $(`.page1 .top .top${i + 1} .icon`).hide();
                         $(`.page1 .top .top${i + 1} .id`).hide();
                         $(`.page1 .top .top${i + 1} .score`).hide();
                     }
+                    if (res.vipLevel == 0) {
+                        $(`.page1 .top .top${i + 1} .icon`).hide()
+                    }
                 })
                 // 非前三
                 loadMore();
                 // 处理自己榜单数据
-                var my = res.data.myRank;
+                var my = res.data.meRank;
                 $('.page1 .my .tx').attr("src", my.avatar);
-                $('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
-                $('.page1 .my .info p b').text(my.name);
-                $('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
+                $('.page1 .my .num').text(my.ranking == 0 ? '30+' : my.ranking);
+                $('.page1 .my .info p b').text(my.nick);
+                $('.page1 .my .icon').attr('src', `./images/vip/${my.vipLevel}.png`);
                 $('.page1 .my .info span').text(`ID:${my.erbanNo}`);
-                $('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
+                $('.page1 .my .score b').text(unitProcessingAr(my.score, 2));
             } else {
                 toastMsg(res.message)
             }
@@ -168,6 +178,7 @@ function getConfig() {
         }
     })
 }
+
 // 加載數據函數
 function loadMore() {
     // 計算加載範圍
@@ -181,16 +192,14 @@ function loadMore() {
                 <li>
                     <div class="num">${res.rank}</div>
                     <img src="${res.avatar}" alt="" class="tx">
+                    <img src="./images/vip/${res.vipLevel}.png" alt="" class="icon" style="display: ${res.vipLevel == 0 ? 'none' : 'block'}">
                     <div class="info">
-                        <p>
-                            <b>${res.name}</b>
-                            <img src="${res.userLevelVo.experUrl}" alt="" class="icon">
-                        </p>
+                        <p>${res.name}</p>
                         <span>ID:${res.erbanNo}</span>
                     </div>
                     <div class="score">
-                        <img src="./images/box.png" alt="">
                         <b>${unitProcessingAr(res.totalNum, 2)}</b>
+                        <img src="./images/m.png" alt="">
                     </div>
                 </li>
         `
@@ -206,13 +215,197 @@ function loadMore() {
         $('.page1 .content .more').hide();
     }
 }
-
 // 綁定按鈕點擊事件
 $('.page1 .content .more').click(function () {
     loadMore();
 })
 
-// 初次加載數據
+// 获取历史排行榜
+function getHisRank() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/miniGame/weekJackpotRank/listHistory',
+        success(res) {
+            if (res.code === 200) {
+                // 处理榜单
+                let hisRank = res.data;
+                if (hisRank.length == 0) {
+                    $(".page2 .content .box").append(`<img src="./images/none.png" class="none" alt="">`);
+                } else {
+                    hisRank.forEach(function (weekData) {
+                        var historyHtml = `
+                            <div class="history_week">
+                                <div class="title">
+                                    <img src="./images/left.png" alt="">
+                                    <b>${weekData.startDate} - ${weekData.endDate}</b>
+                                    <img src="./images/right.png" alt="">
+                                </div>
+                                <ul>
+                        `;
+
+                        // 遍历 rankList 生成排名列表
+                        for (var i = 0; i < 10; i++) {
+                            var user = weekData.rankList[i] || {
+                                avatar: "./images/null.png",
+                                erbanNo: "-",
+                                gender: "",
+                                jackpot: 0,
+                                nick: "waiting",
+                                rank: i + 1,
+                                vipLevel: 0
+                            };
+
+                            historyHtml += `
+                                <li>
+                                    <img src="${user.avatar}" alt="" class="avatar">
+                                    <img src="./images/h${user.rank > 3 ? "" : user.rank}.png" alt="" class="tx">
+                                    <img src="./images/vip/${user.vipLevel}.png" alt="" class="icon" style="display: ${user.vipLevel == 0 ? 'none' : 'block'}">
+                                    <p class="name">${user.nick}</p>
+                                    <P class="id">ID: ${user.erbanNo}</P>
+                                    <div class="score">
+                                        <b>Win ${user.jackpot}K</b>
+                                        <img src="./images/m.png" alt="">
+                                    </div>
+                                </li>
+                            `;
+                        }
+
+                        historyHtml += `
+                                </ul>
+                            </div>
+                        `;
+
+                        // 添加到容器
+                        $(".page2 .content .box").append(historyHtml);
+                    });
+
+                }
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+var hisRank = [
+    {
+        endDate: "03/01/2024",
+        partitionId: 1,
+        rankList: [
+            {
+                avatar: "./images/null.png",
+                erbanNo: "12345",
+                gender: "male",
+                jackpot: 5000,
+                nick: "User1",
+                rank: 1,
+                uid: "UID123",
+                vipLevel: 0
+            },
+            {
+                avatar: "./images/null.png",
+                erbanNo: "67890",
+                gender: "female",
+                jackpot: 4000,
+                nick: "User2",
+                rank: 2,
+                uid: "UID456",
+                vipLevel: 0
+            }
+        ],
+        startDate: "01/01/2024"
+    },
+    {
+        endDate: "10/01/2024",
+        partitionId: 2,
+        rankList: [
+            {
+                avatar: "./images/null.png",
+                erbanNo: "54321",
+                gender: "male",
+                jackpot: 7000,
+                nick: "User3",
+                rank: 1,
+                uid: "UID789",
+                vipLevel: 0
+            }
+        ],
+        startDate: "08/01/2024"
+    }
+];
+
+function render() {
+    hisRank.forEach(function (item) {
+        var historyHtml = `
+            <div class="history_week">
+                <div class="title">
+                    <img src="./images/left.png" alt="">
+                    <b>${item.startDate} - ${item.endDate}</b>
+                    <img src="./images/right.png" alt="">
+                </div>
+                <ul>
+        `;
+
+        item.rankList.forEach(user => {
+            historyHtml += `
+                <li>
+                    <img src="${user.avatar}" alt="" class="avatar">
+                    <img src="./images/h${user.rank > 3 ? "" : user.rank}.png" alt="" class="tx">
+                    <img src="./images/vip/${user.vipLevel}.png" alt="" class="icon" style="display: ${user.vipLevel == 0 ? 'none' : 'block'}">
+                    <p class="name">${user.nick}</p>
+                    <P class="id">ID: ${user.erbanNo}</P>
+                    <div class="score">
+                        <b>Win ${user.jackpot}K</b>
+                        <img src="./images/m.png" alt="">
+                    </div>
+                </li>
+            `;
+        })
+
+        historyHtml += `
+                </ul>
+            </div>
+        `;
+
+        // 添加到容器
+        $(".page2 .content .box").append(historyHtml);
+    });
+}
+
+// 领取金币
+function getJackpot() {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/miniGame/weekJackpotRank/getJackpot',
+        success(res) {
+            if (res.code === 200) {
+                $('.coins_pop .btn').html(langReplace(localLang.demoModule.done));
+                $('.coins_pop .btn').addClass('done');
+                $(`.coins_pop .fadein`).show()
+                $(`.coins_pop .fadein`).addClass('animate__bounceInRight')
+                setTimeout(() => {
+                    svgaFun()
+                }, 1000);
+                jackpotStatus = false
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+
 // tab切换
 $('.tab div').click(function () {
     var i = $(this).index() + 1;
@@ -245,16 +438,15 @@ $(".coins_pop .close").click(function () {
     $(`.coins_pop .fadein`).removeClass('animate__bounceInRight');
     bodyScroolFun(false);
 })
-$(".header .coin_status").click(function () {
+$(".header .receive").click(function () {
     bodyScroolFun(false);
     $('.coins_pop').show();
 })
 $(".coins_pop .btn").click(function () {
-    $(`.coins_pop .fadein`).show()
-    $(`.coins_pop .fadein`).addClass('animate__bounceInRight')
-    setTimeout(() => {
-        svgaFun()
-    }, 1000);
+    if (jackpotStatus) {
+        getJackpot()
+    }
+
 })
 
 // 查看奖励
@@ -287,42 +479,35 @@ function svgaFun() {
     })
 }
 
-// 倒計時
-function countup(leftTime) {
-    clearTimeout(countupTime)
-    //獲取當前時間
-    // var now = nowTime;
-    var d = 0;
-    var h = 0;
-    var m = 0;
-    var s = 0;
-    //定義變數 d,h,m,s保存倒計時的時間
-    var d, h, m, s;
-    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
-    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));
-        s = getzf(Math.floor(leftTime / 1000 % 60));
-        //將倒計時賦值到div中
-        $('.timeBox .days span').text(d);
-        $('.timeBox .hours span').text(h);
-        $('.timeBox .mins span').text(m);
-        $('.timeBox .secs span').text(s);
-    } else {
-        getConfig();
+// 倒计时函数
+let time = null;
+function countTime() {
+    clearTimeout(time);
+
+    if (countdownSecond <= 0) {
+        console.log("倒计时结束");
+        clearTimeout(time);
+        return;
     }
-    if (leftTime > 0) {
-        leftTime = leftTime - 1000;
-    }
-    countupTime = setTimeout(function () {
-        countup(leftTime);
-    }, 1000);
+
+    // 计算 d, h, m, s
+    let d = Math.floor(countdownSecond / 86400); // 1天 = 86400秒
+    let h = Math.floor((countdownSecond % 86400) / 3600);
+    let m = Math.floor((countdownSecond % 3600) / 60);
+    let s = countdownSecond % 60;
+
+    // 更新页面元素
+    $(".page1 .timeBox .days span").html(d < 10 ? "0" + d : d);
+    $(".page1 .timeBox .hours span").html(h < 10 ? "0" + h : h);
+    $(".page1 .timeBox .mins span").html(m < 10 ? "0" + m : m);
+    $(".page1 .timeBox .secs span").html(s < 10 ? "0" + s : s);
+
+    // 递减秒数
+    countdownSecond--;
+
+    // 递归调用
+    time = setTimeout(countTime, 1000);
 }
-//补0操作  
-function getzf(num) {
-    if (parseInt(num) < 10) {
-        num = '0' + num;
-    }
-    return num;
-}
+
+// 启动倒计时
+countTime();