新增夺宝规则版本判断

view/peko/activity/act-kitchen/css/record.css

@@ -0,0 +1,307 @@
+@font-face {
+  font-family: 'pingfang-bold';
+  src: url("../../../common/fonts/PingFang Bold.ttf");
+  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
+}
+
+@font-face {
+  font-family: 'din-medium';
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
+}
+
+@font-face {
+  font-family: 'pingfang-medium';
+  src: url("../../../common/fonts/PingFang-Medium.ttf");
+  src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
+}
+
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%);
+}
+
+.img {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 6rem;
+  height: 4.13333rem;
+  background: url(../images/null.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.img p {
+  text-align: center;
+  width: 1.33333%rem;
+  position: absolute;
+  bottom: -1rem;
+  left: 50%;
+  transform: translate(-50%);
+  color: #fff;
+  font-size: 0.26667rem;
+}
+
+.record-list {
+  width: 10rem;
+  margin: 0.4rem auto;
+}
+
+.record-list li {
+  width: 100%;
+  height: 8.48rem;
+  background: url("../images/record/record-bg.png") no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.26667rem;
+  overflow: hidden;
+}
+
+.record-list li h3 {
+  width: 100%;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  text-align: center;
+  color: #fff;
+  margin: 0.3rem auto -0.3rem;
+}
+
+.record-list li .goldBox {
+  width: 90%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  background: #F46331;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 0.26667rem;
+  margin: 0.2rem auto 0;
+}
+
+.record-list li .goldBox p {
+  color: #fff;
+  width: 50%;
+  text-align: center;
+  display: none;
+}
+
+.record-list li .goldBox span {
+  color: #FFF773;
+  font-size: 0.26667rem;
+}
+
+.record-list li .result-wrap {
+  width: 84%;
+  height: 1.21333rem;
+  line-height: 1.21333rem;
+  box-sizing: border-box;
+  margin: 0.06667rem auto 0.33333rem;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.record-list li .result-wrap .result {
+  display: flex;
+  align-items: center;
+}
+
+.record-list li .result-wrap .result span {
+  font-size: 0.37333rem;
+  color: #FFFFFF;
+  padding-right: 0.18667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1.90667rem;
+  height: 0.6rem;
+  background: url(../images/record/result.png) no-repeat;
+  background-size: 100% 100%;
+  top: 0.2rem;
+}
+
+.record-list li .result-wrap .award {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0rem;
+  top: -0.1rem;
+}
+
+.record-list li .result-wrap .award p,
+.record-list li .result-wrap .award b {
+  font-size: 0.37333rem;
+  color: #FFFFFF;
+  font-weight: 600;
+}
+
+.record-list li .result-wrap .award .diamond {
+  width: 0.37333rem;
+  height: 0.37333rem;
+}
+
+.record-list li .result-wrap .result_sBox {
+  width: 8.8rem;
+  height: 1.14667rem;
+  margin: 1rem auto 0;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.record-list li .result-wrap .result_sBox .bg {
+  width: 1.14667rem;
+  height: 1.14667rem;
+  background: url("../images/record_bubble_act.png") no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+}
+
+.record-list li .result-wrap .result_sBox .bg img {
+  width: 75%;
+  display: block;
+  margin: 0.13333rem auto 0;
+}
+
+.record-list li .put-wrap {
+  width: 84%;
+  height: 1.21333rem;
+  line-height: 1.21333rem;
+  box-sizing: border-box;
+  margin: 2rem auto 0;
+  display: flex;
+  position: relative;
+}
+
+.record-list li .put-wrap .put {
+  font-size: 0.37333rem;
+  color: #FFFFFF;
+  font-weight: 600;
+  margin-right: 0.9rem;
+  position: absolute;
+  width: 1.02667rem;
+  height: 0.6rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/record/touru.png) no-repeat;
+  background-size: 100% 100%;
+  top: -0.6rem;
+}
+
+.record-list li .put-wrap .list {
+  width: 6.72rem;
+  height: 2.77333rem;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.3rem auto 0;
+}
+
+.record-list li .put-wrap .list .item {
+  width: 0.98667rem;
+  height: 1.2rem;
+  margin-right: 0.92rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.record-list li .put-wrap .list .item:nth-child(4n) {
+  margin-right: 0;
+}
+
+.record-list li .put-wrap .list .item p {
+  width: 0.82667rem;
+  height: 0.82667rem;
+  background: url("../images/record_bubble.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.record-list li .put-wrap .list .item p .gift {
+  width: 75%;
+  margin-top: 0.1rem;
+  margin-left: 0.1rem;
+}
+
+.record-list li .put-wrap .list .item div {
+  width: 100%;
+  height: 0.33333rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.record-list li .put-wrap .list .item div .diamond {
+  width: 0.33333rem;
+  height: 0.33333rem;
+  margin-top: -0.01rem;
+}
+
+.record-list li .put-wrap .list .item div .in {
+  font-size: 0.26667rem;
+  color: #FFFFFF;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.record-list li .marine_organism {
+  width: 78%;
+  height: 2.13333rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.record-list li .marine_organism span {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+  display: block;
+}
+
+.record-list li .marine_organism span img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.72rem;
+  height: 0.62667rem;
+  display: block;
+}
+
+.record-list li .marine_organism span b {
+  position: absolute;
+  right: -0.1rem;
+  top: 0.3rem;
+  color: #FFFFFF;
+  font-size: 0.26667rem;
+}
+
+.record-list li .marine_organism .active {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+
+.record-list li .marine_organism .active img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.96rem;
+  height: 0.82667rem;
+  display: block;
+}
+
+.record-list li .marine_organism .active b {
+  position: absolute;
+  right: -0.1rem;
+  top: 0.3rem;
+  color: #FEEF60;
+  font-weight: bold;
+  font-size: 0.32rem;
+}

view/peko/activity/act-kitchen/css/record.scss

@@ -0,0 +1,350 @@
+@function px2rem($px, $rem: 75) {
+    @return $px / $rem+rem;
+}
+
+// @function prefixurl() {
+//     @return 'https://img.pekolive.com/'
+// }
+
+@font-face {
+    font-family: 'pingfang-bold';
+    src: url('../../../common/fonts/PingFang\ Bold.ttf');
+    src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
+        url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
+        url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
+}
+
+@font-face {
+    font-family: 'din-medium';
+    src: url('../../../common/fonts/DINCond-Medium.ttf');
+    src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
+        url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
+        url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
+}
+
+@font-face {
+    font-family: 'pingfang-medium';
+    src: url('../../../common/fonts/PingFang-Medium.ttf');
+    src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
+        url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
+        url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%);
+}
+
+.img {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: px2rem(450 );
+    height: px2rem(310 );
+    background: url(../images/null.png) no-repeat;
+    background-size: 100% 100%;
+
+    p {
+        text-align: center;
+        width: px2rem(100% );
+        position: absolute;
+        bottom: -1rem;
+        left: 50%;
+        transform: translate(-50%);
+        color: #fff;
+        font-size: px2rem(20 );
+    }
+}
+
+.record-list {
+    width: px2rem(750 );
+    margin: px2rem(30 ) auto;
+
+    li {
+        width: 100%;
+        height: px2rem(636 );
+        // background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%);
+        background: url('../images/record/record-bg.png') no-repeat;
+        background-size: 100% 100%;
+        border-radius: px2rem(20 );
+        overflow: hidden;
+
+        h3 {
+            width: 100%;
+            height: 0.7rem;
+            line-height: 0.7rem;
+            text-align: center;
+            color: #fff;
+            margin: 0.3rem auto -0.3rem;
+
+        }
+
+        .goldBox {
+            width: 90%;
+            height: px2rem(44 );
+            line-height: px2rem(44 );
+            background: #F46331;
+            display: flex;
+            // justify-content: space-between;
+            box-sizing: border-box;
+            padding: 0 px2rem(20 );
+            margin: 0.2rem auto 0;
+
+            p {
+                color: #fff;
+                width: 50%;
+                text-align: center;
+                display: none;
+            }
+
+            span {
+                color: #FFF773;
+                font-size: px2rem(20 );
+            }
+
+            // .gold {
+            //     font-size: px2rem(26 );
+            //     color: #FEEF60;
+            // }
+        }
+
+        .result-wrap {
+            width: 84%;
+            height: px2rem(91 );
+            line-height: px2rem(91 );
+            box-sizing: border-box;
+            margin: px2rem(5 ) auto px2rem(25 );
+            display: flex;
+            justify-content: space-between;
+            position: relative;
+
+            .result {
+                display: flex;
+                align-items: center;
+
+                span {
+                    font-size: px2rem(28 );
+                    color: #FFFFFF;
+                    padding-right: px2rem(14 );
+                    font-weight: 600;
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: px2rem(143 );
+                    height: px2rem(45 );
+                    background: url(../images/record/result.png) no-repeat;
+                    background-size: 100% 100%;
+                    top: 0.2rem;
+                }
+
+                // .bg {
+                //     width: px2rem(91 );
+                //     height: px2rem(91 );
+                //     background: url('../images/record_bubble_act.png') no-repeat;
+                //     background-size: 100% 100%;
+                //     text-align: center;
+
+                //     img {
+                //         width: 75%;
+                //         margin-top: 0.15rem;
+                //     }
+                // }
+
+            }
+
+            .award {
+                display: flex;
+                align-items: center;
+                position: absolute;
+                // right: 0.8rem;
+                // top: 1.8rem;
+                right: 0rem;
+                top: -0.1rem;
+
+                p,
+                b {
+                    font-size: px2rem(28 );
+                    color: #FFFFFF;
+                    font-weight: 600;
+                }
+
+                .diamond {
+                    width: px2rem(28 );
+                    height: px2rem(28 );
+                }
+            }
+
+            .result_sBox {
+                width: px2rem(660 );
+                height: px2rem(86 );
+                margin: 1rem auto 0;
+                display: flex;
+                justify-content: center;
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+
+                .bg {
+                    width: px2rem(86 );
+                    height: px2rem(86 );
+                    background: url('../images/record_bubble_act.png') no-repeat;
+                    background-size: 100% 100%;
+                    text-align: center;
+
+                    img {
+                        width: 75%;
+                        display: block;
+                        margin: px2rem(10 ) auto 0;
+                    }
+                }
+            }
+        }
+
+        .put-wrap {
+            width: 84%;
+            height: px2rem(91 );
+            line-height: px2rem(91 );
+            box-sizing: border-box;
+            margin: 2rem auto 0;
+            display: flex;
+            position: relative;
+
+            .put {
+                font-size: px2rem(28 );
+                color: #FFFFFF;
+                font-weight: 600;
+                margin-right: 0.9rem;
+                position: absolute;
+                width: px2rem(77 );
+                height: px2rem(45 );
+                left: 50%;
+                transform: translateX(-50%);
+                background: url(../images/record/touru.png) no-repeat;
+                background-size: 100% 100%;
+                top: -0.6rem;
+            }
+
+            .list {
+                width: px2rem(504 );
+                height: px2rem(208 );
+                display: flex;
+                flex-wrap: wrap;
+                margin: 0.3rem auto 0;
+
+                .item {
+                    width: px2rem(74 );
+                    height: px2rem(90 );
+                    margin-right: 0.92rem;
+                    // position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &:nth-child(4n) {
+                        margin-right: 0;
+                    }
+
+                    p {
+                        width: px2rem(62 );
+                        height: px2rem(62 );
+                        background: url('../images/record_bubble.png') no-repeat;
+                        background-size: 100% 100%;
+
+                        .gift {
+                            width: 75%;
+                            margin-top: 0.1rem;
+                            margin-left: 0.1rem;
+                        }
+                    }
+
+                    div {
+                        width: 100%;
+                        height: px2rem(25 );
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .diamond {
+                            width: px2rem(25 );
+                            height: px2rem(25 );
+                            margin-top: -0.01rem;
+                        }
+
+                        .in {
+                            font-size: px2rem(20 );
+                            color: #FFFFFF;
+                            font-weight: 600;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+        }
+
+        .marine_organism {
+            // width: px2rem(560 );
+            width: 78%;
+            height: px2rem(160 );
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
+            span {
+                width: px2rem(120 );
+                height: px2rem(120 );
+                position: relative;
+                display: block;
+
+                img {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: px2rem(54 );
+                    height: px2rem(47 );
+                    display: block;
+                }
+
+                b {
+                    position: absolute;
+                    right: -0.1rem;
+                    top: 0.3rem;
+                    color: #FFFFFF;
+                    font-size: px2rem(20 );
+                }
+            }
+
+            .active {
+                width: px2rem(120 );
+                height: px2rem(120 );
+                position: relative;
+
+                img {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: px2rem(72 );
+                    height: px2rem(62 );
+                    display: block;
+                }
+
+                b {
+                    position: absolute;
+                    right: -0.1rem;
+                    top: 0.3rem;
+                    color: #FEEF60;
+                    // -webkit-text-stroke: px2rem(2 ) #FF5C7E;
+                    // text-stroke: px2rem(2 ) #FF5C7E;
+                    font-weight: bold;
+                    font-size: px2rem(24 );
+                }
+            }
+        }
+
+    }
+}

view/peko/activity/act-kitchen/index.html

@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>星級廚房</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頭部 -->
+    <div class="header">
+        <img src="./images/headerText.png" alt="" class="headerText">
+        <img src="./images/rule_icon.png" alt="" class="rule_icon">
+        <img src="./images/record_icon.png" alt="" class="record_icon">
+        <img src="./images/rank_icon.png" alt="" class="rank_icon">
+        <div class="headerH3">選擇鉆石 > 選擇圖標</div>
+    </div>
+    <!-- 食材大盒子 -->
+    <div class="box">
+        <!-- 標題 -->
+        <div class="boxTitle">
+            <!-- 請選擇：<b>30</b> 秒 -->
+        </div>
+        <!-- tab -->
+        <dib class="tab">
+            <div class="active">
+                <img src="./images/Bdiamond.png" alt="">
+                <b>100</b>
+            </div>
+            <div>
+                <img src="./images/Bdiamond.png" alt="">
+                <b>1000</b>
+            </div>
+            <div>
+                <img src="./images/Bdiamond.png" alt="">
+                <b>10000</b>
+            </div>
+        </dib>
+        <!-- 食材列錶 -->
+        <div class="box_in1 box_in">
+            <div class="sBox item1">
+                <div class="sBox1 ">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item2">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item3">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item4">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+        </div>
+        <div class="box_in1 box_in">
+            <div class="sBox item5">
+                <div class="sBox1 ">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item6">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item7">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+            <div class="sBox item8">
+                <div class="sBox1">
+                    <img src="" alt="">
+                </div>
+                <div class="SboxText">洋蔥</div>
+                <div class="qp">
+                    <i>已選擇</i>
+                    <p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b></b>
+                    </p>
+                </div>
+                <div class="bei">x15</div>
+            </div>
+        </div>
+        <!-- 第二輪透明遮罩 -->
+        <div class="masks"></div>
+    </div>
+    <!-- 往輪結果 -->
+    <div class="resultOut">
+        <img src="./images/wljg.png" alt="" class="wljg">
+        <img src="./images/sqp.png" alt="" class="sqp sqp1">
+        <img src="./images/sqp.png" alt="" class="sqp sqp2">
+        <img src="./images/sqp.png" alt="" class="sqp sqp3">
+        <img src="./images/sqp.png" alt="" class="sqp sqp4">
+        <img src="./images/sqp.png" alt="" class="sqp sqp5">
+        <img src="./images/sqp.png" alt="" class="sqp sqp6">
+        <img src="./images/sqp.png" alt="" class="sqp sqp7">
+        <img src="./images/sqp.png" alt="" class="sqp sqp8">
+        <img src="./images/sqp.png" alt="" class="sqp sqp9">
+        <img src="./images/sqp.png" alt="" class="sqp sqp10">
+        <img src="" alt="" class="sqp_in sqp_in1">
+        <img src="" alt="" class="sqp_in sqp_in2">
+        <img src="" alt="" class="sqp_in sqp_in3">
+        <img src="" alt="" class="sqp_in sqp_in4">
+        <img src="" alt="" class="sqp_in sqp_in5">
+        <img src="" alt="" class="sqp_in sqp_in6">
+        <img src="" alt="" class="sqp_in sqp_in7">
+        <img src="" alt="" class="sqp_in sqp_in8">
+        <img src="" alt="" class="sqp_in sqp_in9">
+        <img src="" alt="" class="sqp_in sqp_in10">
+    </div>
+    <!-- 大獎展示 -->
+    <div class="resultText"></div>
+    <!-- 免責聲明 -->
+    <h3>本活動最終解釋權歸Piko所有<br>
+        <b>活動獎勵與Google Play/Apple Store無關</b>
+    </h3>
+    <!-- 用戶信息 -->
+    <div class="my">
+        <div class="left">
+            <img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+            <img src="./images/add.png" alt="" class="add">
+            <b>鉆石余額:0</b>
+        </div>
+        <div class="right">
+            <img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+            <b>今日獎勵:0</b>
+        </div>
+    </div>
+    <!-- 開獎結果彈窗 -->
+    <div class="result_popup">
+        <div class="result_popup_in">
+            <div class="result_popup_inTitle">本輪結果 <b></b></div>
+            <!-- 中獎結果列錶 -->
+            <ul class="resultList">
+                <li>
+                    <img src="./images/logo.png" alt="">
+                    <div class="name">洋蔥</div>
+                </li>
+            </ul>
+            <!-- 收益 -->
+            <div class="income">
+                <p class="p1">
+                    <img src="./images/Sdiamond.png" alt="">
+                    <b>0</b>
+                </p>
+                <p class="p2">
+                    <img src="./images/Sdiamond.png" alt="">
+                    <b>0</b>
+                </p>
+            </div>
+            <!-- 本輪前三 -->
+            <div class="no">
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="name">虛位以待</div>
+                    <p>
+                        <img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b> 0</b>
+                    </p>
+                </div>
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="name">虛位以待</div>
+                    <p>
+                        <img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b> 0</b>
+                    </p>
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="name">虛位以待</div>
+                    <p>
+                        <img src="./images/Sdiamond.png" alt="" class="Sdiamond">
+                        <b> 0</b>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 規則彈窗 -->
+    <div class="shade-mask">
+        <div class="shade-content">
+            <main>
+                <div class="cyfs">
+                    <p class="title">參與方式</p>
+                    用戶可通過花費鉆石參與《星級廚房》遊戲，每次最少消耗100鉆石，每回合時間30秒
+                    <p class="jietu"><img src="./images/t1.png" alt=""></p>
+                </div>
+                <div class="lwff">
+                    <p class="title">禮物發放</p>
+                    每次參與遊戲後會獲得一次禮物開獎;
+                    <p class="jietu t2"><img src="./images/t2.png" alt=""></p>
+                    每次隨機從8種食材中選取一個或多個作為中獎食材，中獎後獲得（中獎物品所花費的鉆石數*中獎食材對應倍數）的鉆石獎勵，當中獎多個食材時，獲得的鉆石會同時發放。鉆石將直接發放到賬戶中。
+                    <p class="jietu t3"><img src="./images/t3.png" alt=""></p>
+                    例如購買1個5倍番茄花費100鉆，購買1個蘿蔔花費100鉆，中獎後將獲得100*5+100*5=1000鉆。
+                </div>
+                <div class="qtsm">
+                    <p class="title">其他說明</p>
+                    如果以上說明未能解答您的疑問，請聯繫客服，會有專人解答疑難
+                    <p>本活動以及活動獎勵與Google/蘋果公司無關</p>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- 今日排名彈窗 -->
+    <div class="shade-mask-rank">
+        <div class="shade-content-rank">
+            <div class="rank-top">
+
+                <div class="tab-wrap">
+                    <span class="diamond-rank active">今日獎勵榜</span>
+                    <span class="num-rank">今日歐皇榜</span>
+                </div>
+
+                <div class="topthree-wrap">
+
+                </div>
+            </div>
+
+            <ul class="other-rank">
+
+            </ul>
+
+            <div class="mine">
+                <span class="mine-rank"></span>
+                <div class="mine-info">
+                    <img src="./images/logo.png" alt="">
+                    <span class="mine-nick"></span>
+                </div>
+                <span class="mine-diamond-num"></span>
+            </div>
+        </div>
+    </div>
+    <!-- 碎片不足提示彈窗 -->
+    <div class="shade-mask-fragmentNum">
+        <div class="shade-content-fragmentNum">
+            <div class="fragmentNum-title">鉆石余額不足</div>
+            <img src="./images/no-money.png" alt="">
+            <p>當前鉆石不足</p>
+            <div class="fragmentNum-btn-wrap">
+                <div class="cancel-btn">取消</div>
+                <div class="confirm-btn">獲取鉆石</div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/act-kitchen/js/index.js

@@ -0,0 +1,504 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var diamonds = 0;//存儲當前用戶鉆石余額
+var gearPosition = 100;//當前檔位;
+var roundId;//當前進行輪的roundId;
+var timer;//定時器存儲
+var countupTimes;//存儲每個階段倒計時剩余時間戳;
+var userComeinTime, startTime, drawStageStartTime, showResultStageStartTime, endTime;
+var circulate = 0;//等待開獎中動效計時
+var circulateTime;//存儲開獎中動效計時器
+// 榜單類型，1是鉆石榜，2是歐皇榜
+let type = 1
+let pageSize = 20
+let page = 1
+let pageSizeLack = true;
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        getNewestAct();
+    }, 100)
+})
+// 獲取用戶相關信息
+function getUserInfo () {
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/act/luckySea/getUserActInfo',
+        success (res) {
+            if (res.code === 200) {
+                diamonds = res.data.diamonds;
+                $('.my .right b').text(`今日獎勵: ${unitProcessing(res.data.todayReward, 100000, 1, 'w')}`);
+                $('.my .left b').text(`鉆石余額: ${unitProcessing(res.data.diamonds, 100000, 1, 'w')}`);
+            } else {
+                toastMsg(res.message)
+                return
+            }
+        },
+        error (err) {
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 獲取最新一次的深海奇緣活動信息
+function getNewestAct () {
+    // showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/luckySea/getNewestAct',
+        data: { count: 10 },
+        success (res) {
+            if (res.code === 200) {
+                // 處理往輪結果傳參
+                roundId = res.data.roundId;
+                listLuckySeaActInfo(roundId);
+                if ($.isEmptyObject(res.data) || res.data.status === 4) {
+                    return showLoading('服務器正在維護中...')
+                } else {
+                    if (res.timestamp >= res.data.endTime) { //請求的還是上一輪的數據，重新請求
+                        console.log('請求的還是上一輪的數據，必須重新請求');
+                        showLoading()
+                        timer = setTimeout(() => {
+                            getNewestAct()
+                        }, 600);
+                    } else {//活動狀態(1: 選擇階段 2:正在開獎 3:已經開獎)
+                        userComeinTime = res.timestamp
+                        startTime = res.data.startTime
+                        drawStageStartTime = res.data.drawStageStartTime
+                        showResultStageStartTime = res.data.showResultStageStartTime
+                        endTime = res.data.endTime
+                        clearInterval(circulateTime);
+                        listItem(roundId);
+                        if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
+                            // 第一階段
+                            console.log("第一階段");
+                            countupTimes = Math.floor(((drawStageStartTime - startTime) - (userComeinTime - startTime)) / 1000 + 1);
+                            countup(1);
+                            $('.masks').hide();
+                            $('.result_popup').hide();
+                        } else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
+                            // 第二階段
+                            console.log("第二階段");
+                            countupTimes = Math.floor(((showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime)) / 1000 + 1);
+                            countup(2);
+                            circulateTime = setInterval(function () {
+                                circulate = circulate > 8 ? 0 : circulate;
+                                circulate++;
+                                $('.box .box_in .sBox .sBox1').removeClass('sBox_active');
+                                $(`.box .box_in .item${circulate} .sBox1`).addClass('sBox_active');
+                                $('.box .box_in .sBox .qp').hide();
+                                $('.masks').show();
+                            }, 100);
+                        } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
+                            // 第三階段
+                            console.log("第三階段");
+                            countupTimes = Math.floor(((endTime - showResultStageStartTime) - (userComeinTime - showResultStageStartTime)) / 1000 + 1);
+                            countup(3);
+                            // 渲染本輪結果
+                            var str = '';
+                            $('.result_popup .result_popup_in .resultList li').remove();
+                            res.data.drawItemList.forEach(res => {
+                                str += `
+                                    <li>
+                                        <img src="${res.drawName == '洋蔥' ? './images/1.png' : res.drawName == '番茄' ? './images/2.png' : res.drawName == '蘑菇' ? './images/3.png' : res.drawName == '土豆' ? './images/4.png' : res.drawName == '大閘蟹' ? './images/5.png' : res.drawName == '魚' ? './images/6.png' : res.drawName == '雞肉' ? './images/7.png' : res.drawName == '龍蝦' ? './images/8.png' : res.drawImageUrl}" alt="">
+                                        <div class="name">${res.drawName}</div>
+                                    </li>
+                                `
+                            })
+                            $('.result_popup .result_popup_in .resultList').append(str);
+                            // 渲染本輪投入和產出
+                            var costPieceNum = 0;
+                            res.data.userDrawResult.drawRecords.forEach((res, i) => {
+                                costPieceNum = costPieceNum + res.costPieceNum;
+                            })
+                            $('.result_popup .result_popup_in .income .p1 b').text(costPieceNum);
+                            $('.result_popup .result_popup_in .income .p2 b').text(res.data.userDrawResult.prizeDiamonds);
+                            // 處理前三
+                            var top3 = res.data.rankUserList.slice(0, 3);
+                            if (top3.length < 3) {
+                                let arr = new Array(3 - top3.length).fill({
+                                    avatar: './images/logo.png',
+                                    nick: '虛位以待',
+                                    prizeDiamonds: ""
+                                })
+                                top3.push(...arr)
+                            }
+                            // 渲染前三
+                            top3.forEach((res, i) => {
+                                $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('src', res.avatar);
+                                $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('uid', res.uid);
+                                $(`.result_popup .result_popup_in .no .no${i + 1} .name`).text(res.nick);
+                                $(`.result_popup .result_popup_in .no .no${i + 1} p b`).text(res.prizeDiamonds);
+                            })
+                            $('.result_popup').show();
+                        }
+                    }
+                }
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 倒計時
+function countup (status) {
+    timer = setInterval(() => {
+        countupTimes--
+        if (countupTimes <= 0) {
+            getNewestAct();
+            clearInterval(timer);
+            if (status == 1) {
+                $('.box .boxTitle').html(`請選擇：<b>${countupTimes}</b> 秒`);
+            } else if (status == 2) {
+                circulate = 0;
+                $('.box .boxTitle').html(`開獎中：<b>${countupTimes}</b> 秒`);
+            } else {
+                $('.box .boxTitle').html(`下一輪：<b>${countupTimes}</b> 秒`);
+                $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
+            }
+        } else {
+            if (status == 1) {
+                $('.box .boxTitle').html(`請選擇：<b>${countupTimes}</b> 秒`);
+            } else if (status == 2) {
+                $('.box .boxTitle').html(`開獎中：<b>${countupTimes}</b> 秒`);
+            } else {
+                $('.box .boxTitle').html(`下一輪：<b>${countupTimes}</b> 秒`);
+                $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
+            }
+        }
+
+    }, 1000);
+}
+// 渲染抽獎列錶
+function listItem (roundId) {
+    // showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/luckySea/listItem',
+        data: { roundId },
+        success (res) {
+            if (res.code === 200) {
+                res.data.forEach((res, i) => {
+                    if (res.costPieceNum > 0) {
+                        $(`.box .box_in .item${i + 1} .qp`).show();
+                        $(`.box .box_in .item${i + 1} .sBox1 `).addClass('sBox_active');
+                    } else {
+                        $(`.box .box_in .item${i + 1} .qp`).hide();
+                        $(`.box .box_in .item${i + 1} .sBox1 `).removeClass('sBox_active');
+                    }
+                    $(`.box .box_in .item${i + 1}`).attr('id', res.id);
+                    $(`.box .box_in .item${i + 1} .sBox1 img`).attr('src', res.name == '洋蔥' ? './images/1.png' : res.name == '番茄' ? './images/2.png' : res.name == '蘑菇' ? './images/3.png' : res.name == '土豆' ? './images/4.png' : res.name == '大閘蟹' ? './images/5.png' : res.name == '魚' ? './images/6.png' : res.name == '雞肉' ? './images/7.png' : res.name == '龍蝦' ? './images/8.png' : res.imgUrl);
+                    $(`.box .box_in .item${i + 1} .qp p b`).text(res.costPieceNum == 0 ? '' : res.costPieceNum);
+                    $(`.box .box_in .item${i + 1} .bei`).text('x' + res.multiple);
+                    $(`.box .box_in .item${i + 1} .SboxText`).text(res.name);
+                })
+                $('.box .box_in .sBox').show();
+                getUserInfo();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 獲取往輪結果
+function listLuckySeaActInfo (roundId) {
+    // showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
+        data: { count: 10, roundId },
+        success (res) {
+            if (res.code === 200) {
+                res.data.forEach((res, i) => {
+                    if (res.drawItemList.length > 1) {
+                        if (res.drawName == '葷菜狂歡') {
+                            $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/rou.png');
+                        } else {
+                            $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/su.png');
+                        }
+                    } else {
+                        // $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawImageUrl);
+                        $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawName == '洋蔥' ? './images/1.png' : res.drawItemList[0].drawName == '番茄' ? './images/2.png' : res.drawItemList[0].drawName == '蘑菇' ? './images/3.png' : res.drawItemList[0].drawName == '土豆' ? './images/4.png' : res.drawItemList[0].drawName == '大閘蟹' ? './images/5.png' : res.drawItemList[0].drawName == '魚' ? './images/6.png' : res.drawItemList[0].drawName == '雞肉' ? './images/7.png' : res.drawItemList[0].drawName == '龍蝦' ? './images/8.png' : res.drawItemList[0].drawImageUrl);
+                    }
+                });
+                $('.resultOut .sqp_in').show();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 檔位切換
+$('.box .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    gearPosition = i == 1 ? 100 : i == 2 ? 1000 : 10000;
+})
+// 抽獎接口
+function draw (itemId, tais) {
+    // showLoading()
+    networkRequest({
+        type: 'POST',
+        url: urlPrefix + '/act/luckySea/draw',
+        data: { itemId, num: gearPosition },
+        success (res) {
+            if (res.code === 200) {
+                listItem(roundId);
+                getUserInfo();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 選擇食材按鈕
+$('.box .box_in .sBox').click(function () {
+    var id = $(this).attr('id');
+    // $(this).children('.qp').show();
+    draw(id, $(this));
+})
+// 去充值按鈕
+$('.my div .add').click(function () {
+    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內打開')
+    }
+})
+// 打開規則彈窗
+$('.header .rule_icon').click(function () {
+    $('.shade-mask').show()
+})
+// 關閉規則彈窗
+$('.shade-mask').click(function () {
+    $('.shade-mask').hide()
+})
+// 打開遊戲記錄
+$('.header .record_icon').click(function () {
+    window.location.href = './record.html'
+})
+// 關閉排行榜
+$('.shade-mask-rank').click(function () {
+    $('.shade-mask-rank').hide()
+    return false;
+})
+// 監聽今日排名按鈕點擊事件
+$('.header .rank_icon').click(function () {
+    $('.shade-mask-rank .shade-content-rank .other-rank li').remove();
+    page = 1;
+    getListRank(type, page);
+    $('.shade-mask-rank').show()
+})
+// 監聽今日排名tab
+$('.tab-wrap').on('click', 'span', function () {
+    page = 1;
+    type = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.shade-mask-rank .shade-content-rank .other-rank li').remove();
+    getListRank(type, page);
+    return false;
+})
+function getListRank (type, page) {
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/act/luckySea/listRank',
+        data: {
+            type,
+            page,
+            pageSize
+        },
+        success (res) {
+            if (res.code === 200) {
+                if (page == 1) {
+                    // 處理第一名
+                    $('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap').remove();
+                    let topOne = res.data.rankList.slice(0, 1)
+                    if (topOne.length === 0) {
+                        let arr = new Array(len).fill({
+                            nick: '虛位以待',
+                            avatar: './images/logo.png',
+                            num: ''
+                        })
+                        topThreeArr.push(...arr)
+                    }
+                    var topOneStr = ''
+                    topOne.forEach(item => {
+                        topOneStr += `
+                    <div class="info-wrap" uid="${item.uid}">
+                        <div class="avatar">
+                            <p></p>
+                            <img src="${item.avatar}" alt="">
+                        </div>
+                        <p class="diamond-num" style="display:${type == 1 ? 'none' : 'block'}">${type == 1 ? '' : item.num+'次'}</p>
+                        <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
+                    </div>
+                    `
+                    })
+                    $('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap').append(topOneStr);
+                    //處理底部數據
+                    let erbanNo = res.data.myRankInfo.erbanNo
+                    let myIndex;
+                    res.data.rankList.findIndex((item, index) => {
+                        if (item.erbanNo == erbanNo) { myIndex = index; };
+                    })
+                    if (myIndex) {
+                        $('.mine-rank').html('未上榜')
+                    } else {
+                        $('.mine-rank').html(myIndex + 1)
+                    }
+                    $('.shade-mask-rank .shade-content-rank .mine .mine-rank').text(myIndex + 1);
+                    $('.shade-mask-rank .shade-content-rank .mine .mine-diamond-num').text(type == 1 ? `${unitProcessing(res.data.myRankInfo.num, 10000, 1, 'w')}` : `猜中 ${res.data.myRankInfo.num} 次`);
+                    $('.shade-mask-rank .shade-content-rank .mine .mine-info img').attr('src', res.data.myRankInfo.avatar);
+                    $('.shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick').text(res.data.myRankInfo.nick.length > 5 ? res.data.myRankInfo.nick.slice(0, 5) + '...' : res.data.myRankInfo.nick)
+                }
+                if (res.data.rankList.length > 0) {
+                    // 非前第一數據
+                    var str = '';
+                    var list = res.data.rankList.slice(1);
+                    list.forEach((item, i) => {
+                        str += `
+                        <li uid="${item.uid}">
+                            <span class="index">${i + 2}</span>
+                            <div class="others-info">
+                                <img src="${item.avatar}" alt="">
+                                <span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
+                            </div>
+                            <span class="others-diamond-num">${type == 1 ? `${unitProcessing(item.num, 10000, 1, 'w')}` : `猜中 ${item.num} 次`}</span>
+                        </li>
+                    `
+                    });
+                    $('.shade-mask-rank .shade-content-rank .other-rank').append(str);
+                    pageSizeLack = true;
+                } else {
+                    pageSizeLack = false;
+                }
+            } else {
+                pageSizeLack = true;
+                toastMsg(res.message)
+            }
+        },
+        error (err) {
+            pageSizeLack = true;
+            toastMsg('網絡錯誤')
+        }
+    })
+}
+// 檢測榜單是否滑到底部
+$(".shade-mask-rank .shade-content-rank .other-rank").scroll(function () {
+    var divHeight = $(this).height();
+    var nScrollHeight = $(this)[0].scrollHeight;
+    var nScrollTop = $(this)[0].scrollTop;
+    if (nScrollTop + divHeight + 50 >= nScrollHeight) {
+        console.log("到達底部了");
+        if (pageSizeLack) {
+            pageSizeLack = false;
+            page++;
+            getListRank(type, page)
+        }
+    }
+});
+// 取消余額不足彈窗
+$('.cancel-btn').click(function () {
+    $('.shade-mask-fragmentNum').hide();
+})
+// 取消余額不足跳轉彈窗按鈕
+$('.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn').click(function () {
+    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內打開')
+    }
+    $('.shade-mask-fragmentNum').hide()
+})
+
+//返回页面 重新请求接口
+// var hiddenProperty = 'hidden' in document ? 'hidden' :
+//     'webkitHidden' in document ? 'webkitHidden' :
+//         'mozHidden' in document ? 'mozHidden' : null;
+
+// var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
+// var onVisibilityChange = function () {
+//     if (!document[hiddenProperty]) {
+//         location.reload()
+//     }
+// }
+// document.addEventListener(visibilityChangeEvent, onVisibilityChange);

view/peko/activity/act-kitchen/js/record.js

@@ -0,0 +1,152 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+// 获取用户的游戏记录
+// let recordList = []
+let page = 1
+let pageSize = 10
+let canNext = true;
+
+let lisIndexId = 0;
+var lisIndex = 0;
+const toastMsg = (content = '', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+
+$(function () {
+    getInfoFromClient()
+    if (EnvCheck() === 'test') { new VConsole }
+    setTimeout(function () {
+        getUserRecord()
+    }, 100)
+
+    function getUserRecord () {
+        canNext = false
+        networkRequest({
+            type: 'GET',
+            url: urlPrefix + '/act/luckySea/listDrawRecord',
+            data: {
+                page,
+                pageSize
+            },
+            success (res) {
+                if (res.code === 200) {
+                    if (res.data.length != 0) {
+                        // 能够继续请求下一页
+                        canNext = true
+                        // recordList.push(...res.data)
+                        renderRecord(res.data)
+                    } else {
+                        canNext = false
+                        toastMsg('沒有更多啦~')
+                    }
+
+                } else {
+                    canNext = true
+                    toastMsg(res.message)
+                }
+            },
+            error (err) {
+                canNext = true
+                toastMsg('網絡錯誤，請退出重進')
+            }
+        })
+    }
+
+    // 渲染游戏记录
+    const renderRecord = (recordList) => {
+        if (recordList.length === 0) {
+            $('.record-list').hide();
+            // $('.img').show();
+        } else {
+            // $('.record-list li').remove();
+            $('.record-list').show();
+            $('.img').hide();
+            console.log(recordList, 'recordList')
+            var drawId;
+            var itemUrl;
+            var results = [];
+
+
+            let str = '';
+            recordList.forEach((res, index) => {
+                drawId = res.drawId;
+                results.push(res.results);
+
+                res.results.forEach(item => {
+                    // console.log(drawId, 'drawId');
+                    if (drawId == item.itemId) {
+                        itemUrl = item.itemUrl
+                    }
+                })
+                str += `
+                <li style="margin-bottom: 0.8rem;">
+                    <h3>${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}</h3>
+                    <div class="goldBox">
+                        <span>NO.${res.roundId}</span>
+                        <p style="display: ${res.drawStatus == 1 ? 'none' : 'block'};" class="fasle">哎呀~猜錯了 o(╥﹏╥)o</p>
+                        <p style="display: ${res.drawStatus == 1 ? 'block' : 'none'};" class="true">厲害~猜對了 ୧(๑•̀◡•́๑)૭</p>
+                    </div>
+                    <div class="result-wrap">
+                        <div class="result">
+                            <span></span>
+                        </div>
+                        <div class="award">
+                            <p>獎勵:</p>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <b>${res.reward}</b>
+                        </div>
+                        <div class="result_sBox">
+                            ${res.drawItemList.map(item => {
+                    return `<div class="bg"><img src="${item.drawImageUrl}" alt=""></div>`
+                }).join('')}
+                        </div>
+                    </div>
+                    <div class="put-wrap">
+                        <div class="put"></div>
+                        <div class="list">
+
+                        </div>
+                    </div>
+                </li>
+    `
+            })
+            $('.record-list').append(str)
+
+
+            results.forEach((res, index) => {
+                res.forEach(val => {
+                    $('.record-list li').eq(lisIndexId).find('.list').append(`
+                    <div class= "item">
+                        <p><img src="${val.itemUrl}" class="gift" alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">${val.costPiece}</span>
+                        </div>
+                    </div>
+    `)
+                })
+                lisIndex = lisIndex + 1;
+                lisIndexId = lisIndexId + 1;
+            });
+        }
+
+
+    }
+
+    $(window).scroll(function () {
+        if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
+            // 请求下一页
+            if (canNext) {
+                page++
+                getUserRecord()
+            } else {
+                console.log('无数据被锁定');
+            }
+        }
+    });
+
+})

view/peko/activity/act-kitchen/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/xx.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 60,
+        left: e.pageX - 30,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}

view/peko/activity/act-kitchen/record.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>游戏记录</title>
+
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/record.css">
+</head>
+
+<body>
+    <ul class="record-list">
+        <!-- <li style="margin-bottom: 0.8rem;">
+            <h3>23-02-25 19:13:24</h3>
+            <div class="goldBox">
+                <span>NO.230225191242</span>
+                <p style="display: block;" class="fasle">哎呀~猜錯了 o(╥﹏╥)o</p>
+                <p style="display: none;" class="true">厲害~猜對了 ୧(๑•̀◡•́๑)૭</p>
+            </div>
+            <div class="result-wrap">
+                <div class="result">
+                    <span></span>
+                </div>
+                <div class="award">
+                    <p>獎勵:</p>
+                    <img src="./images/diamond.png" class="diamond" alt="">
+                    <b>0</b>
+                </div>
+                <div class="result_sBox">
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                    <div class="bg">
+                        <img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="put-wrap">
+                <div class="put"></div>
+                <div class="list">
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/FmLQyTfMaHlwkvj568vpV0uk7aSc?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/Fm94cJfxF1Eqm0U04nG476JvFLaF?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">0</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/FjWcbuxEpzZ8P3aS4A0n2llW9Jw9?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/Ftlck3geTvQvvjBkyCwxuv7tHR_a?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/Fnnd7i5L8BPI95DF_ZvhdGkk8cqI?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">0</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/FoIKvxfBJiUUGNcL8ouKQKENQ2eb?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/Fv3U6kNuCovsRljPb_an73W0U0lZ?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+
+                    <div class="item">
+                        <p><img src="http://beta.img.pekolive.com/FuEuGPGHcyGExK_nJhvx08S4KeJ9?imageslim" class="gift"
+                                alt=""></p>
+                        <div>
+                            <img src="./images/diamond.png" class="diamond" alt="">
+                            <span class="in">100</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </li> -->
+    </ul>
+    <ul class="none" style="display: none;"></ul>
+    <script src="../../common/js/flexible.js"></script>
+    <script src="../../common/js/jquery-3.2.1.min.js"></script>
+    <script src="../../common/js/common2.js"></script>
+    <script src="../../common/js/layer.js"></script>
+    <script src="../../common/js/vconsole.min.js"></script>
+    <script src="./js/record.js"></script>
+</body>
+
+</html>

view/peko/activity/midAutumnFestival/index.html

@@ -318,4 +318,4 @@
 <script src="./js/swiper-bundle.min.js"></script>
 <script src="../../common/js/route-constant.js"></script>
 <script src="./js/wow.js"></script>
-<script src="./js/index.js"></script>
+<script src="./js/index.js?v=1.0"></script>

view/peko/activity/midAutumnFestival/js/index.js

@@ -238,7 +238,7 @@ function getRank (rankType, date) {
                 // 處理日期
                 if (res.data.dateList) {
                     res.data.dateList.forEach((res, i) => {
-                        $('.page2 .listBox .time div').eq(i).text(`${res[6]}.${res[8]}${res[9]}`);
+                        $('.page2 .listBox .time div').eq(i).text(`${res[5]}${res[6]}.${res[8]}${res[9]}`);
                         $('.page2 .listBox .time div').eq(i).attr('data', res);
                         if (res == curDate && date == null) {
                             $('.page2 .listBox .time div').removeClass('active')

view/peko/modules/act-treasureSnatching/js/rule.js

@@ -42,6 +42,19 @@ $(function () {
                 toastMsg('请在APP内打开')
             }
         })
+        if (browser.android) {
+            console.log(JSON.parse(pubInfo.deviceInfo));
+            if (JSON.parse(pubInfo.deviceInfo).appVersionCode >= 210) {
+                $('.tab2 img').attr('src', './images/rule_rule2.png')
+            }
+        } else if (browser.ios) {
+            console.log(pubInfo.deviceInfo);
+            // console.log(pubInfo.deviceInfo.appVersion.replace(".",""));
+            console.log(pubInfo.deviceInfo.appVersion.replace(".", "").replace(".", ""));
+            if (pubInfo.deviceInfo.appVersion.replace(".", "").replace(".", "") >= 20100) {
+                $('.tab2 img').attr('src', './images/rule_rule2.png')
+            }
+        }
         getPoolList();
     }, 100)
     $('body,html').css('padding-top', `${(document.documentElement.clientWidth / 750 * 120) / 75}rem`);