c6fa739b by McLemore

init

This diff could not be displayed because it is too large.
No preview for this file type
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 <link 8 <link
9 rel="stylesheet" 9 rel="stylesheet"
10 href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/> 10 href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/>
11 <title>luckydraw</title> 11 <title>赤金科技-年会抽奖</title>
12 </head> 12 </head>
13 <body> 13 <body>
14 <noscript> 14 <noscript>
......
1 <template> 1 <template>
2 <div id="root"> 2 <div class="rootWrapper">
3 <header> 3 <img class="bgImg" alt="" src="./assets/bg.png" />
4 <Publicity v-show="!running" /> 4 <div id="root">
5 <el-button class="res" type="text" @click="showResult = true"> 5 <header>
6 抽奖结果 6 <Publicity v-show="!running && !autoRunning" />
7 </el-button> 7 <el-button class="res" type="text" @click="showResult = true">
8 <el-button class="con" type="text" @click="showConfig = true"> 8 抽奖结果
9 抽奖配置 9 </el-button>
10 </el-button> 10 <el-button class="con" type="text" @click="showConfig = true">
11 </header> 11 抽奖配置
12 <div id="main" :class="{ mask: showRes }"></div> 12 </el-button>
13 <div id="tags"> 13 </header>
14 <ul v-for="item in datas" :key="item.key"> 14 <div id="main" :class="{ mask: showRes }"></div>
15 <li> 15 <div id="tags">
16 <a 16 <ul v-for="item in datas" :key="item.key">
17 href="javascript:void(0);" 17 <li>
18 :style="{ 18 <a
19 color: 19 href="javascript:void(0);"
20 !running && allresult.includes(item.key) ? '#ff2200' : '#fff' 20 :style="{
21 }" 21 color:
22 > 22 !autoRunning && !running && allresult.includes(item.key)
23 {{ item.name ? item.name : item.key }} 23 ? '#fff'
24 <img v-if="item.photo" :src="item.photo" :width="50" :height="50" /> 24 : '#fff'
25 </a> 25 }"
26 </li> 26 >
27 </ul> 27 {{ item.name ? item.name : item.key }}
28 </div> 28 <img
29 <transition name="bounce"> 29 v-if="item.photo"
30 <div id="resbox" v-show="showRes"> 30 :src="item.photo"
31 <p @click="showRes = false">{{ categoryName }}抽奖结果:</p> 31 :width="50"
32 <div class="container"> 32 :height="50"
33 <span 33 />
34 v-for="item in resArr" 34 </a>
35 :key="item" 35 </li>
36 class="itemres" 36 </ul>
37 :style="resCardStyle" 37 </div>
38 :data-id="item" 38 <transition name="bounce">
39 @click="showRes = false" 39 <div id="resbox" v-show="showRes">
40 :class="{ 40 <p @click="showRes = false">{{ categoryName }}抽奖结果:</p>
41 numberOver: 41 <div class="container">
42 !!photos.find(d => d.id === item) || 42 <span
43 !!list.find(d => d.key === item) 43 v-for="item in resArr"
44 }" 44 :key="item"
45 > 45 class="itemres"
46 <span class="cont" v-if="!photos.find(d => d.id === item)"> 46 :style="resCardStyle"
47 <span 47 :data-id="list.find(d => d.key === item).name"
48 v-if="!!list.find(d => d.key === item)" 48 @click="showRes = false"
49 :style="{ 49 :class="{
50 fontSize: '40px' 50 numberOver:
51 }" 51 !!photos.find(d => d.id === item) ||
52 > 52 !!list.find(d => d.key === item)
53 {{ list.find(d => d.key === item).name }} 53 }"
54 </span> 54 >
55 <span v-else> 55 <span class="cont" v-if="!photos.find(d => d.id === item)">
56 {{ item }} 56 <span
57 v-if="!!list.find(d => d.key === item)"
58 :style="{
59 fontSize: '40px'
60 }"
61 >
62 {{ list.find(d => d.key === item).name }}
63 </span>
64 <span v-else>
65 {{ item }}
66 </span>
57 </span> 67 </span>
68 <img
69 v-if="photos.find(d => d.id === item)"
70 :src="photos.find(d => d.id === item).value"
71 alt="photo"
72 :width="160"
73 />
58 </span> 74 </span>
59 <img 75 </div>
60 v-if="photos.find(d => d.id === item)"
61 :src="photos.find(d => d.id === item).value"
62 alt="photo"
63 :width="160"
64 :height="160"
65 />
66 </span>
67 </div> 76 </div>
68 </div> 77 </transition>
69 </transition>
70
71 <el-button
72 class="audio"
73 type="text"
74 @click="
75 () => {
76 playAudio(!audioPlaying);
77 }
78 "
79 >
80 <i
81 class="iconfont"
82 :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
83 ></i>
84 </el-button>
85 78
86 <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" /> 79 <el-button
87 <Tool 80 class="audio"
88 @toggle="toggle" 81 type="text"
89 @resetConfig="reloadTagCanvas" 82 @click="
90 @getPhoto="getPhoto" 83 () => {
91 :running="running" 84 playAudio(!audioPlaying);
92 :closeRes="closeRes" 85 }
93 /> 86 "
94 <Result :visible.sync="showResult"></Result> 87 >
88 <i
89 class="iconfont"
90 :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
91 ></i>
92 </el-button>
95 93
96 <span class="copy-right"> 94 <LotteryConfig
97 Copyright©zhangyongfeng5350@gmail.com 95 :visible.sync="showConfig"
98 </span> 96 @resetconfig="reloadTagCanvas"
97 />
98 <Tool
99 @toggle="toggle"
100 @resetConfig="reloadTagCanvas"
101 @getPhoto="getPhoto"
102 :running="running"
103 :autoRunning="autoRunning"
104 :closeRes="closeRes"
105 />
106 <Result :visible.sync="showResult"></Result>
99 107
100 <audio 108 <audio
101 id="audiobg" 109 id="audiobg"
102 preload="auto" 110 preload="auto"
103 controls 111 controls
104 autoplay 112 autoplay
105 loop 113 loop
106 @play="playHandler" 114 @play="playHandler"
107 @pause="pauseHandler" 115 @pause="pauseHandler"
108 > 116 >
109 <source :src="audioSrc" /> 117 <source :src="audioSrc" />
110 你的浏览器不支持audio标签 118 你的浏览器不支持audio标签
111 </audio> 119 </audio>
120 </div>
112 </div> 121 </div>
113 </template> 122 </template>
114 <script> 123 <script>
...@@ -170,6 +179,15 @@ export default { ...@@ -170,6 +179,15 @@ export default {
170 allresult = allresult.concat(element); 179 allresult = allresult.concat(element);
171 } 180 }
172 } 181 }
182
183 let times = Math.floor(allresult.length / this.config.number);
184
185 for (let i = 0; i < times; i++) {
186 for (let j = 0; j < this.list.length; j++) {
187 allresult.splice(allresult.indexOf(this.list[j].key), 1);
188 }
189 }
190
173 return allresult; 191 return allresult;
174 }, 192 },
175 datas() { 193 datas() {
...@@ -222,6 +240,7 @@ export default { ...@@ -222,6 +240,7 @@ export default {
222 240
223 data() { 241 data() {
224 return { 242 return {
243 autoRunning: false,
225 running: false, 244 running: false,
226 showRes: false, 245 showRes: false,
227 showConfig: false, 246 showConfig: false,
...@@ -303,69 +322,129 @@ export default { ...@@ -303,69 +322,129 @@ export default {
303 closeRes() { 322 closeRes() {
304 this.showRes = false; 323 this.showRes = false;
305 }, 324 },
306 toggle(form) { 325 toggle(form, auto) {
307 const { speed, config } = this; 326 const { speed, config } = this;
308 if (this.running) {
309 this.audioSrc = bgaudio;
310 this.loadAudio();
311 327
312 window.TagCanvas.SetSpeed('rootcanvas', speed()); 328 if (auto) {
313 this.showRes = true; 329 if (this.autoRunning) {
314 this.running = !this.running; 330 this.audioSrc = bgaudio;
315 this.$nextTick(() => { 331 this.loadAudio();
316 this.reloadTagCanvas(); 332
317 }); 333 window.TagCanvas.SetSpeed('rootcanvas', speed());
318 } else { 334 this.showRes = true;
319 this.showRes = false; 335 this.autoRunning = !this.autoRunning;
320 if (!form) { 336 this.$nextTick(() => {
321 return; 337 this.reloadTagCanvas();
322 } 338 });
339 } else {
340 this.showRes = false;
341 if (!form) {
342 return;
343 }
344
345 this.audioSrc = beginaudio;
346 this.loadAudio();
323 347
324 this.audioSrc = beginaudio; 348 const { number } = config;
325 this.loadAudio(); 349 const { category, mode, qty, remain, allin } = form;
350 let num = 1;
351 if (mode === 1 || mode === 5) {
352 num = mode;
353 } else if (mode === 0) {
354 num = remain;
355 } else if (mode === 99) {
356 num = qty;
357 }
358 const resArr = luckydrawHandler(
359 number,
360 allin ? [] : this.allresult,
361 num
362 );
363 this.resArr = resArr;
326 364
327 const { number } = config; 365 this.category = category;
328 const { category, mode, qty, remain, allin } = form; 366 if (!this.result[category]) {
329 let num = 1; 367 this.$set(this.result, category, []);
330 if (mode === 1 || mode === 5) { 368 }
331 num = mode; 369 const oldRes = this.result[category] || [];
332 } else if (mode === 0) { 370 const data = Object.assign({}, this.result, {
333 num = remain; 371 [category]: oldRes.concat(resArr)
334 } else if (mode === 99) { 372 });
335 num = qty; 373 this.result = data;
374 window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
375 this.autoRunning = !this.autoRunning;
336 } 376 }
337 const resArr = luckydrawHandler( 377 } else {
338 number, 378 if (this.running) {
339 allin ? [] : this.allresult, 379 this.audioSrc = bgaudio;
340 num 380 this.loadAudio();
341 ); 381
342 this.resArr = resArr; 382 window.TagCanvas.SetSpeed('rootcanvas', speed());
383 this.showRes = true;
384 this.running = !this.running;
385 this.$nextTick(() => {
386 this.reloadTagCanvas();
387 });
388 } else {
389 this.showRes = false;
390 if (!form) {
391 return;
392 }
393
394 this.audioSrc = beginaudio;
395 this.loadAudio();
396
397 const { number } = config;
398 const { category, mode, qty, remain, allin } = form;
399 let num = 1;
400 if (mode === 1 || mode === 5) {
401 num = mode;
402 } else if (mode === 0) {
403 num = remain;
404 } else if (mode === 99) {
405 num = qty;
406 }
407 const resArr = luckydrawHandler(
408 number,
409 allin ? [] : this.allresult,
410 num
411 );
412 this.resArr = resArr;
343 413
344 this.category = category; 414 this.category = category;
345 if (!this.result[category]) { 415 if (!this.result[category]) {
346 this.$set(this.result, category, []); 416 this.$set(this.result, category, []);
417 }
418 const oldRes = this.result[category] || [];
419 const data = Object.assign({}, this.result, {
420 [category]: oldRes.concat(resArr)
421 });
422 this.result = data;
423 window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
424 this.running = !this.running;
347 } 425 }
348 const oldRes = this.result[category] || [];
349 const data = Object.assign({}, this.result, {
350 [category]: oldRes.concat(resArr)
351 });
352 this.result = data;
353 window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
354 this.running = !this.running;
355 } 426 }
356 } 427 }
357 } 428 }
358 }; 429 };
359 </script> 430 </script>
360 <style lang="scss"> 431 <style lang="scss">
432 .rootWrapper {
433 height: 100%;
434 position: relative;
435 background-color: #b51c23;
436 .bgImg {
437 width: 100%;
438 position: absolute;
439 top: 40px;
440 left: 0;
441 z-index: 1;
442 }
443 }
361 #root { 444 #root {
362 height: 100%; 445 height: 100%;
363 position: relative; 446 position: relative;
364 background-image: url('./assets/bg1.jpg'); 447 z-index: 2;
365 background-size: 100% 100%;
366 background-position: center center;
367 background-repeat: no-repeat;
368 background-color: #121936;
369 .mask { 448 .mask {
370 -webkit-filter: blur(5px); 449 -webkit-filter: blur(5px);
371 filter: blur(5px); 450 filter: blur(5px);
...@@ -379,6 +458,11 @@ export default { ...@@ -379,6 +458,11 @@ export default {
379 top: 17px; 458 top: 17px;
380 padding: 0; 459 padding: 0;
381 z-index: 9999; 460 z-index: 9999;
461 color: #f1d192;
462 opacity: 0;
463 &:hover {
464 opacity: 0.3;
465 }
382 &.con { 466 &.con {
383 right: 20px; 467 right: 20px;
384 } 468 }
...@@ -388,9 +472,13 @@ export default { ...@@ -388,9 +472,13 @@ export default {
388 } 472 }
389 } 473 }
390 .audio { 474 .audio {
475 opacity: 0;
476 &:hover {
477 opacity: 0.3;
478 }
391 position: absolute; 479 position: absolute;
392 top: 100px; 480 top: 150px;
393 right: 30px; 481 right: 50px;
394 width: 40px; 482 width: 40px;
395 height: 40px; 483 height: 40px;
396 line-height: 40px; 484 line-height: 40px;
...@@ -419,19 +507,20 @@ export default { ...@@ -419,19 +507,20 @@ export default {
419 } 507 }
420 #main { 508 #main {
421 height: 100%; 509 height: 100%;
510 margin-top: 40px;
422 } 511 }
423 512
424 #resbox { 513 #resbox {
425 position: absolute; 514 position: absolute;
426 top: 50%; 515 top: calc(50% + 90px);
427 left: 50%; 516 left: 50%;
428 width: 1280px; 517 width: 1280px;
429 transform: translateX(-50%) translateY(-50%); 518 transform: translateX(-50%) translateY(-50%);
430 text-align: center; 519 text-align: center;
431 p { 520 p {
432 color: red; 521 color: #fff;
433 font-size: 50px; 522 font-size: 40px;
434 line-height: 120px; 523 line-height: 60px;
435 } 524 }
436 .container { 525 .container {
437 display: flex; 526 display: flex;
...@@ -442,6 +531,7 @@ export default { ...@@ -442,6 +531,7 @@ export default {
442 background: #fff; 531 background: #fff;
443 width: 160px; 532 width: 160px;
444 height: 160px; 533 height: 160px;
534 overflow: hidden;
445 border-radius: 4px; 535 border-radius: 4px;
446 border: 1px solid #ccc; 536 border: 1px solid #ccc;
447 line-height: 160px; 537 line-height: 160px;
......

689 KB

...@@ -2379,7 +2379,7 @@ ...@@ -2379,7 +2379,7 @@
2379 shadowOffset: [0, 0], 2379 shadowOffset: [0, 0],
2380 initial: null, 2380 initial: null,
2381 hideTags: true, 2381 hideTags: true,
2382 zoom: 1, 2382 zoom: 0.7,
2383 weight: false, 2383 weight: false,
2384 weightMode: "size", 2384 weightMode: "size",
2385 weightFrom: null, 2385 weightFrom: null,
...@@ -2395,7 +2395,7 @@ ...@@ -2395,7 +2395,7 @@
2395 txtOpt: true, 2395 txtOpt: true,
2396 txtScale: 2, 2396 txtScale: 2,
2397 frontSelect: false, 2397 frontSelect: false,
2398 wheelZoom: true, 2398 wheelZoom: false,
2399 zoomMin: 0.3, 2399 zoomMin: 0.3,
2400 zoomMax: 3, 2400 zoomMax: 3,
2401 zoomStep: 0.05, 2401 zoomStep: 0.05,
...@@ -2414,7 +2414,7 @@ ...@@ -2414,7 +2414,7 @@
2414 shuffleTags: false, 2414 shuffleTags: false,
2415 noSelect: false, 2415 noSelect: false,
2416 noMouse: false, 2416 noMouse: false,
2417 imageScale: 1, 2417 imageScale: 1.6,
2418 paused: false, 2418 paused: false,
2419 dragControl: false, 2419 dragControl: false,
2420 dragThreshold: 4, 2420 dragThreshold: 4,
......
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
75 const formData = new FormData(); 75 const formData = new FormData();
76 formData.append('uploadImg', fileList[0]); 76 formData.append('uploadImg', fileList[0]);
77 const reader = new FileReader(); 77 const reader = new FileReader();
78 const AllowImgFileSize = 1024 * 150; 78 const AllowImgFileSize = 1024 * 200;
79 const file = fileList[0]; 79 const file = fileList[0];
80 if (file) { 80 if (file) {
81 this.filename = file.name; 81 this.filename = file.name;
......
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
31 :step="1" 31 :step="1"
32 ></el-input> 32 ></el-input>
33 </el-form-item> 33 </el-form-item>
34 <!--
34 <el-form-item label="一等奖"> 35 <el-form-item label="一等奖">
35 <el-input 36 <el-input
36 type="number" 37 type="number"
...@@ -39,6 +40,7 @@ ...@@ -39,6 +40,7 @@
39 :step="1" 40 :step="1"
40 ></el-input> 41 ></el-input>
41 </el-form-item> 42 </el-form-item>
43 -->
42 <el-form-item 44 <el-form-item
43 :label="newitem.name" 45 :label="newitem.name"
44 v-for="newitem in storeNewLottery" 46 v-for="newitem in storeNewLottery"
...@@ -126,7 +128,7 @@ export default { ...@@ -126,7 +128,7 @@ export default {
126 const str = 'abcdefghijklmnopqrstuvwxyz'; 128 const str = 'abcdefghijklmnopqrstuvwxyz';
127 let fieldStr = ''; 129 let fieldStr = '';
128 for (let index = 0; index < 10; index++) { 130 for (let index = 0; index < 10; index++) {
129 fieldStr += str.split('')[randomNum(1, 27) - 1]; 131 fieldStr += str.split('')[randomNum(1, 26) - 1];
130 } 132 }
131 return `${fieldStr}${Date.now()}`; 133 return `${fieldStr}${Date.now()}`;
132 }, 134 },
......
...@@ -30,8 +30,11 @@ export default { ...@@ -30,8 +30,11 @@ export default {
30 result() { 30 result() {
31 return this.$store.state.result; 31 return this.$store.state.result;
32 }, 32 },
33 list() {
34 return this.$store.state.list;
35 },
33 message() { 36 message() {
34 const { result, config } = this; 37 const { result, config, list } = this;
35 const fields = Object.keys(config); 38 const fields = Object.keys(config);
36 39
37 let message = [{ key: 0, title: config.name }]; 40 let message = [{ key: 0, title: config.name }];
...@@ -42,7 +45,12 @@ export default { ...@@ -42,7 +45,12 @@ export default {
42 key: index + 1, 45 key: index + 1,
43 title: `${label}抽奖结果:`, 46 title: `${label}抽奖结果:`,
44 value: `${ 47 value: `${
45 result[item].length > 0 ? result[item].join('、') : '暂未抽取' 48 result[item].length > 0
49 ? list
50 .filter(v => result[item].indexOf(v.key) > -1)
51 .map(v => v.name)
52 .join('、')
53 : '暂未抽取'
46 }` 54 }`
47 }); 55 });
48 } 56 }
...@@ -57,7 +65,6 @@ export default { ...@@ -57,7 +65,6 @@ export default {
57 .c-Publicity { 65 .c-Publicity {
58 height: 100%; 66 height: 100%;
59 // width: 1000px; 67 // width: 1000px;
60 background-color: rgba(255, 255, 255, 0.1);
61 margin: 0 auto; 68 margin: 0 auto;
62 position: relative; 69 position: relative;
63 overflow: hidden; 70 overflow: hidden;
...@@ -66,14 +73,14 @@ export default { ...@@ -66,14 +73,14 @@ export default {
66 color: #fff; 73 color: #fff;
67 font-size: 16px; 74 font-size: 16px;
68 .title { 75 .title {
69 color: #ccc; 76 color: #f1d192;
70 } 77 }
71 .value { 78 .value {
72 margin-left: 10px; 79 margin-left: 10px;
73 } 80 }
74 &.actiname { 81 &.actiname {
75 .title { 82 .title {
76 color: red; 83 color: #fff;
77 font-size: 20px; 84 font-size: 20px;
78 } 85 }
79 } 86 }
......
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
35 class="card" 35 class="card"
36 v-for="(data, j) in item.value" 36 v-for="(data, j) in item.value"
37 :key="j" 37 :key="j"
38 :data-res="data" 38 :data-res="data.number"
39 > 39 >
40 {{ data }} 40 {{ data.name }}
41 </span> 41 </span>
42 </span> 42 </span>
43 </div> 43 </div>
...@@ -59,6 +59,9 @@ export default { ...@@ -59,6 +59,9 @@ export default {
59 this.$store.commit('setResult', val); 59 this.$store.commit('setResult', val);
60 } 60 }
61 }, 61 },
62 list() {
63 return this.$store.state.list;
64 },
62 resultList() { 65 resultList() {
63 const list = []; 66 const list = [];
64 for (const key in this.result) { 67 for (const key in this.result) {
...@@ -68,7 +71,10 @@ export default { ...@@ -68,7 +71,10 @@ export default {
68 list.push({ 71 list.push({
69 label: key, 72 label: key,
70 name, 73 name,
71 value: element 74 value: element.map(v => ({
75 number: v,
76 name: this.list.filter(vv => vv.key === v)[0].name
77 }))
72 }); 78 });
73 } 79 }
74 } 80 }
......
1 <template> 1 <template>
2 <div id="tool"> 2 <div>
3 <el-button @click="startHandler" type="primary" size="mini">{{ 3 <el-button
4 running ? '停止' : '开始' 4 class="autoStart"
5 }}</el-button> 5 @click="autoHandler"
6 <el-button size="mini" @click="showRemoveoptions = true"> 6 type="primary"
7 重置 7 size="mini"
8 </el-button> 8 >{{ autoRunning ? '停!' : '开始抽奖' }}</el-button
9 <el-button size="mini" @click="showImport = true">
10 导入名单
11 </el-button>
12 <el-button size="mini" @click="showImportphoto = true">
13 导入照片
14 </el-button>
15 <el-dialog
16 :append-to-body="true"
17 :visible.sync="showSetwat"
18 class="setwat-dialog"
19 width="400px"
20 > 9 >
21 <el-form ref="form" :model="form" label-width="80px" size="mini"> 10 <div id="tool">
22 <el-form-item label="抽取奖项"> 11 <el-button class="btn" @click="startHandler" size="mini">{{
23 <el-select v-model="form.category" placeholder="请选取本次抽取的奖项"> 12 running ? '停止' : '自定义抽奖'
24 <el-option 13 }}</el-button>
25 :label="item.label" 14 <el-button class="btn" size="mini" @click="showRemoveoptions = true">
26 :value="item.value" 15 重置
27 v-for="(item, index) in categorys" 16 </el-button>
28 :key="index" 17 <el-button class="btn" size="mini" @click="showImport = true">
29 ></el-option> 18 导入名单
30 </el-select> 19 </el-button>
31 </el-form-item> 20 <el-button class="btn" size="mini" @click="showImportphoto = true">
21 导入照片
22 </el-button>
23 <el-dialog
24 :append-to-body="true"
25 :visible.sync="showSetwat"
26 class="setwat-dialog"
27 width="400px"
28 >
29 <el-form ref="form" :model="form" label-width="80px" size="mini">
30 <el-form-item label="抽取奖项">
31 <el-select
32 v-model="form.category"
33 placeholder="请选取本次抽取的奖项"
34 >
35 <el-option
36 :label="item.label"
37 :value="item.value"
38 v-for="(item, index) in categorys"
39 :key="index"
40 ></el-option>
41 </el-select>
42 </el-form-item>
32 43
33 <el-form-item label=" " v-if="form.category"> 44 <el-form-item label=" " v-if="form.category">
34 <span> 45 <span>
35 &nbsp; 46 &nbsp;
36 <span class="colorred">{{ config[form.category] }}</span> 47 <span class="colorred">{{ config[form.category] }}</span>
37 &nbsp; 48 &nbsp;
38 </span> 49 </span>
39 <span :style="{ marginLeft: '20px' }"> 50 <span :style="{ marginLeft: '20px' }">
40 剩余&nbsp; 51 剩余&nbsp;
41 <span class="colorred">{{ remain }}</span> 52 <span class="colorred">{{ remain }}</span>
42 &nbsp; 53 &nbsp;
43 </span> 54 </span>
44 </el-form-item> 55 </el-form-item>
45 56
46 <el-form-item label="抽取方式"> 57 <el-form-item label="抽取方式">
47 <el-select v-model="form.mode" placeholder="请选取本次抽取方式"> 58 <el-select v-model="form.mode" placeholder="请选取本次抽取方式">
48 <el-option label="抽1人" :value="1"></el-option> 59 <el-option label="抽1人" :value="1"></el-option>
49 <el-option label="抽5人" :value="5"></el-option> 60 <el-option label="抽5人" :value="5"></el-option>
50 <el-option label="一次抽取完" :value="0"></el-option> 61 <el-option label="一次抽取完" :value="0"></el-option>
51 <el-option label="自定义" :value="99"></el-option> 62 <el-option label="自定义" :value="99"></el-option>
52 </el-select> 63 </el-select>
53 </el-form-item> 64 </el-form-item>
54 65
55 <el-form-item label="抽取人数" v-if="form.mode === 99"> 66 <el-form-item label="抽取人数" v-if="form.mode === 99">
56 <el-input 67 <el-input
57 v-model="form.qty" 68 v-model="form.qty"
58 type="number" 69 type="number"
59 :clearable="true" 70 :clearable="true"
60 :min="1" 71 :min="1"
61 :max="remain ? remain : 100" 72 :max="remain ? remain : 100"
62 :step="1" 73 :step="1"
63 ></el-input> 74 ></el-input>
64 </el-form-item> 75 </el-form-item>
65 76
66 <el-form-item label="全员参与"> 77 <el-form-item label="全员参与">
67 <el-switch v-model="form.allin"></el-switch> 78 <el-switch v-model="form.allin"></el-switch>
68 <span :style="{ fontSize: '12px' }"> 79 <span :style="{ fontSize: '12px' }">
69 (开启后将在全体成员[无论有无中奖]中抽奖) 80 (开启后将在全体成员[无论有无中奖]中抽奖)
70 </span> 81 </span>
71 </el-form-item> 82 </el-form-item>
72 83
73 <el-form-item> 84 <el-form-item>
74 <el-button type="primary" @click="onSubmit">立即抽奖</el-button> 85 <el-button type="primary" @click="onSubmit">立即抽奖</el-button>
75 <el-button @click="showSetwat = false">取消</el-button> 86 <el-button @click="showSetwat = false">取消</el-button>
76 </el-form-item> 87 </el-form-item>
77 </el-form> 88 </el-form>
78 </el-dialog> 89 </el-dialog>
79 90
80 <el-dialog 91 <el-dialog
81 :append-to-body="true" 92 :append-to-body="true"
82 :visible.sync="showImport" 93 :visible.sync="showImport"
83 class="import-dialog" 94 class="import-dialog"
84 width="400px" 95 width="400px"
85 > 96 >
86 <el-input 97 <el-input
87 type="textarea" 98 type="textarea"
88 :rows="10" 99 :rows="10"
89 placeholder="请输入对应的号码和名单(可直接从excel复制),格式(号码 名字),导入的名单将代替号码显示在抽奖中。如: 100 placeholder="请输入对应的号码和名单(可直接从excel复制),格式(号码 名字),导入的名单将代替号码显示在抽奖中。如:
90 1 张三 101 1 张三
91 2 李四 102 2 李四
92 3 王五 103 3 王五
93 " 104 "
94 v-model="listStr" 105 v-model="listStr"
95 ></el-input> 106 ></el-input>
96 <div class="footer"> 107 <div class="footer">
97 <el-button size="mini" type="primary" @click="transformList" 108 <el-button size="mini" type="primary" @click="transformList"
98 >确定</el-button 109 >确定</el-button
99 > 110 >
100 <el-button size="mini" @click="showImport = false">取消</el-button> 111 <el-button size="mini" @click="showImport = false">取消</el-button>
101 </div> 112 </div>
102 </el-dialog> 113 </el-dialog>
103 <Importphoto 114 <Importphoto
104 :visible.sync="showImportphoto" 115 :visible.sync="showImportphoto"
105 @getPhoto="$emit('getPhoto')" 116 @getPhoto="$emit('getPhoto')"
106 ></Importphoto> 117 ></Importphoto>
107 118
108 <el-dialog 119 <el-dialog
109 :visible.sync="showRemoveoptions" 120 :visible.sync="showRemoveoptions"
110 width="300px" 121 width="300px"
111 class="c-removeoptions" 122 class="c-removeoptions"
112 :append-to-body="true" 123 :append-to-body="true"
113 > 124 >
114 <el-form ref="form" :model="removeInfo" label-width="80px" size="mini"> 125 <el-form ref="form" :model="removeInfo" label-width="80px" size="mini">
115 <el-form-item label="重置选项"> 126 <el-form-item label="重置选项">
116 <el-radio-group v-model="removeInfo.type"> 127 <el-radio-group v-model="removeInfo.type">
117 <el-radio border :label="0">重置全部数据</el-radio> 128 <el-radio border :label="0">重置全部数据</el-radio>
118 <el-radio border :label="1">重置抽奖配置</el-radio> 129 <el-radio border :label="1">重置抽奖配置</el-radio>
119 <el-radio border :label="2">重置名单</el-radio> 130 <el-radio border :label="2">重置名单</el-radio>
120 <el-radio border :label="3">重置照片</el-radio> 131 <el-radio border :label="3">重置照片</el-radio>
121 <el-radio border :label="4">重置抽奖结果</el-radio> 132 <el-radio border :label="4">重置抽奖结果</el-radio>
122 </el-radio-group> 133 </el-radio-group>
123 </el-form-item> 134 </el-form-item>
124 <el-form-item> 135 <el-form-item>
125 <el-button type="primary" @click="resetConfig">确定重置</el-button> 136 <el-button type="primary" @click="resetConfig">确定重置</el-button>
126 <el-button @click="showRemoveoptions = false">取消</el-button> 137 <el-button @click="showRemoveoptions = false">取消</el-button>
127 </el-form-item> 138 </el-form-item>
128 </el-form> 139 </el-form>
129 </el-dialog> 140 </el-dialog>
141 </div>
130 </div> 142 </div>
131 </template> 143 </template>
132 144
...@@ -135,6 +147,7 @@ import { ...@@ -135,6 +147,7 @@ import {
135 clearData, 147 clearData,
136 removeData, 148 removeData,
137 configField, 149 configField,
150 newLotteryField,
138 listField, 151 listField,
139 resultField, 152 resultField,
140 conversionCategoryName 153 conversionCategoryName
...@@ -145,6 +158,7 @@ import { database, DB_STORE_NAME } from '@/helper/db'; ...@@ -145,6 +158,7 @@ import { database, DB_STORE_NAME } from '@/helper/db';
145 export default { 158 export default {
146 props: { 159 props: {
147 running: Boolean, 160 running: Boolean,
161 autoRunning: Boolean,
148 closeRes: Function 162 closeRes: Function
149 }, 163 },
150 computed: { 164 computed: {
...@@ -153,6 +167,11 @@ export default { ...@@ -153,6 +167,11 @@ export default {
153 return this.$store.state.config; 167 return this.$store.state.config;
154 } 168 }
155 }, 169 },
170 newLottery: {
171 get() {
172 return this.$store.state.newLottery;
173 }
174 },
156 remain() { 175 remain() {
157 return ( 176 return (
158 this.config[this.form.category] - 177 this.config[this.form.category] -
...@@ -189,10 +208,10 @@ export default { ...@@ -189,10 +208,10 @@ export default {
189 showImport: false, 208 showImport: false,
190 showImportphoto: false, 209 showImportphoto: false,
191 showRemoveoptions: false, 210 showRemoveoptions: false,
192 removeInfo: { type: 0 }, 211 removeInfo: { type: 4 },
193 form: { 212 form: {
194 category: '', 213 category: '',
195 mode: 1, 214 mode: 0,
196 qty: 1, 215 qty: 1,
197 allin: false 216 allin: false
198 }, 217 },
...@@ -202,7 +221,7 @@ export default { ...@@ -202,7 +221,7 @@ export default {
202 watch: { 221 watch: {
203 showRemoveoptions(v) { 222 showRemoveoptions(v) {
204 if (!v) { 223 if (!v) {
205 this.removeInfo.type = 0; 224 this.removeInfo.type = 4;
206 } 225 }
207 } 226 }
208 }, 227 },
...@@ -223,6 +242,7 @@ export default { ...@@ -223,6 +242,7 @@ export default {
223 break; 242 break;
224 case 1: 243 case 1:
225 removeData(configField); 244 removeData(configField);
245 removeData(newLotteryField);
226 this.$store.commit('setClearConfig'); 246 this.$store.commit('setClearConfig');
227 break; 247 break;
228 case 2: 248 case 2:
...@@ -281,12 +301,36 @@ export default { ...@@ -281,12 +301,36 @@ export default {
281 } 301 }
282 } 302 }
283 this.showSetwat = false; 303 this.showSetwat = false;
284 this.$emit( 304 const form = Object.assign({}, this.form, { remain: this.remain });
285 'toggle', 305 this.$emit('toggle', form);
286 Object.assign({}, this.form, { remain: this.remain }) 306 },
287 ); 307 autoHandler() {
308 if (this.running) return;
309 if (this.autoRunning) {
310 this.$emit('toggle', null, true);
311 } else {
312 const lottery = this.newLottery.filter(
313 v => !Object.prototype.hasOwnProperty.call(this.result, v.key)
314 )[0];
315
316 if (!lottery) return this.$message.error('奖品全都有主啦~');
317 const category = lottery.key;
318
319 this.$emit(
320 'toggle',
321 {
322 category,
323 mode: 0,
324 qty: this.config[category],
325 allin: false,
326 remain: this.config[category]
327 },
328 true
329 );
330 }
288 }, 331 },
289 startHandler() { 332 startHandler() {
333 if (this.autoRunning) return;
290 this.$emit('toggle'); 334 this.$emit('toggle');
291 if (!this.running) { 335 if (!this.running) {
292 this.showSetwat = true; 336 this.showSetwat = true;
...@@ -328,13 +372,35 @@ export default { ...@@ -328,13 +372,35 @@ export default {
328 }; 372 };
329 </script> 373 </script>
330 <style lang="scss"> 374 <style lang="scss">
375 .el-button.autoStart {
376 position: fixed;
377 bottom: 30px;
378 left: 50%;
379 width: 100px;
380 height: 40px;
381 font-size: 18px;
382 transform: translateX(-50%);
383 background: #f1d192 !important;
384 color: #e74c26 !important;
385 border-color: #f1d192 !important;
386 &:hover {
387 background: #f1d192 !important;
388 color: #e74c26 !important;
389 border-color: #f1d192 !important;
390 }
391 }
392 .el-button.btn {
393 opacity: 0;
394 &:hover {
395 opacity: 0.3;
396 }
397 }
331 #tool { 398 #tool {
332 position: fixed; 399 position: fixed;
333 width: 60px; 400 width: 60px;
334 height: 500px; 401 height: 300px;
335 top: 50%; 402 bottom: 0;
336 right: 20px; 403 right: 50px;
337 transform: translateY(-50%);
338 text-align: center; 404 text-align: center;
339 display: flex; 405 display: flex;
340 flex-direction: column; 406 flex-direction: column;
......
...@@ -35,13 +35,27 @@ export function randomNum(minNum = 1, maxNum) { ...@@ -35,13 +35,27 @@ export function randomNum(minNum = 1, maxNum) {
35 */ 35 */
36 export function luckydrawHandler(total, won = [], num) { 36 export function luckydrawHandler(total, won = [], num) {
37 const peolist = generateArray(1, Number(total)); 37 const peolist = generateArray(1, Number(total));
38 const wons = won; 38 let wons = won;
39 const res = []; 39 const res = [];
40 for (let j = 0; j < num; j++) { 40 const rest = peolist.filter(item => !wons.includes(item));
41 const nodraws = peolist.filter(item => !wons.includes(item)); 41
42 const current = nodraws[randomNum(1, nodraws.length) - 1]; 42 if (rest.length < num) {
43 res.push(current); 43 res.push(...rest);
44 wons.push(current); 44 wons = [...rest];
45 for (let j = 0; j < num - rest.length; j++) {
46 const nodraws = peolist.filter(item => !wons.includes(item));
47 const current = nodraws[randomNum(1, nodraws.length) - 1];
48 res.push(current);
49 wons.push(current);
50 }
51 } else {
52 for (let j = 0; j < num; j++) {
53 const nodraws = peolist.filter(item => !wons.includes(item));
54 const current = nodraws[randomNum(1, nodraws.length) - 1];
55 res.push(current);
56 wons.push(current);
57 }
45 } 58 }
59
46 return res; 60 return res;
47 } 61 }
......
...@@ -39,6 +39,7 @@ export const newLotteryField = 'newLottery'; // 新增奖项 ...@@ -39,6 +39,7 @@ export const newLotteryField = 'newLottery'; // 新增奖项
39 export const listField = 'list'; // 名单 39 export const listField = 'list'; // 名单
40 export function conversionCategoryName(key) { 40 export function conversionCategoryName(key) {
41 let name = ''; 41 let name = '';
42 /*
42 switch (key) { 43 switch (key) {
43 case 'firstPrize': 44 case 'firstPrize':
44 name = '一等奖'; 45 name = '一等奖';
...@@ -46,6 +47,7 @@ export function conversionCategoryName(key) { ...@@ -46,6 +47,7 @@ export function conversionCategoryName(key) {
46 default: 47 default:
47 break; 48 break;
48 } 49 }
50 */
49 const newLottery = getData(newLotteryField) || []; 51 const newLottery = getData(newLotteryField) || [];
50 const findres = newLottery.find(item => item.key === key); 52 const findres = newLottery.find(item => item.key === key);
51 if (findres) { 53 if (findres) {
......
...@@ -13,12 +13,9 @@ export default new Vuex.Store({ ...@@ -13,12 +13,9 @@ export default new Vuex.Store({
13 state: { 13 state: {
14 config: { 14 config: {
15 name: '年会抽奖', 15 name: '年会抽奖',
16 number: 70, 16 number: 44
17 firstPrize: 1
18 },
19 result: {
20 firstPrize: []
21 }, 17 },
18 result: {},
22 newLottery: [], 19 newLottery: [],
23 list: [], 20 list: [],
24 photos: [] 21 photos: []
...@@ -27,8 +24,7 @@ export default new Vuex.Store({ ...@@ -27,8 +24,7 @@ export default new Vuex.Store({
27 setClearConfig(state) { 24 setClearConfig(state) {
28 state.config = { 25 state.config = {
29 name: '年会抽奖', 26 name: '年会抽奖',
30 number: 70, 27 number: 44
31 firstPrize: 1
32 }; 28 };
33 state.newLottery = []; 29 state.newLottery = [];
34 }, 30 },
...@@ -39,19 +35,14 @@ export default new Vuex.Store({ ...@@ -39,19 +35,14 @@ export default new Vuex.Store({
39 state.photos = []; 35 state.photos = [];
40 }, 36 },
41 setClearResult(state) { 37 setClearResult(state) {
42 state.result = { 38 state.result = {};
43 firstPrize: []
44 };
45 }, 39 },
46 setClearStore(state) { 40 setClearStore(state) {
47 state.config = { 41 state.config = {
48 name: '年会抽奖', 42 name: '年会抽奖',
49 number: 70, 43 number: 44
50 firstPrize: 1
51 };
52 state.result = {
53 firstPrize: []
54 }; 44 };
45 state.result = {};
55 state.newLottery = []; 46 state.newLottery = [];
56 state.list = []; 47 state.list = [];
57 state.photos = []; 48 state.photos = [];
...@@ -65,9 +56,11 @@ export default new Vuex.Store({ ...@@ -65,9 +56,11 @@ export default new Vuex.Store({
65 setData(resultField, state.result); 56 setData(resultField, state.result);
66 }, 57 },
67 setNewLottery(state, newLottery) { 58 setNewLottery(state, newLottery) {
59 /*
68 if (state.newLottery.find(item => item.name === newLottery.name)) { 60 if (state.newLottery.find(item => item.name === newLottery.name)) {
69 return; 61 return;
70 } 62 }
63 */
71 state.newLottery.push(newLottery); 64 state.newLottery.push(newLottery);
72 setData(newLotteryField, state.newLottery); 65 setData(newLotteryField, state.newLottery);
73 }, 66 },
......