完善首页，我的历史页面接入接口

2025-05-13 11:03:19 +08:00
parent e421eea056
commit e6594ee2d8
10 changed files with 206 additions and 6 deletions
--- a/view/molistar/activity/luckyNumbers/css/index.css
+++ b/view/molistar/activity/luckyNumbers/css/index.css
@@ -570,4 +570,67 @@ body {
 .popup_rule .popup_content .close_btn img {
  width: 0.8rem;
  height: 0.8rem;
+}
+
+.popup_congratulations {
+  display: none;
+  /* 初始状态下隐藏弹窗 */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  /* 确保弹窗在最顶层 */
+}
+.popup_congratulations .popup_content {
+  background-image: url("../images/popup_bg.png");
+  background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 9.6rem;
+  padding: 0.5333333333rem 0;
+}
+.popup_congratulations .popup_content .title {
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.4266666667rem;
+  color: #FFF784;
+  line-height: 0.48rem;
+  text-align: center;
+  margin-bottom: 0.5333333333rem;
+}
+.popup_congratulations .popup_content .detail_txt {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.3733333333rem;
+  color: #FFF784;
+  line-height: 0.5066666667rem;
+  text-align: center;
+  margin: 0.6266666667rem 0.8rem;
+}
+.popup_congratulations .popup_content .go_btn {
+  background-image: url("../images/participate_btn.png");
+  background-size: 100% 100%;
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.5333333333rem;
+  color: #5D2600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4rem 1.3333333333rem;
+  margin: 0.48rem 2.6666666667rem;
+}
+.popup_congratulations .popup_content .close_btn {
+  position: absolute;
+  top: -15%;
+  right: 2%;
+}
+.popup_congratulations .popup_content .close_btn img {
+  width: 0.8rem;
+  height: 0.8rem;
 }
--- a/view/molistar/activity/luckyNumbers/css/index.scss
+++ b/view/molistar/activity/luckyNumbers/css/index.scss
@@ -622,7 +622,8 @@ body {
            text-align: center;
            margin-bottom: px2rem(40);
        }
-        .detail_txt{
+
+        .detail_txt {
            height: px2rem(580);
            overflow-y: auto; // 超出高度时可滚动
            scrollbar-width: none; // 隐藏滚动条（Firefox）
@@ -641,13 +642,84 @@ body {
                margin: 0 px2rem(60);
            }
        }
-        

        .close_btn {
            position: absolute;
            top: -12%;
            right: 2%;

+            img {
+                width: px2rem(60);
+                height: px2rem(60);
+            }
+        }
+    }
+}
+
+.popup_congratulations {
+    display: none;
+    /* 初始状态下隐藏弹窗 */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+
+    /* 确保弹窗在最顶层 */
+    .popup_content {
+        background-image: url('../images/popup_bg.png');
+        background-size: 100% 100%;
+        // margin: 0 px2rem(14);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(720);
+        padding: px2rem(40) 0;
+        // height: px2rem(457);
+
+        .title {
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(32);
+            color: #FFF784;
+            line-height: px2rem(36);
+            text-align: center;
+            margin-bottom: px2rem(40);
+        }
+
+        .detail_txt {
+            font-family: PingFang SC;
+            font-weight: 400;
+            font-size: px2rem(28);
+            color: #FFF784;
+            line-height: px2rem(38);
+            text-align: center;
+            margin: px2rem(47) px2rem(60);
+        }
+
+        .go_btn {
+            background-image: url('../images/participate_btn.png');
+            background-size: 100% 100%;
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(40);
+            color: #5D2600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: px2rem(30) px2rem(100);
+            margin: px2rem(36) px2rem(200);
+        }
+
+
+        .close_btn {
+            position: absolute;
+            top: -15%;
+            right: 2%;
+
            img {
                width: px2rem(60);
                height: px2rem(60);
--- a/view/molistar/activity/luckyNumbers/index.html
+++ b/view/molistar/activity/luckyNumbers/index.html
@@ -187,6 +187,19 @@
        </div>
      </div>
    </div>
+
+    <div class="popup_congratulations">
+      <div class="popup_content">
+        <div class="title Congratulations">Congratulations</div>
+        <div class="detail_txt">Congratulations on becoming the lucky one in the 20250430th issue. Go and receive the reward now!</div>
+        <div class="go_btn">Go</div>
+        <div class="close_btn">
+          <img src="./images/close_btn.png" alt="" />
+        </div>
+      </div>
+    </div>
+
+
  </body>
 </html>

--- a/view/molistar/activity/luckyNumbers/js/index.js
+++ b/view/molistar/activity/luckyNumbers/js/index.js
@@ -114,6 +114,21 @@ 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
+                    }
+                    $('.fortunate_number .num_show .left_txt').text(String(res.data.luckyNumber).substring(0, 1))
+                    $('.fortunate_number .num_show .right_txt').text(String(res.data.luckyNumber).substring(1, 2))
+                    $('.fortunate_number .num_show .left_txt').css('top', '35%')
+                    $('.fortunate_number .num_show .right_txt').css('top', '35%')
+                }
+                if (res.data.numberList.includes(res.data.luckyNumber)) {
+                    $('.popup_congratulations').show();
+                    // 阻止背景滚动
+                    $('body').css('overflow', 'hidden');
+                }
+
                totalSeconds = res.data.countDownSecond;
                // // 初始化时分秒显示
                // const initialTime = formatTime(totalSeconds);
@@ -144,6 +159,9 @@ function getListHistoryRound() {
                let arr = res.data
                let str = '';
                for (let i = 0; i < arr.length; i++) {
+                    if(String(arr[i].luckyNumber).length ==1 ){
+                        arr[i].luckyNumber = '0'+arr[i].luckyNumber
+                    }
                    str += `
                <div class="history_box">
                    <div class="left">
@@ -194,6 +212,8 @@ function startCountdown() {
        if (totalSeconds <= 0) {
            clearInterval(countdownInterval);
            // 倒计时结束，可以在这里执行其他操作
+            pauseCountdown();
+            // getData();
            console.log('Countdown ended!');
            return;
        }
@@ -286,7 +306,17 @@ $('.popup_rule .popup_content .close_btn').click(function () {
    // 阻止背景滚动
    $('body').css('overflow', 'auto');
 });
-
+// 关闭中奖弹窗
+$('.popup_congratulations .popup_content .close_btn').click(function () {
+    $('.popup_congratulations').hide();
+    // 阻止背景滚动
+    $('body').css('overflow', 'auto');
+});
+// 跳转我的历史
+$('.popup_congratulations .popup_content .go_btn').click(function () {
+    window.location.href = `./myHistory.html`
+    return
+});
 $('.my_history').click(function () {
    window.location.href = `./myHistory.html`
    return
--- a/view/molistar/activity/luckyNumbers/js/resultsView.js
+++ b/view/molistar/activity/luckyNumbers/js/resultsView.js
@@ -52,4 +52,14 @@ $(function () {

    }, 100)

-})
+})
+$(".foot_btn").click(function (event) {
+    event.preventDefault(); // 阻止默认行为
+  
+    var deepLinkUrl = `molistar://app?code=`; // 你的 Deep Link URL
+    window.location.href = deepLinkUrl;
+     // 设置超时检测
+     setTimeout(function() {
+      window.location.href = 'https://api.molistar.xyz/molistar/home/index.html'
+    }, 2000); // 超时时间 500ms
+  })
--- a/view/molistar/activity/luckyNumbers/local/ar.js
+++ b/view/molistar/activity/luckyNumbers/local/ar.js
@@ -27,5 +27,8 @@ langAr = {
        people_sharing:'شخص يشاركون في مجموعة الجوائز اليوم',
        Reward:'المكافأة',
        Fortunate_published:'تم نشر الرقم المحظوظ',
+        Receive_Coins:'استلام العملات المعدنية',
+        View_Results:'عرض النتائج',
+        Expired:'منتهية الصلاحية',
    }
 }
--- a/view/molistar/activity/luckyNumbers/local/en.js
+++ b/view/molistar/activity/luckyNumbers/local/en.js
@@ -27,5 +27,8 @@ langEn = {
        people_sharing:'people sharing the prize pool today',
        Reward:'Reward',
        Fortunate_published:'Fortunate number has been published',
+        Receive_Coins:'Receive Coins',
+        View_Results:'View Results',
+        Expired:'Expired',
    }
 }
--- a/view/molistar/activity/luckyNumbers/local/tr.js
+++ b/view/molistar/activity/luckyNumbers/local/tr.js
@@ -27,5 +27,8 @@ langTr = {
        people_sharing:'Bugün ödül havuzunu paylaşan',
        Reward:'Ödül',
        Fortunate_published:'Şanslı sayı yayınlandı',
+        Receive_Coins:'Madeni Para Alın',
+        View_Results:'Sonuçları Görüntüle',
+        Expired:'Süresi doldu',
    }
 }
--- a/view/molistar/activity/luckyNumbers/local/zh.js
+++ b/view/molistar/activity/luckyNumbers/local/zh.js
@@ -27,5 +27,8 @@ langZh = {
        people_sharing:'人參與分享獎池',
        Reward:'獎勵',
        Fortunate_published:'幸運數字已開',
+        Receive_Coins:'接收硬幣',
+        View_Results:'檢視結果',
+        Expired:'過期',
    }
 }
--- a/view/molistar/activity/luckyNumbers/myHistory.html
+++ b/view/molistar/activity/luckyNumbers/myHistory.html
@@ -20,7 +20,7 @@
      <p class="page_title">My history</p>
    </div>
    <div class="content_list">
-      <div class="content_box">
+      <!-- <div class="content_box">
        <div class="felx_box">
          <div class="left">
            <div class="time">2025-04-30 21:00</div>
@@ -44,7 +44,7 @@
          <div class="view_results">View Results <img src="./images/results_right.png" alt=""></div>
        </div>
        <div class="my_number">My Participate Number: 54、36、21、30、54、36、21</div>
-      </div>
+      </div> -->


    </div>