完成新塔罗

view/peko/common/js/common2.js

@@ -793,4 +793,13 @@ function networkRequest (reqObj = {}, type) {
 
     const response = $.ajax(reqObj);
     return response;
+}
+// 控制body是否可以滑动
+function bodyScroolFun (bool) {
+    if (bool) {
+        $('body').css('overflow', 'hidden');
+    } else {
+        $('body').css('overflow', 'auto');
+
+    }
 }

view/peko/modules/luckyTarot/css/index.css

@@ -6,7 +6,6 @@ body {
   background-size: 100% 100%;
   margin: 0 auto;
   position: relative;
-  overflow-y: scroll;
 }
 
 .back {
@@ -75,6 +74,7 @@ body {
   text-align: center;
   padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
   box-sizing: border-box;
+  z-index: 9;
 }
 
 .tarotBox {
@@ -394,4 +394,116 @@ h3 {
   text-align: center;
 }
 
+.rule_pub {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.4);
+  display: none;
+}
+.rule_pub .rule_pub_in {
+  width: 8.72rem;
+  height: 11.6533333333rem;
+  background: url(../images/rule.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.rule_pub .rule_pub_in .close {
+  position: absolute;
+  width: 0.9066666667rem;
+  height: 0.9066666667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1.3333333333rem;
+}
+
+.winningRecord {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.4);
+  display: none;
+}
+.winningRecord .winningRecord_in {
+  width: 8.72rem;
+  height: 11.6533333333rem;
+  background: url(../images/winningRecord.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.winningRecord .winningRecord_in .title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.4266666667rem;
+}
+.winningRecord .winningRecord_in .title div {
+  width: 25%;
+  color: #FFFFFF;
+  font-size: 0.3733333333rem;
+  margin-top: 2.1866666667rem;
+  text-align: center;
+}
+.winningRecord .winningRecord_in ul {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.04rem;
+  height: 8rem;
+  margin: 0 auto;
+  overflow-y: scroll;
+}
+.winningRecord .winningRecord_in ul::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+.winningRecord .winningRecord_in ul li {
+  background: none;
+  width: 100%;
+  height: 1.0666666667rem;
+  line-height: 1.0666666667rem;
+  color: #FFEE9D;
+  font-size: 0.3466666667rem;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.winningRecord .winningRecord_in ul li div {
+  text-align: center;
+  width: 25%;
+}
+.winningRecord .winningRecord_in ul li .box {
+  line-height: 1.0666666667rem;
+}
+.winningRecord .winningRecord_in ul li .box_acitve {
+  line-height: 0.45rem;
+  margin-top: 0.1rem;
+}
+.winningRecord .winningRecord_in ul li .time {
+  line-height: 0.4rem;
+  margin-top: 0.2rem;
+}
+.winningRecord .winningRecord_in ul .active {
+  background: rgba(135, 133, 243, 0.6);
+}
+.winningRecord .winningRecord_in .close {
+  position: absolute;
+  width: 0.9066666667rem;
+  height: 0.9066666667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1.3333333333rem;
+}
+
 /*# sourceMappingURL=index.css.map */

view/peko/modules/luckyTarot/css/index.scss

@@ -10,7 +10,7 @@ body {
     background-size: 100% 100%;
     margin: 0 auto;
     position: relative;
-    overflow-y: scroll;
+    // overflow-y: scroll;
 }
 
 .back {
@@ -81,6 +81,7 @@ body {
     text-align: center;
     padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
     box-sizing: border-box;
+    z-index: 9;
 }
 
 .tarotBox {
@@ -232,19 +233,23 @@ body {
         background: url(../images/card3_active.png) no-repeat;
         background-size: 100% 100%;
     }
+
     .card_not {
         background: url(../images/not.png) no-repeat;
         background-size: 100% 100%;
     }
-    .card_winning1{
+
+    .card_winning1 {
         background: url(../images/winning1.png) no-repeat;
         background-size: 100% 100%;
     }
-    .card_winning2{
+
+    .card_winning2 {
         background: url(../images/winning2.png) no-repeat;
         background-size: 100% 100%;
     }
-    .card_winning3{
+
+    .card_winning3 {
         background: url(../images/winning3.png) no-repeat;
         background-size: 100% 100%;
     }
@@ -307,6 +312,7 @@ body {
         transform: translateX(-50%);
         top: px2rem(560, );
     }
+
     .butAgain {
         width: px2rem(188, );
         height: px2rem(74, );
@@ -451,4 +457,130 @@ h3 {
     color: #D7D9F7;
     font-size: px2rem(18, );
     text-align: center;
+}
+
+.rule_pub {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 99999;
+    background: rgba(0, 0, 0, .4);
+    display: none;
+
+    .rule_pub_in {
+        width: px2rem(654, );
+        height: px2rem(874, );
+        background: url(../images/rule.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        .close {
+            position: absolute;
+            width: px2rem(68, );
+            height: px2rem(68, );
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(-100, );
+        }
+    }
+}
+
+.winningRecord {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 99999;
+    background: rgba(0, 0, 0, .4);
+    display: none;
+
+    .winningRecord_in {
+        width: px2rem(654, );
+        height: px2rem(874, );
+        background: url(../images/winningRecord.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        .title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: px2rem(32, );
+
+            div {
+                width: 25%;
+                color: #FFFFFF;
+                font-size: px2rem(28, );
+                margin-top: px2rem(164, );
+                text-align: center;
+            }
+        }
+
+        ul {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 px2rem(3, );
+            height: 8rem;
+            margin: 0 auto;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                width: 0;
+                display: none;
+            }
+
+            li {
+                background: none;
+                width: 100%;
+                height: px2rem(80, );
+                line-height: px2rem(80, );
+                color: #FFEE9D;
+                font-size: px2rem(26, );
+                display: flex;
+                justify-content: space-between;
+                overflow: hidden;
+
+                div {
+                    text-align: center;
+                    width: 25%;
+                }
+
+                .box {
+                    line-height: px2rem(80, );
+                }
+
+                .box_acitve {
+                    line-height: 0.45rem;
+                    margin-top: 0.1rem;
+                }
+
+                .time {
+                    line-height: 0.4rem;
+                    margin-top: 0.2rem;
+                }
+            }
+
+            .active {
+                background: rgba(135, 133, 243, 0.6);
+            }
+        }
+
+        .close {
+            position: absolute;
+            width: px2rem(68, );
+            height: px2rem(68, );
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(-100, );
+        }
+    }
 }

view/peko/modules/luckyTarot/index.html

@@ -109,6 +109,37 @@
     <!-- 本活動最終解釋權歸所有&本活動以及活動獎勵與蘋果公司無關 -->
     <h3>本活動最終解釋權歸Peko所有</h3>
     <h3>本活動以及活動獎勵與Google/蘋果公司無關</h3>
+    <!-- 活动规则弹窗 -->
+    <div class="rule_pub">
+        <div class="rule_pub_in">
+            <img src="./images/close.png" alt="" class="close">
+        </div>
+    </div>
+    <div class="winningRecord">
+        <div class="winningRecord_in">
+            <div class="title">
+                <div>等級</div>
+                <div>選擇卡牌</div>
+                <div>中獎情況</div>
+                <div>時間</div>
+            </div>
+            <ul>
+                <!-- <li>
+                    <div>初级卡</div>
+                    <div>X张</div>
+                    <div class="box">未中奖</div>
+                    <div class="time">2021.05.14<br>15:00:00</div>
+                </li>
+                <li>
+                    <div>初级卡</div>
+                    <div>X张</div>
+                    <div class="box_acitve">中奖<br>1000000钻石</div>
+                    <div class="time">2021.05.14<br>15:00:00</div>
+                </li> -->
+            </ul>
+            <img src="./images/close.png" alt="" class="close">
+        </div>
+    </div>
 </body>
 
 </html>

view/peko/modules/luckyTarot/js/index.js

@@ -26,18 +26,20 @@ const toastMsg = (content = '操作完成', time = 2) => {
         skin: 'msg'
     })
 }
-var cardArr = [];//记录选择卡片
+var cardArr = [];//記錄選擇卡片
-var gearPosition = []//档位价值的钻石
+var gearPosition = []//檔位價值的鉆石
-var gearPositionActive = 0;//当前选泽的档位
+var gearPositionActive = 0;//當前選澤的檔位
-var prodId = [];//档位类型
+var prodId = [];//檔位類型
 var prodIdActive;
-var lock = true;//锁
+var lock = true;//鎖
-// 初始化函数
+var page = 1;//頁碼
+var scrollLock = true;
+// 初始化函數
 $(function () {
     setTimeout(function () {
         getInfoFromClient()
         setTimeout(function () {
-            // 页面全屏
+            // 頁面全屏
             if (browser.app) {
                 if (browser.android) {
                     window.androidJsObj.initShowNav(false)
@@ -45,7 +47,7 @@ $(function () {
                     window.webkit.messageHandlers.initShowNav.postMessage(0)
                 }
             };
-            // 顶部返回事件
+            // 頂部返回事件
             $('.back').click(() => {
                 if (browser.android) {
                     window.androidJsObj.closeWebView()
@@ -100,7 +102,7 @@ function getAdvertising () {
         }
     })
 }
-// 档位接口 
+// 檔位接口 
 function productList () {
     showLoading()
     networkRequest({
@@ -153,7 +155,50 @@ const getUserInfo = () => {
         }
     })
 }
-// 抽奖接口
+// 抽獎記錄
+const recordPage = () => {
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/seekElfin/record/page',
+        data: {
+            uid: pubInfo.uid,
+            current: page,
+            size: 10,
+        },
+        success: function (res) {
+            if (res.code == 200) {
+                var str = ''
+                res.data.records.forEach((res, i) => {
+                    str += `
+                        <li calss="${i % 2 == 0 ? 'active' : ''}">
+                            <div>${res.prodName}</div>
+                            <div>${JSON.parse(res.selectdNo).length}張</div>
+                            <div class="box ${res.win ? 'box_acitve' : ''}">${res.win ? `中獎<br>${res.receiveGoldNum}鉆石` : '未中獎'}</div>
+                            <div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh.mm.ss')}</div>
+                        </li>
+                    `
+                });
+                $('.winningRecord .winningRecord_in ul').append(str);
+                if (res.data.records.length == 0) {
+                    scrollLock = false;
+                } else {
+                    scrollLock = true;
+                }
+            } else {
+                scrollLock = true;
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex)
+        },
+        error: function (res) {
+            scrollLock = true;
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 抽獎接口
 const draw = () => {
     lock = false;
     showLoading()
@@ -185,22 +230,22 @@ const draw = () => {
         }
     })
 }
-// 恢复初始样式函数
+// 恢復初始樣式函數
 function initialStytle () {
     lock = true;
-    // 清空已选卡片
+    // 清空已選卡片
     cardArr = [];
-    // 恢复卡片默认样式
+    // 恢復卡片默認樣式
     $('.tarotBox .cardBox').removeClass('card1_active');
     $('.tarotBox .cardBox').removeClass('card2_active');
     $('.tarotBox .cardBox').removeClass('card3_active');
 
-    // 恢复默认选择文案
+    // 恢復默認選擇文案
     $('.tarotBox .cardBoxText').html(`
         <p>供選擇 <b>${cardArr.length}</b> 張</p>
-        <p>翻到钻石卡的概率为<b>${cardArr.length * 10}%</b></p>
+        <p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
     `);
-    // 清除中奖&未中奖样式
+    // 清除中獎&未中獎樣式
     $('.tarotBox .cardBox').removeClass('card_not');
     $('.tarotBox .cardBox').removeClass('card_winning1');
     $('.tarotBox .cardBox').removeClass('card_winning2');
@@ -212,7 +257,7 @@ function initialStytle () {
     $('.cardBoxBut').show();
     $('.butAgain').hide();
 }
-// 处理动效
+// 處理動效
 function kineticEffect (arr, bool, data) {
     arr.forEach((res, i) => {
         $(`.tarotBox .cardBox${res}`).css({
@@ -230,17 +275,17 @@ function kineticEffect (arr, bool, data) {
             $(`.tarotBox .cardBox${res}`).addClass('card_not');
         })
         if (bool) {
-            //中奖
+            //中獎
             $(`.tarotBox .cardBox${data.data.drawNum}`).addClass(prodIdActive == 1 ? 'card_winning1' : prodIdActive == 2 ? 'card_winning2' : 'card_winning3')
             $('.tarotBox .cardBoxText').hide();
             $('.tarotBox .cardBoxText_gift').hide();
             $('.cardBoxText_gx').html(`
-                <p>翻到钻石卡!</p>
+                <p>翻到鉆石卡!</p>
-                <p>获得 <b>${data.data.receiveGoldNum}</b> 钻石</p>
+                <p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
             `)
             $('.cardBoxText_gx').show();
         } else {
-            //未中奖
+            //未中獎
             $('.tarotBox .cardBoxText').hide();
             $('.tarotBox .cardBoxText_gift').hide();
             $('.tarotBox .cardBoxText_no').show();
@@ -250,16 +295,16 @@ function kineticEffect (arr, bool, data) {
         $('.butAgain').show();
     }, 1000)
 }
-// 档位tab切换按钮
+// 檔位tab切換按鈕
 $('.tarotBox .tabBox div').click(function () {
     var i = $(this).index() + 1;
-    // 切换tab样式
+    // 切換tab樣式
     $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
     $(this).addClass(`active${i}`);
-    // 切换卡牌样式
+    // 切換卡牌樣式
     $('.tarotBox .cardBox').hide();
     $(`.tarotBox .card${i}`).show();
-    // 切换按钮样式
+    // 切換按鈕樣式
     $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
     // if (i == 1) {
     gearPositionActive = gearPosition[i - 1];
@@ -272,25 +317,25 @@ $('.tarotBox .tabBox div').click(function () {
     //     gearPosition = 10000;
     //     $('.tarotBox .gradeText b').text(gearPosition * 10);
     // }
-    // 清空默认样式
+    // 清空默認樣式
     initialStytle();
 })
-// 选择初级卡片按钮
+// 選擇初級卡片按鈕
 $('.tarotBox .card1').click(function () {
     var i = $(this).index();
     tarotBox($(this), i, 1);
 })
-// 选择中级卡片按钮
+// 選擇中級卡片按鈕
 $('.tarotBox .card2').click(function () {
     var i = $(this).index();
     tarotBox($(this), i, 2);
 })
-// 选择高级卡片按钮
+// 選擇高級卡片按鈕
 $('.tarotBox .card3').click(function () {
     var i = $(this).index();
     tarotBox($(this), i, 3);
 })
-// 选择卡片样式
+// 選擇卡片樣式
 function tarotBox (dom, i, type) {
     if (lock) {
         var i = type == 1 ? dom.index() - 3 : type == 2 ? dom.index() - 13 : dom.index() - 23;
@@ -299,7 +344,7 @@ function tarotBox (dom, i, type) {
                 dom.addClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
                 cardArr.push(i);
             } else {
-                toastMsg('最多只能选择9张');
+                toastMsg('最多只能選擇9張');
             }
         } else {
             dom.removeClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
@@ -307,22 +352,22 @@ function tarotBox (dom, i, type) {
         }
         $('.tarotBox .cardBoxText').html(`
         <p>供選擇 <b>${cardArr.length}</b> 張</p>
-        <p>翻到钻石卡的概率为<b>${cardArr.length * 10}%</b></p>
+        <p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
     `);
         console.log(cardArr);
     }
 }
-// 翻牌按钮
+// 翻牌按鈕
 $('.tarotBox .cardBoxBut').click(function () {
     if (cardArr.length == 0) {
-        toastMsg('请先选择卡片');
+        toastMsg('請先選擇卡片');
         return;
     }
     if (lock) {
         draw();
     }
 })
-// 再翻一次按钮
+// 再翻一次按鈕
 $('.butAgain').click(function () {
     initialStytle();
 })
@@ -351,3 +396,40 @@ $('.tarotBox .diamond').click(() => {
         toastMsg('請在app內打開')
     }
 })
+// 打開規則
+$('.rule').click(function () {
+    bodyScroolFun(true);
+    $('.rule_pub ').show();
+})
+// 關閉規則
+$('.rule_pub .rule_pub_in .close').click(function () {
+    bodyScroolFun(false);
+    $('.rule_pub ').hide();
+})
+// 打開記錄
+$('.record').click(function () {
+    $('.winningRecord .winningRecord_in ul li').remove();
+    page = 1;
+    recordPage();
+    bodyScroolFun(true);
+    $('.winningRecord ').show();
+})
+// 關閉記錄
+$('.winningRecord .winningRecord_in .close').click(function () {
+    bodyScroolFun(false);
+    $('.winningRecord ').hide();
+})
+// 記錄監聽滾動
+$('.winningRecord .winningRecord_in ul').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.winningRecord .winningRecord_in ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 10 >= scrollHeight) {
+        if (scrollLock) {
+            scrollLock = false;
+            page++;
+            recordPage();
+            console.log('到底了');
+        }
+    }
+})