新塔罗暂存

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

@@ -6,7 +6,7 @@ body {
   background-size: 100% 100%;
   margin: 0 auto;
   position: relative;
-  overflow: hidden;
+  overflow-y: scroll;
 }
 
 .back {
@@ -88,7 +88,6 @@ body {
 .tarotBox .tabBox {
   width: 9.56rem;
   height: 1.3066666667rem;
-  line-height: 1.3066666667rem;
   display: flex;
   justify-content: space-between;
   background: url(../images/tabBox.png) no-repeat;
@@ -99,14 +98,40 @@ body {
   width: 3.3733333333rem;
   height: 100%;
   color: #FEF0C0;
-  font-size: 0.4266666667rem;
+  font-size: 0.3733333333rem;
   text-align: center;
+  box-sizing: border-box;
+  padding-top: 0.3466666667rem;
+}
+.tarotBox .tabBox div b {
+  color: #FEF0C0;
+  font-size: 0.24rem;
+  margin-top: 0.04rem;
 }
 .tarotBox .tabBox .active1 {
   background: url(../images/active1.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+.tarotBox .tabBox .active1 b {
+  color: #FFFFFF;
+}
+.tarotBox .tabBox .active2 {
+  background: url(../images/active2.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+}
+.tarotBox .tabBox .active2 b {
+  color: #FFFFFF;
+}
+.tarotBox .tabBox .active3 {
+  background: url(../images/active3.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+}
+.tarotBox .tabBox .active3 b {
+  color: #FFFFFF;
+}
 .tarotBox .gradeText {
   position: absolute;
   left: 0.9866666667rem;
@@ -151,9 +176,49 @@ body {
   width: 1.9733333333rem;
   height: 3.2133333333rem;
   position: absolute;
+}
+.tarotBox .card1 {
   background: url(../images/card.png) no-repeat;
   background-size: 100% 100%;
 }
+.tarotBox .card2 {
+  background: url(../images/card2.png) no-repeat;
+  background-size: 100% 100%;
+  display: none;
+}
+.tarotBox .card3 {
+  background: url(../images/card3.png) no-repeat;
+  background-size: 100% 100%;
+  display: none;
+}
+.tarotBox .card1_active {
+  background: url(../images/card1_active.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card2_active {
+  background: url(../images/card2_active.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card3_active {
+  background: url(../images/card3_active.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card_not {
+  background: url(../images/not.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card_winning1 {
+  background: url(../images/winning1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card_winning2 {
+  background: url(../images/winning2.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .card_winning3 {
+  background: url(../images/winning3.png) no-repeat;
+  background-size: 100% 100%;
+}
 .tarotBox .cardBox0 {
   left: 0.9466666667rem;
   top: 2.0933333333rem;
@@ -194,13 +259,131 @@ body {
   left: 0.9466666667rem;
   top: 5.52rem;
 }
-.tarotBox .but {
-  width: 2.5333333333rem;
-  height: 1.0133333333rem;
+.tarotBox .cardBoxBut {
+  width: 2.5066666667rem;
+  height: 0.9866666667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.32rem;
+  top: 7.4666666667rem;
+}
+.tarotBox .butAgain {
+  width: 2.5066666667rem;
+  height: 0.9866666667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 7.4666666667rem;
+  display: none;
+}
+.tarotBox .gonggao {
+  width: 100%;
+  height: 1.1rem;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 12.5rem;
+  overflow: hidden;
+}
+.tarotBox .gonggao .ul1 {
+  width: 100%;
+  height: 100%;
+}
+.tarotBox .gonggao .ul1 li {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.32rem;
+  margin-bottom: 0.1466666667rem;
+}
+.tarotBox .gonggao .ul1 li b {
+  color: #FFEAA9;
+}
+.tarotBox .gonggao .ul1 li i {
+  font-style: normal;
+  color: #80E6FF;
+}
+.tarotBox .cardBoxText_gift {
+  width: 4.2666666667rem;
+  height: 3.0133333333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.76rem;
+  color: #FEF0C0;
+  font-size: 0.4rem;
+  text-align: center;
+}
+.tarotBox .cardBoxText_gx {
+  width: 4.2666666667rem;
+  height: 3.0133333333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.52rem;
+  box-sizing: border-box;
+  padding-top: 0.88rem;
+  display: none;
+}
+.tarotBox .cardBoxText_gx p {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 0.2133333333rem;
+  color: #FFE26D;
+  font-size: 0.3733333333rem;
+}
+.tarotBox .cardBoxText_gx p i {
+  font-style: normal;
+}
+.tarotBox .cardBoxText_gx p b {
+  color: #FFE26D;
+}
+.tarotBox .cardBoxText_no {
+  width: 4.2666666667rem;
+  height: 3.0133333333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.52rem;
+  box-sizing: border-box;
+  padding-top: 0.88rem;
+  display: none;
+}
+.tarotBox .cardBoxText_no p {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 0.2133333333rem;
+  color: #fff;
+  font-size: 0.3733333333rem;
+}
+.tarotBox .cardBoxText_no p i {
+  font-style: normal;
+}
+.tarotBox .cardBoxText_no p b {
+  color: #80E6FF;
+}
+.tarotBox .cardBoxText {
+  width: 4.2666666667rem;
+  height: 3.0133333333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.52rem;
+  box-sizing: border-box;
+  padding-top: 0.88rem;
+}
+.tarotBox .cardBoxText p {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 0.2133333333rem;
+  color: #fff;
+  font-size: 0.3733333333rem;
+}
+.tarotBox .cardBoxText p i {
+  font-style: normal;
+}
+.tarotBox .cardBoxText p b {
+  color: #80E6FF;
 }
 
 h3 {

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

@@ -10,7 +10,7 @@ body {
     background-size: 100% 100%;
     margin: 0 auto;
     position: relative;
-    overflow: hidden;
+    overflow-y: scroll;
 }
 
 .back {
@@ -94,7 +94,6 @@ body {
     .tabBox {
         width: px2rem(717, );
         height: px2rem(98, );
-        line-height: px2rem(98, );
         display: flex;
         justify-content: space-between;
         background: url(../images/tabBox.png) no-repeat;
@@ -105,14 +104,46 @@ body {
             width: px2rem(253, );
             height: 100%;
             color: #FEF0C0;
-            font-size: px2rem(32, );
+            font-size: px2rem(28, );
             text-align: center;
+            box-sizing: border-box;
+            padding-top: px2rem(26, );
+
+            b {
+                color: #FEF0C0;
+                font-size: px2rem(18, );
+                margin-top: px2rem(3, );
+            }
         }
 
         .active1 {
             background: url(../images/active1.png) no-repeat;
             background-size: 100% 100%;
             color: #FFFFFF;
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+
+        .active2 {
+            background: url(../images/active2.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FFFFFF;
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+
+        .active3 {
+            background: url(../images/active3.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FFFFFF;
+
+            b {
+                color: #FFFFFF;
+            }
         }
     }
 
@@ -165,10 +196,59 @@ body {
         width: px2rem(148, );
         height: px2rem(241, );
         position: absolute;
+        // transition: all 1s;
+    }
+
+    .card1 {
         background: url(../images/card.png) no-repeat;
         background-size: 100% 100%;
     }
 
+
+    .card2 {
+        background: url(../images/card2.png) no-repeat;
+        background-size: 100% 100%;
+        display: none;
+    }
+
+
+    .card3 {
+        background: url(../images/card3.png) no-repeat;
+        background-size: 100% 100%;
+        display: none;
+    }
+
+    .card1_active {
+        background: url(../images/card1_active.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .card2_active {
+        background: url(../images/card2_active.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .card3_active {
+        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{
+        background: url(../images/winning1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+    .card_winning2{
+        background: url(../images/winning2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+    .card_winning3{
+        background: url(../images/winning3.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
     .cardBox0 {
         left: px2rem(71, );
         top: px2rem(157, );
@@ -219,13 +299,149 @@ body {
         top: px2rem(414, );
     }
 
-    .but{
-        width: px2rem(190, );
-        height: px2rem(76, );
+    .cardBoxBut {
+        width: px2rem(188, );
+        height: px2rem(74, );
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(549, );
+        top: px2rem(560, );
+    }
+    .butAgain {
+        width: px2rem(188, );
+        height: px2rem(74, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(560, );
+        display: none;
+    }
+
+    .gonggao {
+        width: 100%;
+        height: 1.1rem;
+        box-sizing: border-box;
+        position: absolute;
+        left: 0;
+        top: 12.5rem;
+        overflow: hidden;
+
+        .ul1 {
+            width: 100%;
+            height: 100%;
+
+            li {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(24, );
+                margin-bottom: px2rem(11, );
+
+                b {
+                    color: #FFEAA9;
+                }
+
+                i {
+                    font-style: normal;
+                    color: #80E6FF;
+                }
+            }
+        }
+    }
+
+    .cardBoxText_gift {
+        width: px2rem(320, );
+        height: px2rem(226, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(432, );
+        color: #FEF0C0;
+        font-size: px2rem(30, );
+        text-align: center;
+    }
+
+    .cardBoxText_gx {
+        width: px2rem(320, );
+        height: px2rem(226, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(414, );
+        box-sizing: border-box;
+        padding-top: px2rem(66, );
+        display: none;
+
+        p {
+            width: 100%;
+            text-align: center;
+            margin-bottom: px2rem(16, );
+            color: #FFE26D;
+            font-size: px2rem(28, );
+
+            i {
+                font-style: normal;
+            }
+
+            b {
+                color: #FFE26D;
+            }
+        }
+    }
+
+    .cardBoxText_no {
+        width: px2rem(320, );
+        height: px2rem(226, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(414, );
+        box-sizing: border-box;
+        padding-top: px2rem(66, );
+        display: none;
+
+        p {
+            width: 100%;
+            text-align: center;
+            margin-bottom: px2rem(16, );
+            color: #fff;
+            font-size: px2rem(28, );
+
+            i {
+                font-style: normal;
+            }
+
+            b {
+                color: #80E6FF;
+            }
+        }
+    }
+
+    .cardBoxText {
+        width: px2rem(320, );
+        height: px2rem(226, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(414, );
+        box-sizing: border-box;
+        padding-top: px2rem(66, );
+
+        p {
+            width: 100%;
+            text-align: center;
+            margin-bottom: px2rem(16, );
+            color: #fff;
+            font-size: px2rem(28, );
+
+            i {
+                font-style: normal;
+            }
+
+            b {
+                color: #80E6FF;
+            }
+        }
     }
 }
 

view/peko/modules/luckyTarot/index.html

@@ -16,7 +16,7 @@
     <!-- 顶部返回 -->
     <div class="back">
         <img src="./images/travel/back.png" alt="">
-        <p>幸运塔罗</p>
+        <!-- <p>幸运塔罗</p> -->
     </div>
     <!-- 主视觉 -->
     <img src="./images/header.png" alt="" class="header">
@@ -30,35 +30,85 @@
     <div class="tarotBox">
         <!-- 选择等级tab -->
         <div class="tabBox">
-            <div class="active1">初級卡</div>
-            <div>中級卡</div>
-            <div>高級卡</div>
+            <div class="active1 tabBox1">初級卡<br><b>100鉆/張</b></div>
+            <div class="tabBox2">中級卡<br><b>1000鉆/張</b></div>
+            <div class="tabBox3">高級卡<br><b>10000鉆/張</b></div>
         </div>
         <!-- 等级介绍 -->
-        <p class="gradeText">翻到金幣卡獲得<b>100</b>金幣</p>
+        <p class="gradeText">翻到钻石卡獲得<b>1000</b>钻石</p>
         <!-- 剩余钻石 -->
         <div class="diamond">
             <img src="./images/diamond.png" alt="" class="diamondIcon">
-            <b>1000</b>
+            <b>0</b>
             <img src="./images/add.png" alt="" class="add">
         </div>
         <!-- 默认卡片 -->
-        <div class="cardBox cardBox0"></div>
-        <div class="cardBox cardBox1"></div>
-        <div class="cardBox cardBox2"></div>
-        <div class="cardBox cardBox3"></div>
-        <div class="cardBox cardBox4"></div>
-        <div class="cardBox cardBox5"></div>
-        <div class="cardBox cardBox6"></div>
-        <div class="cardBox cardBox7"></div>
-        <div class="cardBox cardBox8"></div>
-        <div class="cardBox cardBox9"></div>
+        <div class="cardBox cardBox0 card1"></div>
+        <div class="cardBox cardBox1 card1"></div>
+        <div class="cardBox cardBox2 card1"></div>
+        <div class="cardBox cardBox3 card1"></div>
+        <div class="cardBox cardBox4 card1"></div>
+        <div class="cardBox cardBox5 card1"></div>
+        <div class="cardBox cardBox6 card1"></div>
+        <div class="cardBox cardBox7 card1"></div>
+        <div class="cardBox cardBox8 card1"></div>
+        <div class="cardBox cardBox9 card1"></div>
+        <!-- 中级卡片 -->
+        <div class="cardBox cardBox0 card2"></div>
+        <div class="cardBox cardBox1 card2"></div>
+        <div class="cardBox cardBox2 card2"></div>
+        <div class="cardBox cardBox3 card2"></div>
+        <div class="cardBox cardBox4 card2"></div>
+        <div class="cardBox cardBox5 card2"></div>
+        <div class="cardBox cardBox6 card2"></div>
+        <div class="cardBox cardBox7 card2"></div>
+        <div class="cardBox cardBox8 card2"></div>
+        <div class="cardBox cardBox9 card2"></div>
+        <!-- 高级卡片 -->
+        <div class="cardBox cardBox0 card3"></div>
+        <div class="cardBox cardBox1 card3"></div>
+        <div class="cardBox cardBox2 card3"></div>
+        <div class="cardBox cardBox3 card3"></div>
+        <div class="cardBox cardBox4 card3"></div>
+        <div class="cardBox cardBox5 card3"></div>
+        <div class="cardBox cardBox6 card3"></div>
+        <div class="cardBox cardBox7 card3"></div>
+        <div class="cardBox cardBox8 card3"></div>
+        <div class="cardBox cardBox9 card3"></div>
+        <!-- 女神眷顾你 -->
+        <div class="cardBoxText_gift">願幸運之神眷顧你</div>
+        <!-- 中奖文按提示 -->
+        <div class="cardBoxText_gx">
+            <p>翻到钻石卡!</p>
+            <p>获得 <b>0</b> 钻石</p>
+        </div>
+        <!-- 选择文按提示 -->
+        <div class="cardBoxText">
+            <p>供选择 <b>0</b> 张</p>
+            <p>获得<i>0</i>钻石的概率为<b>0%</b></p>
+        </div>
+        <!-- 没中文案提示 -->
+        <div class="cardBoxText_no">
+            <p>差一点就成功了</p>
+            <p>别灰心</p>
+        </div>
         <!-- 翻拍按钮 -->
-        <img src="./images/but.png" alt="" class="but">
+        <img src="./images/but1.png" alt="" class="cardBoxBut">
+        <!-- 再翻一次按钮 -->
+        <img src="./images/butAgain1.png" alt="" class="butAgain">
+        <!-- 公告 -->
+        <div class="gonggao">
+            <ul class="ul1">
+                <!-- <li>恭喜 <b>111誰誰誰誰誰...</b>翻開 <b>初级卡</b> 獲得 <i>1000鉆石</i></li>
+                <li>恭喜 <b>222誰誰誰誰誰...</b>翻開 <b>初级卡</b> 獲得 <i>1000鉆石</i></li>
+                <li>恭喜 <b>333誰誰誰誰誰...</b>翻開 <b>初级卡</b> 獲得 <i>1000鉆石</i></li>
+                <li>恭喜 <b>444誰誰誰誰誰...</b>翻開 <b>初级卡</b> 獲得 <i>1000鉆石</i></li> -->
+            </ul>
+        </div>
     </div>
     <!-- 本活動最終解釋權歸所有&本活動以及活動獎勵與蘋果公司無關 -->
-    <h3>本活動最終解釋權歸PEKO所有</h3>
-    <h3>本活動以及活動獎勵與蘋果公司無關</h3>
+    <h3>本活動最終解釋權歸Peko所有</h3>
+    <h3>本活動以及活動獎勵與Google/蘋果公司無關</h3>
 </body>
 
 </html>

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

@@ -26,6 +26,13 @@ const toastMsg = (content = '操作完成', time = 2) => {
         skin: 'msg'
     })
 }
+var cardArr = [];//记录选择卡片
+var gearPosition = []//档位价值的钻石
+var gearPositionActive = 0;//当前选泽的档位
+var prodId = [];//档位类型
+var prodIdActive;
+var lock = true;//锁
+// 初始化函数
 $(function () {
     setTimeout(function () {
         getInfoFromClient()
@@ -46,19 +53,42 @@ $(function () {
                     window.webkit.messageHandlers.closeWebView.postMessage(null)
                 }
             })
+            getAdvertising();
+            productList();
+            getUserInfo();
         }, 100)
     })
 })
-// 接口 
-function get () {
+// 公告接口 
+function getAdvertising () {
     showLoading()
     networkRequest({
         type: 'GET',
-        url: urlPrefix + '',
-        data: {},
+        url: urlPrefix + '/seekElfin/draw/list',
+        data: {
+            count: 30
+        },
         success (res) {
             if (res.code === 200) {
-
+                let result = ''
+                res.data.forEach(res => {
+                    result += `
+                      <li>恭喜 <b>${res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick}</b>翻開 <b>幸運塔羅</b> 獲得 <i>${res.receiveGoldNum}鉆石</i></li>
+                    `
+                })
+                $('.ul1').append(result)
+                var num = $(".ul1").find("li").length;
+                if (num > 1) {
+                    setInterval(function () {
+                        $('.ul1').animate({
+                            marginTop: "-0.4rem"
+                        }, 200, function () {
+                            $(this).css({
+                                marginTop: "0"
+                            }).find("li:first").appendTo(this);
+                        });
+                    }, 2000);
+                }
             } else {
                 toastMsg(res.message)
             }
@@ -69,4 +99,255 @@ function get () {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
-}
+}
+// 档位接口 
+function productList () {
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/seekElfin/product/list',
+        data: {
+            uid: pubInfo.uid
+        },
+        success (res) {
+            if (res.code === 200) {
+                gearPositionActive = res.data[0].prodNeedPrice;
+                prodIdActive = res.data[0].prodId;
+                res.data.forEach((res, i) => {
+                    gearPosition.push(res.prodNeedPrice);
+                    prodId.push(res.prodId);
+                    $(`.tarotBox .tabBox .tabBox${i + 1} b`).text(`${res.prodNeedPrice}鉆/張`)
+                })
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 獲取用戶信息
+const getUserInfo = () => {
+    showLoading()
+    networkRequest({
+        type: 'POST',
+        url: urlPrefix + '/seekElfin/user/info',
+        data: {
+            uid: pubInfo.uid
+        },
+        success: function (res) {
+            if (res.code == 200) {
+                $('.tarotBox .diamond b').text(res.data.diamonds);
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex)
+        },
+        error: function (res) {
+            hideLoading(layerIndex)
+            console.log(res, '報錯啦');
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 抽奖接口
+const draw = () => {
+    lock = false;
+    showLoading()
+    networkRequest({
+        type: 'POST',
+        url: urlPrefix + '/seekElfin/draw',
+        data: JSON.stringify({
+            prodId: prodIdActive,
+            selectedNo: cardArr,
+            // roomUid:pubInfo.roomUid,
+            roomUid: pubInfo.uid,
+        }),
+        headers: { 'Content-Type': 'application/json;charset=utf8' },
+        success: function (res) {
+            if (res.code == 200) {
+                kineticEffect(cardArr, res.data.win, res);
+                getUserInfo();
+            } else {
+                lock = true;
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex)
+        },
+        error: function (res) {
+            lock = true;
+            hideLoading(layerIndex)
+            console.log(res, '報錯啦');
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 恢复初始样式函数
+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>
+    `);
+    // 清除中奖&未中奖样式
+    $('.tarotBox .cardBox').removeClass('card_not');
+    $('.tarotBox .cardBox').removeClass('card_winning1');
+    $('.tarotBox .cardBox').removeClass('card_winning2');
+    $('.tarotBox .cardBox').removeClass('card_winning3');
+    $('.tarotBox .cardBoxText_no').hide();
+    $('.tarotBox .cardBoxText_gx').hide()
+    $('.tarotBox .cardBoxText').show();
+    $('.tarotBox .cardBoxText_gift').show();
+    $('.cardBoxBut').show();
+    $('.butAgain').hide();
+}
+// 处理动效
+function kineticEffect (arr, bool, data) {
+    arr.forEach((res, i) => {
+        $(`.tarotBox .cardBox${res}`).css({
+            transition: ' all 1s',
+            transform: 'rotateY(360deg)',
+        })
+    })
+
+    setTimeout(function () {
+        $('.tarotBox .cardBox').css({
+            transition: ' all 0s',
+            transform: 'rotateY(0deg)',
+        });
+        arr.forEach((res, i) => {
+            $(`.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>获得 <b>${data.data.receiveGoldNum}</b> 钻石</p>
+            `)
+            $('.cardBoxText_gx').show();
+        } else {
+            //未中奖
+            $('.tarotBox .cardBoxText').hide();
+            $('.tarotBox .cardBoxText_gift').hide();
+            $('.tarotBox .cardBoxText_no').show();
+        }
+        $('.cardBoxBut').hide();
+        $('.tarotBox .butAgain').attr('src', prodIdActive == 1 ? './images/butAgain1.png' : prodIdActive == 2 ? './images/butAgain2.png' : './images/butAgain3.png')
+        $('.butAgain').show();
+    }, 1000)
+}
+// 档位tab切换按钮
+$('.tarotBox .tabBox div').click(function () {
+    var i = $(this).index() + 1;
+    // 切换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];
+    prodIdActive = prodId[i - 1];
+    $('.tarotBox .gradeText b').text(gearPositionActive * 10);
+    // } else if (i == 2) {
+    //     gearPosition = 1000;
+    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
+    // } else {
+    //     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;
+        if (cardArr.indexOf(i) == -1) {
+            if (cardArr.length < 9) {
+                dom.addClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
+                cardArr.push(i);
+            } else {
+                toastMsg('最多只能选择9张');
+            }
+        } else {
+            dom.removeClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
+            cardArr.splice(cardArr.indexOf(i), 1);
+        }
+        $('.tarotBox .cardBoxText').html(`
+        <p>供選擇 <b>${cardArr.length}</b> 張</p>
+        <p>翻到钻石卡的概率为<b>${cardArr.length * 10}%</b></p>
+    `);
+        console.log(cardArr);
+    }
+}
+// 翻牌按钮
+$('.tarotBox .cardBoxBut').click(function () {
+    if (cardArr.length == 0) {
+        toastMsg('请先选择卡片');
+        return;
+    }
+    if (lock) {
+        draw();
+    }
+})
+// 再翻一次按钮
+$('.butAgain').click(function () {
+    initialStytle();
+})
+// 跳轉充值頁面
+$('.tarotBox .diamond').click(() => {
+    if (browser.app) {
+        if (browser.android) {
+            let channel = pubInfo.deviceInfo.channel;
+            console.log(pubInfo.deviceInfo);
+            if (channel == "google") {
+                window.androidJsObj.openChargePage(6);
+            } else {
+                window.androidJsObj.openChargePage(6);
+                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
+            }
+        } else if (browser.ios) {
+            let channel = pubInfo.deviceInfo.channel;
+            if (channel == "appstore") {
+                window.webkit.messageHandlers.openChargePage.postMessage(null);
+            } else {
+                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
+                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
+            }
+        }
+    } else {
+        toastMsg('請在app內打開')
+    }
+})