每日消费 - 修改头部，还差底部奖励图

view/molistar/modules/dailyConsumption/css/index.scss

@@ -32,12 +32,28 @@ body {
 
 .header {
     width: px2rem(750);
-    height: px2rem(940);
+    height: px2rem(1756);
     background: url(../images/header.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
     position: relative;
 
+    .date_tip {
+        background: url(../images/date_tip.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        top: px2rem(410);
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: PingFang SC;
+        font-weight: 600;
+        font-size: px2rem(28);
+        color: #FFF783;
+        padding: px2rem(12) 0;
+        min-width: px2rem(500);
+        text-align: center;
+    }
+
     .rule_icon {
         width: px2rem(140);
         height: px2rem(50);
@@ -48,32 +64,114 @@ body {
         font-size: px2rem(28);
         font-weight: 500;
         position: absolute;
-        top: px2rem(412);
+        top: px2rem(672);
         right: px2rem(0);
         text-align: center;
         text-indent: 2px;
     }
 
+    .lastTopUserVos {
+        top: px2rem(750);
+        position: relative;
+
+        .bg_img {
+            width: px2rem(750);
+            height: px2rem(570);
+            position: absolute;
+            z-index: 10;
+        }
+
+        .avatar {
+            width: px2rem(308);
+            height: px2rem(308);
+            position: absolute;
+            top: px2rem(97);
+            left: 50%;
+            transform: translateX(-50%);
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 50%;
+            }
+        }
+
+        .title {
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(32);
+            color: #FFF783;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(420);
+            z-index: 99;
+        }
+
+        .nick {
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(34);
+            color: #FFF783;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(515);
+            z-index: 99;
+        }
+    }
+
+    .tab_list {
+        position: absolute;
+        top: px2rem(1353);
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .tab_box {
+            width: px2rem(245);
+            background: url(../images/tab_bg.png) no-repeat;
+            background-size: 100% 100%;
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(30);
+            color: #FFE4E4;
+            line-height: px2rem(32);
+            padding: px2rem(50) 0;
+            text-align: center;
+        }
+
+        .act_tab {
+            background: url(../images/act_tab_bg.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FFF783;
+        }
+    }
+
     .timeBox {
-        width: 7.16rem;
-        height: px2rem(122);
+        // width: 7.16rem;
+        // height: px2rem(122);
         box-sizing: border-box;
         padding: 0 px2rem(50);
         position: absolute;
-        top: px2rem(636);
+        top: px2rem(1515);
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         justify-content: space-between;
 
-        div {
-            width: px2rem(100);
+        .hour,
+        .min,
+        .sec,
+        .day {
+            width: px2rem(110);
             height: px2rem(100);
             background: url(../images/time.png) no-repeat;
             background-size: 100% 100%;
-            position: relative;
             text-align: center;
-            line-height: px2rem(100);
+            padding-top: px2rem(10);
 
             b {
                 color: #FFED70;
@@ -82,26 +180,33 @@ body {
                 font-family: PingFang SC;
             }
 
-            span {
-                width: px2rem(180);
-                height: px2rem(36);
-                line-height: px2rem(36);
-                position: absolute;
-                left: 50%;
-                transform: translateX(-50%);
-                bottom: px2rem(-41);
+            p {
+                // position: absolute;
+                // left: 50%;
+                // transform: translateX(-50%);
+                // bottom: px2rem(-41);
                 text-align: center;
                 color: #FFED70;
                 font-size: px2rem(28);
                 font-weight: 400;
                 font-family: PingFang SC;
-                background: url(../images/timeBg.png) no-repeat;
-                background-size: 100% 100%;
+                margin-top: px2rem(10);
+            }
+        }
+
+        .maohao {
+            display: flex;
+            align-items: center;
+            margin: 0 px2rem(17);
+
+            img {
+                width: px2rem(16);
+                height: px2rem(40);
             }
         }
 
         .day {
-            margin-right: px2rem(59);
+            margin-right: px2rem(50);
         }
 
         .colon {
@@ -118,49 +223,63 @@ body {
 .myBox {
     width: px2rem(750);
     height: px2rem(604);
-    background: url(../images/box.png) no-repeat;
+    background: url(../images/day_box.png) no-repeat;
     background-size: 100% 100%;
     margin: -1.1rem auto px2rem(35);
     position: relative;
+    padding: px2rem(126) px2rem(75);
+    box-sizing: border-box;
 
-    .ts {
-        width: px2rem(128);
-        height: px2rem(128);
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(183);
-        z-index: 2;
+    .info {
+        display: flex;
+        align-items: center;
+
+        .left {
+            .ts {
+                width: px2rem(156);
+                height: px2rem(156);
+                position: absolute;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(156);
+                height: px2rem(156);
+                z-index: 1;
+                border-radius: 50%;
+            }
+        }
+
+        .right {
+            margin: 0 px2rem(20);
+
+            .name {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #FFF783;
+                font-size: px2rem(34);
+                font-weight: 600;
+                font-family: PingFang SC;
+            }
+
+            .Today_Support,
+            .Upgrade_Requires {
+                font-family: PingFang SC;
+                font-weight: 400;
+                font-size: px2rem(28);
+                color: #FFF783;
+                line-height: px2rem(42);
+                margin-top: px2rem(20);
+            }
+        }
     }
 
-    .tx {
-        width: px2rem(128);
-        height: px2rem(128);
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(183);
-        z-index: 1;
-        border-radius: 50%;
-    }
 
-    .name {
-        width: px2rem(360);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(321);
-        text-align: center;
-        color: #FFED70;
-        font-size: px2rem(28);
-        font-weight: 600;
-    }
 
     .lineBox {
-        width: px2rem(620);
+        width: px2rem(600);
+        // width: px2rem(750);
         height: px2rem(16);
         border-radius: px2rem(16);
         background: #824115;
@@ -168,9 +287,9 @@ body {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(439);
+        top: px2rem(420);
         border-radius: px2rem(16);
-
+        // padding: 0 px2rem(60);
         .line {
             width: 0%;
             height: 100%;
@@ -182,9 +301,9 @@ body {
         }
 
         .boxs {
-            width: px2rem(62);
-            height: px2rem(62);
-            background: url(../images/false.png) no-repeat;
+            width: px2rem(66);
+            height: px2rem(66);
+            // background: url(../images/false.png) no-repeat;
             background-size: 100% 100%;
             position: absolute;
             top: 50%;
@@ -209,19 +328,33 @@ body {
                     margin: 0 px2rem(5);
                 }
             }
+
+        }
+        .boxs:nth-child(odd){
+            span{
+                top: px2rem(70);
+                // bottom: px2rem(550);
+            }
         }
 
         .box1 {
-            left: px2rem(150);
+            left: px2rem(0);
         }
 
         .box2 {
-            left: px2rem(339);
+            left: px2rem(0);
         }
 
         .box3 {
+            left: px2rem(0);
+        }
+        .box4 {
+            left: px2rem(0);
+        }
+        .box5 {
             right: px2rem(0);
         }
+        
 
         .act {
             background: url(../images/true.png) no-repeat;
@@ -794,57 +927,70 @@ body {
         background: url(../images/header-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox1 .box{
+
+    .content1 .contentBox1 .box {
         background: url(../images/700-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox2 .box{
+
+    .content1 .contentBox2 .box {
         background: url(../images/350-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox3 .box{
+
+    .content1 .contentBox3 .box {
         background: url(../images/70-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox1 .box{
+
+    .content2 .contentBox1 .box {
         background: url(../images/7-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox2 .box{
+
+    .content2 .contentBox2 .box {
         background: url(../images/3500-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox3 .box{
+
+    .content2 .contentBox3 .box {
         background: url(../images/210-zh.png) no-repeat;
         background-size: 100% 100%;
     }
 }
+
 .Turkiye {
     .header {
         background: url(../images/header-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox1 .box{
+
+    .content1 .contentBox1 .box {
         background: url(../images/700-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox2 .box{
+
+    .content1 .contentBox2 .box {
         background: url(../images/350-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content1 .contentBox3 .box{
+
+    .content1 .contentBox3 .box {
         background: url(../images/70-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox1 .box{
+
+    .content2 .contentBox1 .box {
         background: url(../images/7-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox2 .box{
+
+    .content2 .contentBox2 .box {
         background: url(../images/3500-tr.png) no-repeat;
         background-size: 100% 100%;
     }
-    .content2 .contentBox3 .box{
+
+    .content2 .contentBox3 .box {
         background: url(../images/210-tr.png) no-repeat;
         background-size: 100% 100%;
     }

view/molistar/modules/dailyConsumption/index.html

@@ -16,28 +16,64 @@
     </div>
     <!-- 头部 -->
     <div class="header">
+        <div class="date_tip"></div>
         <div class="rule_icon text2"></div>
+        <!-- 历史榜单 -->
+        <div class="lastTopUserVos">
+            <div class="bg_img">
+                <img src="./images/tx_day.png" alt=""></img>
+            </div>
+            <div class="avatar">
+                <img src="" alt="">
+            </div>
+            <div class="title">Yesterday's Champion</div>
+            <div class="nick"></div>
+        </div>
+        <!-- tab -->
+         <div class="tab_list">
+            <div class="tab_box Daily_Support act_tab" activityType="DAY_CONSUME" >Daily Support</div>
+            <div class="tab_box Weekly_Support" activityType="WEEK_CONSUME">Weekly Support</div>
+            <div class="tab_box Monthly_Support" activityType="MONTH_CONSUME">Monthly Support</div>
+         </div>
         <!-- 倒计时 -->
         <div class="timeBox">
+            <div class="day">
+                <b>00</b>
+                <p class="Days"></p>
+            </div>
             <div class="hour">
                 <b>00</b>
-                <span class="text3"></span>
+                <p class="text3"></p>
+            </div>
+            <div class="maohao">
+                <img src="./images/maohao.png" alt="">
             </div>
             <div class="min">
                 <b>00</b>
-                <span class="text4"></span>
+                <p class="text4"></p>
+            </div>
+            <div class="maohao">
+                <img src="./images/maohao.png" alt="">
             </div>
             <div class="sec">
                 <b>00</b>
-                <span class="text5"></span>
+                <p class="text5"></p>
             </div>
         </div>
     </div>
     <!--我的消费进度  -->
     <div class="myBox">
-        <img src="./images/txk.png" alt="" class="ts">
-        <img src="" alt="" class="tx">
-        <div class="name"></div>
+        <div class="info">
+            <div class="left">
+                <img src="./images/txk.png" alt="" class="ts">
+                <img src="" alt="" class="tx">
+            </div>
+            <div class="right">
+                <div class="name"></div>
+                <div class="Today_Support"></div>
+                <div class="Upgrade_Requires"></div>
+            </div>
+        </div>
         <div class="lineBox">
             <div class="line"></div>
             <div class="box1 boxs">
@@ -49,17 +85,23 @@
             <div class="box3 boxs">
                 <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
             </div>
+            <div class="box4 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+            <div class="box5 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
         </div>
-        <div class="tetxBox">
+        <!-- <div class="tetxBox">
             <div class="l text6"></div>
             <div class="r"><b>0</b>/<strong></strong></div>
-        </div>
+        </div> -->
     </div>
     <!-- tab -->
-    <div class="tab">
+    <!-- <div class="tab">
         <div class="tabbox act text7"></div>
         <div class="text8"></div>
-    </div>
+    </div> -->
     <!-- 档位1 -->
     <div class="content1">
         <div class="contentBox1 level3">

view/molistar/modules/dailyConsumption/js/index.js

@@ -115,55 +115,142 @@ function translateFun() {
 
         $('.null').text(langReplace(localLang.demoModule.text16));
     }
+    $('.Daily_Support').html(langReplace(localLang.demoModule.Daily_Support));
+    $('.Weekly_Support').html(langReplace(localLang.demoModule.Weekly_Support));
+    $('.Monthly_Support').html(langReplace(localLang.demoModule.Monthly_Support));
+    $('.Days').html(langReplace(localLang.demoModule.Days));
+    $('.header .lastTopUserVos .title').text(langReplace(localLang.demoModule.Yesterday_Champion))
+
 }
 console.log(unitProcessingAr(7000000, 1));
+var activityType = 'DAY_CONSUME';
+var gearPosition = {
+    DAY_CONSUME: [70000, 350000, 700000, 2100000, 3500000],
+    WEEK_CONSUME: [560000, 2800000, 5600000, 16800000, 28000000],
+    MONTH_CONSUME: [7000000, 21000000, 35000000, 70000000, 140000000],
+};
+var boxImgOption = {
+    DAY_CONSUME: {
+        ordinary: './images/day_ordinarybox.png',
+        actBox: './images/day_actbox.png'
+    },
+    WEEK_CONSUME: {
+        ordinary: './images/week_ordinarybox.png',
+        actBox: './images/week_actbox.png'
+    },
+    MONTH_CONSUME: {
+        ordinary: './images/month_ordinarybox.png',
+        actBox: './images/month_actbox.png'
+    }
+}
 // 配置接口
 function getConfig() {
     showLoading()
     networkRequest({
         type: 'get',
         url: urlPrefix + '/activity/h5/dayConsume',
-        data: { uid: pubInfo.uid },
+        data: {
+            uid: pubInfo.uid,
+            activityType
+        },
         success(res) {
             if (res.code === 200) {
                 // 分区规则
-                $('.rule .rule_in .box').html(res.data.partitionId == 2 ? langReplace(localLang.demoModule.arRule) : langReplace(localLang.demoModule.enRule));
+                $('.rule .rule_in .box').html(res.data.partitionId == 2 ||res.data.partitionId == 8 ? langReplace(localLang.demoModule.arRule) : res.data.partitionId == 1? langReplace(localLang.demoModule.enRule) :langReplace(localLang.demoModule.en2Rule));
                 // 处理是否代理人
                 res.data.rechargeUser ? $('.myBox').hide() : $('.myBox').show();
                 // 处理等级不足不显示榜单
                 res.data.wealth <= 7 ? $('.priorityWinners,.priorityWinnersBox').hide() : $('.priorityWinners,.priorityWinnersBox').show()
+
+                $('.header .date_tip').text(res.data.startDate + '-' + res.data.endDate)
+
+                // 榜单信息
+                if (res.data.lastTopUserVos.length > 0) {
+                    $('.lastTopUserVos .avatar img').attr("src", res.data.lastTopUserVos[0].avatar)
+                    $('.lastTopUserVos .nick').text(res.data.lastTopUserVos[0].name)
+                } else {
+                    $('.lastTopUserVos .avatar img').attr("src", './images/null.png')
+                    $('.lastTopUserVos .nick').text(langReplace(localLang.demoModule.waiting))
+                }
                 // 处理倒计时
-                countup(res.data.endTime - res.timestamp);
+                countup(res.data.expireNanos);
+                // console.log(res.data.expireNanos + Math.floor(Date.now()));
+                // res.data.goldNum = 8000000;
                 // 处理顶部进度以及个人信息
                 $('.myBox .tx').attr('src', res.data.avatar);
                 $('.myBox .name').text(res.data.nick);
-                $('.myBox .tetxBox .r b').text(res.data.goldNum);
-                console.log(res.data.goldNum < 700000);
-                if (res.data.goldNum < 700000) {
-                    $('.myBox .tetxBox .r strong').text(700000);
-                    $('.myBox .lineBox .box1 span b').text('70K');
-                    $('.myBox .lineBox .box1').css('left', `${(70000 / 700000) * 100}%`);
-                    $('.myBox .lineBox .box2 span b').text('350K');
-                    $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
-                    $('.myBox .lineBox .box3 span b').text('700K');
-                    $('.myBox .lineBox .box3').css('right', `0%`);
-                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
-                    if (res.data.goldNum >= 70000) { $('.myBox .lineBox .box1').addClass('act') }
-                    if (res.data.goldNum >= 350000) { $('.myBox .lineBox .box2').addClass('act') }
-                    if (res.data.goldNum >= 700000) { $('.myBox .lineBox .box3').addClass('act') }
+                $('.myBox .Today_Support').text(langReplace(localLang.demoModule.Today_Support) + res.data.goldNum);
+                $('.myBox .Upgrade_Requires').text(langReplace(localLang.demoModule.Upgrade_Requires) + getNextLevelDifference(res.data.goldNum, gearPosition[activityType]));
+
+                gearPosition[activityType].forEach((item, index) => {
+                    $(`.myBox .lineBox .box${index + 1} span b`).text(unitProcessingAr(item, 1));
+                    // 均匀分配每个档位的进度条宽度
+                    $(`.myBox .lineBox .box${index + 1}`).css('left', `${((index + 1) / (gearPosition[activityType].length + 0.5)) * 100}%`);
+
+                    // 到达档位 - 宝箱高亮
+                    if (res.data.goldNum >= item) {
+                        $(`.myBox .lineBox .box${index + 1}`).css({
+                            'background': `url(${boxImgOption[activityType].actBox}) no-repeat`,
+                            'background-size': '100% 100%'
+                        });
+                    } else {
+                        $(`.myBox .lineBox .box${index + 1}`).css({
+                            'background': `url(${boxImgOption[activityType].ordinary}) no-repeat`,
+                            'background-size': '100% 100%'
+                        });
+                    }
+                });
+
+                // 调整进度条宽度为均匀分布
+                let currentLevelIndex = getCurrentLevelIndex(res.data.goldNum, gearPosition[activityType]);
+
+                if (currentLevelIndex >= gearPosition[activityType].length) {
+                    $('.myBox .lineBox .line').css('width', '100%');
+                } else if (currentLevelIndex === 0) {
+                    // 特殊处理第一个档位
+                    let firstLevelValue = gearPosition[activityType][0];
+                    let progressWidth = (res.data.goldNum / firstLevelValue) * (100 / gearPosition[activityType].length + 0.2);
+                    $('.myBox .lineBox .line').css('width', `${progressWidth}%`);
                 } else {
-                    $('.myBox .tetxBox .r strong').text(7000000);
-                    $('.myBox .lineBox .box1 span b').text('210K');
-                    $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
-                    $('.myBox .lineBox .box2 span b').text('3500K');
-                    $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
-                    $('.myBox .lineBox .box3 span b').text('7M');
-                    $('.myBox .lineBox .box3').css('right', `0`);
-                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
-                    if (res.data.goldNum >= 210000) { $('.myBox .lineBox .box1').addClass('act') }
-                    if (res.data.goldNum >= 3500000) { $('.myBox .lineBox .box2').addClass('act') }
-                    if (res.data.goldNum >= 7000000) { $('.myBox .lineBox .box3').addClass('act') }
+                    let nextLevelValue = gearPosition[activityType][currentLevelIndex];
+                    let totalLevels = gearPosition[activityType].length + 0.2;
+                    let prevLevelValue = gearPosition[activityType][currentLevelIndex - 1];
+
+                    // 防止除以零的情况
+                    let levelRange = nextLevelValue - prevLevelValue;
+                    let progress = levelRange === 0 ? 0 : (res.data.goldNum - prevLevelValue) / levelRange;
+                    let progressWidth = (currentLevelIndex / totalLevels) * 100 + progress * (100 / totalLevels);
+
+                    $('.myBox .lineBox .line').css('width', `${progressWidth}%`);
                 }
+
+                // $('.myBox .tetxBox .r b').text(res.data.goldNum);
+                // console.log(res.data.goldNum < 700000);
+                // if (res.data.goldNum < 700000) {
+                //     $('.myBox .tetxBox .r strong').text(700000);
+                //     $('.myBox .lineBox .box1 span b').text('70K');
+                //     $('.myBox .lineBox .box1').css('left', `${(70000 / 700000) * 100}%`);
+                //     $('.myBox .lineBox .box2 span b').text('350K');
+                //     $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
+                //     $('.myBox .lineBox .box3 span b').text('700K');
+                //     $('.myBox .lineBox .box3').css('right', `0%`);
+                //     $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
+                //     if (res.data.goldNum >= 70000) { $('.myBox .lineBox .box1').addClass('act') }
+                //     if (res.data.goldNum >= 350000) { $('.myBox .lineBox .box2').addClass('act') }
+                //     if (res.data.goldNum >= 700000) { $('.myBox .lineBox .box3').addClass('act') }
+                // } else {
+                //     $('.myBox .tetxBox .r strong').text(7000000);
+                //     $('.myBox .lineBox .box1 span b').text('210K');
+                //     $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
+                //     $('.myBox .lineBox .box2 span b').text('3500K');
+                //     $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
+                //     $('.myBox .lineBox .box3 span b').text('7M');
+                //     $('.myBox .lineBox .box3').css('right', `0`);
+                //     $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
+                //     if (res.data.goldNum >= 210000) { $('.myBox .lineBox .box1').addClass('act') }
+                //     if (res.data.goldNum >= 3500000) { $('.myBox .lineBox .box2').addClass('act') }
+                //     if (res.data.goldNum >= 7000000) { $('.myBox .lineBox .box3').addClass('act') }
+                // }
                 // 处理每个档位的用户前四名
                 res.data.activityLevelUserVo.forEach((res, i) => {
                     var str = '';
@@ -206,6 +293,20 @@ function getConfig() {
         }
     })
 }
+
+// 新增函数：获取当前等级索引
+function getCurrentLevelIndex(currentValue, levels) {
+    for (let i = 0; i < levels.length; i++) {
+        if (currentValue < levels[i]) {
+            return i;
+        } else if (currentValue === levels[i]) {
+            // 如果当前值正好匹配档位值，返回下一个索引
+            return i + 1;
+        }
+    }
+    return levels.length; // 当前值大于等于最高等级，返回 levels.length
+}
+
 // 倒計時
 function countup(leftTime) {
     clearTimeout(countupTime)
@@ -224,6 +325,7 @@ function countup(leftTime) {
         m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
         s = getzf(Math.floor(leftTime / 1000 % 60));
         //將倒計時賦值到div中
+        $('.header .timeBox .day b').text(d);
         $('.header .timeBox .hour b').text(h);
         $('.header .timeBox .min b').text(m);
         $('.header .timeBox .sec b').text(s);
@@ -312,4 +414,45 @@ $('.header .rule_icon').click(function () {
 $('.rule .rule_in .close').click(function () {
     $('.rule').hide();
     bodyScroolFun(false);
-})
+})
+// 点击tab
+$('.tab_list .tab_box').click(function () {
+    $(this).addClass('act_tab').siblings().removeClass('act_tab');
+    activityType = $(this).attr('activityType');
+    if (activityType == 'DAY_CONSUME') {
+        // 日消费
+        $('.header .lastTopUserVos .title').text(langReplace(localLang.demoModule.Yesterday_Champion))
+        $('.header .lastTopUserVos .bg_img img').attr('src', './images/tx_day.png');
+        $('.myBox').css({
+            'background': 'url(./images/day_box.png) no-repeat',
+            'background-size': '100% 100%'
+        });
+    } else if (activityType == 'WEEK_CONSUME') {
+        // 周消费
+        $('.header .lastTopUserVos .title').text(langReplace(localLang.demoModule.Last_Elite))
+        $('.header .lastTopUserVos .bg_img img').attr('src', './images/tx_week.png');
+        $('.myBox').css({
+            'background': 'url(./images/week_box.png) no-repeat',
+            'background-size': '100% 100%'
+        });
+
+    } else if (activityType == 'MONTH_CONSUME') {
+        // 月消费
+        $('.header .lastTopUserVos .title').text(langReplace(localLang.demoModule.Last_Legend))
+        $('.header .lastTopUserVos .bg_img img').attr('src', './images/tx_month.png');
+        $('.myBox').css({
+            'background': 'url(./images/month_box.png) no-repeat',
+            'background-size': '100% 100%'
+        });
+
+    }
+    getConfig();
+})
+function getNextLevelDifference(currentValue, levels) {
+    for (let i = 0; i < levels.length; i++) {
+        if (currentValue < levels[i]) {
+            return levels[i] - currentValue;
+        }
+    }
+    return 0; // 当前值大于等于最高等级，无需再升级
+}

view/molistar/modules/dailyConsumption/local/ar.js

@@ -24,36 +24,61 @@ langAr = {
         priorityWinners: `الفائزون ذوو الأولوية`,
         enRule: `
         <p>
-        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
-        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
-        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+       1. وقت الحدث: يوم/أسبوع/شهر (بتوقيت غرينتش +8).<br>
+        2. خلال الحدث، سيتم احتساب عملاتك التي أنفقتها على المنصة. (إرسال عملة واحدة كهدية عادية = قيمة عملة واحدة؛ عملة واحدة كهدية محظوظة = 0.02 قيمة عملة).<br>
+       3. عند وصول عملاتك إلى المستوى المطلوب خلال الحدث، يمكنك الحصول على مكافأة المستوى المطلوب.<br>
         </p>
         <p>
             القيود:<br>
-            1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
-            2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+            1. لا يشارك مستخدمو وكلاء إعادة الشحن في هذا الحدث.<br>
+            2. لا يشمل استهلاك العملات استثمار الألعاب المصغرة.<br>
         </p>
         <p>
             ملاحظة:<br>
-            1. هذا النشاط ليس له علاقة بـ Google و Apple.
+            1. لا علاقة لهذا الحدث بجوجل وآبل.
+        </p>
+        `,
+        en2Rule: `
+        <p>
+       1. وقت الحدث: يوم/أسبوع/شهر (بتوقيت غرينتش +8).<br>
+        2. خلال الحدث، سيتم احتساب عملاتك التي أنفقتها على المنصة. (إرسال عملة واحدة كهدية عادية = قيمة عملة واحدة؛ عملة واحدة كهدية محظوظة = 0.05 من قيمة العملة).<br>
+       3. عند وصول عملاتك إلى المستوى المطلوب خلال الحدث، يمكنك الحصول على مكافأة المستوى المطلوب.<br>
+        </p>
+        <p>
+            القيود:<br>
+            1. لا يشارك مستخدمو وكلاء إعادة الشحن في هذا الحدث.<br>
+            2. لا يشمل استهلاك العملات استثمار الألعاب المصغرة.<br>
+        </p>
+        <p>
+            ملاحظة:<br>
+            1. لا علاقة لهذا الحدث بجوجل وآبل.
         </p>
         `,
         arRule: `
         <p>
-        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
-        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
-        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+        1. وقت الحدث: يوم/أسبوع/شهر (غرينتش +3).<br>
+        2. خلال الحدث، سيتم احتساب عملاتك التي أنفقتها على المنصة. (إرسال عملة واحدة كهدية عادية = قيمة عملة واحدة؛ عملة واحدة كهدية محظوظة = 0.05 من قيمة العملة).<br>
+       3. عند وصول عملاتك إلى المستوى المطلوب خلال الحدث، يمكنك الحصول على مكافأة المستوى المطلوب.<br>
     </p>
     <p>
         القيود:<br>
-        1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
-        2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+        1. لا يشارك مستخدمو وكلاء إعادة الشحن في هذا الحدث.<br>
+        2. لا يشمل استهلاك العملات استثمار الألعاب المصغرة.<br>
     </p>
     <p>
         ملاحظة:<br>
-        1. هذا النشاط ليس له علاقة بـ Google و Apple.
+       1. لا علاقة لهذا الحدث بجوجل وآبل.
     </p>
         `,
         waiting: `ي انتظار`,
+        Yesterday_Champion:'بطل الأمس',
+        Last_Elite:'نخبة الأسبوع الماضي',
+        Last_Legend:'أسطورة الشهر الماضي', 
+        Daily_Support:'الدعم<br /> اليومي',
+        Weekly_Support:'الدعم <br />الأسبوعي',
+        Monthly_Support:'الدعم <br />الشهري',
+        Days:'الأيام',
+        Today_Support: 'دعم اليوم:',
+        Upgrade_Requires: 'متطلبات الترقية:',
     }
 }

view/molistar/modules/dailyConsumption/local/en.js

@@ -22,37 +22,61 @@ langEn = {
         priorityWinners: `Priority Winners`,
         enRule: `
             <p>
-                1. Activity time: daily 0:00-23:59 (GMT+8).<br>
-                2. Daily calculation of your spending in the platform, send 1 coin gift = 1 coin value; 1 coin lucky
-                gift = 0.02 coin value.<br>
-                3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+                1 Event time: natural day/natural week/natural month (GMT+8).<br>
+                2 During the event, your coins spent on the platform will be counted. (Sending 1 coin normal gift = 1 coin value; 1 coin lucky gift = 0.02 coin value).<br>
+                3. When your coins reach the corresponding level during the event, you can get the corresponding level reward.<br>
                 </p>
                 <p>
                     Restrictions:<br>
-                    1. Recharge agent do not participate in this activity.<br>
-                    2. The input of game is not counted as consumption of coins.<br>
+                    1 Recharge agent users do not participate in this event.<br>
+                    2 The investment in mini games is not included in the consumption of coins.<br>
                 </p>
                 <p>
                     Attention:<br>
-                    1. This activity has nothing to do with Google and Apple.
+                    1 This event has nothing to do with Google and Apple.
+                </p>
+        `,
+        en2Rule: `
+            <p>
+                1 Event time: natural day/natural week/natural month (GMT+8).<br>
+                2 During the event, your coins spent on the platform will be counted. (Sending 1 coin normal gift = 1 coin value; 1 coin lucky gift = 0.05 coin value).<br>
+                3. When your coins reach the corresponding level during the event, you can get the corresponding level reward.<br>
+                </p>
+                <p>
+                    Restrictions:<br>
+                    1 Recharge agent users do not participate in this event.<br>
+                    2 The investment in mini games is not included in the consumption of coins.<br>
+                </p>
+                <p>
+                    Attention:<br>
+                    1 This event has nothing to do with Google and Apple.
                 </p>
         `,
         arRule: `
         <p>
-            1. Activity time: daily 0:00-23:59 (GMT+3).<br>
-            2. Daily calculation of your spending on the platform, send 1 coin gift = 1 coin value; 1 coin lucky gift = 0.05 coin value.<br>
-            3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+           1 Event time: natural day/natural week/natural month (GMT+3).<br>
+           2 During the event, your coins spent on the platform will be counted. (Sending 1 coin normal gift = 1 coin value; 1 coin lucky gift = 0.05 coin value).<br>
+           3. When your coins reach the corresponding level during the event, you can get the corresponding level reward.<br>
         </p>
         <p>
             Restrictions:<br>
-            1. Recharge agents do not participate in this activity.<br>
-            2. Game input is not counted as coin consumption.<br>
+            1 Recharge agent users do not participate in this event.<br>
+           2 The investment in mini games is not included in the consumption of coins.<br>
         </p>
         <p>
             Attention:<br>
-            1. This activity has nothing to do with Google and Apple.
+            1 This event has nothing to do with Google and Apple.
         </p>
         `,
         waiting: `Waiting`,
+        Yesterday_Champion:`Yesterday's Champion`,
+        Last_Elite:`Last Week's Elite`,
+        Last_Legend:`Last Month's Legend`, 
+        Daily_Support:'Daily<br />Support',
+        Weekly_Support:'Weekly<br />Support',
+        Monthly_Support:'Monthly<br />Support',
+        Days:'Days',
+        Today_Support: `Today's Support:`,
+        Upgrade_Requires: 'Upgrade Requires:',
     }
 }

view/molistar/modules/dailyConsumption/local/tr.js

@@ -22,37 +22,62 @@ langTr = {
         priorityWinners: `Öncelikli Kazananlar`,
         enRule: `
             <p>
-                1. Etkinlik süresi: günlük 0:00-23:59 (GMT+8).<br>
-                2. Platformdaki harcamalarınız günlük olarak hesaplanır, 1 jeton hediyesi gönder = 1 jeton değeri; 1 jeton şans hediyesi = 0.02 jeton değeri.<br>
-                3. Belirtilen seviyeye ulaştığınızda, ilgili seviye ödülünü alacaksınız.<br>
+                1 Etkinlik saati: doğal gün/doğal hafta/doğal ay (GMT+8).<br>
+                2 Etkinlik sırasında, platformda harcadığınız coin'ler sayılacaktır. (1 coin normal hediye gönderimi = 1 coin değeri; 1 coin şanslı hediye gönderimi = 0,02 coin değeri).<br>
+                3. Etkinlik sırasında coin'leriniz ilgili seviyeye ulaştığında, ilgili seviye ödülünü alabilirsiniz..<br>
             </p>
             <p>
                 Kısıtlamalar:<br>
-                1. Yeniden yükleme acentesi kullanıcıları bu etkinliğe katılamaz.<br>
-                2. Oyun girdisi jeton tüketimi olarak sayılmaz.<br>
+               1 Şarj acentesi kullanıcıları bu etkinliğe katılamaz.<br>
+                2 Mini oyunlara yapılan yatırım, coin tüketimine dahil değildir.<br>
             </p>
             <p>
-                Dikkat:<br>
-                1. Bu etkinliğin Google ve Apple ile ilgisi yoktur.
+                Not:<br>
+                1 Bu etkinliğin Google ve Apple ile hiçbir ilgisi yoktur.
+            </p>
+        `,
+        en2Rule: `
+            <p>
+                1 Etkinlik saati: doğal gün/doğal hafta/doğal ay (GMT+8).<br>
+                2 Etkinlik sırasında, platformda harcadığınız coin'ler sayılacaktır. (1 coin normal hediye gönderimi = 1 coin değeri; 1 coin şanslı hediye gönderimi = 0,05 coin değeri).<br>
+                3. Etkinlik sırasında coin'leriniz ilgili seviyeye ulaştığında, ilgili seviye ödülünü alabilirsiniz..<br>
+            </p>
+            <p>
+                Kısıtlamalar:<br>
+               1 Şarj acentesi kullanıcıları bu etkinliğe katılamaz.<br>
+                2 Mini oyunlara yapılan yatırım, coin tüketimine dahil değildir.<br>
+            </p>
+            <p>
+                Not:<br>
+                1 Bu etkinliğin Google ve Apple ile hiçbir ilgisi yoktur.
             </p>
         `,
         arRule: `
             <p>
-                1. Etkinlik süresi: günlük 0:00-23:59 (GMT+3).<br>
-                2. Platformdaki harcamalarınız günlük olarak hesaplanır, 1 jeton hediyesi gönder = 1 jeton değeri; 1 jeton şans hediyesi = 0.05 jeton değeri.<br>
-                3. Belirtilen seviyeye ulaştığınızda, ilgili seviye ödülünü alacaksınız.<br>
+                1 Etkinlik saati: doğal gün/doğal hafta/doğal ay (GMT+3).<br>
+                2 Etkinlik sırasında, platformda harcadığınız coin'ler sayılacaktır. (1 coin normal hediye gönderimi = 1 coin değeri; 1 coin şanslı hediye gönderimi = 0,05 coin değeri).<br>
+                3. Etkinlik sırasında coin'leriniz ilgili seviyeye ulaştığında, ilgili seviye ödülünü alabilirsiniz.<br>
             </p>
             <p>
                 Kısıtlamalar:<br>
-                1. Yeniden yükleme acentesi kullanıcıları bu etkinliğe katılamaz.<br>
-                2. Oyun girdisi jeton tüketimi olarak sayılmaz.<br>
+               1 Şarj acentesi kullanıcıları bu etkinliğe katılamaz.<br>
+                2 Mini oyunlara yapılan yatırım, coin tüketimine dahil değildir.<br>
             </p>
             <p>
-                Dikkat:<br>
-                1. Bu etkinliğin Google ve Apple ile ilgisi yoktur.
+                Not:<br>
+                1 Bu etkinliğin Google ve Apple ile hiçbir ilgisi yoktur.
             </p>
         `,
         waiting: `Bekleniyor`,
+        Yesterday_Champion:'Dünün Şampiyonu',
+        Last_Elite:'Geçen Haftanın Elitleri',
+        Last_Legend:'Geçen Ayın Efsanesi', 
+        Daily_Support:'Günlük<br />Destek',
+        Weekly_Support:'Haftalık<br />Destek',
+        Monthly_Support:'Aylık<br />Destek',
+        Days:'Günler',
+        Today_Support: 'Bugünün Desteği:',
+        Upgrade_Requires: 'Yükseltme Gereksinimleri:',
     }
 
 }

view/molistar/modules/dailyConsumption/local/zh.js

@@ -24,36 +24,61 @@ langZh = {
         priorityWinners: `優先獲勝者`,
         enRule: `
         <p>
-        1. 活動時間：每日 0:00-23:59（GMT+8）。<br>
-        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.02 枚金幣價值。<br>
-        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+        1. 活動時間：自然日/自然週/自然月（GMT+8）。<br>
+        2. 活動期間，您在平台消費的幣值將會被統計。 （送1個幣的普通禮物=1個幣值；送1個幣的幸運禮物=0.02個幣值）。<br>
+        3. 活動期間，當您的幣值達到相應等級時，即可獲得相應等級的獎勵。<br>
         </p>
         <p>
             限制：<br>
-            1. 充值代理不參加此活動。<br>
-            2. 遊戲的投入不計為金幣消費。<br>
+            1. 儲值代理用戶不參與此活動。<br>
+            2. 小遊戲的投資不計入幣值消耗。<br>
         </p>
         <p>
             注意：<br>
-            1. 此活動與 Google 和 Apple 無關。
+           1. 此活動與Google和蘋果無關。
+        </p>
+        `,
+        en2Rule: `
+        <p>
+        1. 活動時間：自然日/自然週/自然月（GMT+8）。<br>
+        2. 活動期間，您在平台消費的金幣將被計入。 （送1個金幣普通禮物=1個金幣價值；送1個金幣幸運禮物=0.05個金幣價值）。<br>
+        3. 活動期間，當您的金幣達到相應等級時，即可獲得相應等級的獎勵。<br>
+        </p>
+        <p>
+            限制：<br>
+            1. 儲值代理用戶不參與此活動。<br>
+            2. 小遊戲投資不計入金幣消耗。<br>
+        </p>
+        <p>
+            注意：<br>
+           1. 此活動與Google和蘋果無關。
         </p>
         `,
         arRule: `
         <p>
-        1. 活動時間：每日 0:00-23:59（GMT+3）。<br>
-        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.05 枚金幣價值。<br>
-        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+        1. 活動時間：自然日/自然週/自然月（GMT+3）。<br>
+       2. 活動期間，您在平台消費的金幣將被計入。 （送1個金幣普通禮物=1個金幣價值；送1個金幣幸運禮物=0.05個金幣價值）。<br>
+        3. 活動期間，當您的金幣達到相應等級時，即可獲得相應等級的獎勵。<br>
     </p>
     <p>
         限制：<br>
-        1. 充值代理不參加此活動。<br>
-        2. 遊戲的投入不計為金幣消費。<br>
+       1. 儲值代理用戶不參與此活動。<br>
+        2. 小遊戲投資不計入金幣消耗。<br>
     </p>
     <p>
         注意：<br>
-        1. 此活動與 Google 和 Apple 無關。
+        1. 此活動與Google、蘋果無關。
     </p>
         `,
         waiting: `等待中`,
+        Yesterday_Champion: '昨日冠軍',
+        Last_Elite: '上週精英',
+        Last_Legend: '上月傳奇',
+        Daily_Support: '每日<br />支持',
+        Weekly_Support: '每週<br />支持',
+        Monthly_Support: '每月<br />支持',
+        Days: '天',
+        Today_Support: '今日支持:',
+        Upgrade_Requires: '升級至下一等級所需:',
     }
 }