调整样式 增加所有中奖列表弹窗

src/static/index.css

@@ -21,27 +21,28 @@ body {
   overflow: hidden;
   background: url("./images/bg.jpg") no-repeat;
   background-color: #141a48;
-  font-family:"Microsoft YaHei UI","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family:"Microsoft YaHei","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 .content{
   width:1024px;
   height:768px;
   min-width:800px;
   margin:0 auto;
-  border:1px solid white;
+  /*border:1px solid white;*/
 }
 .holder{
   width:800px;
+  min-height:600px;
   /*margin:0 auto;*/
 }
 .btns{
   text-align: center;
 }
-.btns a{
+.btns button{
   margin-left: 10px;
   margin-right: 10px;
 }
-.btns a i{
+.btns button i{
   margin-right: 6px;
 }
 .title{
@@ -84,4 +85,35 @@ h4{
   margin-left: 10px;
   margin-right: 5px;
   color: #ffffff;
+}
+.luckerList h5{
+  font-size: 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  padding-top: 8px;
+  border-bottom: 1px solid rgba(34, 36, 38, .15);
+}
+.luckerList{
+  padding-left: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+}
+.luckerList ul{
+  padding-left: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+  list-style: none;
+}
+.luckerList ul li:first-child{
+  border-top: none;
+}
+.luckerList ul li{
+  box-sizing: border-box;
+  font-size: 16px;
+  padding-bottom: 10px;
+  /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
+}
+.luckerList ul li span{
+  font-size: 12px;
 }

src/static/index.js

@@ -1,5 +1,5 @@
 $(document).ready(function () {
-    new UI();
+    new Index();
 });
 
 class BS {
@@ -34,8 +34,7 @@ class BS {
     }
 
     static getLuckyUsers() {
-        return this.fetch('/luckless_users');
-
+        return this.fetch('/lucky_users');
     }
 
     static getAwards() {
@@ -55,7 +54,7 @@ class BS {
 
 }
 
-class UI {
+class Index {
     constructor() {
         this.running = false;
         this.currentAward = '';
@@ -93,18 +92,15 @@ class UI {
 
         };
         this.buildCloud().then(() => {
-            this.settings.entries = this.entries;
             this.svg3DTagCloud = new SVG3DTagCloud(document.getElementById('holder'), this.settings);
         });
         this.bindEvent();
         this.initVisualSocket();
-        BS.getAwards().then(resp => {
-            console.log(resp)
-        })
+
     }
 
     buildCloud() {
-        return BS.getUsers().then((resp) => {
+        return BS.getLucklessUsers().then((resp) => {
             console.log(resp);
             let entry = [];
             $(resp.data).each((i, val) => {
@@ -117,14 +113,26 @@ class UI {
                 })
             });
             this.entries = entry;
+            this.settings.entries = this.entries;
+        })
+    }
+
+    rebuild() {
+        this.buildCloud().then(() => {
+            $('.holder').empty();
+            this.svg3DTagCloud = new SVG3DTagCloud(document.getElementById('holder'), this.settings);
         })
+
     }
 
     initVisualSocket() {
+        // this.refreshCurrentAward();
         let tempAwardId = '';
         setInterval(() => {
             tempAwardId = localStorage.getItem('current_award');
             if (this.currentAward !== tempAwardId) {
+                /*change*/
+                // window.location.reload(1);
                 this.currentAward = tempAwardId;
                 this.refreshCurrentAward();
             }
@@ -132,6 +140,7 @@ class UI {
     }
 
     refreshCurrentAward() {
+        if (this.currentAward === '') return;
         BS.getAward(this.currentAward).then((resp) => {
             console.log(resp);
             if (resp.status === 200) {
@@ -157,25 +166,29 @@ class UI {
             });
         });
         $('#end').click(() => {
+            if (!this.running) {
+                return;
+            }
             console.log('click');
             BS.stopAndResult(this.currentAward).then(resp => {
+                this.running = false;
                 console.log(resp);
                 if (resp.status === 200) {
                     this.render(resp.data, 0);
                 }
             });
         });
-        $('#test').click(() => {
+        $('#luckyUsers').click(() => {
             this.list();
         });
 
     }
 
-
     render(data, i) {
         // debugger
         if (i >= data.length) {
             this.currentlist(data);
+            this.rebuild();
             return;
         }
         this.chose(data[i]).then(() => {
@@ -185,7 +198,6 @@ class UI {
     }
 
     stop() {
-        this.running = false;
         this.svg3DTagCloud.reset();
         this.svg3DTagCloud.speed(1);
     }
@@ -225,6 +237,7 @@ class UI {
         layer.open({
             type: 1,
             area: '800px',
+            skin: 'layui-layer-lan', //样式类名
             offset: [offset.top, offset.left],
             closeBtn: 1, //不显示关闭按钮
             anim: 3,
@@ -236,15 +249,55 @@ class UI {
 
     list() {
         let offset = $(".holder").offset();
-        layer.open({
-            type: 1,
-            area: '800px',
-            offset: [offset.top, offset.left],
-            closeBtn: 1, //不显示关闭按钮
-            anim: 3,
-            title: '本次中奖名单',
-            shadeClose: false, //开启遮罩关闭
-            content: '<div class="luckerList"><ul><li>1111</li><li>111</li><li>2222</li></ul></div>'
+        let awards={};
+        let load=layer.load(2);
+        BS.getAwards().then(resp=>{
+            resp.data.map((val)=>{
+                console.log(val);
+                if(typeof awards[val.award_id]==="undefined"){
+                    awards[val.award_id]={};
+                }
+                awards[val.award_id].name = val.award_name;
+                awards[val.award_id].data=[];
+
+            })
+
+        }).then(()=>{
+            return BS.getLuckyUsers().then(resp => {
+                resp.data.map(val=>{
+                    awards[val.award_id].data.push(val)
+                })
+            });
+        }).then(()=>{
+            layer.close(load);
+            console.log(awards);
+            let content = ``;
+            for(let key of Object.keys(awards)){
+                let award = awards[key];
+                let lisArray=award.data.map((data)=>{
+                    return `<li class="${data.role==2||data.role==3?'sp':''}">${data.name}<span>【${data.uid}】</span></li>`
+                });
+                content+=`
+<section>
+    <h5>${award.name}</h5>
+    <ul>
+    ${lisArray.join("")}
+    </ul>
+</section>`;
+            }
+            layer.open({
+                type: 1,
+                area: '800px',
+                skin: 'layui-layer-lan', //样式类名
+                offset: [offset.top, offset.left],
+                closeBtn: 1, //不显示关闭按钮
+                anim: 3,
+                title: '所有中奖名单',
+                shadeClose: false, //开启遮罩关闭
+                content: `
+<div class="luckerList">${content}
+</div>`
+            });
         });
     }
 }

src/static/manage.css

@@ -0,0 +1,47 @@
+.fr {
+  float: right;
+}
+
+.list {
+  padding: 0;
+  display: block;
+  list-style: none;
+}
+
+.list > li:hover {
+  background: #f0f0f0;
+}
+
+.list > li {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  display: list-item;
+  box-sizing: border-box;
+  border-top: 1px solid rgba(34, 36, 38, .15);
+}
+
+.list > li.cur .fr:before {
+  content: '当前轮';
+  font-size: 12px;
+}
+
+.list > li > div {
+  display: block;
+  vertical-align: middle;
+}
+
+.list > li:after {
+  content: "";
+  clear: both;
+  display: block;
+  height: 0;
+}
+
+.list > li .content {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.list > li:first-child {
+  border-top: none;
+}

src/static/manage.js

@@ -21,7 +21,7 @@ class BS {
     }
 
     static addAwards(award_name, award_capacity) {
-        award_capacity*=1;
+        award_capacity *= 1;
         return this.fetch('/add_award', {
             award_name, award_capacity
         });
@@ -30,56 +30,88 @@ class BS {
     static getAwards() {
         return this.fetch('/awards');
     }
-    static setCurrent(id){
-        return new Promise(resolve=>{
-            let prev =localStorage.getItem('current_award')||'';
-            localStorage.setItem('prev_award',prev);
-            localStorage.setItem('current_award',id);
+
+    static setCurrent(id) {
+        return new Promise(resolve => {
+            let prev = localStorage.getItem('current_award') || '';
+            localStorage.setItem('prev_award', prev);
+            localStorage.setItem('current_award', id);
             resolve(localStorage.getItem('current_award'));
         })
     }
+
+    static getCurrent() {
+        return localStorage.getItem('current_award');
+    }
 }
 
 $(function () {
     $('#add').click(e => {
         layer.open({
-            title:'增加',
-            content: `<div>
-奖品名<input type="text" id="addname"></div><div>
-数量 <input type="text" id="addnum">
-</div>`,
-            yes: function () {
+            title: '增加',
+            content: `
+<div>奖品名<input type="text" id="addname"></div>
+<div>数&emsp;量<input type="text" id="addnum"></div>
+`,
+            yes: function (index) {
                 let name = $('#addname').val();
                 let num = $('#addnum').val();
                 BS.addAwards(name, num).then(resp => {
                     console.log(resp);
-                    flushAwards()
+                    flushAwards();
+                    if (resp.status === 200) {
+                        layer.close(index);
+                    } else {
+                        alert(resp.msg);
+                    }
                 });
             }
         });
     });
     $('#reset').click(e => {
-        BS.fetch('/reset').then(resp => {
+        layer.confirm('确定要重置吗', (index) => {
+            BS.fetch('/reset').then(resp => {
+                if (resp.status === 200) {
+                    layer.close(index);
+                }
+            });
         });
     });
-    $(document).on('click','.set',e=>{
+    $(document).on('click', '.js-set', e => {
         let aid = $(e.target).data('aid');
-        BS.setCurrent(aid).then((resp)=>{
-            console.log(resp)
+        let $lis = $('#awardList').find('li');
+        BS.setCurrent(aid).then((resp) => {
+            $lis.removeClass('cur');
+            $(e.target).closest('li').addClass('cur');
         })
-    })
+    }).on('click', '.js-remove', e => {
+        let aid = $(e.target).data('aid');
+        layer.confirm('确认要删除该项？',()=>{
+            layer.alert('暂不支持')
+        })
+    });
     flushAwards()
 
 });
 
 function flushAwards() {
+    let currentAward = BS.getCurrent();
     BS.getAwards().then(resp => {
-        console.log(resp)
-        let ul = ''
+        console.log(resp);
+        let ul = '';
         resp.data.forEach((val) => {
-            let list = `<li><label>${val.award_name},${val.award_capacity}<a type="radio" class="button button-primary set" data-aid="${val.award_id}">设置成当前轮</a></label></li>`
+            let list = `    
+            <li class="${currentAward === val.award_id ? 'cur' : ''}">
+                <div class="fr">
+                    <a type="radio" class="button button-primary button-rounded button-small js-set" data-aid="${val.award_id}">设置成当前轮</a>
+                    <a type="radio" class="button button-caution button-circle js-remove" data-aid="${val.award_id}"><i class="fa fa-trash"></i></a>
+                </div>
+                <div class="content">
+                   奖项名称：${val.award_name}，数量：${val.award_capacity}
+                </div>
+            </li>`;
             ul += list;
         })
-        $('ul').html(ul)
+        $('#awardList').html(ul)
     })
 }

src/templates/index.html

@@ -24,9 +24,9 @@
         <div id='holder' class="holder"></div>
     </div>
     <p class="btns">
-        <a href="javascript:void (0)" class="button button-3d button-action button-rounded " id="start"><i class="fa fa-camera"></i>开始</a>
-        <a href="javascript:void (0)" class="button button-3d button-primary button-rounded" id="end"><i class="fa fa-hand-paper"></i>停止</a>
-        <a href="javascript:void (0)" class="button button-3d button-primary button-rounded" id="test">中奖结果</a>
+        <button href="javascript:void (0)" class="button button-3d button-action button-rounded " id="start" ><i class="fa fa-play-circle"></i>开始</button>
+        <button href="javascript:void (0)" class="button button-3d button-primary button-rounded" id="end"><i class="fa fa-hand-paper"></i>停止</button>
+        <button href="javascript:void (0)" class="button button-3d button-primary button-rounded " id="luckyUsers" >中奖结果</button>
     </p>
 </div>
 

src/templates/manage.html

@@ -6,22 +6,14 @@
     <link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="../static/web-fonts-with-css/css/fontawesome-all.min.css">
     <link rel="stylesheet" href="../static/buttons.css">
-    <style>
-        ul{
-            list-style:none;
-        }
-        li{
-            margin:20px;
-        }
-    </style>
+    <link rel="stylesheet" href="../static/manage.css">
 </head>
 <body>
-<ul>
+
+<a href="javascript:void (0)" class="button button-primary button-rounded " id="add">增加</a>
+<a href="javascript:void (0)" class="button button-caution button-rounded " id="reset">reset</a>
+<ul id="awardList" class="list">
 </ul>
-<a href="javascript:void (0)" class="button button-action button-rounded " id="add">增加</a>
-<a href="javascript:void (0)" class="button button-action button-rounded " id="change">修改</a>
-<a href="javascript:void (0)" class="button button-action button-rounded " id="remove">删除</a>
-<a href="javascript:void (0)" class="button button-action button-rounded " id="reset">reset</a>
 <script type="text/javascript" src="../static/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="../static/layer/layer.js"></script>
 <script type="text/javascript" src="../static/manage.js"></script>