中奖弹窗和排名的名单

html/annualMeeting/HitMouse.html

@@ -108,7 +108,7 @@
         </audio>
 
         <!--        排行榜-->
-        <div class="rank_mask">
+        <div class="rank_mask" id="rank_mask">
             <div class="zhezao"></div>
             <div class="rank_box">
                 <div class="rBox_top">
@@ -116,25 +116,32 @@
                 </div>
                 <div class="rank_y">
                     <p>你的排名 第</p>
-                    <p>1</p>
+                    <p class="o_ranking">1</p>
                     <p>名</p>
                 </div>
                 <div class="rank_i">
-                    <div class="rank_item">
-                        <div class="rank_itemL">
-                            <div class="rank_num">1</div>
-                            <p>李思思</p>
-                        </div>
-                        <div class="rank_itemR">
-                            <div class="shuxi"></div>
-                            <p>1234</p>
-                        </div>
-                    </div>
+
 
                 </div>
 
                 <div class="Close"></div>
             </div>
+        </div>
+        <!--        中奖弹窗通知-->
+        <div class="rank_mask" id="notice">
+            <div class="zhezao"></div>
+            <div class="notice_box">
+                <img src="../../images/aM/all_d.png" alt="" class="notice_top">
+                <span>恭喜你中奖啦！</span>
+                <div class="notice_content">
+                    <span>121212</span>
+                </div>
+                <div class="all_Receive">
+                    <span>立即领取</span>
+                </div>
+                <div class="all_Close"></div>
+            </div>
+
 
 
         </div>
@@ -166,15 +173,18 @@
         sendMsg();
         sendScore();
         joinGeme() //参加活动
-
+        ownranking();//自己排名
     }).fail(data => {});
     getMsg()
 
 
+
     function sendMsg(msg,type) {
     //0,未开始；1，准备中；2，进行中；-1，已结束  菜单状态
         proxy.invoke("GetMenuStatus", 'Mouse').done(data => {
             console.log(data)
+            getRankList(data.rank) //以往的排名
+
             if(data.status==0){
                 $('.status').css({'display':'flex'});
                 $('.status1').css({'display':'none'});
@@ -201,9 +211,6 @@
             }
         });
 
-
-
-
     }
     function sendScore(msg) {
         proxy.invoke("SetGameScore", 'Mouse',msg).done(data => { //发送分数
@@ -216,12 +223,21 @@
             console.log(data)
         });
     }
+    function ownranking() {
+        proxy.invoke("GetUserRank", 'Mouse').done(data => {
+            console.log(data)
+            $('.o_ranking').html(data)
+            //显示统计窗口
+            $('#rank_mask').css('display','block');
+        });
+    }
+
     function getMsg() {
         //随时获取游戏的状态
         proxy.on('getChangeMenu',function (data) {
             console.log(data)
-            laoshudata =  JSON.parse(data.data)
 
+            laoshudata =  JSON.parse(data.data)
             if(data.status==0){
                 $('.status').css({'display':'flex'});
                 $('.status1').css({'display':'none'});
@@ -249,6 +265,10 @@
         proxy.on('notifyMouseWinning',function (data) {
             console.log(data)
         })
+        proxy.on('notifyMouseGamerResult',function (data) {
+            getRankList(data)
+        })
+
 
     }
     // sort 是顺序，score分数，type -1鼠，2猪，location位置（出现在第几个洞），interval时间（与下一个间隔时间单位：毫秒）
@@ -364,17 +384,38 @@
                 window.clearInterval(clock);
                 window.clearInterval(timer1); //清除老鼠
                 sendScore(score)
-                //显示统计窗口
-                $('.rank_mask').css('display','block');
+                ownranking() //获取自己排名
+
             }
         }, 1000)
     }
+    function getRankList(data){
+        $(".rank_i").empty()
+        var html = ''
+        $.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
+            html+='<div class="rank_item">\n' +
+                '                        <div class="rank_itemL">\n' +
+                '                            <div class="rank_num">'+data[i].r+'</div>\n' +
+                '                            <p>'+data[i].n+'</p>\n' +
+                '                        </div>\n' +
+                '                        <div class="rank_itemR">\n' +
+                '                            <div class="shuxi"></div>\n' +
+                '                            <p>'+data[i].s+'</p>\n' +
+                '                        </div>\n' +
+                '                    </div>'
+        });
+        $(".rank_i").append(html);
+    };
     $('.Close').click(function () {
-        $('.rank_mask').css('display','none')
+        $('#rank_mask').css('display','none')
     })
     $('.ranging').click(function () {
-        $('.rank_mask').css('display','block')
+        $('#rank_mask').css('display','block')
+    })
+    $('.all_Close').click(function () {
+        $('#notice').css('display','none')
     })
+
     $('.return').click(function () {
         //返回首页
     })

html/annualMeeting/css/HitMouse.css

@@ -256,6 +256,8 @@ li{
     top:0;
     width: 100%;height: 100%;
     display: none;
+    align-items: center;
+    justify-content: center;
 }
 .zhezao{
     width: 100%;height: 100%;
@@ -342,9 +344,7 @@ li{
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
-.rank_num p{
 
-}
 .rank_itemL p{
     color: #B7540D;
     font-size: 0.12rem;
@@ -376,3 +376,75 @@ li{
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
+/*#notice{*/
+/*    display: flex;*/
+/*}*/
+.notice_box{
+    width: 2.8rem;
+    height: 2.6rem;
+    background-image: url('../../../images/aM/all_bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.notice_top{
+    width: 0.63rem;
+    height: 0.63rem;
+    margin-top: 0.28rem;
+
+}
+.notice_box span{
+    color: #893630;
+    font-size: 0.15rem;
+    margin-top: 0.2rem;
+}
+.notice_content{
+    width: 2.2rem;
+    height: 0.4rem;
+    border-radius: 0.08rem;
+    border: 1px solid #C8532B;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.14rem;
+}
+.notice_content span{
+    width: 2rem;
+    text-overflow:ellipsis;
+    overflow: hidden;
+    margin-top: 0;
+    white-space:nowrap;
+
+
+}
+.all_Receive{
+    width: 1.5rem;
+    height: 0.27rem;
+    background: #F9CB3B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.18rem;
+    border-radius: 0.135rem;
+
+}
+.all_Receive span{
+    color: #893630;
+    font-size: 0.13rem;
+    margin-top: 0;
+}
+.all_Close{
+    position: absolute;
+    left: 50%;
+    bottom: -0.5rem;
+    margin-left: -0.17rem;
+    width: 0.34rem;
+    height: 0.34rem;
+    background-image: url('../../../images/aM/close.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}