完善幸运数字模块

view/molistar/activity/luckyNumbers/css/index.css

@@ -663,4 +663,11 @@ body {
 .popup_congratulations .popup_content .close_btn img {
   width: 0.8rem;
   height: 0.8rem;
+}
+
+.arabic .top_bg .rules {
+  justify-content: flex-start;
+}
+.arabic .fortunate_number .history_btn {
+  justify-content: flex-start;
 }

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

@@ -768,4 +768,12 @@ body {
             }
         }
     }
+}
+.arabic{
+    .top_bg .rules{
+        justify-content: flex-start;
+    }
+    .fortunate_number .history_btn{
+        justify-content: flex-start;
+    }
 }

view/molistar/activity/luckyNumbers/css/myHistory.css

@@ -130,4 +130,14 @@ body {
   left: 0;
   z-index: 9999;
   background: #000000;
+}
+
+.arabic .content_list .content_box .felx_box .view_results img {
+  transform: rotate(180deg);
+}
+.arabic .content_list .content_box .Expired {
+  left: 0.0266666667rem;
+  display: flex;
+  right: auto;
+  border-radius: 0.36rem 0 0.36rem 0;
 }

view/molistar/activity/luckyNumbers/css/myHistory.scss

@@ -154,4 +154,15 @@ body {
     left: 0;
     z-index: 9999;
     background: #000000;
+}
+.arabic{
+    .content_list .content_box .felx_box .view_results img{
+        transform: rotate(180deg);
+    }
+    .content_list .content_box .Expired{
+        left: px2rem(2);
+        display: flex;
+        right: auto;
+        border-radius: px2rem(27) 0 px2rem(27) 0;
+    }
 }

view/molistar/activity/luckyNumbers/css/resultsView.css

@@ -109,7 +109,7 @@ body {
   border-radius: 50%;
 }
 .receiverList .receiver_content .receiver_box .info {
-  margin-left: 0.2933333333rem;
+  margin: 0 0.2933333333rem;
 }
 .receiverList .receiver_content .receiver_box .info .name {
   display: flex;
@@ -147,6 +147,9 @@ body {
 }
 .receiverList .receiver_content .receiver_box .jackpot {
   margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .receiverList .receiver_content .receiver_box .jackpot .num {
   font-family: PingFang SC;
@@ -157,7 +160,7 @@ body {
 .receiverList .receiver_content .receiver_box .jackpot img {
   width: 0.5066666667rem;
   height: 0.5066666667rem;
-  margin-left: 0.1066666667rem;
+  margin: 0 0.1066666667rem;
 }
 
 .Only_data_30 {
@@ -169,6 +172,7 @@ body {
   opacity: 0.5;
   margin-top: 0.4933333333rem;
   text-align: center;
+  display: none;
 }
 
 .No_one_pool {
@@ -180,4 +184,9 @@ body {
   text-align: center;
   margin: 5.3333333333rem 0.6666666667rem;
   display: none;
+}
+
+.arabic .receiverList .receiver_content .receiver_box .jackpot {
+  margin-right: auto;
+  margin-left: 0;
 }

view/molistar/activity/luckyNumbers/css/resultsView.scss

@@ -42,6 +42,12 @@ body {
     }
 }
 
+// .top_bg{
+//     position: fixed;
+//     left: 0;
+//     top: 0;
+// }
+
 .top_img {
     position: relative;
 
@@ -64,9 +70,11 @@ body {
         position: absolute;
         bottom: -3%;
         width: px2rem(546);
-        .jackpot{
+
+        .jackpot {
             font-weight: 600;
         }
+
         img {
             width: px2rem(52);
             height: px2rem(52);
@@ -118,6 +126,7 @@ body {
             align-items: center;
             padding: px2rem(20) px2rem(25);
             margin-top: px2rem(20);
+
             .avatar {
                 img {
                     width: px2rem(120);
@@ -127,7 +136,8 @@ body {
             }
 
             .info {
-                margin-left: px2rem(22);
+                margin: 0 px2rem(22);
+
                 .name {
                     display: flex;
                     align-items: center;
@@ -173,6 +183,10 @@ body {
 
             .jackpot {
                 margin-left: auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
                 .num {
                     font-family: PingFang SC;
                     font-weight: 600;
@@ -183,30 +197,40 @@ body {
                 img {
                     width: px2rem(38);
                     height: px2rem(38);
-                    margin-left: px2rem(8);
+                    margin: 0 px2rem(8);
                 }
             }
 
         }
     }
 }
-.Only_data_30{
+
-font-family: PingFang SC;
+.Only_data_30 {
-font-weight: 400;
+    font-family: PingFang SC;
-font-size: px2rem(24);
+    font-weight: 400;
-color: #FFF784;
+    font-size: px2rem(24);
-line-height: px2rem(38);
+    color: #FFF784;
-opacity: 0.5;
+    line-height: px2rem(38);
-margin-top: px2rem(37);
+    opacity: 0.5;
-text-align: center;
+    margin-top: px2rem(37);
+    text-align: center;
+    display: none;
 }
-.No_one_pool{
+
-font-family: PingFang SC;
+.No_one_pool {
-font-weight: 600;
+    font-family: PingFang SC;
-font-size: px2rem(34);
+    font-weight: 600;
-color: #FFF783;
+    font-size: px2rem(34);
-line-height: px2rem(36);
+    color: #FFF783;
-text-align: center;
+    line-height: px2rem(36);
-margin: px2rem(400) px2rem(50);
+    text-align: center;
-display: none;
+    margin: px2rem(400) px2rem(50);
+    display: none;
+}
+
+.arabic {
+    .receiverList .receiver_content .receiver_box .jackpot {
+        margin-right: auto;
+        margin-left: 0;
+    }
 }

view/molistar/activity/luckyNumbers/index.html

@@ -24,17 +24,17 @@
         <div class="time_kuang">
           <img src="./images/time_kuang.png" alt="" />
           <div class="time_text" id="hours">00</div>
-          <div class="time_type">Hours</div>
+          <div class="time_type Hours">Hours</div>
         </div>
         <div class="time_kuang">
           <img src="./images/time_kuang.png" alt="" />
           <div class="time_text" id="minutes">00</div>
-          <div class="time_type">Mins</div>
+          <div class="time_type Mins">Mins</div>
         </div>
         <div class="time_kuang">
           <img src="./images/time_kuang.png" alt="" />
           <div class="time_text" id="seconds">00</div>
-          <div class="time_type">Secs</div>
+          <div class="time_type Secs">Secs</div>
         </div>
       </div>
       <div class="tip_chang">
@@ -72,7 +72,7 @@
           <span class="Deadline_for_participation"
             >Deadline for participation</span
           >
-          06:09:00
+          <span class="countdown_txt"></span>
         </div>
       </div>
       <div class="today_number Today_Fortunate_Number">

view/molistar/activity/luckyNumbers/js/index.js

@@ -84,10 +84,17 @@ function translateFun() {
     $('.my_history').html(langReplace(localLang.demoModule.My_history));
     $('.Number_participants').html(langReplace(localLang.demoModule.Number_participants));
     $('.Rewards').html(langReplace(localLang.demoModule.Rewards));
-
+    $('.top_bg .rules').html(langReplace(localLang.demoModule.Rules));
+    $('.popup_rule .popup_content .title').html(langReplace(localLang.demoModule.Rules));
+    $('.fortunate_number .history_btn').html(langReplace(localLang.demoModule.History));
+    $('.Hours').html(langReplace(localLang.demoModule.Hours));
+    $('.Mins').html(langReplace(localLang.demoModule.Mins));
+    $('.Secs').html(langReplace(localLang.demoModule.Secs));
+    
 
 }
 var totalSeconds;
+
 function getData() {
     showLoading();
     networkRequest({
@@ -114,40 +121,61 @@ function getData() {
                     `
                     $('.top_bg .tip_chang .tip_txt').html(str)
                 }
-                $('.my_number .numberList').text(res.data.numberList.join(' 、'))
+                // 幸运数字个位数情况
-                // 开奖
                 if (res.data.luckyNumber) {
                     if (String(res.data.luckyNumber).length == 1) {
                         res.data.luckyNumber = '0' + res.data.luckyNumber
                     }
 
                     // 关闭数字滚动动画
-                    pauseAnimation();
+                    // pauseAnimation(res.data);
+                    let numStr = '';
+                    res.data.numberList.forEach((item, index) => {
+                        if (item == res.data.luckyNumber) {
+                            numStr += ` <span style="color:#FFFFFF">${item}</span>`
+                        } else {
+                            numStr += ` <span>${item}</span> `
+                        }
+                        if (index < res.data.numberList.length - 1) {
+                            numStr += '、';
+                        }
+                    })
+                    $('.my_number .numberList').html(numStr)
 
-                    $('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
+                } else {
-                    $('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
+                    $('.my_number .numberList').text(res.data.numberList.join(' 、'))
-                    $('.fortunate_number .num_show .left_txt').css('top', '15%')
-                    $('.fortunate_number .num_show .right_txt').css('top', '15%')
                 }
-                // 如果中奖了，弹窗
-                if (res.data.numberList.includes(res.data.luckyNumber)) {
-                    $('.popup_congratulations').show();
-                    // 阻止背景滚动
-                    $('body').css('overflow', 'hidden');
-                    $('.popup_congratulations .popup_content .detail_txt .date').text(res.data.date)
-                }
-
-
-
-
                 totalSeconds = res.data.countDownSecond;
                 // // 初始化时分秒显示
                 const initialTime = formatTime(totalSeconds);
                 updateCountdownDisplay(initialTime);
                 pauseCountdown();
                 if (totalSeconds != 0) {
+                    localStorage.setItem("displayStatus", JSON.stringify(false));
                     // 开始倒计时
                     startCountdown();
+                } else {
+                    let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
+                    // 不为true执行下面 有一次滚动动画 ，true只会渲染数字
+                    if (!displayStatus) {
+                        // 开启滚动动画
+                        startAnimation()
+                        setTimeout(() => {
+                            // 关闭数字滚动动画
+                            pauseAnimation(res.data);
+                            // 渲染幸运数字
+                            $('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
+                            $('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
+                            $('.fortunate_number .num_show .left_txt').css('top', '15%')
+                            $('.fortunate_number .num_show .right_txt').css('top', '15%')
+                        }, 3000);
+                    } else {
+                        // 渲染幸运数字
+                        $('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
+                        $('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
+                        $('.fortunate_number .num_show .left_txt').css('top', '15%')
+                        $('.fortunate_number .num_show .right_txt').css('top', '15%')
+                    }
                 }
             } else {
                 toastMsg(res.message)
@@ -160,7 +188,7 @@ function getData() {
         },
     })
 }
-
+// 数字滚动动画
 function startAnimation() {
     $('.fortunate_number .num_show .left_txt .animation_box').show();
     $('.fortunate_number .num_show .right_txt .animation_box').show();
@@ -169,13 +197,29 @@ function startAnimation() {
     $('.fortunate_number .num_show .left_txt  .txt_container').css('animation-play-state', 'running');
     $('.fortunate_number .num_show .right_txt  .txt_container').css('animation-play-state', 'running');
 }
-function pauseAnimation() {
+// 关闭数字滚动动画
+function pauseAnimation(obj) {
     $('.fortunate_number .num_show .left_txt .animation_box').hide();
     $('.fortunate_number .num_show .right_txt .animation_box').hide();
     $('.fortunate_number .num_show .left_txt .no_animation').show();
     $('.fortunate_number .num_show .right_txt .no_animation').show();
     $('.fortunate_number .num_show .left_txt  .txt_container').css('animation-play-state', 'paused');
     $('.fortunate_number .num_show .right_txt  .txt_container').css('animation-play-state', 'paused');
+    // 如果中奖了，弹窗
+    if (obj.numberList.includes(obj.luckyNumber)) {
+        let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
+        // 为true不执行下面
+        if (displayStatus) return
+        console.log('中奖了弹窗');
+        // 展示弹窗
+        $('.popup_congratulations').show();
+        // 阻止背景滚动
+        $('body').css('overflow', 'hidden');
+        $('.popup_congratulations .popup_content .detail_txt .date').text(obj.date)
+        localStorage.setItem("displayStatus", JSON.stringify(true));
+    } else {
+        localStorage.setItem("displayStatus", JSON.stringify(true));
+    }
 }
 // 历史轮次
 function getListHistoryRound() {
@@ -234,6 +278,7 @@ function updateCountdownDisplay(time) {
     $('#hours').text(time.hours);
     $('#minutes').text(time.minutes);
     $('#seconds').text(time.seconds);
+    $('.countdown_txt').text(time.hours + ':' + time.minutes + ':' + time.seconds)
 }
 var countdownInterval;
 // 倒计时函数
@@ -246,8 +291,8 @@ function startCountdown() {
             startAnimation()
             pauseCountdown();
             setTimeout(() => {
-            getData();
+                getData();
-            }, 2000);
+            }, 3000);
             console.log('Countdown ended!');
             return;
         }
@@ -260,11 +305,11 @@ function startCountdown() {
         totalSeconds--;
     }, 1000);
 }
-
+// 清除计时器
 function pauseCountdown() {
     clearInterval(countdownInterval);
 }
-
+// 监听页面显示事件
 document.addEventListener('visibilitychange', () => {
     if (document.hidden) {
         pauseCountdown();
@@ -282,12 +327,13 @@ $('.fortunate_bottom .participate_btn').click(function () {
     // 阻止背景滚动
     $('body').css('overflow', 'hidden');
 });
-// 关闭
+// 关闭投入弹窗
 $('.popup_sumbit .popup_content .close_btn').click(function () {
     $('.popup_sumbit').hide();
     // 阻止背景滚动
     $('body').css('overflow', 'auto');
 });
+// 提交选择的幸运数字
 $('.popup_sumbit .popup_content .sumbit_btn').click(function () {
     let number = String(leftNumber) + String(rightNumber);
     submitLuckyNumber(number)
@@ -322,7 +368,7 @@ $('.fortunate_number .history_btn').click(function () {
     // 阻止背景滚动
     $('body').css('overflow', 'hidden');
 });
-// 关闭
+// 关闭历史轮次
 $('.popup_history .popup_content .close_btn').click(function () {
     $('.popup_history').hide();
     // 阻止背景滚动
@@ -334,7 +380,7 @@ $('.top_bg .rules').click(function () {
     // 阻止背景滚动
     $('body').css('overflow', 'hidden');
 });
-// 关闭
+// 关闭规则
 $('.popup_rule .popup_content .close_btn').click(function () {
     $('.popup_rule').hide();
     // 阻止背景滚动

view/molistar/activity/luckyNumbers/js/myHistory.js

@@ -68,19 +68,23 @@ function getData() {
         success: function (res) {
             if (res.code == 200) {
                 let str = '';
-                res.data.forEach(item => {
+                res.data.forEach((item, index) => {
                     if (String(item.luckyNumber).length == 1) {
                         item.luckyNumber = '0' + item.luckyNumber
                     }
-                    let numStr =''
+                    let numStr = ''
-                    item.numberList.forEach(itemTwo=>{
+                    item.numberList.forEach((itemTwo, indexTwo)  => {
-                        if(String(itemTwo).length == 1){
+                        if (String(itemTwo).length == 1) {
                             itemTwo = '0' + itemTwo
                         }
-                        if(item.luckyNumber == itemTwo){
+                        if (item.luckyNumber == itemTwo) {
-                            numStr += `<span style="color:#FFFFFF">${itemTwo}</span>`
+                            numStr += ` <span style="color:#FFFFFF">${itemTwo}</span>`
-                        }else{
+                        } else {
-                        numStr += ` <span>${itemTwo}</span> `
+                            numStr += ` <span>${itemTwo}</span> `
+                        }
+                        // 只有不是最后一个元素时才加顿号
+                        if (indexTwo < item.numberList.length - 1) {
+                            numStr += '、';
                         }
                     })
                     str += `
@@ -100,7 +104,7 @@ function getData() {
                         <div class="my_number">${langReplace(localLang.demoModule.My_Participate_Number)}:  ${numStr} </div>
                     </div>
                     `
-                    
+
                 });
                 $('.content_list').append(str)
             } else {
@@ -114,15 +118,37 @@ function getData() {
         },
     })
 }
-$(document).on('click','.Receive_btn' ,function () {
+function getJackpot(date) {
-    $('#myVideo').show();
+    showLoading();
-    $('#myVideo')[0].play()
+    networkRequest({
-    $('#myVideo').on('ended', function () {
+        type: "POST",
-        window.location.href = './resultsView.html'
+        url: urlPrefix + "/luckyNumber/getJackpot",
-        return
+        data: {
+            date
+        },
+        success: function (res) {
+            hideLoading(layerIndex);
+            if (res.code == 200) {
+                $('#myVideo').show();
+                $('#myVideo')[0].play()
+                $('#myVideo').on('ended', function () {
+                    window.location.href = './resultsView.html?date=' + date
+                    return
+                })
+            }
+        },
+        error: function (res) {
+            console.log(res, "报错啦");
+            hideLoading(layerIndex);
+        },
     })
+}
+// 点击领取奖励
+$(document).on('click', '.Receive_btn', function () {
+    let date = $(this).attr('date');
+    getJackpot(date);
 })
-$(document).on('click','.view_results' ,function () {
+$(document).on('click', '.view_results', function () {
     let date = $(this).attr('date');
     console.log(date)
     window.location.href = './resultsView.html?date=' + date

view/molistar/activity/luckyNumbers/js/resultsView.js

@@ -60,6 +60,7 @@ function translateFun() {
     $('.Received_Successful').html(langReplace(localLang.demoModule.Received_Successful));
     $('.Put_wallet').html(langReplace(localLang.demoModule.Put_wallet));
     $('.already_claimed').html(langReplace(localLang.demoModule.already_claimed));
+    $('.Only_data_30').html(langReplace(localLang.demoModule.Only_data_30));
 
 
 }
@@ -73,7 +74,7 @@ function getData() {
             hideLoading(layerIndex);
             if (res.code == 200) {
                 $('.page_title').text(res.data.date + '   ' + langReplace(localLang.demoModule.Fortunate))
-                if (res.data.status == 0) {
+                if (res.data.status == 0 || ((!res.data.jackpot||res.data.jackpot==0) &&   !res.data.receiverList)) {
                     // 没人中奖
                     $('.one_pool').hide()
                     $('.No_one_pool').show()
@@ -82,7 +83,8 @@ function getData() {
                     // 中奖的已领取
                     $('.one_pool').show()
                     $('.No_one_pool').hide()
-
+                    $('.receiverList .title .num').text(res.data?.receiverList.length)
+                    $('.top_img .conis_bg .jackpot').text(res.data.jackpot)
                 } else if (res.data.status == -1) {
                     $('.one_pool').show()
                     $('.No_one_pool').hide()
@@ -100,11 +102,39 @@ function getData() {
                             'color': '#292419'
                         })
                         $('.top_img .conis_bg .jackpot').text(res.data.jackpot)
-$('.Received_Successful').text(langReplace(localLang.demoModule.Coins_expired))
+                        $('.Received_Successful').text(langReplace(localLang.demoModule.Coins_expired))
-$('.Put_wallet').text(langReplace(localLang.demoModule.Remember_time))
+                        $('.Put_wallet').text(langReplace(localLang.demoModule.Remember_time))
                     }
                 }
 
+                if(res.data.receiverList){
+                    let str = '';
+                    res.data.receiverList.forEach(item => {
+                        str += `
+                            <div class="receiver_box">
+                                <div class="avatar">
+                                <img src="${item.avatar}" alt="">
+                                </div>
+                                <div class="info">
+                                <div class="name">
+                                    <span class="nick">${item.nick}</span>
+                                    <img src="${item.userLevelVo.experUrl}" alt="" class="experUrl">
+                                    <img src="${item.userLevelVo.charmUrl}" alt="" class="charmUrl">
+                                </div>
+                                <div class="id">ID: <span class="erbanNo">${item.erbanNo}</span> </div>
+                                <div class="date">${item.receiveTime}</div>
+                                </div>
+                                <div class="jackpot">
+                                <div class="num">${item.jackpot}</div>
+                                <img src="./images/coins.png" alt="">
+                                </div>
+                            </div>
+                        `
+                    });
+                    $('.receiverList .receiver_content').append(str)
+                    $('.Only_data_30').show()
+                }
+
             } else {
                 toastMsg(res.message)
             }

view/molistar/activity/luckyNumbers/local/ar.js

@@ -38,6 +38,11 @@ langAr = {
         No_one_pool:'لم يشارك أحد في مجموعة الجوائز هذه',
         Received_Successful:'تم الاستلام بنجاح',
         Put_wallet:'ضعها في محفظتك',
-
+        Rules:'القواعد',
+        History:'تاريخ',
+        Rewards:'المكافأة',
+        Hours: `ساعات`,
+        Mins: `دقائق`,
+        Secs: `ثواني`,
     }
 }

view/molistar/activity/luckyNumbers/local/en.js

@@ -38,5 +38,11 @@ langEn = {
         No_one_pool:'No one has shared this prize pool',
         Received_Successful:'Received Successful',
         Put_wallet:'Put in your wallet',
+        Rules:'Rules',
+        History:'History',
+        Rewards:'Reward',
+        Hours: `Hours`,
+        Mins: `Mins`,
+        Secs: `Secs`,
     }
 }

view/molistar/activity/luckyNumbers/local/tr.js

@@ -38,5 +38,11 @@ langTr = {
         No_one_pool:'Kimse bu ödül havuzunu paylaşmadı',
         Received_Successful:'Başarılı Alındı',
         Put_wallet:'Cüzdanına koy',
+        Rules:'Kurallar',
+        History:'Tarih',
+        Rewards:'Ödül',
+        Hours: `Hours`,
+        Mins: `Mins`,
+        Secs: `Secs`,
     }
 }

view/molistar/activity/luckyNumbers/local/zh.js

@@ -38,5 +38,11 @@ langZh = {
         No_one_pool:'無人分享此獎金池',
         Received_Successful:'接收成功',
         Put_wallet:'放入錢包',
+        Rules:'活動規則',
+        History:'歷史',
+        Rewards:'獎勵',
+        Hours: `Hours`,
+        Mins: `Mins`,
+        Secs: `Secs`,
     }
 }

view/molistar/activity/luckyNumbers/resultsView.html

@@ -33,9 +33,9 @@
     <div class="Put_wallet">Put in your wallet</div>
 
     <div class="receiverList">
-      <div class="title"> <span class="">12</span> <span class="already_claimed"> have already claimed</span></div>
+      <div class="title"> <span class="num">0</span> <span class="already_claimed"> have already claimed</span></div>
       <div class="receiver_content">
-        <div class="receiver_box">
+        <!-- <div class="receiver_box">
             <div class="avatar">
               <img src="" alt="">
             </div>
@@ -52,7 +52,7 @@
               <div class="num"></div>
               <img src="./images/coins.png" alt="">
             </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="Only_data_30">Only show last 30 days data</div>