新增peko新春榜单

view/peko/activity/2024-yearBenefits/css/index.css

@@ -79,10 +79,6 @@ body {
   color: transparent;
 }
 
-.page1 {
-  display: none;
-}
-
 .page1 .pageImg1 {
   display: block;
   width: 9.2rem;
@@ -97,6 +93,10 @@ body {
   margin: 0 auto 0.46667rem;
 }
 
+.page2 {
+  display: none;
+}
+
 .page2 .box {
   width: 9.2rem;
   height: 17.14667rem;
@@ -320,6 +320,12 @@ body {
 .page2 .box ul {
   width: 8.56rem;
   margin: 0 auto 1.84rem;
+  overflow-y: scroll;
+  height: 6.6rem;
+}
+
+.page2 .box ul::-webkit-scrollbar {
+  display: none;
 }
 
 .page2 .box ul li {
@@ -442,6 +448,7 @@ body {
 }
 
 .rule {
+  display: none;
   position: fixed;
   left: 0;
   top: 0;
@@ -460,4 +467,98 @@ body {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.rule .rule_in .tabRule {
+  width: 6.50667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 0.64rem;
+  background: #fff;
+  margin: 0.6rem auto 0.25333rem;
+}
+
+.rule .rule_in .tabRule div {
+  text-align: center;
+  color: #CA5987;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  width: 3.25333rem;
+}
+
+.rule .rule_in .tabRule .act {
+  background: url(../images/rule_act.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+}
+
+.rule .rule_in .box1 {
+  width: 7.34667rem;
+  height: 11.4rem;
+  overflow-y: scroll;
+  margin: 0 auto;
+}
+
+.rule .rule_in .box1::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .box1 img {
+  display: block;
+  width: 7.25333rem;
+}
+
+.rule .rule_in .box2 {
+  display: none;
+}
+
+.rule .rule_in .box2 .box2Tab {
+  width: 4.74667rem;
+  height: 0.8rem;
+  margin: 0 auto 0.26667rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.rule .rule_in .box2 .box2Tab div {
+  width: 2.34667rem;
+}
+
+.rule .rule_in .box2 .box2Tab .tab1 {
+  background: url(../images/box2tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box2 .box2Tab .tab2 {
+  background: url(../images/box2tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box2 .box2Tab .act1 {
+  background: url(../images/box2tabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box2 .box2Tab .act2 {
+  background: url(../images/box2tabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box2 .imgBox {
+  width: 7.52rem;
+  height: 10rem;
+  margin: 0 auto;
+  overflow-y: scroll;
+}
+
+.rule .rule_in .box2 .imgBox::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .box2 .imgBox img {
+  width: 100%;
+  display: block;
 }

view/peko/activity/2024-yearBenefits/css/index.scss

@@ -85,7 +85,7 @@ body {
 }
 
 .page1 {
-    display: none;
+    // display: none;
 
     .pageImg1 {
         display: block;
@@ -103,6 +103,8 @@ body {
 }
 
 .page2 {
+    display: none;
+
     .box {
         width: px2rem(690);
         height: px2rem(1286);
@@ -329,6 +331,12 @@ body {
         ul {
             width: px2rem(642);
             margin: 0 auto px2rem(138);
+            overflow-y: scroll;
+            height: 6.6rem;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
 
             li {
                 width: 100%;
@@ -456,6 +464,7 @@ body {
 }
 
 .rule {
+    display: none;
     position: fixed;
     left: 0;
     top: 0;
@@ -473,5 +482,100 @@ body {
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+        overflow: hidden;
+
+        .tabRule {
+            width: px2rem(488);
+            height: px2rem(76);
+            line-height: px2rem(76);
+            display: flex;
+            justify-content: space-between;
+            border-radius: px2rem(48);
+            background: #fff;
+            margin: px2rem(45) auto px2rem(19);
+
+            div {
+                text-align: center;
+                color: #CA5987;
+                font-size: px2rem(28);
+                font-weight: 500;
+                width: px2rem(244);
+            }
+
+            .act {
+                background: url(../images/rule_act.png) no-repeat;
+                background-size: 100% 100%;
+                color: #fff;
+            }
+        }
+
+        .box1 {
+            width: px2rem(551);
+            height: 11.4rem;
+            overflow-y: scroll;
+            margin: 0 auto;
+            // display: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            img {
+                display: block;
+                width: px2rem(544);
+            }
+        }
+
+        .box2 {
+            display: none;
+
+            .box2Tab {
+                width: px2rem(356);
+                height: px2rem(60);
+                margin: 0 auto px2rem(20);
+                display: flex;
+                justify-content: space-between;
+
+                div {
+                    width: px2rem(176);
+                }
+
+                .tab1 {
+                    background: url(../images/box2tab1.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .tab2 {
+                    background: url(../images/box2tab2.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .act1 {
+                    background: url(../images/box2tabAct1.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .act2 {
+                    background: url(../images/box2tabAct2.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+
+            .imgBox {
+                width: px2rem(564);
+                height: 10rem;
+                margin: 0 auto;
+                overflow-y: scroll;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
     }
 }

view/peko/activity/2024-yearBenefits/index.html

@@ -10,51 +10,51 @@
 </head>
 
 <body>
-    <!-- 顶部返回 -->
+    <!-- 頂部返回 -->
     <div class="back">
         <img src="./images/travel/back.png" alt="">
     </div>
-    <!-- 头部 -->
+    <!-- 頭部 -->
     <div class="header">
         <img src="./images/rule_icon.png" alt="" class="rule_icon">
     </div>
     <!-- tab -->
     <div class="tab">
         <div class="tab1">新春福利</div>
-        <div class="">新春榜单</div>
+        <div class="">新春榜單</div>
     </div>
-    <!-- 页面1 -->
+    <!-- 頁面1 -->
     <div class="page1">
         <img src="./images/pageImg1.png" alt="" class="pageImg1">
         <img src="./images/pageImg2.png" alt="" class="pageImg2">
     </div>
-    <!-- 页面2 -->
+    <!-- 頁面2 -->
     <div class="page2">
         <div class="box">、
-            <!-- 切换 -->
+            <!-- 切換 -->
             <div class="listTab">
-                <div class="listTab1">财气榜</div>
-                <div class="">福气榜</div>
+                <div class="listTab1">財氣榜</div>
+                <div class="">福氣榜</div>
             </div>
             <!-- 前三 -->
             <div class="topBox">
                 <div class="top1">
                     <img src="./images/ts1.png" alt="" class="ts">
                     <img src="./images/logo.png" alt="" class="tx">
-                    <div class="name">用户昵称</div>
-                    <div class="score">财富值: <b>0</b></div>
+                    <div class="name">用戶昵稱</div>
+                    <div class="score">財氣值: <b>0</b></div>
                 </div>
                 <div class="top2">
                     <img src="./images/ts2.png" alt="" class="ts">
                     <img src="./images/logo.png" alt="" class="tx">
-                    <div class="name">用户昵称</div>
-                    <div class="score">财富值: <b>0</b></div>
+                    <div class="name">用戶昵稱</div>
+                    <div class="score">財氣值: <b>0</b></div>
                 </div>
                 <div class="top3">
                     <img src="./images/ts3.png" alt="" class="ts">
                     <img src="./images/logo.png" alt="" class="tx">
-                    <div class="name">用户昵称</div>
-                    <div class="score">财富值: <b>0</b></div>
+                    <div class="name">用戶昵稱</div>
+                    <div class="score">財氣值: <b>0</b></div>
                 </div>
             </div>
             <!-- 非前三 -->
@@ -62,26 +62,43 @@
                 <li>
                     <div class="num">4</div>
                     <img src="./images/logo.png" alt="" class="tx">
-                    <div class="name">用户昵称</div>
+                    <div class="name">用戶昵稱</div>
                     <div class="score">財氣值：999999999</div>
                 </li>
             </ul>
             <div class="my">
                 <div class="num">未上榜</div>
                 <img src="./images/logo.png" alt="" class="tx">
-                <div class="name">用户昵称</div>
+                <div class="name">用戶昵稱</div>
                 <div class="score">財氣值：999999999</div>
             </div>
         </div>
     </div>
-    <!-- 免责声明 -->
+    <!-- 免責宣告 -->
     <div class="bootom">
         <p>本活動最終解釋權歸官方所有</p>
         <p>本活動以及獎勵與蘋果/Google公司無關</p>
     </div>
-    <!-- 弹窗规则 -->
+    <!-- 彈窗規則 -->
     <div class="rule">
-        <div class="rule_in"></div>
+        <div class="rule_in">
+            <div class="tabRule">
+                <div class="act">活動規則</div>
+                <div>活動獎勵</div>
+            </div>
+            <div class="box1">
+                <img src="./images/rule1.png" alt="">
+            </div>
+            <div class="box2">
+                <div class="box2Tab">
+                    <div class="tab1 act1"></div>
+                    <div class="tab2"></div>
+                </div>
+                <div class="imgBox">
+                    <img src="./images/img1.png" alt="" srcset="">
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 

view/peko/activity/2024-yearBenefits/js/index.js

@@ -4,9 +4,9 @@ let env = EnvCheck();
 if (env == 'test') {
     new VConsole();
 }
-// 封装layer消息提醒框
+// 封裝layer消息提醒框
 let layerIndex
-const showLoading = (content = '加载中...') => {
+const showLoading = (content = '加載中...') => {
     layer.open({
         type: 2,
         shadeClose: false,
@@ -26,12 +26,12 @@ const toastMsg = (content = '操作完成', time = 2) => {
         skin: 'msg'
     })
 }
-
-// 初始化函数
+var rankType = 2;
+// 初始化函數
 $(function () {
     getInfoFromClient()
     setTimeout(function () {
-        // 页面全屏
+        // 頁面全屏
         if (browser.app) {
             if (browser.android) {
                 window.androidJsObj.initShowNav(false)
@@ -39,7 +39,7 @@ $(function () {
                 window.webkit.messageHandlers.initShowNav.postMessage(0)
             }
         };
-        // 顶部返回事件
+        // 頂部返回事件
         $('.back').click(() => {
             if (browser.android) {
                 window.androidJsObj.closeWebView()
@@ -51,14 +51,49 @@ $(function () {
     }, 100)
 })
 // 接口
-function get () {
+function getRank () {
     showLoading()
     networkRequest({
         type: 'get',
-        url: urlPrefix + '',
-        data: { type: taskType },
+        url: urlPrefix + '/act/special/gift/getRank',
+        data: { rankType: rankType, page: 1, pageSize: 30 },
         success (res) {
             if (res.code === 200) {
+                // 處理前三
+                var top3 = res.data.rankList.slice(0, 3);
+                var notTop3 = res.data.rankList.slice(3);
+                if (top3.length < 3) {
+                    let arr = new Array(3 - top3.length).fill({
+                        avatar: './images/logo.png',
+                        nick: '虛位以待',
+                        score: "0"
+                    })
+                    top3.push(...arr)
+                }
+                top3.forEach((res, index) => {
+                    $(`.page2 .box .topBox .top${index + 1} .tx`).attr('src', res.avatar);
+                    $(`.page2 .box .topBox .top${index + 1} .name`).text(res.nick);
+                    $(`.page2 .box .topBox .top${index + 1} .score`).text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
+                })
+                // 處理非前三
+                var str = '';
+                $('.page2 .box ul li').remove();
+                notTop3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="num">${res.ranking}</div>
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <div class="name">${res.nick}</div>
+                            <div class="score">${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
+                        </li>
+                    `
+                })
+                $('.page2 .box ul').append(str);
+                // 處理自己
+                $('.page2 .box .my .tx').attr('src', res.data.meRank.avatar);
+                $('.page2 .box .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
+                $('.page2 .box .my .name').text(res.data.meRank.nick);
+                $('.page2 .box .my .score').text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
             } else {
                 toastMsg(res.message)
             }
@@ -66,22 +101,58 @@ function get () {
         },
         error (err) {
             hideLoading(layerIndex)
-            toastMsg('网络错误，请退出重进')
+            toastMsg('網路錯誤，請退出重進')
         }
     })
 }
 
-// tab切换
+// tab切換
 $('.tab div').click(function () {
     var i = $(this).index() + 1;
     $('.page1,.page2').hide();
     $(`.page${i}`).show();
     $('.tab div').removeClass('tab1').removeClass('tab2');
     $(this).addClass(`tab${i}`);
+    if (i == 2) {
+        getRank();
+    }
 })
-// 榜单切换
+// 榜單切換
 $('.page2 .box .listTab div').click(function () {
     var i = $(this).index() + 1;
     $('.page2 .box .listTab div').removeClass('listTab1').removeClass('listTab2');
     $(this).addClass(`listTab${i}`);
+    if (i == 1) {
+        rankType = 2;
+    } else {
+        rankType = 4;
+    }
+    getRank()
+})
+
+// 規則切換
+$('.rule .rule_in .tabRule div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    $('.rule .rule_in .box1,.rule .rule_in .box2').hide();
+    $(`.rule .rule_in .box${i}`).show();
+    return false;
+})
+$('.rule .rule_in .box2 .box2Tab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.rule .rule_in .box2 .box2Tab div').removeClass('act1').removeClass('act2')
+    $(this).addClass(`act${i}`);
+    $('.rule .rule_in .box2 .imgBox img').attr('src', `./images/img${i}.png`)
+    return false;
+})
+// 打開規則
+$('.header .rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 關閉規則
+$('.rule').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+    return false;
 })