前端联调抽奖功能

src/static/index.js

@@ -42,15 +42,23 @@ class BS {
         return this.fetch('/awards');
     }
 
+    static getAward(award_id) {
+        return this.fetch('/award', {
+            award_id
+        });
+    }
+
     static getUsers() {
         return this.fetch('/users');
     }
 
+
 }
 
 class UI {
     constructor() {
         this.running = false;
+        this.currentAward = '';
         this.entries = [];
         this.settings = {
             width: 800,
@@ -89,7 +97,12 @@ class UI {
             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) => {
             console.log(resp);
@@ -107,13 +120,36 @@ class UI {
         })
     }
 
+    initVisualSocket() {
+        let tempAwardId = '';
+        setInterval(() => {
+            tempAwardId = localStorage.getItem('current_award');
+            if (this.currentAward !== tempAwardId) {
+                this.currentAward = tempAwardId;
+                this.refreshCurrentAward();
+            }
+        }, 2 * 1000);
+    }
+
+    refreshCurrentAward() {
+        BS.getAward(this.currentAward).then((resp) => {
+            console.log(resp);
+            if (resp.status === 200) {
+                let awardInfo = resp.data;
+                $('#currentAwardName').html(awardInfo.award_name);
+                $('#currentTimes').html(awardInfo.award_capacity);
+            }
+
+        })
+    }
+
+
     bindEvent() {
         $('#start').click(() => {
             if (this.running) {
                 alert('正在抽奖');
                 return;
             }
-            //todo
             BS.run().then(resp => {
                 console.log(resp);
                 this.svg3DTagCloud.speed(6);
@@ -122,13 +158,11 @@ class UI {
         });
         $('#end').click(() => {
             console.log('click');
-            //todo
-            BS.stopAndResult("9f7cfd85a39e40f2975e7a62ca9dbca5").then(resp=>{
+            BS.stopAndResult(this.currentAward).then(resp => {
                 console.log(resp);
-                this.stop();
-                let  uid= 'G0001';
-                let index = $(`[data-uid=${uid}]`).data('index');
-                this.render(index);
+                if (resp.status === 200) {
+                    this.render(resp.data, 0);
+                }
             });
         });
         $('#test').click(() => {
@@ -137,25 +171,17 @@ class UI {
 
     }
 
-    render(i) {
-        this.chose(i);
-       /* console.log(i);
-        if (i >= 5) {
-            setTimeout(() => {
-                this.stop();
-                setTimeout(() => {
-                    this.list();
-                }, 1000)
-            }, 1000);
+
+    render(data, i) {
+        // debugger
+        if (i >= data.length) {
+            this.currentlist(data);
             return;
         }
-        setTimeout(() => {
-            this.stop();
-            setTimeout(() => {
-                this.chose(i);
-                this.render(++i);
-            }, 500)
-        }, 2500)*/
+        this.chose(data[i]).then(() => {
+            i++;
+            this.render(data, i);
+        });
     }
 
     stop() {
@@ -164,13 +190,48 @@ class UI {
         this.svg3DTagCloud.speed(1);
     }
 
-    chose(i) {
+    chose(user) {
+        return new Promise((resolve) => {
+            let uid = user.uid;
+            let name = user.name;
+            let index = $(`[data-uid=${uid}]`).data('index');
             this.svg3DTagCloud.chose([{
-            index: i
+                index
             }]);
-
-        let currentList = `<li><i class="fa fa-user"></i>张三三</li>`;
+            let currentList = `<li><i class="fa fa-user"></i>${name}</li>`;
             $('.current-list').append(currentList);
+            setTimeout(() => {
+                // this.stop()
+                resolve();
+            }, 3 * 1000)
+        }).then(() => {
+            return new Promise((resolve) => {
+                this.stop();
+                setTimeout(() => {
+                    resolve();
+                }, 500)
+            });
+
+        })
+    }
+
+    currentlist(data) {
+        let offset = $(".holder").offset();
+        let DOM = '<ul>'
+        for (let user of data) {
+            DOM += `<li>${user.name}</li>`;
+        }
+        DOM += `</ul>`;
+        layer.open({
+            type: 1,
+            area: '800px',
+            offset: [offset.top, offset.left],
+            closeBtn: 1, //不显示关闭按钮
+            anim: 3,
+            title: '本次中奖名单',
+            shadeClose: false, //开启遮罩关闭
+            content: `<div class="luckerList">${DOM}</div>`
+        });
     }
 
     list() {
@@ -181,7 +242,7 @@ class UI {
             offset: [offset.top, offset.left],
             closeBtn: 1, //不显示关闭按钮
             anim: 3,
-            title: '中奖名单',
+            title: '本次中奖名单',
             shadeClose: false, //开启遮罩关闭
             content: '<div class="luckerList"><ul><li>1111</li><li>111</li><li>2222</li></ul></div>'
         });

src/static/jquery-svg3dtagcloud-plugin-master/js/jquery.svg3dtagcloud.js

@@ -280,6 +280,7 @@ THE SOFTWARE.
                 }
 
                 entry.index = index;
+                entry.uid = entryObj.uid;
                 entry.mouseOver = false;
 
                 entry.vectorPosition = { x:x, y:y, z:z };

src/static/manage.js

@@ -5,6 +5,7 @@ class BS{
     constructor() {
 
     }
+
     static fetch(url, data, type) {
         return new Promise((resolve) => {
             $.ajax({
@@ -18,27 +19,67 @@ class BS{
         })
 
     }
+
     static addAwards(award_name, award_capacity) {
-        console.log();
+        award_capacity*=1;
         return this.fetch('/add_award', {
             award_name, award_capacity
         });
     }
+
     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);
+            resolve(localStorage.getItem('current_award'));
+        })
+    }
 }
+
 $(function () {
-    BS.addAwards("一等奖",1).then(resp=>{
-        console.log(resp)
+    $('#add').click(e => {
+        layer.open({
+            title:'增加',
+            content: `<div>
+奖品名<input type="text" id="addname"></div><div>
+数量 <input type="text" id="addnum">
+</div>`,
+            yes: function () {
+                let name = $('#addname').val();
+                let num = $('#addnum').val();
+                BS.addAwards(name, num).then(resp => {
+                    console.log(resp);
+                    flushAwards()
+                });
+            }
         });
-    BS.addAwards("二等奖",5).then(resp=>{
-        console.log(resp)
     });
-    BS.addAwards("三等奖",10).then(resp=>{
+    $('#reset').click(e => {
+        BS.fetch('/reset').then(resp => {
+        });
+    });
+    $(document).on('click','.set',e=>{
+        let aid = $(e.target).data('aid');
+        BS.setCurrent(aid).then((resp)=>{
             console.log(resp)
+        })
+    })
+    flushAwards()
+
 });
+
+function flushAwards() {
     BS.getAwards().then(resp => {
-        console.log(resp);
+        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>`
+            ul += list;
         })
-});
+        $('ul').html(ul)
+    })
+}

src/templates/index.html

@@ -12,8 +12,8 @@
 <body>
 <div class="content">
     <div class=" title">
-        <h3>当前奖项：二等奖</h3>
-        <h4>抽取人数：1</h4>
+        <h3>当前奖项：<span id="currentAwardName">设置中</span> </h3>
+        <h4>抽取人数：<span id="currentTimes">设置中</span></h4>
     </div>
     <div class="row">
         <div class="left">

src/templates/manage.html

@@ -6,14 +6,22 @@
     <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>
 </head>
 <body>
 <ul>
-    <li></li>
 </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>