公会信息 - 主播周奖励大改

view/eparty/modules/guild-ar/js/weeklyRewards.js

@@ -33,8 +33,7 @@ var page = 0;
 var maxPage = 0;
 var arr = [];
 var music = true;
-var data;
-var totalReward;
+var weekRewardData;
 // 初始化函數
 $(function () {
     getInfoFromClient();
@@ -71,10 +70,21 @@ function translateFun() {
     $('.text3').text(langReplace(localLang.weeklyRewards.text3));
     $('.text4').text(langReplace(localLang.weeklyRewards.text4));
     $('.text5').text(langReplace(localLang.weeklyRewards.text5));
+    $('.Day').text(langReplace(localLang.demoModule.Day));
+    $('.Countdown').text(langReplace(localLang.demoModule.Countdown));
+    $('.Host_Level').text(langReplace(localLang.demoModule.Host_Level));
+    $('.Daily_Rewards').text(langReplace(localLang.demoModule.Daily_Rewards));
+    $('.Extra_Rewards').text(langReplace(localLang.demoModule.Extra_Rewards));
+    $('.Complete_days').text(langReplace(localLang.demoModule.Complete_days));
+    $('.mic_chat').text(langReplace(localLang.demoModule.mic_chat));
+    $('.Unlock_time').text(langReplace(localLang.demoModule.Unlock_time));
+    $('.Days').text(langReplace(localLang.demoModule.Days));
+
 }
+var tabActive = 0;
 // 配置接口
 function getConfig() {
-    $('.box ul li').remove();
+    $('.rewards_list .rewards_box').remove();
     $('.tab div').remove();
     showLoading()
     networkRequest({
@@ -82,21 +92,22 @@ function getConfig() {
         url: urlPrefix + '/guildMemberWeekLevelReward/get',
         success(res) {
             if (res.code === 200) {
-                data = res.data;
-                totalReward = res.data[0].totalReward;
+                weekRewardData = res.data;
                 var tabStr = '';
-                data.forEach(((res, i) => {
+                weekRewardData.forEach(((res, i) => {
                     tabStr += `
-                        <div class="${i == 0 ? 'act' : ''}">${res.dateRange}</div>
+                        <div class="${i == tabActive ? 'act' : ''}">${res.dateRange}</div>
                     `
                 }))
                 $('.tab').append(tabStr);
-                ulFun(0);
+                ulFun(tabActive);
                 // tab切换
                 $('.tab div').click(function () {
                     var i = $(this).index();
+                    tabActive = i;
                     $(this).addClass('act').siblings().removeClass('act');
-                    ulFun(i)
+                    ulFun(tabActive)
+                    getConfig();
                 })
             } else {
                 toastMsg(res.message)
@@ -110,43 +121,73 @@ function getConfig() {
     })
 }
 function ulFun(index) {
-    $('.box ul li').remove();
-    var str = '';
-    data[index].itemList.forEach((res, i) => {
+    let weekLevelData = weekRewardData[index]
+    countup(weekLevelData.countDownSecond)
+    $('.preMaxNum').text(weekLevelData.preMaxNum);
+    $('.maxNum').text(weekLevelData.maxNum);
+    $('.processNum').text(weekLevelData.processNum);
+    if (window.lang.code == 'ar') {
+        $('.preLevel').text(weekLevelData.curLevel);
+        $('.curLevel').text(weekLevelData.preLevel);
+    } else {
+        $('.preLevel').text(weekLevelData.preLevel);
+        $('.curLevel').text(weekLevelData.curLevel);
+    }
+    //    计算进度条
+    let progressWidth = CalculateProgress(weekLevelData.processNum, weekLevelData.preMaxNum, weekLevelData.maxNum)
+    $('.progress-bar').css('width', progressWidth + '%');
+
+    // 渲染奖励列表
+    $('.rewards_list .rewards_box').remove();
+    let str = ''
+    weekLevelData.itemList.forEach((item, index) => {
         str += `
-                <li>
-                    <div class="left">
-                        <img src="./images/coin.png" alt="" class="gold">
-                        <span>${unitProcessingZhuan(res.rewardNum, 2)}</span>
-                        <div class="get ${res.status == 1 ? 'getAct' : res.status == 2 ? 'getOut' : ''}" id=${res.id} status=${res.status}>${res.status == 2 ? langReplace(localLang.weeklyRewards.text5) : langReplace(localLang.weeklyRewards.text3)}</div>
-                    </div>
-                    <div class="right">
-                        <div class="textTop">
-                            <div class="l">${langReplace(localLang.weeklyRewards.text4)}<b>${res.level}</b></div>
-                            <div class="r">
-                                <b class="b1">${res.processNum + res.preMaxNum}</b>/<b class="b2">${res.maxNum}</b><img src="./images/diamondss.png" alt="">
-                            </div>
-                        </div>
-                        <div class="line">
-                            <div class="line_in" style="width:${((res.processNum + res.preMaxNum) - (res.preMaxNum)) / (res.maxNum - res.preMaxNum) * 100}%"></div>
-                        </div>
-                        <div class="speedOfProgress">
-                            <span>${res.preMaxNum}</span>
-                            <b>${res.maxNum}</b>
-                        </div>
-                    </div>
-                </li>
-        `
-    })
-    $('.box ul').append(str);
+      <div class="rewards_box">
+            <div class="left_box" status="${item.status}" id="${item.id}">
+               <img src="./images/epconis.png" alt="">
+                ${item.rewardNum}
+                <img src="./images/weiwancheng.png" alt="" class="status_img" style="display: ${item.status == 0 ? 'block' : 'none'}">
+                <img src="./images/yilingqu.png" alt="" class="status_img" style="display: ${item.status == 2 ? 'block' : 'none'}">
+              </div>
+            <div class="middle_box">
+              <div class="level">${item.level}</div>
+              <div class="progress_box">
+              <div class="progress_bar" style="height: ${CalculateProgress(item.processNum, item.preMaxNum, item.maxNum)}%"></div>
+            </div>
+            </div>
+            
+            <div class="right_box" status="${item.status}" id="${item.id}">
+              <img src="./images/epconis.png" alt="">
+               ${item.bonusRewardNum}
+               <img src="./images/weiwancheng.png" alt="" class="status_img" style="display: ${item.bonusStatus == 0 ? 'block' : 'none'}">
+                <img src="./images/yilingqu.png" alt="" class="status_img" style="display: ${item.bonusStatus == 2 ? 'block' : 'none'}">
+            </div>
+        </div>
+      `
+    });
+    $('.rewards_list').append(str)
+
+    // 底部
+    $('.bottom_fixed_box .bonusPreMaxNum').text(weekLevelData.bonusPreMaxNum)
+    $('.bottom_fixed_box .bonusMaxNum').text(weekLevelData.bonusProcessNum + '/' + weekLevelData.bonusMaxNum)
+    //    计算进度条
+    let progressWidthBottomFixed = CalculateProgress(weekLevelData.bonusProcessNum, weekLevelData.bonusPreMaxNum, weekLevelData.bonusMaxNum)
+    $('.bottom_fixed_box .progress_bar').css('width', progressWidthBottomFixed + '%');
 }
-function getReward(id) {
+// 计算进度条 (进度-初始值) / (最大值-初始值)
+function CalculateProgress(processNum, preMaxNum, maxNum) {
+    let num = Math.min(100, Math.round((processNum - preMaxNum) / (maxNum - preMaxNum) * 100))
+    return num
+}
+
+function getReward(id, isBonus) {
     showLoading()
     networkRequest({
         type: 'post',
         url: urlPrefix + '/guildMemberWeekLevelReward/getReward',
         data: {
             id,
+            isBonus
         },
         success(res) {
             if (res.code === 200) {
@@ -163,11 +204,19 @@ function getReward(id) {
     })
 }
 // 领取按钮
-$('.box ul').on('click', ' li .left .get', function () {
+$('.rewards_list ').on('click', '.rewards_box .left_box', function () {
     var status = $(this).attr('status');
     var id = $(this).attr('id');
     if (status == 1) {
-        getReward(id);
+        getReward(id, false);
+    }
+})
+// 领取按钮
+$('.rewards_list ').on('click', '.rewards_box .right_box', function () {
+    var status = $(this).attr('status');
+    var id = $(this).attr('id');
+    if (status == 1) {
+        getReward(id, true);
     }
 })
 // 计算- 取消中文向下取整
@@ -183,4 +232,63 @@ function unitProcessingZhuan(val, toFixeds) { //值 保留几位小数
             return (val / 1000000).toFixed(toFixeds) + 'M'
         }
     }
-}
+}
+var countupTime1;//倒计时容器
+// 倒計時
+function countup(leftTime, type) {
+    clearTimeout(countupTime1)
+    //獲取當前時間
+    // 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 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 60 % 60));
+        s = getzf(Math.floor(leftTime % 60));
+        //將倒計時賦值到div中
+        $('.day_txt').text(d);
+        $('.hour_txt').text(h);
+        $('.min_txt').text(m);
+        $('.secs_txt').text(s);
+    } else {
+        $('.day_txt').text('00');
+        $('.hour_txt').text('00');
+        $('.min_txt').text('00');
+        $('.secs_txt').text('00');
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1;
+    } else {
+        clearTimeout(countupTime1);
+    }
+    countupTime1 = setTimeout(function () {
+        countup(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// 清除计时器
+function pauseCountdown() {
+    clearInterval(countupTime1);
+}
+// 监听页面显示事件
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+        pauseCountdown();
+    } else {
+        // 重新请求接口获取最新的倒计时数据
+        pauseCountdown();
+        getConfig();
+    }
+});