Skip to content

公瑾 / lucky-draw

Go to a project
Toggle navigation
Toggle navigation pinning
9ed78b34 by zhangyongfeng
Options

新增自定义奖

1 parent b142e672
Inline Side-by-side
Showing 9 changed files with 199 additions and 97 deletions
...@@ -44,6 +44,7 @@ import { ...@@ -44,6 +44,7 @@ import {
44 getData, 44 getData,
45 configField, 45 configField,
46 resultField, 46 resultField,
47 newLotteryField,
47 conversionCategoryName 48 conversionCategoryName
48 } from '@/helper/index'; 49 } from '@/helper/index';
49 import { luckydrawHandler } from '@/helper/algorithm'; 50 import { luckydrawHandler } from '@/helper/algorithm';
...@@ -99,6 +100,18 @@ export default { ...@@ -99,6 +100,18 @@ export default {
99 if (result) { 100 if (result) {
100 this.$store.commit('setResult', result); 101 this.$store.commit('setResult', result);
101 } 102 }
103
104 const newLottery = getData(newLotteryField);
105 if (newLottery) {
106 const config = this.config;
107 newLottery.forEach(item => {
108 this.$store.commit('setNewLottery', item);
109 if (!config[item.key]) {
110 this.$set(config, item.key, 0);
111 }
112 });
113 this.$store.commit('setConfig', config);
114 }
102 }, 115 },
103 116
104 data() { 117 data() {
...@@ -115,11 +128,11 @@ export default { ...@@ -115,11 +128,11 @@ export default {
115 this.startTagCanvas(); 128 this.startTagCanvas();
116 }, 129 },
117 methods: { 130 methods: {
118 style(item) { 131 style() {
119 const style = { color: '#fff' }; 132 const style = { color: '#fff' };
120 if (this.allresult.includes(item.key)) { 133 // if (!this.running && this.allresult.includes(item.key)) {
121 style.color = 'yellow'; 134 // style.color = 'yellow';
122 } 135 // }
123 return style; 136 return style;
124 }, 137 },
125 speed() { 138 speed() {
...@@ -173,11 +186,19 @@ export default { ...@@ -173,11 +186,19 @@ export default {
173 num 186 num
174 ); 187 );
175 this.resArr = resArr; 188 this.resArr = resArr;
189
176 this.category = category; 190 this.category = category;
191
192 if (this.result[category]) {
193 this.$set(this.result, category, []);
194 }
195
177 const oldRes = this.result[category] || []; 196 const oldRes = this.result[category] || [];
178 this.result = { 197 const data = Object.assign({}, this.result, {
179 [category]: oldRes.concat(resArr) 198 [category]: oldRes.concat(resArr)
180 }; 199 });
200
201 this.result = data;
181 window.TagCanvas.SetSpeed('rootcanvas', [5, 1]); 202 window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
182 } 203 }
183 this.running = !this.running; 204 this.running = !this.running;
...@@ -206,6 +227,7 @@ export default { ...@@ -206,6 +227,7 @@ export default {
206 position: absolute; 227 position: absolute;
207 top: 17px; 228 top: 17px;
208 padding: 0; 229 padding: 0;
230 z-index: 9999;
209 &.con { 231 &.con {
210 right: 20px; 232 right: 20px;
211 } 233 }
......
1 @-webkit-keyframes slowMovingToLeft { 1 @-webkit-keyframes slowMovingToLeft {
2 from { 2 from {
3 left: 1000px; 3 left: 100%;
4 } 4 }
5 5
6 to { 6 to {
7 left: -1500px; 7 left: -400%;
8 } 8 }
9 } 9 }
10 @keyframes slowMovingToLeft { 10 @keyframes slowMovingToLeft {
11 from { 11 from {
12 left: 1000px; 12 left: 100%;
13 } 13 }
14 14
15 to { 15 to {
16 left: -1500px; 16 left: -400%;
17 } 17 }
18 } 18 }
......
...@@ -40,3 +40,9 @@ body { ...@@ -40,3 +40,9 @@ body {
40 padding-top: 20px !important; 40 padding-top: 20px !important;
41 padding-bottom: 20px !important; 41 padding-bottom: 20px !important;
42 } 42 }
43 .el-dialog {
44 margin-top: 0 !important;
45 top: 50%;
46 -webkit-transform: translateY(-50%);
47 transform: translateY(-50%);
48 }
......
...@@ -2,62 +2,88 @@ ...@@ -2,62 +2,88 @@
2 <el-dialog 2 <el-dialog
3 :visible="visible" 3 :visible="visible"
4 :append-to-body="true" 4 :append-to-body="true"
5 title="抽奖配置"
6 width="400px" 5 width="400px"
7 :lock-scroll="true" 6 :lock-scroll="true"
8 @close="$emit('update:visible', false)" 7 @close="$emit('update:visible', false)"
9 class="c-LotteryConfig" 8 class="c-LotteryConfig"
10 > 9 >
10 <div class="c-LotteryConfigtitle" slot="title">
11 <span :style="{ fontSize: '16px', marginRight: '20px' }">
12 抽奖配置
13 </span>
14 <el-button size="mini" @click="addLottery">增加奖项</el-button>
15 <el-button size="mini" type="primary" @click="onSubmit"
16 >保存配置</el-button
17 >
18 <el-button size="mini" @click="$emit('update:visible', false)"
19 >取消</el-button
20 >
21 </div>
11 <el-form ref="form" :model="form" label-width="100px" size="mini"> 22 <el-form ref="form" :model="form" label-width="100px" size="mini">
12 <el-form-item label="抽奖标题"> 23 <el-form-item label="抽奖标题">
13 <el-input v-model="form.name"></el-input> 24 <el-input v-model="form.name"></el-input>
14 </el-form-item> 25 </el-form-item>
15 <el-form-item label="抽奖总人数"> 26 <el-form-item label="抽奖总人数">
16 <el-input v-model="form.number"></el-input> 27 <el-input type="number" v-model="form.number"></el-input>
17 </el-form-item> 28 </el-form-item>
18 <el-form-item label="特等奖人数"> 29 <el-form-item label="特等奖人数">
19 <el-input v-model="form.specialAward"></el-input> 30 <el-input type="number" v-model="form.specialAward"></el-input>
20 </el-form-item> 31 </el-form-item>
21 <el-form-item label="一等奖人数"> 32 <el-form-item label="一等奖人数">
22 <el-input v-model="form.firstPrize"></el-input> 33 <el-input type="number" v-model="form.firstPrize"></el-input>
23 </el-form-item> 34 </el-form-item>
24 <el-form-item label="二等奖人数"> 35 <el-form-item label="二等奖人数">
25 <el-input v-model="form.secondPrize"></el-input> 36 <el-input type="number" v-model="form.secondPrize"></el-input>
26 </el-form-item> 37 </el-form-item>
27 <el-form-item label="三等奖人数"> 38 <el-form-item label="三等奖人数">
28 <el-input v-model="form.thirdPrize"></el-input> 39 <el-input type="number" v-model="form.thirdPrize"></el-input>
29 </el-form-item> 40 </el-form-item>
30 <el-form-item label="四等奖人数"> 41 <el-form-item label="四等奖人数">
31 <el-input v-model="form.fourthPrize"></el-input> 42 <el-input type="number" v-model="form.fourthPrize"></el-input>
32 </el-form-item> 43 </el-form-item>
33 <el-form-item label="五等奖人数"> 44 <el-form-item label="五等奖人数">
34 <el-input v-model="form.fifthPrize"></el-input> 45 <el-input type="number" v-model="form.fifthPrize"></el-input>
35 </el-form-item>
36 <el-form-item label="追加奖(1)人数">
37 <el-input v-model="form.additionalPrize1"></el-input>
38 </el-form-item>
39 <el-form-item label="追加奖(2)人数">
40 <el-input v-model="form.additionalPrize2"></el-input>
41 </el-form-item> 46 </el-form-item>
42 <el-form-item label="追加奖(3)人数"> 47
43 <el-input v-model="form.additionalPrize3"></el-input> 48 <el-form-item
44 </el-form-item> 49 :label="newitem.name"
45 <el-form-item label="追加奖(4)人数"> 50 v-for="newitem in storeNewLottery"
46 <el-input v-model="form.additionalPrize4"></el-input> 51 :key="newitem.key"
47 </el-form-item> 52 >
48 <el-form-item label="追加奖(5)人数"> 53 <el-input
49 <el-input v-model="form.additionalPrize5"></el-input> 54 type="number"
55 v-model="form[newitem.key]"
56 @change="
57 val => {
58 form[newitem.key] = Number(val);
59 }
60 "
61 ></el-input>
50 </el-form-item> 62 </el-form-item>
63 </el-form>
51 64
65 <el-dialog
66 :visible.sync="showAddLottery"
67 :append-to-body="true"
68 width="300px"
69 class="dialog-showAddLottery"
70 >
71 <div class="add-title" slot="title">增加奖项</div>
72 <el-form ref="newLottery" :model="newLottery" size="mini">
73 <el-form-item label="奖项名称">
74 <el-input v-model="newLottery.name"></el-input>
75 </el-form-item>
52 <el-form-item> 76 <el-form-item>
53 <el-button type="primary" @click="onSubmit">保存配置</el-button> 77 <el-button type="primary" @click="addHandler">增加奖项</el-button>
54 <el-button @click="$emit('update:visible', false)">取消</el-button> 78 <el-button @click="showAddLottery = false">取消</el-button>
55 </el-form-item> 79 </el-form-item>
56 </el-form> 80 </el-form>
57 </el-dialog> 81 </el-dialog>
82 </el-dialog>
58 </template> 83 </template>
59 <script> 84 <script>
60 import { setData, configField } from '@/helper/index'; 85 import { setData, configField } from '@/helper/index';
86 import { randomNum } from '@/helper/algorithm';
61 export default { 87 export default {
62 name: 'LotteryConfig', 88 name: 'LotteryConfig',
63 props: { 89 props: {
...@@ -71,8 +97,17 @@ export default { ...@@ -71,8 +97,17 @@ export default {
71 set(val) { 97 set(val) {
72 this.$store.commit('setConfig', val); 98 this.$store.commit('setConfig', val);
73 } 99 }
100 },
101 storeNewLottery() {
102 return this.$store.state.newLottery;
74 } 103 }
75 }, 104 },
105 data() {
106 return {
107 showAddLottery: false,
108 newLottery: { name: '' }
109 };
110 },
76 methods: { 111 methods: {
77 onSubmit() { 112 onSubmit() {
78 setData(configField, this.form); 113 setData(configField, this.form);
...@@ -82,11 +117,41 @@ export default { ...@@ -82,11 +117,41 @@ export default {
82 message: '保存成功', 117 message: '保存成功',
83 type: 'success' 118 type: 'success'
84 }); 119 });
120 },
121 addLottery() {
122 this.showAddLottery = true;
123 },
124 randomField() {
125 const str = 'abcdefghijklmnopqrstuvwxyz';
126 let fieldStr = '';
127 for (let index = 0; index < 10; index++) {
128 fieldStr += str.split('')[randomNum(1, 27) - 1];
129 }
130 return `${fieldStr}${Date.now()}`;
131 },
132 addHandler() {
133 const field = this.randomField();
134 const data = {
135 key: field,
136 name: this.newLottery.name
137 };
138 this.$store.commit('setNewLottery', data);
139
140 this.showAddLottery = false;
85 } 141 }
86 } 142 }
87 }; 143 };
88 </script> 144 </script>
89 <style lang="scss"> 145 <style lang="scss">
90 .c-LotteryConfig { 146 .c-LotteryConfig {
147 .el-dialog__body {
148 height: 340px;
149 overflow-y: auto;
150 }
151 }
152 .dialog-showAddLottery {
153 .el-dialog {
154 height: 186px;
155 }
91 } 156 }
92 </style> 157 </style>
......
1 <template> 1 <template>
2 <div class="c-Publicity"> 2 <div class="c-Publicity">
3 <div class="message"> 3 <el-carousel
4 <span class="title"> 4 height="50px"
5 {{ config.name }} 5 :autoplay="true"
6 indicator-position="none"
7 arrow="never"
8 :interval="3000"
9 >
10 <el-carousel-item v-for="item in message" :key="item.key">
11 <div class="item" :class="{ actiname: item.key === 0 }">
12 <span v-if="item.title" class="title"> {{ item.title }}</span>
13 <span v-if="item.value" class="value">
14 {{ item.value }}
6 </span> 15 </span>
7 <span v-html="message"> </span>
8 </div> 16 </div>
17 </el-carousel-item>
18 </el-carousel>
9 </div> 19 </div>
10 </template> 20 </template>
11 <script> 21 <script>
...@@ -21,39 +31,21 @@ export default { ...@@ -21,39 +31,21 @@ export default {
21 return this.$store.state.result; 31 return this.$store.state.result;
22 }, 32 },
23 message() { 33 message() {
24 const { 34 const { result, config } = this;
25 specialAward, 35 const fields = Object.keys(config);
26 additionalPrize1,
27 additionalPrize2,
28 additionalPrize3
29 } = this.config;
30 const fields = [
31 'firstPrize',
32 'secondPrize',
33 'thirdPrize',
34 'fourthPrize',
35 'fifthPrize'
36 ];
37 if (specialAward > 0) {
38 fields.unshift('specialAward');
39 }
40 if (additionalPrize1 > 0) {
41 fields.push('additionalPrize1');
42 }
43 if (additionalPrize2 > 0) {
44 fields.push('additionalPrize2');
45 }
46 if (additionalPrize3 > 0) {
47 fields.push('additionalPrize3');
48 }
49 const { result } = this;
50 36
51 let message = ''; 37 let message = [{ key: 0, title: config.name }];
52 fields.forEach(item => { 38 fields.forEach((item, index) => {
53 let label = conversionCategoryName(item); 39 let label = conversionCategoryName(item);
54 message += `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${label}抽奖结果: ${ 40 if (result[item] && config[item] > 0) {
41 message.push({
42 key: index + 1,
43 title: `${label}抽奖结果:`,
44 value: `${
55 result[item].length > 0 ? result[item].join('、') : '暂未抽取' 45 result[item].length > 0 ? result[item].join('、') : '暂未抽取'
56 }`; 46 }`
47 });
48 }
57 }); 49 });
58 50
59 return message; 51 return message;
...@@ -64,23 +56,26 @@ export default { ...@@ -64,23 +56,26 @@ export default {
64 <style lang="scss"> 56 <style lang="scss">
65 .c-Publicity { 57 .c-Publicity {
66 height: 100%; 58 height: 100%;
67 width: 1000px; 59 // width: 1000px;
68 background-color: rgba(0, 0, 0, 0.2); 60 background-color: rgba(0, 0, 0, 0.2);
69 margin: 0 auto; 61 margin: 0 auto;
70 position: relative; 62 position: relative;
71 overflow: hidden; 63 overflow: hidden;
72 .message { 64 .item {
73 font-size: 16px; 65 text-align: center;
74 color: #fff; 66 color: #fff;
75 position: absolute; 67 font-size: 16px;
76 left: 500px; 68 .title {
77 animation-name: slowMovingToLeft; 69 color: #ccc;
78 animation-iteration-count: infinite; 70 }
79 animation-timing-function: linear; 71 .value {
80 animation-direction: normal; 72 margin-left: 10px;
81 animation-duration: 40s; 73 }
74 &.actiname {
82 .title { 75 .title {
83 color: #ff2200; 76 color: red;
77 font-size: 20px;
78 }
84 } 79 }
85 } 80 }
86 } 81 }
......
...@@ -2,10 +2,17 @@ ...@@ -2,10 +2,17 @@
2 <el-dialog 2 <el-dialog
3 :visible="visible" 3 :visible="visible"
4 @close="$emit('update:visible', false)" 4 @close="$emit('update:visible', false)"
5 title="抽奖结果"
6 width="600px" 5 width="600px"
7 class="c-Result" 6 class="c-Result"
8 > 7 >
8 <div class="dialog-title" slot="title">
9 <span :style="{ fontSize: '18px' }">
10 抽奖结果
11 </span>
12 <span :style="{ fontSize: '14px', color: '#999', marginLeft: '10px' }">
13 (点击号码可以删除)
14 </span>
15 </div>
9 <div 16 <div
10 v-for="(item, index) in resultList" 17 v-for="(item, index) in resultList"
11 :key="index" 18 :key="index"
...@@ -69,13 +76,16 @@ export default { ...@@ -69,13 +76,16 @@ export default {
69 }, 76 },
70 methods: { 77 methods: {
71 deleteRes(event, row) { 78 deleteRes(event, row) {
79 const Index = getDomData(event.target, 'res');
80 if (!Index) {
81 return;
82 }
72 this.$confirm('此操作将移除该中奖号码，确认删除?', '警告', { 83 this.$confirm('此操作将移除该中奖号码，确认删除?', '警告', {
73 confirmButtonText: '确定', 84 confirmButtonText: '确定',
74 cancelButtonText: '取消', 85 cancelButtonText: '取消',
75 type: 'warning' 86 type: 'warning'
76 }) 87 })
77 .then(() => { 88 .then(() => {
78 const Index = getDomData(event.target, 'res');
79 if (Index) { 89 if (Index) {
80 const result = this.result; 90 const result = this.result;
81 result[row.label] = this.result[row.label].filter( 91 result[row.label] = this.result[row.label].filter(
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @param {number} minNum 3 * @param {number} minNum
4 * @param {number} maxNum 4 * @param {number} maxNum
5 */ 5 */
6 function randomNum(minNum = 1, maxNum) { 6 export function randomNum(minNum = 1, maxNum) {
7 return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); 7 return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
8 } 8 }
9 /** 9 /**
......
...@@ -35,6 +35,7 @@ export function getDomData(element, dataName) { ...@@ -35,6 +35,7 @@ export function getDomData(element, dataName) {
35 35
36 export const configField = 'config'; // 配置数据 36 export const configField = 'config'; // 配置数据
37 export const resultField = 'result'; // 抽奖结果 37 export const resultField = 'result'; // 抽奖结果
38 export const newLotteryField = 'newLottery'; // 新增奖项
38 39
39 export function conversionCategoryName(key) { 40 export function conversionCategoryName(key) {
40 let name = ''; 41 let name = '';
...@@ -76,5 +77,10 @@ export function conversionCategoryName(key) { ...@@ -76,5 +77,10 @@ export function conversionCategoryName(key) {
76 default: 77 default:
77 break; 78 break;
78 } 79 }
80 const newLottery = getData(newLotteryField) || [];
81 const findres = newLottery.find(item => item.key === key);
82 if (findres) {
83 name = findres.name;
84 }
79 return name; 85 return name;
80 } 86 }
......
1 import Vue from 'vue'; 1 import Vue from 'vue';
2 import Vuex from 'vuex'; 2 import Vuex from 'vuex';
3 import { setData, resultField } from '@/helper/index'; 3 import { setData, resultField, newLotteryField } from '@/helper/index';
4 4
5 Vue.use(Vuex); 5 Vue.use(Vuex);
6 6
...@@ -14,12 +14,7 @@ export default new Vuex.Store({ ...@@ -14,12 +14,7 @@ export default new Vuex.Store({
14 secondPrize: 5, 14 secondPrize: 5,
15 thirdPrize: 8, 15 thirdPrize: 8,
16 fourthPrize: 10, 16 fourthPrize: 10,
17 fifthPrize: 20, 17 fifthPrize: 20
18 additionalPrize1: 0,
19 additionalPrize2: 0,
20 additionalPrize3: 0,
21 additionalPrize4: 0,
22 additionalPrize5: 0
23 }, 18 },
24 result: { 19 result: {
25 specialAward: [], 20 specialAward: [],
...@@ -27,22 +22,25 @@ export default new Vuex.Store({ ...@@ -27,22 +22,25 @@ export default new Vuex.Store({
27 secondPrize: [], 22 secondPrize: [],
28 thirdPrize: [], 23 thirdPrize: [],
29 fourthPrize: [], 24 fourthPrize: [],
30 fifthPrize: [], 25 fifthPrize: []
31 additionalPrize1: [], 26 },
32 additionalPrize2: [], 27 newLottery: []
33 additionalPrize3: [],
34 additionalPrize4: [],
35 additionalPrize5: []
36 }
37 }, 28 },
38 mutations: { 29 mutations: {
39 setConfig(state, config) { 30 setConfig(state, config) {
40 state.config = config; 31 state.config = config;
41 }, 32 },
42 setResult(state, result = {}) { 33 setResult(state, result = {}) {
43 Object.assign(state.result, result); 34 state.result = result;
44 35
45 setData(resultField, state.result); 36 setData(resultField, state.result);
37 },
38 setNewLottery(state, newLottery) {
39 if (state.newLottery.find(item => item.name === newLottery.name)) {
40 return;
41 }
42 state.newLottery.push(newLottery);
43 setData(newLotteryField, state.newLottery);
46 } 44 }
47 }, 45 },
48 actions: {}, 46 actions: {},
......