投票的内容

html/annualMeeting/AnnuaLmeetingHome.html

@@ -92,6 +92,17 @@
                 <div class="activity_Close2"></div>
             </div>
         </div>
+        <!--        投票-->
+        <div class="rank_mask" id="activity3">
+            <div class="zhezao"></div>
+            <div class="activity_box3">
+                <span class="activity_title">节目投票正在进行</span>
+                <div class="activity_Receive" onclick="JumpActivity('votes')">
+                    <span>立即参与</span>
+                </div>
+                <div class="activity_Close3"></div>
+            </div>
+        </div>
 
 <!--        我的奖品-->
         <div class="rank_mask" id="prize">
@@ -143,20 +154,35 @@
         sendMsg()
     }).fail(data => {});
     getMsg()
+    getvotes()
 
+    var clickBtn=true //true为可以发送
     function sendMsg(type) {
-        if(type ==1){
-            var value = $('.bar_input input').val();
-            if(value.length==0){
-                layer.msg('不能为空哦');
-                return
+        if(type==1){
+            if(clickBtn==true){
+                var value = $('.bar_input input').val();
+                if(value.length==0){
+                    layer.msg('不能为空哦');
+                    return
+                }
+                proxy.invoke("SendBarrage", value).done(data => {
+                    layer.msg('发送成功');
+                    clickBtn=false
+                });
+                // 10秒后启用点击事件
+                setTimeout(function(){
+                    clickBtn=true;
+                    console.log(123)
+                },10000);
+            }else {
+                layer.msg('发送频繁');
             }
-            proxy.invoke("SendBarrage", value).done(data => {
-                layer.msg('发送成功');
-            });
         }
 
 
+
+
+
     }
 
     function getMsg() {
@@ -213,6 +239,17 @@
         })
     }
 
+    function getvotes() {
+        proxy.on('progarmVote',function (data) {
+            console.log(data)
+            var list = JSON.parse(data)
+            if(list.VoteState == 1){
+                console.log('进入投票')
+                $('#activity3').css('display','flex')
+            }
+
+        });
+    }
     function renderHourglass(code,type){
         var key = 0
         for(var i=0;i<MenusList.length ; i++){
@@ -311,6 +348,9 @@
     $('.activity_Close2').click(function () {
         $('#activity2').css('display','none')
     })
+    $('.activity_Close3').click(function () {
+        $('#activity3').css('display','none')
+    })
     $('.prize_Close').click(function () {
         $('#prize').css('display','none')
     })
@@ -334,6 +374,10 @@
             window.location.href = './money.html'
 
         }
+        if(type='votes'){
+            window.location.href = './vote.html'
+
+        }
     }
 
 </script>

html/annualMeeting/ProgramRanking.html

@@ -72,14 +72,12 @@
         }
         .bttoom_title{
             width: 90%;
-            height: 0.6rem;
+            height: 15%;
             display: flex;
             flex-direction: row;
             align-items: flex-end;
             justify-content: center;
-            position: absolute;
-            left: 5%;
-            top: 0;
+
         }
         .bttoom_title img{
             width: 0.21rem;
@@ -93,22 +91,93 @@
         }
         .bttoom_center{
             width: 90%;
+            height: 96%;
+            margin-left: 5%;
+            overflow: auto;
+        }
+        .b_box{
+            width: 2.8rem;
+            height: 0.4rem;
+            background-image: url('../../images/aM/votes_c.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 0.125rem 0.17rem;
+            justify-content: space-between;
+            margin-top: 0.1rem;
+        }
+        .b_ranking{
+            width: 0.4rem;
+            height: 0.4rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        .b_ranking img{
+            width: 0.4rem;
+            height: 0.4rem;
+            position: absolute;
+            left: 0;
+            top:0;
+
+        }
+        .b_ranking span{
+            color: #FFFFFF;
+            font-size: 0.22rem;
+            font-weight: bold;
+            position: relative;
+        }
+        .b_content{
+            width: 1.6rem;
+            height: 0.4rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
         }
+        .b_content span:nth-child(1){
+            color: #B31D2E;
+            font-size: 0.14rem;
+            overflow: hidden;
+            height: 0.2rem;
+        }
+        .b_content span:nth-child(2){
+            color: #B31D2E;
+            font-size: 0.1rem;
+            overflow: hidden;
+            height: 0.2rem;
+        }
+        .b_votes{
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+        }
+        .b_votes span:nth-child(1){
+            color: #B31D2E;
+            font-size: 0.2rem;
+        }
+        .b_votes span:nth-child(2){
+              color: #B31D2E;
+              font-size: 0.11rem;
+            margin-left: 0.05rem;
+          }
     </style>
 </head>
 <body>
 <div class="Box">
     <div class="box_top">
         <div class="top_center">
-            <div class="runnerUp" style="margin-top: 0.1rem">
+            <div class="runnerUp" id="dier" style="margin-top: 0.1rem">
                 <span>《凉凉》独唱</span>
                 <span>成都印象销售部</span>
             </div>
-            <div class="runnerUp" style="margin-top: 0.05rem">
+            <div class="runnerUp" id="diyi" style="margin-top: 0.05rem">
                 <span>《凉凉》独唱</span>
                 <span>成都印象销售部</span>
             </div>
-            <div class="runnerUp" style="margin-top: 0.16rem">
+            <div class="runnerUp" id="disan" style="margin-top: 0.16rem">
                 <span>《凉凉》独唱</span>
                 <span>成都印象销售部</span>
             </div>
@@ -120,7 +189,9 @@
             <span>节目总排名</span>
             <img src="../../images/aM/r_yun.png" alt="">
         </div>
-        <div class="bttoom_center"></div>
+        <div class="bttoom_center">
+
+        </div>
     </div>
 
 </div>
@@ -144,17 +215,61 @@
         sendMsg()
     }).fail(data => {});
     getMsg()
-
     function sendMsg() {
-
+        proxy.invoke("SendVoteProgarm",'1',activity.customerId).done(data => {
+            console.log(data)
+            RankingList(data)
+        })
     }
 
     function getMsg() {
-        //节目单
-        proxy.on('getPrograms', function (data) {
-            console.log(data)
-        });
+        // //节目单
+        // proxy.on('getPrograms', function (data) {
+        //     console.log(data)
+        // });
+
+    }
+
+    function RankingList(list){
+        var html = ''
+        for(var i=0 ;i<list.length ;i++){
+            var img ='../../images/aM/qita.png'
+            if(i==0){
+                img ='../../images/aM/diyi.png'
+                $('#diyi span:eq(0)').html(list[i].t)
+                $('#diyi span:eq(1)').html(list[i].p)
+            }
+            if(i==1){
+                img ='../../images/aM/dier.png'
+                $('#dier span:eq(0)').html(list[i].t)
+                $('#dier span:eq(1)').html(list[i].p)
+            }
+            if(i==2){
+                img ='../../images/aM/disan.png'
+                $('#disan span:eq(0)').html(list[i].t)
+                $('#disan span:eq(1)').html(list[i].p)
+            }
+
+
+            html+=`<div class="b_box">
+                <div class="b_ranking">
+                    <img src=`+img+` alt="">
+                    <span>`+(i >2?i+1:'')+`</span>
+                </div>
+                <div class="b_content">
+                    <span>`+list[i].t+`</span>
+                    <span>`+list[i].p+`</span>
+                </div>
+                <div class="b_votes">
+                    <span>`+list[i].vc+`</span>
+                    <span>票</span>
+                </div>
+            </div>`
+
+
+        }
 
+        $(".bttoom_center").append(html);
     }
 
 

html/annualMeeting/css/Amhome.css

@@ -346,7 +346,7 @@ p{
     font-size: 0.13rem;
     margin-top: 0;
 }
-.activity_Close,.activity_Close2,.prize_Close{
+.activity_Close,.activity_Close2,.prize_Close,.activity_Close3{
     position: absolute;
     left: 50%;
     bottom: -0.5rem;
@@ -368,7 +368,17 @@ p{
     flex-direction: column;
     align-items: center;
 }
-
+.activity_box3{
+    width: 3.48rem;
+    height: 3.25rem;
+    background-image: url('../../../images/aM/activity_votes.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 .prize_box{
     width: 100%;
     height: 2rem;

html/annualMeeting/css/vote.css

@@ -118,3 +118,25 @@ p{
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
+.top{
+    width: 90%;
+    height: 0.5rem;
+    position: absolute;
+    left: 5%;
+    top:0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.return{
+    width: 0.23rem;
+    height: 0.23rem;
+}
+
+.ranging{
+    width: 0.235rem;
+    height: 0.215rem;
+
+
+}

html/annualMeeting/vote.html

@@ -14,9 +14,9 @@
 <body>
 <div class="Box">
     <div class="content">
-        <span class="programName">《年会庆典》节目投票</span>
-        <span class="department">成都印象销售部</span>
-        <span class="personnel">参与人员：李瀚文   张若筠   杨紫   杨幂   邓伦   许凯  张榕容   易烊千玺   李现</span>
+        <span class="programName"></span>
+        <span class="department"></span>
+        <span class="personnel"></span>
     </div>
     <div class="vote_s">
         <img src="../../images/aM/giveUp.png" alt="" class="giveUp" onclick="vote(1)">
@@ -30,6 +30,10 @@
             <div class="close"></div>
         </div>
     </div>
+    <div class="top">
+        <img src="../../images/aM/home.png" alt="" class="return">
+        <img src="../../images/aM/ranging.png" alt="" class="ranging">
+    </div>
 
 </div>
 
@@ -49,36 +53,75 @@
     });
     var proxy = conn.createHubProxy("annualLeaveHub");
     conn.start().done(data => {
+        console.log('链接成功')
         sendMsg()
     }).fail(data => {});
     getMsg()
 
+    var list;
+    var giveUp = false; //是否放弃投票
     function sendMsg() {
+        proxy.invoke("GetProgarm",).done(data => {
+            if(data!=''){
+                list = JSON.parse(data)
+
+                // {"Id":5,"Title":"《舞动青春》","Performer":"印象之旅","BranchName":"","StartTime":"2020-01-17 17:30:00","ParentId":1,"Type":1,"MusicUrl":"","BackgroundUrl":"","VoteState":0}
+                $('.programName').html(list.Title+'节目投票');
+                $('.department').html(list.BranchName);
+                $('.personnel').html('参与人员：'+list.Performer);
+                $('.vote_s').css('display','flex')
+            }else {
+                $('.programName').html('暂无节目投票');
+                $('.vote_s').css('display','none')
+
+            }
+
+        })
+
 
     }
 
+
     function getMsg() {
-        //节目单
-        proxy.on('getPrograms', function (data) {
-            console.log(data)
-        });
+
+        // proxy.on('GetProgarm', function (data) {
+        //     console.log(data)
+        // });
 
     }
     function vote(type) {
         if(type==1){ // 1位放弃投票 2 为确定投票
+            giveUp=true;
             $('.popup').css('display','block')
             $('.popup_bg img').attr('src','../../images/aM/fangqi.png')
             $('.popup_bg span').html('放弃投票成功')
 
         }else {
-            $('.popup').css('display','block')
-            $('.popup_bg img').attr('src','../../images/aM/toupiao.png')
-            $('.popup_bg span').html('恭喜你！投票成功')
+            if(giveUp ==false){
+                proxy.invoke("UserVoteProgarm",activity.customerId).done(data => {
+                    console.log(data)
+                    $('.popup').css('display','block')
+                    $('.popup_bg img').attr('src','../../images/aM/toupiao.png')
+                    $('.popup_bg span').html('恭喜你！投票成功')
+                })
+            }else {
+                layer.msg('您已放弃投票');
+            }
+
+
         }
     }
 
     $('.close').click(function () {
         $('.popup').css('display','none')
     })
+    $('.return').click(function () {
+        //返回首页
+        window.history.back()
+    })
+    $('.ranging').click(function () {
+        window.location.href = './ProgramRanking.html'
+
+    })
 </script>
 </html>