新增砸蛋

view/molistar/modules/smashEggs/css/index.css

@@ -0,0 +1,233 @@
+html,
+body {
+  width: 100%;
+  background: #4A1C7E;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.box {
+  width: 100%;
+  height: 14.50667rem;
+  background: url(../images/box.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 0;
+}
+
+.box .a {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.6);
+  width: 1.5rem;
+  text-align: center;
+  color: #4F00B0;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  right: 0;
+  border-radius: 0.53333rem 0rem 0 0.53333rem;
+  text-indent: 0.15rem;
+  font-size: 0.30667rem;
+  font-weight: 500;
+}
+
+.box .rank {
+  top: 0.8rem;
+  z-index: 999;
+}
+
+.box .rule {
+  top: 1.6rem;
+}
+
+.box .record {
+  top: 2.4rem;
+}
+
+.box .egg {
+  width: 8.18667rem;
+  height: 5.54667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5rem;
+}
+
+.box .but {
+  width: 100%;
+  height: 1.30667rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 1.06667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+}
+
+.box .but img {
+  width: 2.02667rem;
+  height: 1.30667rem;
+  display: block;
+}
+
+.box .buyBox {
+  width: 95%;
+  height: 0.74667rem;
+  background: #934DED;
+  position: absolute;
+  bottom: 0rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.4rem 0.4rem 0 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0.02667rem 0.2rem 0;
+  font-size: 0.29333rem;
+}
+
+.box .buyBox .prop {
+  height: 100%;
+  line-height: 0.74667rem;
+  color: #fff;
+}
+
+.box .buyBox .tab {
+  width: 3rem;
+  display: flex;
+  justify-content: space-between;
+  background: #4F00B0;
+  height: 0.42667rem;
+  border-radius: 0.42667rem;
+  line-height: 0.42667rem;
+  margin-top: 0.16rem;
+}
+
+.box .buyBox .tab span {
+  text-align: center;
+  width: 1.06667rem;
+  height: 0.42667rem;
+  background: none;
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 0.42667rem;
+  line-height: 0.42667rem;
+}
+
+.box .buyBox .tab .act {
+  background: rgba(255, 255, 255, 0.6);
+  color: #fff;
+}
+
+.box .buyBox input {
+  background: #4F00B0;
+  outline: none;
+  width: 2.2rem;
+  height: 0.48rem;
+  border-radius: 0.48rem;
+  line-height: 0.48rem;
+  box-sizing: border-box;
+  padding: 0 0.06667rem;
+  text-align: center;
+  color: #fff;
+  margin-top: 0.13333rem;
+}
+
+.box .buyBox input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.box .buyBox .buy {
+  width: 1.38667rem;
+  height: 0.58667rem;
+  line-height: 0.61333rem;
+  background: url(../images/buy.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  margin-top: 0.08rem;
+  color: #fff;
+}
+
+.box ul {
+  text-align: center;
+  height: 3.24rem;
+  overflow-y: scroll;
+  position: absolute;
+  left: 0.77333rem;
+  top: 7.5rem;
+}
+
+.box ul::-webkit-scrollbar {
+  display: none;
+}
+
+.box ul li {
+  height: 100%;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  border-radius: 0.48rem;
+  margin-bottom: 0.13333rem;
+  background: linear-gradient(180deg, #2E2B99 0%, #934AEE 100%);
+  border: 0.01333rem solid #FFCDFC;
+  padding: 0 0.26667rem;
+}
+
+.box ul li .gift {
+  display: block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+  border-radius: 50%;
+  float: left;
+  margin-right: 0.05333rem;
+  margin-top: 0.02667rem;
+}
+
+.box ul li .nick {
+  color: #fff;
+  font-size: 0.26667rem;
+  float: left;
+  margin-right: 0.05333rem;
+}
+
+.box ul li .gold {
+  display: block;
+  width: 0.29333rem;
+  height: 0.29333rem;
+  float: left;
+  margin-right: 0.05333rem;
+  margin-top: 0.08rem;
+}
+
+.box ul li .num {
+  float: left;
+  color: #fff;
+  margin-right: 0.10667rem;
+}
+
+.box ul li b {
+  display: block;
+  float: left;
+  color: #FFD95C;
+  font-size: 0.32rem;
+  font-weight: bold;
+}

view/molistar/modules/smashEggs/css/index.scss

@@ -0,0 +1,240 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // background: rgba(120, 33, 232, .8);
+    background: #4A1C7E;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.box {
+    width: 100%;
+    height: 14.50667rem;
+    background: url(../images/box.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: 0 auto 0;
+
+    .a {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.6);
+        width: 1.5rem;
+        text-align: center;
+        color: #4F00B0;
+        height: px2rem(40);
+        line-height: px2rem(40);
+        right: 0;
+        border-radius: px2rem(40) px2rem(0) 0 px2rem(40);
+        text-indent: 0.15rem;
+        font-size: px2rem(23);
+        font-weight: 500;
+    }
+
+    .rank {
+        top: 0.8rem;
+        z-index: 999;
+    }
+
+    .rule {
+        top: 1.6rem;
+    }
+
+    .record {
+        top: 2.4rem;
+    }
+
+    .egg {
+        width: px2rem(614);
+        height: px2rem(416);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 5rem;
+    }
+
+    .but {
+        width: 100%;
+        height: px2rem(98);
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        bottom: px2rem(80);
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        padding: 0 px2rem(40);
+
+        img {
+            width: px2rem(152);
+            height: px2rem(98);
+            display: block;
+        }
+    }
+
+    .buyBox {
+        // width: px2rem(576);
+        width: 95%;
+        height: px2rem(56);
+        background: #934DED;
+        position: absolute;
+        bottom: px2rem(0);
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: px2rem(30) px2rem(30) 0 0;
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: px2rem(2) px2rem(15) 0;
+        font-size: px2rem(22);
+
+        .prop {
+            height: 100%;
+            line-height: px2rem(56);
+            color: #fff;
+        }
+
+        .tab {
+            width: 3rem;
+            display: flex;
+            justify-content: space-between;
+            background: #4F00B0;
+            height: px2rem(32);
+            border-radius: px2rem(32);
+            line-height: px2rem(32);
+            margin-top: px2rem(12);
+
+            span {
+                text-align: center;
+                width: px2rem(80);
+                height: px2rem(32);
+                background: none;
+                color: rgba(255, 255, 255, 0.5);
+                border-radius: px2rem(32);
+                line-height: px2rem(32);
+            }
+
+            .act {
+                background: rgba(255, 255, 255, 0.6);
+                color: #fff;
+            }
+        }
+
+        input {
+            background: #4F00B0;
+            outline: none;
+            width: 2.2rem;
+            height: px2rem(36);
+            border-radius: px2rem(36);
+            line-height: px2rem(36);
+            box-sizing: border-box;
+            padding: 0 px2rem(5);
+            text-align: center;
+            color: #fff;
+            margin-top: px2rem(10);
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.6);
+            }
+        }
+
+        .buy {
+            width: px2rem(104);
+            height: px2rem(44);
+            line-height: px2rem(46);
+            background: url(../images/buy.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            margin-top: px2rem(6);
+            color: #fff;
+        }
+    }
+
+    ul {
+        // min-width: px2rem(236);
+        text-align: center;
+        height: 3.24rem;
+        overflow-y: scroll;
+        position: absolute;
+        left: px2rem(58);
+        top: 7.5rem;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            height: 100%;
+            height: px2rem(36);
+            line-height: px2rem(36);
+            border-radius: px2rem(36);
+            margin-bottom: px2rem(10);
+            background: linear-gradient(180deg, #2E2B99 0%, #934AEE 100%);
+            border: px2rem(1) solid #FFCDFC;
+            padding: 0 px2rem(20);
+
+            .gift {
+                display: block;
+                width: px2rem(32);
+                height: px2rem(32);
+                border-radius: 50%;
+                float: left;
+                margin-right: px2rem(4);
+                margin-top: px2rem(2);
+            }
+
+            .nick {
+                color: #fff;
+                font-size: px2rem(20);
+                float: left;
+                margin-right: px2rem(4);
+            }
+
+            .gold {
+                display: block;
+                width: px2rem(22);
+                height: px2rem(22);
+                float: left;
+                margin-right: px2rem(4);
+                margin-top: px2rem(6);
+            }
+
+            .num {
+                float: left;
+                color: #fff;
+                margin-right: px2rem(8);
+            }
+
+            b {
+                display: block;
+                float: left;
+                color: #FFD95C;
+                font-size: px2rem(24);
+                font-weight: bold;
+            }
+        }
+    }
+}

view/molistar/modules/smashEggs/css/rank.css

@@ -0,0 +1,133 @@
+html,
+body {
+  width: 100%;
+  background: #8B37E4;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.box {
+  width: 10rem;
+  height: 16.72rem;
+  background: url(../images/rankBg.png) no-repeat;
+  background-size: 100% 14.72rem;
+  overflow: hidden;
+}
+
+.box .tab {
+  width: 6rem;
+  height: 1.06667rem;
+  line-height: 1.06667rem;
+  background: url(../images/tabBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0.58667rem auto 0.69333rem;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 999;
+}
+
+.box .tab div {
+  width: 2.98667rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.box .tab .act0 {
+  background: url(../images/left.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.box .tab .act1 {
+  background: url(../images/right.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.box ul {
+  width: 100%;
+  padding: 0 0.32rem;
+  box-sizing: border-box;
+  height: 14.4rem;
+  overflow-y: scroll;
+  margin: 0 auto;
+}
+
+.box ul::-webkit-scrollbar {
+  display: none;
+}
+
+.box ul li {
+  width: 100%;
+  height: 1.54667rem;
+  margin-bottom: 0.58667rem;
+  line-height: 1.54667rem;
+}
+
+.box ul li .num {
+  width: 0.58667rem;
+  text-align: center;
+  color: #FFFBE3;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  float: left;
+  margin-right: 0.53333rem;
+}
+
+.box ul li .tx {
+  width: 1.54667rem;
+  height: 1.54667rem;
+  border-radius: 50%;
+  display: block;
+  margin-right: 0.21333rem;
+  float: left;
+}
+
+.box ul li .nick {
+  width: 2.98667rem;
+  color: #fff;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  float: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.box ul li .right {
+  float: right;
+  color: #FFEF41;
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
+.box ul li .right .gold {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.box ul li .right img {
+  vertical-align: middle;
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+}

view/molistar/modules/smashEggs/css/rank.scss

@@ -0,0 +1,139 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // background: rgba(120, 33, 232, .8);
+    background: #8B37E4;
+
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.box {
+    width: px2rem(750);
+    height: 16.72rem;
+    background: url(../images/rankBg.png) no-repeat;
+    background-size: 100% px2rem(1104);
+    overflow: hidden;
+
+    .tab {
+        width: px2rem(450);
+        height: px2rem(80);
+        line-height: px2rem(80);
+        background: url(../images/tabBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(44) auto px2rem(52);
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        z-index: 999;
+
+        div {
+            width: px2rem(224);
+            text-align: center;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .act0 {
+            background: url(../images/left.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act1 {
+            background: url(../images/right.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    ul {
+        width: 100%;
+        padding: 0 px2rem(24);
+        box-sizing: border-box;
+        height: 14.4rem;
+        overflow-y: scroll;
+        margin: 0 auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            width: 100%;
+            height: px2rem(116);
+            margin-bottom: px2rem(44);
+            line-height: px2rem(116);
+
+            .num {
+                width: px2rem(44);
+                text-align: center;
+                color: #FFFBE3;
+                font-size: px2rem(32);
+                font-weight: 500;
+                float: left;
+                margin-right: px2rem(40);
+            }
+
+            .tx {
+                width: px2rem(116);
+                height: px2rem(116);
+                border-radius: 50%;
+                display: block;
+                margin-right: px2rem(16);
+                float: left;
+            }
+
+            .nick {
+                width: px2rem(224);
+                color: #fff;
+                font-size: px2rem(28);
+                font-weight: 400;
+                float: left;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .right {
+                float: right;
+                color: #FFEF41;
+                font-size: px2rem(28);
+                font-weight: 600;
+
+                .gold {
+                    vertical-align: middle;
+                    display: inline-block;
+                }
+
+                img {
+                    vertical-align: middle;
+                    display: inline-block;
+                    width: px2rem(30);
+                    height: px2rem(30);
+                }
+            }
+        }
+    }
+}

view/molistar/modules/smashEggs/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 容器 -->
+    <div class="box">
+        <!-- 排行榜 -->
+        <div href="" class="a rank">排行榜</div>
+        <!-- 遊戲規則 -->
+        <div href="https://api.molistar.xyz/molistar/modules/rule/newWishingWellRule.html" class="a rule">遊戲規則</div>
+        <!-- 獲獎記錄 -->
+        <div href="https://api.molistar.xyz/molistar/modules/rank/index.html#/newWishingWellRecord" class="a record">
+            獲獎記錄
+        </div>
+        <!-- 蛋 -->
+        <img src="./images/egg.png" alt="" class="egg">
+        <!-- 抽獎按鈕 -->
+        <div class="but">
+            <img src="./images/but1.png" alt="" num="1">
+            <img src="./images/but10.png" alt="" num="10">
+            <img src="./images/but100.png" alt="" num="100">
+            <img src="./images/but200.png" alt="" num="200">
+        </div>
+        <!-- 購買 -->
+        <div class="buyBox">
+            <div class="prop">
+                <span>我的道具: <b>0</b></span>
+            </div>
+            <div class="tab">
+                <span class="act">1</span>
+                <span>10</span>
+                <span>100</span>
+            </div>
+            <input type="number" placeholder="自定義購買">
+            <div class="buy">購買</div>
+        </div>
+        <!-- 獲獎提示 -->
+        <ul>
+            <!-- <li>
+                <img src="" alt="" class="gift">
+                <div class="nick">禮物昵稱</div>
+                <img src="./images/gold.png" alt="" class="gold">
+                <div class="num">100</div>
+                <b>X1</b>
+            </li> -->
+        </ul>
+    </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/route-constant.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/index.js"></script>

view/molistar/modules/smashEggs/js/index.js

@@ -0,0 +1,198 @@
+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 buyNum = 1;//預設購買數量
+var ticketNum = 0;//道具數量
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        showLoading()
+        getConfig();
+    }, 100)
+})
+// 處理SVGA
+document.addEventListener('DOMContentLoaded', function () {
+    // function loadSVGA(containerId, svgaPath) {
+    //     var container = document.getElementById(containerId);
+    //     var player = new SVGA.Player(container);
+
+    //     var parser = new SVGA.Parser();
+    //     parser.load(svgaPath, function (videoItem) {
+    //         player.setVideoItem(videoItem);
+    //         player.startAnimation();
+    //     });
+    // }
+
+    // loadSVGA('xz1', './svga/xz1.svga');
+    // loadSVGA('xz2', './svga/xz2.svga');
+    // loadSVGA('ts1', './svga/1.svga');
+    // loadSVGA('ts2', './svga/23.svga');
+    // loadSVGA('ts3', './svga/23.svga');
+    // loadSVGA('lsls', './svga/lsls.svga');
+    // loadSVGA('kt', './svga/kt.svga');
+    // loadSVGA('kt2', './svga/kt.svga');
+});
+// 配置接口
+function getConfig() {
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/findLove/user',
+        success(res) {
+            if (res.code === 200) {
+                ticketNum = res.data.ticketNum;
+                $('.box .buyBox .prop b').text(ticketNum);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg("網路錯誤")
+        }
+    })
+}
+
+// 購買數量切換
+$('.box .buyBox .tab span').click(function () {
+    buyNum = Number($(this).text());
+    $(this).addClass('act').siblings().removeClass('act');
+})
+
+// 購買道具接口
+function buyTicket(num) {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/findLove/buyTicket',
+        data: {
+            num,
+        },
+        success(res) {
+            if (res.code === 200) {
+                toastMsg('購買成功~');
+                getConfig();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg("網路錯誤")
+        }
+    })
+}
+// 購買按鈕
+$('.box .buyBox .buy').click(function () {
+    var num;
+    var inputNum = $('.box .buyBox input').val();
+    if (inputNum == "") {
+        num = buyNum;
+    } else {
+        num = inputNum;
+    }
+    buyTicket(num);
+})
+
+// 抽獎接口
+function draw(num) {
+    $('.box ul li').remove();
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/findLove/draw',
+        data: {
+            deviceId: pubInfo.deviceInfo.deviceId,
+            sendMessage: 1,
+            roomUid: pubInfo.roomUid,
+            num,
+        },
+        success(res) {
+            if (res.code === 200) {
+                var str = ''
+                res.data.forEach(res => {
+                    str += `
+                        <li>
+                            <img src="${res.picUrl}" alt="" class="gift">
+                            <div class="nick">${res.rewardName}</div>
+                            <img src="./images/gold.png" alt="" class="gold">
+                            <div class="num">${res.diamonds}</div>
+                            <b>X${res.num}</b>
+                        </li>
+                    `
+                })
+                $('.box ul').append(str);
+                getConfig();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg("網路錯誤")
+        }
+    })
+}
+
+// 抽獎按鈕
+$('.box .but img').click(function () {
+    var num = $(this).attr('num');
+    console.log(pubInfo);
+    if (ticketNum >= num) {
+        draw(num);
+    } else {
+        toastMsg('道具不足~');
+    }
+})
+$('.rank').click(function () {
+    location.href = './rank.html'
+})
+$('.rule').click(function () {
+    location.href = urlPrefix + '/molistar/modules/rule/newWishingWellRule.html'
+})
+$('.record').click(function () {
+    location.href = urlPrefix + '/molistar/modules/rank/index.html#/newWishingWellRecord'
+})

view/molistar/modules/smashEggs/js/rank.js

@@ -0,0 +1,115 @@
+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 page = 1;
+var type = 1;
+var lock = true;
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            history.back();
+        })
+        rank(type, page);
+    }, 100)
+})
+// 配置接口
+function rank(type, page) {
+    $('.box ul li').remove()
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/findLove/rank',
+        data: { type, page, pageSize: 20 },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                if (res.data.length == 0) {
+                    lock = false;
+                } else {
+                    res.data.forEach(res => {
+                        str += `
+                        <li>
+                            <div class="num">${res.ranking}</div>
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <div class="nick">${res.nick}</div>
+                            <div class="right">
+                                <div class="gold">${res.diamonds}</div>
+                                <img src="./images/gold.png" alt="" class="goldIcon">
+                            </div>
+                        </li>
+                    `
+                    })
+                    $('.box ul').append(str);
+                    lock = true;
+                }
+            } else {
+                lock = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            lock = true;
+            hideLoading(layerIndex)
+            toastMsg("網路錯誤")
+        }
+    })
+}
+// 切換
+$('.box .tab div').click(function () {
+    var i = $(this).index();
+    $('.box .tab div').removeClass('act0').removeClass('act1');
+    $(this).addClass(`act${i}`);
+    page = 1;
+    type = i + 1;
+    rank(type, page);
+})
+//檢測是否到達底部
+$("ul").scroll(function () {
+    var divHeight = $(this).height();
+    var nScrollHeight = $(this)[0].scrollHeight;
+    var nScrollTop = $(this)[0].scrollTop;
+    if (nScrollTop + divHeight + 50 >= nScrollHeight) {
+        if (lock) {
+            page++;
+            lock = false;
+            rank(type, page)
+        }
+    }
+});

view/molistar/modules/smashEggs/rank.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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/rank.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <div class="box">
+        <div class="tab">
+            <div class="act0">今日榜單</div>
+            <div class="">昨日榜單</div>
+        </div>
+        <ul>
+            
+        </ul>
+    </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/route-constant.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/rank.js"></script>