前端联调抽奖功能

src/static/index.js

@@ -26,7 +26,7 @@ class BS {
     }
 
     static stopAndResult(award_id) {
-        return this.fetch('/draw_lottery',{award_id});
+        return this.fetch('/draw_lottery', {award_id});
     }
 
     static getLucklessUsers() {
@@ -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,
@@ -84,12 +92,17 @@ class UI {
             // tooltipDiffY: 10
 
         };
-        this.buildCloud().then(()=>{
+        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) => {
             console.log(resp);
@@ -97,8 +110,8 @@ class UI {
             $(resp.data).each((i, val) => {
                 entry.push({
                     label: val.name,
-                    uid:val.uid,
-                    role:val.role,
+                    uid: val.uid,
+                    role: val.role,
                     url: 'javascript:void(0)',
                     target: '_top'
                 })
@@ -107,14 +120,37 @@ 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=>{
+            BS.run().then(resp => {
                 console.log(resp);
                 this.svg3DTagCloud.speed(6);
                 this.running = true;
@@ -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) {
-        this.svg3DTagCloud.chose([{
-            index: 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
+            }]);
+            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)
+            });
+
+        })
+    }
 
-        let currentList = `<li><i class="fa fa-user"></i>张三三</li>`;
-        $('.current-list').append(currentList);
+    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

@@ -1,44 +1,85 @@
 /**
  * Created by zuowenqi on 2018/2/2 0002
  */
-class BS{
-    constructor(){
+class BS {
+    constructor() {
 
     }
-    static fetch(url,data,type){
-        return new Promise((resolve)=>{
+
+    static fetch(url, data, type) {
+        return new Promise((resolve) => {
             $.ajax({
-                type:type?type:'GET',
-                data:data?data:{},
+                type: type ? type : 'GET',
+                data: data ? data : {},
                 url,
-                success(resp){
+                success(resp) {
                     resolve(resp)
                 }
             })
         })
 
     }
-    static addAwards(award_name,award_capacity){
-        console.log();
-        return this.fetch('/add_award',{
-                award_name,award_capacity
-            });
+
+    static addAwards(award_name, award_capacity) {
+        award_capacity*=1;
+        return this.fetch('/add_award', {
+            award_name, award_capacity
+        });
     }
-    static getAwards(){
+
+    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)
+
+$(function () {
+    $('#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)
+    $('#reset').click(e => {
+        BS.fetch('/reset').then(resp => {
+        });
     });
-    BS.addAwards("三等奖",10).then(resp=>{
-        console.log(resp)
-    });
-    BS.getAwards().then(resp=>{
-        console.log(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)
+        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>