Skip to content

G
goodluck
Commit 9ed78b34 by zhangyongfeng
Options

新增自定义奖

parent b142e672
Showing with 199 additions and 97 deletions
src/App.vue
......@@ -44,6 +44,7 @@ import {
getData,
configField,
resultField,
newLotteryField,
conversionCategoryName
} from '@/helper/index';
import { luckydrawHandler } from '@/helper/algorithm';
......@@ -99,6 +100,18 @@ export default {
if (result) {
this.$store.commit('setResult', result);
}
const newLottery = getData(newLotteryField);
if (newLottery) {
const config = this.config;
newLottery.forEach(item => {
this.$store.commit('setNewLottery', item);
if (!config[item.key]) {
this.$set(config, item.key, 0);
}
});
this.$store.commit('setConfig', config);
}
},
data() {
......@@ -115,11 +128,11 @@ export default {
this.startTagCanvas();
},
methods: {
style(item) {
style() {
const style = { color: '#fff' };
if (this.allresult.includes(item.key)) {
style.color = 'yellow';
}
// if (!this.running && this.allresult.includes(item.key)) {
// style.color = 'yellow';
// }
return style;
},
speed() {
......@@ -173,11 +186,19 @@ export default {
num
);
this.resArr = resArr;
this.category = category;
if (this.result[category]) {
this.$set(this.result, category, []);
}
const oldRes = this.result[category] || [];
this.result = {
const data = Object.assign({}, this.result, {
[category]: oldRes.concat(resArr)
};
});
this.result = data;
window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
}
this.running = !this.running;
......@@ -206,6 +227,7 @@ export default {
position: absolute;
top: 17px;
padding: 0;
z-index: 9999;
&.con {
right: 20px;
}
......
src/assets/style/animation.scss
@-webkit-keyframes slowMovingToLeft {
from {
left: 1000px;
left: 100%;
}
to {
left: -1500px;
left: -400%;
}
}
@keyframes slowMovingToLeft {
from {
left: 1000px;
left: 100%;
}
to {
left: -1500px;
left: -400%;
}
}
src/assets/style/base.scss
......@@ -40,3 +40,9 @@ body {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.el-dialog {
margin-top: 0 !important;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
src/components/LotteryConfig.vue
......@@ -2,62 +2,88 @@
<el-dialog
:visible="visible"
:append-to-body="true"
title="抽奖配置"
width="400px"
:lock-scroll="true"
@close="$emit('update:visible', false)"
class="c-LotteryConfig"
>
<div class="c-LotteryConfigtitle" slot="title">
<span :style="{ fontSize: '16px', marginRight: '20px' }">
抽奖配置
</span>
<el-button size="mini" @click="addLottery">增加奖项</el-button>
<el-button size="mini" type="primary" @click="onSubmit"
>保存配置</el-button
>
<el-button size="mini" @click="$emit('update:visible', false)"
>取消</el-button
>
</div>
<el-form ref="form" :model="form" label-width="100px" size="mini">
<el-form-item label="抽奖标题">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="抽奖总人数">
<el-input v-model="form.number"></el-input>
<el-input type="number" v-model="form.number"></el-input>
</el-form-item>
<el-form-item label="特等奖人数">
<el-input v-model="form.specialAward"></el-input>
<el-input type="number" v-model="form.specialAward"></el-input>
</el-form-item>
<el-form-item label="一等奖人数">
<el-input v-model="form.firstPrize"></el-input>
<el-input type="number" v-model="form.firstPrize"></el-input>
</el-form-item>
<el-form-item label="二等奖人数">
<el-input v-model="form.secondPrize"></el-input>
<el-input type="number" v-model="form.secondPrize"></el-input>
</el-form-item>
<el-form-item label="三等奖人数">
<el-input v-model="form.thirdPrize"></el-input>
<el-input type="number" v-model="form.thirdPrize"></el-input>
</el-form-item>
<el-form-item label="四等奖人数">
<el-input v-model="form.fourthPrize"></el-input>
<el-input type="number" v-model="form.fourthPrize"></el-input>
</el-form-item>
<el-form-item label="五等奖人数">
<el-input v-model="form.fifthPrize"></el-input>
</el-form-item>
<el-form-item label="追加奖(1)人数">
<el-input v-model="form.additionalPrize1"></el-input>
</el-form-item>
<el-form-item label="追加奖(2)人数">
<el-input v-model="form.additionalPrize2"></el-input>
<el-input type="number" v-model="form.fifthPrize"></el-input>
</el-form-item>
<el-form-item label="追加奖(3)人数">
<el-input v-model="form.additionalPrize3"></el-input>
</el-form-item>
<el-form-item label="追加奖(4)人数">
<el-input v-model="form.additionalPrize4"></el-input>
</el-form-item>
<el-form-item label="追加奖(5)人数">
<el-input v-model="form.additionalPrize5"></el-input>
<el-form-item
:label="newitem.name"
v-for="newitem in storeNewLottery"
:key="newitem.key"
>
<el-input
type="number"
v-model="form[newitem.key]"
@change="
val => {
form[newitem.key] = Number(val);
}
"
></el-input>
</el-form-item>
</el-form>
<el-dialog
:visible.sync="showAddLottery"
:append-to-body="true"
width="300px"
class="dialog-showAddLottery"
>
<div class="add-title" slot="title">增加奖项</div>
<el-form ref="newLottery" :model="newLottery" size="mini">
<el-form-item label="奖项名称">
<el-input v-model="newLottery.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存配置</el-button>
<el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button type="primary" @click="addHandler">增加奖项</el-button>
<el-button @click="showAddLottery = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-dialog>
</template>
<script>
import { setData, configField } from '@/helper/index';
import { randomNum } from '@/helper/algorithm';
export default {
name: 'LotteryConfig',
props: {
......@@ -71,8 +97,17 @@ export default {
set(val) {
this.$store.commit('setConfig', val);
}
},
storeNewLottery() {
return this.$store.state.newLottery;
}
},
data() {
return {
showAddLottery: false,
newLottery: { name: '' }
};
},
methods: {
onSubmit() {
setData(configField, this.form);
......@@ -82,11 +117,41 @@ export default {
message: '保存成功',
type: 'success'
});
},
addLottery() {
this.showAddLottery = true;
},
randomField() {
const str = 'abcdefghijklmnopqrstuvwxyz';
let fieldStr = '';
for (let index = 0; index < 10; index++) {
fieldStr += str.split('')[randomNum(1, 27) - 1];
}
return `${fieldStr}${Date.now()}`;
},
addHandler() {
const field = this.randomField();
const data = {
key: field,
name: this.newLottery.name
};
this.$store.commit('setNewLottery', data);
this.showAddLottery = false;
}
}
};
</script>
<style lang="scss">
.c-LotteryConfig {
.el-dialog__body {
height: 340px;
overflow-y: auto;
}
}
.dialog-showAddLottery {
.el-dialog {
height: 186px;
}
}
</style>
src/components/Publicity.vue
<template>
<div class="c-Publicity">
<div class="message">
<span class="title">
{{ config.name }}
<el-carousel
height="50px"
:autoplay="true"
indicator-position="none"
arrow="never"
:interval="3000"
>
<el-carousel-item v-for="item in message" :key="item.key">
<div class="item" :class="{ actiname: item.key === 0 }">
<span v-if="item.title" class="title"> {{ item.title }}</span>
<span v-if="item.value" class="value">
{{ item.value }}
</span>
<span v-html="message"> </span>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
......@@ -21,39 +31,21 @@ export default {
return this.$store.state.result;
},
message() {
const {
specialAward,
additionalPrize1,
additionalPrize2,
additionalPrize3
} = this.config;
const fields = [
'firstPrize',
'secondPrize',
'thirdPrize',
'fourthPrize',
'fifthPrize'
];
if (specialAward > 0) {
fields.unshift('specialAward');
}
if (additionalPrize1 > 0) {
fields.push('additionalPrize1');
}
if (additionalPrize2 > 0) {
fields.push('additionalPrize2');
}
if (additionalPrize3 > 0) {
fields.push('additionalPrize3');
}
const { result } = this;
const { result, config } = this;
const fields = Object.keys(config);
let message = '';
fields.forEach(item => {
let message = [{ key: 0, title: config.name }];
fields.forEach((item, index) => {
let label = conversionCategoryName(item);
message += `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${label}抽奖结果: ${
if (result[item] && config[item] > 0) {
message.push({
key: index + 1,
title: `${label}抽奖结果:`,
value: `${
result[item].length > 0 ? result[item].join('、') : '暂未抽取'
}`;
}`
});
}
});
return message;
......@@ -64,23 +56,26 @@ export default {
<style lang="scss">
.c-Publicity {
height: 100%;
width: 1000px;
// width: 1000px;
background-color: rgba(0, 0, 0, 0.2);
margin: 0 auto;
position: relative;
overflow: hidden;
.message {
font-size: 16px;
.item {
text-align: center;
color: #fff;
position: absolute;
left: 500px;
animation-name: slowMovingToLeft;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: normal;
animation-duration: 40s;
font-size: 16px;
.title {
color: #ccc;
}
.value {
margin-left: 10px;
}
&.actiname {
.title {
color: #ff2200;
color: red;
font-size: 20px;
}
}
}
}
......
src/components/Result.vue
......@@ -2,10 +2,17 @@
<el-dialog
:visible="visible"
@close="$emit('update:visible', false)"
title="抽奖结果"
width="600px"
class="c-Result"
>
<div class="dialog-title" slot="title">
<span :style="{ fontSize: '18px' }">
抽奖结果
</span>
<span :style="{ fontSize: '14px', color: '#999', marginLeft: '10px' }">
(点击号码可以删除)
</span>
</div>
<div
v-for="(item, index) in resultList"
:key="index"
......@@ -69,13 +76,16 @@ export default {
},
methods: {
deleteRes(event, row) {
const Index = getDomData(event.target, 'res');
if (!Index) {
return;
}
this.$confirm('此操作将移除该中奖号码，确认删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
const Index = getDomData(event.target, 'res');
if (Index) {
const result = this.result;
result[row.label] = this.result[row.label].filter(
......
src/helper/algorithm.js
......@@ -3,7 +3,7 @@
* @param {number} minNum
* @param {number} maxNum
*/
function randomNum(minNum = 1, maxNum) {
export function randomNum(minNum = 1, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
}
/**
......
src/helper/index.js
......@@ -35,6 +35,7 @@ export function getDomData(element, dataName) {
export const configField = 'config'; // 配置数据
export const resultField = 'result'; // 抽奖结果
export const newLotteryField = 'newLottery'; // 新增奖项
export function conversionCategoryName(key) {
let name = '';
......@@ -76,5 +77,10 @@ export function conversionCategoryName(key) {
default:
break;
}
const newLottery = getData(newLotteryField) || [];
const findres = newLottery.find(item => item.key === key);
if (findres) {
name = findres.name;
}
return name;
}
src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import { setData, resultField } from '@/helper/index';
import { setData, resultField, newLotteryField } from '@/helper/index';
Vue.use(Vuex);
......@@ -14,12 +14,7 @@ export default new Vuex.Store({
secondPrize: 5,
thirdPrize: 8,
fourthPrize: 10,
fifthPrize: 20,
additionalPrize1: 0,
additionalPrize2: 0,
additionalPrize3: 0,
additionalPrize4: 0,
additionalPrize5: 0
fifthPrize: 20
},
result: {
specialAward: [],
......@@ -27,22 +22,25 @@ export default new Vuex.Store({
secondPrize: [],
thirdPrize: [],
fourthPrize: [],
fifthPrize: [],
additionalPrize1: [],
additionalPrize2: [],
additionalPrize3: [],
additionalPrize4: [],
additionalPrize5: []
}
fifthPrize: []
},
newLottery: []
},
mutations: {
setConfig(state, config) {
state.config = config;
},
setResult(state, result = {}) {
Object.assign(state.result, result);
state.result = result;
setData(resultField, state.result);
},
setNewLottery(state, newLottery) {
if (state.newLottery.find(item => item.name === newLottery.name)) {
return;
}
state.newLottery.push(newLottery);
setData(newLotteryField, state.newLottery);
}
},
actions: {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment