Skip to content

公瑾 / lucky-draw

Go to a project
Toggle navigation
Toggle navigation pinning
c6fa739b by McLemore
Options

init

1 parent 0fe43ead
Inline Side-by-side
Showing 14 changed files with 249 additions and 69 deletions
This diff could not be displayed because it is too large.
No preview for this file type
......@@ -8,7 +8,7 @@
<link
rel="stylesheet"
href="https://at.alicdn.com/t/font_1594571_5oi8u1hs5fy.css"/>
<title>luckydraw</title>
<title>赤金科技-年会抽奖</title>
</head>
<body>
<noscript>
......
<template>
<div class="rootWrapper">
<img class="bgImg" alt="" src="./assets/bg.png" />
<div id="root">
<header>
<Publicity v-show="!running" />
<Publicity v-show="!running && !autoRunning" />
<el-button class="res" type="text" @click="showResult = true">
抽奖结果
</el-button>
......@@ -17,11 +19,18 @@
href="javascript:void(0);"
:style="{
color:
!running && allresult.includes(item.key) ? '#ff2200' : '#fff'
!autoRunning && !running && allresult.includes(item.key)
? '#fff'
: '#fff'
}"
>
{{ item.name ? item.name : item.key }}
<img v-if="item.photo" :src="item.photo" :width="50" :height="50" />
<img
v-if="item.photo"
:src="item.photo"
:width="50"
:height="50"
/>
</a>
</li>
</ul>
......@@ -35,7 +44,7 @@
:key="item"
class="itemres"
:style="resCardStyle"
:data-id="item"
:data-id="list.find(d => d.key === item).name"
@click="showRes = false"
:class="{
numberOver:
......@@ -61,7 +70,6 @@
:src="photos.find(d => d.id === item).value"
alt="photo"
:width="160"
:height="160"
/>
</span>
</div>
......@@ -83,20 +91,20 @@
></i>
</el-button>
<LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
<LotteryConfig
:visible.sync="showConfig"
@resetconfig="reloadTagCanvas"
/>
<Tool
@toggle="toggle"
@resetConfig="reloadTagCanvas"
@getPhoto="getPhoto"
:running="running"
:autoRunning="autoRunning"
:closeRes="closeRes"
/>
<Result :visible.sync="showResult"></Result>
<span class="copy-right">
Copyright©zhangyongfeng5350@gmail.com
</span>
<audio
id="audiobg"
preload="auto"
......@@ -110,6 +118,7 @@
你的浏览器不支持audio标签
</audio>
</div>
</div>
</template>
<script>
import LotteryConfig from '@/components/LotteryConfig';
......@@ -170,6 +179,15 @@ export default {
allresult = allresult.concat(element);
}
}
let times = Math.floor(allresult.length / this.config.number);
for (let i = 0; i < times; i++) {
for (let j = 0; j < this.list.length; j++) {
allresult.splice(allresult.indexOf(this.list[j].key), 1);
}
}
return allresult;
},
datas() {
......@@ -222,6 +240,7 @@ export default {
data() {
return {
autoRunning: false,
running: false,
showRes: false,
showConfig: false,
......@@ -303,8 +322,59 @@ export default {
closeRes() {
this.showRes = false;
},
toggle(form) {
toggle(form, auto) {
const { speed, config } = this;
if (auto) {
if (this.autoRunning) {
this.audioSrc = bgaudio;
this.loadAudio();
window.TagCanvas.SetSpeed('rootcanvas', speed());
this.showRes = true;
this.autoRunning = !this.autoRunning;
this.$nextTick(() => {
this.reloadTagCanvas();
});
} else {
this.showRes = false;
if (!form) {
return;
}
this.audioSrc = beginaudio;
this.loadAudio();
const { number } = config;
const { category, mode, qty, remain, allin } = form;
let num = 1;
if (mode === 1 || mode === 5) {
num = mode;
} else if (mode === 0) {
num = remain;
} else if (mode === 99) {
num = qty;
}
const resArr = luckydrawHandler(
number,
allin ? [] : this.allresult,
num
);
this.resArr = resArr;
this.category = category;
if (!this.result[category]) {
this.$set(this.result, category, []);
}
const oldRes = this.result[category] || [];
const data = Object.assign({}, this.result, {
[category]: oldRes.concat(resArr)
});
this.result = data;
window.TagCanvas.SetSpeed('rootcanvas', [5, 1]);
this.autoRunning = !this.autoRunning;
}
} else {
if (this.running) {
this.audioSrc = bgaudio;
this.loadAudio();
......@@ -355,17 +425,26 @@ export default {
}
}
}
}
};
</script>
<style lang="scss">
.rootWrapper {
height: 100%;
position: relative;
background-color: #b51c23;
.bgImg {
width: 100%;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
}
}
#root {
height: 100%;
position: relative;
background-image: url('./assets/bg1.jpg');
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #121936;
z-index: 2;
.mask {
-webkit-filter: blur(5px);
filter: blur(5px);
......@@ -379,6 +458,11 @@ export default {
top: 17px;
padding: 0;
z-index: 9999;
color: #f1d192;
opacity: 0;
&:hover {
opacity: 0.3;
}
&.con {
right: 20px;
}
......@@ -388,9 +472,13 @@ export default {
}
}
.audio {
opacity: 0;
&:hover {
opacity: 0.3;
}
position: absolute;
top: 100px;
right: 30px;
top: 150px;
right: 50px;
width: 40px;
height: 40px;
line-height: 40px;
......@@ -419,19 +507,20 @@ export default {
}
#main {
height: 100%;
margin-top: 40px;
}
#resbox {
position: absolute;
top: 50%;
top: calc(50% + 90px);
left: 50%;
width: 1280px;
transform: translateX(-50%) translateY(-50%);
text-align: center;
p {
color: red;
font-size: 50px;
line-height: 120px;
color: #fff;
font-size: 40px;
line-height: 60px;
}
.container {
display: flex;
......@@ -442,6 +531,7 @@ export default {
background: #fff;
width: 160px;
height: 160px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #ccc;
line-height: 160px;
......
......@@ -2379,7 +2379,7 @@
shadowOffset: [0, 0],
initial: null,
hideTags: true,
zoom: 1,
zoom: 0.7,
weight: false,
weightMode: "size",
weightFrom: null,
......@@ -2395,7 +2395,7 @@
txtOpt: true,
txtScale: 2,
frontSelect: false,
wheelZoom: true,
wheelZoom: false,
zoomMin: 0.3,
zoomMax: 3,
zoomStep: 0.05,
......@@ -2414,7 +2414,7 @@
shuffleTags: false,
noSelect: false,
noMouse: false,
imageScale: 1,
imageScale: 1.6,
paused: false,
dragControl: false,
dragThreshold: 4,
......
......@@ -75,7 +75,7 @@ export default {
const formData = new FormData();
formData.append('uploadImg', fileList[0]);
const reader = new FileReader();
const AllowImgFileSize = 1024 * 150;
const AllowImgFileSize = 1024 * 200;
const file = fileList[0];
if (file) {
this.filename = file.name;
......
......@@ -31,6 +31,7 @@
:step="1"
></el-input>
</el-form-item>
<!--
<el-form-item label="一等奖">
<el-input
type="number"
......@@ -39,6 +40,7 @@
:step="1"
></el-input>
</el-form-item>
-->
<el-form-item
:label="newitem.name"
v-for="newitem in storeNewLottery"
......@@ -126,7 +128,7 @@ export default {
const str = 'abcdefghijklmnopqrstuvwxyz';
let fieldStr = '';
for (let index = 0; index < 10; index++) {
fieldStr += str.split('')[randomNum(1, 27) - 1];
fieldStr += str.split('')[randomNum(1, 26) - 1];
}
return `${fieldStr}${Date.now()}`;
},
......
......@@ -30,8 +30,11 @@ export default {
result() {
return this.$store.state.result;
},
list() {
return this.$store.state.list;
},
message() {
const { result, config } = this;
const { result, config, list } = this;
const fields = Object.keys(config);
let message = [{ key: 0, title: config.name }];
......@@ -42,7 +45,12 @@ export default {
key: index + 1,
title: `${label}抽奖结果:`,
value: `${
result[item].length > 0 ? result[item].join('、') : '暂未抽取'
result[item].length > 0
? list
.filter(v => result[item].indexOf(v.key) > -1)
.map(v => v.name)
.join('、')
: '暂未抽取'
}`
});
}
......@@ -57,7 +65,6 @@ export default {
.c-Publicity {
height: 100%;
// width: 1000px;
background-color: rgba(255, 255, 255, 0.1);
margin: 0 auto;
position: relative;
overflow: hidden;
......@@ -66,14 +73,14 @@ export default {
color: #fff;
font-size: 16px;
.title {
color: #ccc;
color: #f1d192;
}
.value {
margin-left: 10px;
}
&.actiname {
.title {
color: red;
color: #fff;
font-size: 20px;
}
}
......
......@@ -35,9 +35,9 @@
class="card"
v-for="(data, j) in item.value"
:key="j"
:data-res="data"
:data-res="data.number"
>
{{ data }}
{{ data.name }}
</span>
</span>
</div>
......@@ -59,6 +59,9 @@ export default {
this.$store.commit('setResult', val);
}
},
list() {
return this.$store.state.list;
},
resultList() {
const list = [];
for (const key in this.result) {
......@@ -68,7 +71,10 @@ export default {
list.push({
label: key,
name,
value: element
value: element.map(v => ({
number: v,
name: this.list.filter(vv => vv.key === v)[0].name
}))
});
}
}
......
<template>
<div>
<el-button
class="autoStart"
@click="autoHandler"
type="primary"
size="mini"
>{{ autoRunning ? '停！' : '开始抽奖' }}</el-button
>
<div id="tool">
<el-button @click="startHandler" type="primary" size="mini">{{
running ? '停止' : '开始'
<el-button class="btn" @click="startHandler" size="mini">{{
running ? '停止' : '自定义抽奖'
}}</el-button>
<el-button size="mini" @click="showRemoveoptions = true">
<el-button class="btn" size="mini" @click="showRemoveoptions = true">
重置
</el-button>
<el-button size="mini" @click="showImport = true">
<el-button class="btn" size="mini" @click="showImport = true">
导入名单
</el-button>
<el-button size="mini" @click="showImportphoto = true">
<el-button class="btn" size="mini" @click="showImportphoto = true">
导入照片
</el-button>
<el-dialog
......@@ -20,7 +28,10 @@
>
<el-form ref="form" :model="form" label-width="80px" size="mini">
<el-form-item label="抽取奖项">
<el-select v-model="form.category" placeholder="请选取本次抽取的奖项">
<el-select
v-model="form.category"
placeholder="请选取本次抽取的奖项"
>
<el-option
:label="item.label"
:value="item.value"
......@@ -87,9 +98,9 @@
type="textarea"
:rows="10"
placeholder="请输入对应的号码和名单(可直接从excel复制)，格式(号码 名字)，导入的名单将代替号码显示在抽奖中。如：
1 张三
2 李四
3 王五
1 张三
2 李四
3 王五
"
v-model="listStr"
></el-input>
......@@ -128,6 +139,7 @@
</el-form>
</el-dialog>
</div>
</div>
</template>
<script>
......@@ -135,6 +147,7 @@ import {
clearData,
removeData,
configField,
newLotteryField,
listField,
resultField,
conversionCategoryName
......@@ -145,6 +158,7 @@ import { database, DB_STORE_NAME } from '@/helper/db';
export default {
props: {
running: Boolean,
autoRunning: Boolean,
closeRes: Function
},
computed: {
......@@ -153,6 +167,11 @@ export default {
return this.$store.state.config;
}
},
newLottery: {
get() {
return this.$store.state.newLottery;
}
},
remain() {
return (
this.config[this.form.category] -
......@@ -189,10 +208,10 @@ export default {
showImport: false,
showImportphoto: false,
showRemoveoptions: false,
removeInfo: { type: 0 },
removeInfo: { type: 4 },
form: {
category: '',
mode: 1,
mode: 0,
qty: 1,
allin: false
},
......@@ -202,7 +221,7 @@ export default {
watch: {
showRemoveoptions(v) {
if (!v) {
this.removeInfo.type = 0;
this.removeInfo.type = 4;
}
}
},
......@@ -223,6 +242,7 @@ export default {
break;
case 1:
removeData(configField);
removeData(newLotteryField);
this.$store.commit('setClearConfig');
break;
case 2:
......@@ -281,12 +301,36 @@ export default {
}
}
this.showSetwat = false;
const form = Object.assign({}, this.form, { remain: this.remain });
this.$emit('toggle', form);
},
autoHandler() {
if (this.running) return;
if (this.autoRunning) {
this.$emit('toggle', null, true);
} else {
const lottery = this.newLottery.filter(
v => !Object.prototype.hasOwnProperty.call(this.result, v.key)
)[0];
if (!lottery) return this.$message.error('奖品全都有主啦～');
const category = lottery.key;
this.$emit(
'toggle',
Object.assign({}, this.form, { remain: this.remain })
{
category,
mode: 0,
qty: this.config[category],
allin: false,
remain: this.config[category]
},
true
);
}
},
startHandler() {
if (this.autoRunning) return;
this.$emit('toggle');
if (!this.running) {
this.showSetwat = true;
......@@ -328,13 +372,35 @@ export default {
};
</script>
<style lang="scss">
.el-button.autoStart {
position: fixed;
bottom: 30px;
left: 50%;
width: 100px;
height: 40px;
font-size: 18px;
transform: translateX(-50%);
background: #f1d192 !important;
color: #e74c26 !important;
border-color: #f1d192 !important;
&:hover {
background: #f1d192 !important;
color: #e74c26 !important;
border-color: #f1d192 !important;
}
}
.el-button.btn {
opacity: 0;
&:hover {
opacity: 0.3;
}
}
#tool {
position: fixed;
width: 60px;
height: 500px;
top: 50%;
right: 20px;
transform: translateY(-50%);
height: 300px;
bottom: 0;
right: 50px;
text-align: center;
display: flex;
flex-direction: column;
......
......@@ -35,13 +35,27 @@ export function randomNum(minNum = 1, maxNum) {
*/
export function luckydrawHandler(total, won = [], num) {
const peolist = generateArray(1, Number(total));
const wons = won;
let wons = won;
const res = [];
const rest = peolist.filter(item => !wons.includes(item));
if (rest.length < num) {
res.push(...rest);
wons = [...rest];
for (let j = 0; j < num - rest.length; j++) {
const nodraws = peolist.filter(item => !wons.includes(item));
const current = nodraws[randomNum(1, nodraws.length) - 1];
res.push(current);
wons.push(current);
}
} else {
for (let j = 0; j < num; j++) {
const nodraws = peolist.filter(item => !wons.includes(item));
const current = nodraws[randomNum(1, nodraws.length) - 1];
res.push(current);
wons.push(current);
}
}
return res;
}
......
......@@ -39,6 +39,7 @@ export const newLotteryField = 'newLottery'; // 新增奖项
export const listField = 'list'; // 名单
export function conversionCategoryName(key) {
let name = '';
/*
switch (key) {
case 'firstPrize':
name = '一等奖';
......@@ -46,6 +47,7 @@ export function conversionCategoryName(key) {
default:
break;
}
*/
const newLottery = getData(newLotteryField) || [];
const findres = newLottery.find(item => item.key === key);
if (findres) {
......
......@@ -13,12 +13,9 @@ export default new Vuex.Store({
state: {
config: {
name: '年会抽奖',
number: 70,
firstPrize: 1
},
result: {
firstPrize: []
number: 44
},
result: {},
newLottery: [],
list: [],
photos: []
......@@ -27,8 +24,7 @@ export default new Vuex.Store({
setClearConfig(state) {
state.config = {
name: '年会抽奖',
number: 70,
firstPrize: 1
number: 44
};
state.newLottery = [];
},
......@@ -39,19 +35,14 @@ export default new Vuex.Store({
state.photos = [];
},
setClearResult(state) {
state.result = {
firstPrize: []
};
state.result = {};
},
setClearStore(state) {
state.config = {
name: '年会抽奖',
number: 70,
firstPrize: 1
};
state.result = {
firstPrize: []
number: 44
};
state.result = {};
state.newLottery = [];
state.list = [];
state.photos = [];
......@@ -65,9 +56,11 @@ export default new Vuex.Store({
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);
},
......