From dd195953dae111aa57b9d038ea97308a1605a1a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B7=A6=E6=96=87=E7=A5=BA?= Date: Mon, 5 Feb 2018 10:11:17 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=89=80=E6=9C=89=E4=B8=AD=E5=A5=96=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/static/index.css | 40 +++++++++++++++-- src/static/index.js | 95 ++++++++++++++++++++++++++++++--------- src/static/manage.css | 47 +++++++++++++++++++ src/static/manage.js | 76 ++++++++++++++++++++++--------- src/templates/index.html | 6 +-- src/templates/manage.html | 18 +++----- 6 files changed, 219 insertions(+), 63 deletions(-) create mode 100644 src/static/manage.css diff --git a/src/static/index.css b/src/static/index.css index 6cfbbc5..08e7db1 100644 --- a/src/static/index.css +++ b/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; } \ No newline at end of file diff --git a/src/static/index.js b/src/static/index.js index 19db7d5..17f5414 100644 --- a/src/static/index.js +++ b/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: '
' + 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 `
  • ${data.name}【${data.uid}】
    • ` + }); + content+=` +
    +
    ${award.name}
    + +
    `; + } + layer.open({ + type: 1, + area: '800px', + skin: 'layui-layer-lan', //样式类名 + offset: [offset.top, offset.left], + closeBtn: 1, //不显示关闭按钮 + anim: 3, + title: '所有中奖名单', + shadeClose: false, //开启遮罩关闭 + content: ` +
    ${content} +
    ` + }); }); } } diff --git a/src/static/manage.css b/src/static/manage.css new file mode 100644 index 0000000..91e0d14 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/static/manage.js b/src/static/manage.js index e383113..3f43688 100644 --- a/src/static/manage.js +++ b/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: `
    -奖品名
    -数量 -
    `, - yes: function () { + title: '增加', + content: ` +
    奖品名
    +
    数 量
    +`, + 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 = `
    • ` + let list = ` +
  • +
    + 设置成当前轮 + +
    +
    + 奖项名称：${val.award_name}，数量：${val.award_capacity} +
    +
    • `; ul += list; }) - $('ul').html(ul) + $('#awardList').html(ul) }) } \ No newline at end of file diff --git a/src/templates/index.html b/src/templates/index.html index 28585a0..3ca713e 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -24,9 +24,9 @@

    - 开始 - 停止 - 中奖结果 + + +

    diff --git a/src/templates/manage.html b/src/templates/manage.html index 0ca7c69..7d57269 100644 --- a/src/templates/manage.html +++ b/src/templates/manage.html @@ -6,22 +6,14 @@ - + -