shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: bb

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-10 00:52:34 +08:00
parent f34e850ff0
commit f0a62aacb5
21 changed files with 694 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="dracula">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

BIN
public/人口登记表.xlsx Normal file
View File

Binary file not shown.

1
src/components/DaiysuiTable/index.vue
View File

@@ -1,4 +1,3 @@
import { mapActions } from 'pinia';
<script setup lang='ts'> <script setup lang='ts'>
import { computed } from 'vue'; import { computed } from 'vue';
const props = defineProps({ const props = defineProps({

59
src/components/PlayMusic/index.vue
View File

@@ -1,30 +1,27 @@
<script setup lang='ts'> <script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted,watch } from 'vue'
import useStore from '@/store'; import useStore from '@/store';
import { storeToRefs } from 'pinia';
import localforage from 'localforage' import localforage from 'localforage'
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { useAudio } from '@/hooks/useAudio'
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const audioDbStore = localforage.createInstance({ const audioDbStore = localforage.createInstance({
name: 'audioStore' name: 'audioStore'
}) })
const audio=ref(new Audio())
const audioHook = useAudio()
const { audio, audioPaused } = audioHook
const settingRef = ref() const settingRef = ref()
// const audio = ref(new Audio()) // const audio = ref(new Audio())
const currentMusic = ref<any>()
const globalConfig = useStore().globalConfig const globalConfig = useStore().globalConfig
const { getMusicList: localMusicList } = globalConfig; const { getMusicList: localMusicList,getCurrentMusic:currentMusic } = storeToRefs(globalConfig);
const localMusicListValue = ref(localMusicList) const localMusicListValue = ref(localMusicList)
const play = async (item: any, skip = false) => { const play = async (item: any) => {
if (!audio.value.paused && !skip) { // if (!audio.value.paused && !skip) {
audioHook.pause() // audio.value.pause()
return // return
} // }
let audioUrl = '' let audioUrl = ''
if (!item.url) { if (!item.url) {
return return
@@ -35,21 +32,27 @@ const play = async (item: any, skip = false) => {
else { else {
audioUrl = item.url audioUrl = item.url
} }
audioHook.pause() audio.value.pause()
audioHook.setAudioSrc(audioUrl) audio.value.src = audioUrl
audioHook.play() audio.value.play()
} }
const playMusic=(item:any,skip = false)=>{
if(!currentMusic.value.paused&&!skip){
globalConfig.setCurrentMusic(item,true)
return
}
globalConfig.setCurrentMusic(item,false)
}
const nextPlay = () => { const nextPlay = () => {
// 播放下一首 // 播放下一首
if (localMusicListValue.value.length > 1) { if (localMusicListValue.value.length > 1) {
let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name) let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.item.name)
index++ index++
if (index >= localMusicListValue.value.length) { if (index >= localMusicListValue.value.length) {
index = 0 index = 0
} }
currentMusic.value = localMusicListValue.value[index] globalConfig.setCurrentMusic(localMusicListValue.value[index],false)
play(currentMusic.value, true)
} }
} }
// 监听播放成后开始下一首 // 监听播放成后开始下一首
@@ -58,20 +61,28 @@ const onPlayEnd = () => {
} }
const enterConfig = () => { const enterConfig = () => {
router.push('/config') router.push('/log-lottery/config')
} }
const enterHome = () => { const enterHome = () => {
router.push('/') router.push('/log-lottery')
} }
onMounted(() => { onMounted(() => {
currentMusic.value = localMusicListValue.value[0] globalConfig.setCurrentMusic(localMusicListValue.value[0],true)
onPlayEnd() onPlayEnd()
// 不使用空格控制audio // 不使用空格控制audio
}) })
onUnmounted(() => { onUnmounted(() => {
audio.value.removeEventListener('ended', nextPlay) audio.value.removeEventListener('ended', nextPlay)
}) })
watch(currentMusic, (val: any) => {
if(!val.paused&&audio.value){
play(val.item)
}
else{
audio.value.pause()
}
},{deep:true})
</script> </script>
@@ -90,10 +101,10 @@ onUnmounted(() => {
</div> </div>
</div> </div>
<div class="tooltip tooltip-left" :data-tip="currentMusic ? currentMusic.name+'\n\r &nbsp; 右键下一曲' : '播放/暂停'"> <div class="tooltip tooltip-left" :data-tip="currentMusic ? currentMusic.item.name+'\n\r &nbsp; 右键下一曲' : '播放/暂停'">
<div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90" <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
@click="play(currentMusic)" @click.right.prevent="nextPlay"> @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay">
<svg-icon :name="audioPaused ? 'play' : 'pause'"></svg-icon> <svg-icon :name="currentMusic.paused ? 'play' : 'pause'"></svg-icon>
</div> </div>
</div> </div>
<!-- <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div> --> <!-- <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div> -->

40
src/hooks/useAudio.ts
View File

@@ -1,40 +0,0 @@
import {ref} from 'vue'
export const useAudio = () => {
const audio = ref(new Audio)
const audioPaused=ref(true)
const setAudioSrc = (src: string) => {
audio.value.src = src
}
const play = () => {
audio.value.play()
setPaused(false)
}
const pause = () => {
audio.value.pause()
setPaused(true)
}
const setPaused=(paused:boolean)=>{
audioPaused.value=paused
}
const stop = () => {
audio.value.pause()
audio.value.currentTime = 0
}
const nextPlay = (src:string) => {
pause()
setAudioSrc(src)
play()
}
return {
audio,
audioPaused,
play,
nextPlay,
setPaused,
pause,
stop,
setAudioSrc
}
}

4
src/hooks/useElement.ts
View File

@@ -1,7 +1,7 @@
import { rgba } from '@/utils/color' import { rgba } from '@/utils/color'
export const useElementStyle=(element:any,cardColor:string,cardSize:{width:number,height:number},textSize:number,mod:'default'|'lucky'='default')=>{ export const useElementStyle=(element:any,cardColor:string,cardSize:{width:number,height:number},textSize:number,mod:'default'|'lucky'='default')=>{
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25) element.style.backgroundColor = rgba(cardColor, mod=='default'?Math.random() * 0.5 + 0.25:0.8)
element.style.border = `1px solid ${rgba(cardColor, 0.25)}` element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}` element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
element.style.width = `${cardSize.width}px`; element.style.width = `${cardSize.width}px`;
@@ -34,8 +34,6 @@ export const useElementStyle=(element:any,cardColor:string,cardSize:{width:numbe
} }
export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{ export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{
const rowCount=Math.floor(windowSize.width/(cardSize.width+100))
const colCount=Math.ceil(count/rowCount)
const centerPosition={ const centerPosition={
x:0, x:0,
y:windowSize.height/2-cardSize.height/2 y:windowSize.height/2-cardSize.height/2

1
src/icons/sort-down.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704811730115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4344" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 320l448 448 448-448z" p-id="4345"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

1
src/icons/sort-up.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704811726586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 704L512 256l-448 448z" p-id="4206"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

32
src/router/index.ts
View File

@@ -2,16 +2,16 @@ import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layout/index.vue'; import Layout from '@/layout/index.vue';
import Home from '@/views/Home/index.vue'; import Home from '@/views/Home/index.vue';
export const configRoutes={ export const configRoutes={
path: '/config', path: '/log-lottery/config',
name: 'Config', name: 'Config',
component: () => import('@/views/Config/index.vue'), component: () => import('@/views/Config/index.vue'),
children: [ children: [
{ {
path: '', path: '',
redirect: '/config/person', redirect: '/log-lottery/config/person',
}, },
{ {
path: '/config/person', path: '/log-lottery/config/person',
name: 'PersonConfig', name: 'PersonConfig',
component: () => import('@/views/Config/Person/PersonConfig.vue'), component: () => import('@/views/Config/Person/PersonConfig.vue'),
meta: { meta: {
@@ -21,10 +21,10 @@ export const configRoutes={
children:[ children:[
{ {
path:'', path:'',
redirect: '/config/person/all', redirect: '/log-lottery/config/person/all',
}, },
{ {
path:'/config/person/all', path:'/log-lottery/config/person/all',
name:'AllPersonConfig', name:'AllPersonConfig',
component:()=>import('@/views/Config/Person/PersonAll.vue'), component:()=>import('@/views/Config/Person/PersonAll.vue'),
meta:{ meta:{
@@ -33,7 +33,7 @@ export const configRoutes={
} }
}, },
{ {
path:'/config/person/already', path:'/log-lottery/config/person/already',
name:'AlreadyPerson', name:'AlreadyPerson',
component:()=>import('@/views/Config/Person/PersonAlready.vue'), component:()=>import('@/views/Config/Person/PersonAlready.vue'),
meta:{ meta:{
@@ -53,7 +53,7 @@ export const configRoutes={
] ]
}, },
{ {
path: '/config/prize', path: '/log-lottery/config/prize',
name: 'PrizeConfig', name: 'PrizeConfig',
component: () => import('@/views/Config/Prize/PrizeConfig.vue'), component: () => import('@/views/Config/Prize/PrizeConfig.vue'),
meta:{ meta:{
@@ -62,16 +62,16 @@ export const configRoutes={
} }
}, },
{ {
path:'/config/global', path:'/log-lottery/config/global',
name:'GlobalConfig', name:'GlobalConfig',
redirect: '/config/global/all', redirect: '/log-lottery/config/global/all',
meta:{ meta:{
title:'全局配置', title:'全局配置',
icon:'global' icon:'global'
}, },
children:[ children:[
{ {
path:'/config/global/face', path:'/log-lottery/config/global/face',
name:'FaceConfig', name:'FaceConfig',
component:()=>import('@/views/Config/Global/FaceConfig.vue'), component:()=>import('@/views/Config/Global/FaceConfig.vue'),
meta:{ meta:{
@@ -80,7 +80,7 @@ export const configRoutes={
} }
}, },
{ {
path:'/config/global/image', path:'/log-lottery/config/global/image',
name:'ImageConfig', name:'ImageConfig',
component:()=>import('@/views/Config/Global/ImageConfig.vue'), component:()=>import('@/views/Config/Global/ImageConfig.vue'),
meta:{ meta:{
@@ -89,7 +89,7 @@ export const configRoutes={
} }
}, },
{ {
path:'/config/global/music', path:'/log-lottery/config/global/music',
name:'MusicConfig', name:'MusicConfig',
component:()=>import('@/views/Config/Global/MusicConfig.vue'), component:()=>import('@/views/Config/Global/MusicConfig.vue'),
meta:{ meta:{
@@ -103,17 +103,17 @@ export const configRoutes={
} }
const routes = [ const routes = [
{ {
path: '/', path: '/log-lottery',
component: Layout, component: Layout,
redirect: '/home', redirect: '/log-lottery/home',
children: [ children: [
{ {
path: '/home', path: '/log-lottery/home',
name: 'Home', name: 'Home',
component: Home, component: Home,
}, },
{ {
path:'/demo', path:'/log-lottery/demo',
name:'Demo', name:'Demo',
component:()=>import('@/views/Demo/index.vue') component:()=>import('@/views/Demo/index.vue')
}, },

2
src/store/data.ts
View File

File diff suppressed because one or more lines are too long

22
src/store/globalConfig.ts
View File

@@ -20,7 +20,11 @@ export const useGlobalConfig = defineStore('global', {
}, },
musicList: defaultMusicList, musicList: defaultMusicList,
imageList:defaultImageList, imageList:defaultImageList,
} },
currentMusic: {
item:defaultMusicList[0],
paused:true,
},
}; };
}, },
getters: { getters: {
@@ -67,6 +71,10 @@ export const useGlobalConfig = defineStore('global', {
getMusicList(state) { getMusicList(state) {
return state.globalConfig.musicList; return state.globalConfig.musicList;
}, },
// 获取当前音乐
getCurrentMusic(state) {
return state.currentMusic;
},
// 获取图片列表 // 获取图片列表
getImageList(state) { getImageList(state) {
return state.globalConfig.imageList; return state.globalConfig.imageList;
@@ -132,6 +140,13 @@ export const useGlobalConfig = defineStore('global', {
} }
} }
}, },
// 设置当前播放音乐
setCurrentMusic(musicItem: any,paused:boolean=true) {
this.currentMusic={
item:musicItem,
paused:paused,
}
},
// 重置音乐列表 // 重置音乐列表
resetMusicList() { resetMusicList() {
this.globalConfig.musicList = defaultMusicList; this.globalConfig.musicList = defaultMusicList;
@@ -189,6 +204,10 @@ export const useGlobalConfig = defineStore('global', {
}, },
musicList: defaultMusicList, musicList: defaultMusicList,
imageList:defaultImageList, imageList:defaultImageList,
},
this.currentMusic= {
item:defaultMusicList[0],
paused:true,
} }
} }
}, },
@@ -199,6 +218,7 @@ export const useGlobalConfig = defineStore('global', {
// 如果要存储在localStorage中 // 如果要存储在localStorage中
storage: localStorage, storage: localStorage,
key: 'globalConfig', key: 'globalConfig',
paths: ['globalConfig'],
}, },
], ],
}, },

73
src/store/personConfig.ts
View File

@@ -1,12 +1,14 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { IPersonConfig } from '@/types/personConfig'; import { IPersonConfig } from '@/types/personConfig';
import { IPrizeConfig } from '@/types/prizeConfig'; import { IPrizeConfig } from '@/types/prizeConfig';
import {defaultPersonList} from './data'
export const usePersonConfig = defineStore('person', { export const usePersonConfig = defineStore('person', {
state() { state() {
return { return {
personConfig: { personConfig: {
alreadyPersonList: [] as IPersonConfig[], allPersonList: [] as IPersonConfig[],
notPersonList: [] as IPersonConfig[], // alreadyPersonList: [] as IPersonConfig[],
// notPersonList: [] as IPersonConfig[],
tableRowCount: 12, tableRowCount: 12,
showField: [] as any[] showField: [] as any[]
} }
@@ -17,17 +19,21 @@ export const usePersonConfig = defineStore('person', {
getPersonConfig(state) { getPersonConfig(state) {
return state.personConfig; return state.personConfig;
}, },
// 获取全部人员名单
getAllPersonList(state) {
return state.personConfig.allPersonList;
},
// 获取已中奖人员名单 // 获取已中奖人员名单
getAlreadyPersonList(state) { getAlreadyPersonList(state) {
return state.personConfig.alreadyPersonList; return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
return item.isWin === true;
});
}, },
// 获取未中奖人员名单 // 获取未中奖人员名单
getNotPersonList(state) { getNotPersonList(state) {
return state.personConfig.notPersonList; return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
}, return item.isWin === false;
// 获取所有人员名单 });
getAllPersonList(state) {
return state.personConfig.alreadyPersonList.concat(state.personConfig.notPersonList);
}, },
// 获取table列数 // 获取table列数
getTableRowCount(state) { getTableRowCount(state) {
@@ -45,7 +51,7 @@ export const usePersonConfig = defineStore('person', {
return return
} }
personList.forEach((item: IPersonConfig) => { personList.forEach((item: IPersonConfig) => {
this.personConfig.notPersonList.push(item); this.personConfig.allPersonList.push(item);
}); });
}, },
// 添加已中奖人员 // 添加已中奖人员
@@ -54,57 +60,58 @@ export const usePersonConfig = defineStore('person', {
return return
} }
personList.forEach((person: IPersonConfig) => { personList.forEach((person: IPersonConfig) => {
this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => this.personConfig.allPersonList.map((item: IPersonConfig) => {
item.id !== person.id) if (item.id === person.id&&prize!=null) {
if (prize != null) { item.isWin = true
person.isWin = true item.prizeName = prize.name
person.prizeName = prize.name item.prizeTime = new Date().toString()
person.prizeTime = new Date().toString()
} }
this.personConfig.alreadyPersonList.push(person); });
}); });
}, },
// 从已中奖移动到未中奖 // 从已中奖移动到未中奖
moveAlreadyToNot(person: IPersonConfig) { moveAlreadyToNot(person: IPersonConfig) {
if (person.id != undefined || person.id != null) { if (person.id != undefined || person.id != null) {
this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id); for(let i=0;i<this.personConfig.allPersonList.length;i++){
person.isWin = false if(person.id === this.personConfig.allPersonList[i].id){
person.prizeTime = '' this.personConfig.allPersonList[i].isWin=false
person.prizeName = '' this.personConfig.allPersonList[i].prizeName=''
this.personConfig.notPersonList.push(person); this.personConfig.allPersonList[i].prizeTime=''
return
}
}
} }
}, },
// 删除指定人员 // 删除指定人员
deletePerson(person: IPersonConfig) { deletePerson(person: IPersonConfig) {
if (person.id != undefined || person.id != null) { if (person.id != undefined || person.id != null) {
this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id); this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id);
this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id !== person.id);
} }
}, },
// 删除所有人员 // 删除所有人员
deleteAllPerson() { deleteAllPerson() {
this.personConfig.alreadyPersonList = []; this.personConfig.allPersonList = [];
this.personConfig.notPersonList = [];
}, },
// 重置所有人员 // 重置所有人员
resetPerson() { resetPerson() {
this.personConfig.alreadyPersonList = []; this.personConfig.allPersonList = [];
this.personConfig.notPersonList = [];
}, },
// 重置已中奖人员 // 重置已中奖人员
resetAlreadyPerson() { resetAlreadyPerson() {
// 把已中奖人员合并到未中奖人员，要验证是否已存在 // 把已中奖人员合并到未中奖人员，要验证是否已存在
if (this.personConfig.alreadyPersonList.length > 0) { this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
this.personConfig.notPersonList = this.personConfig.notPersonList.concat(this.personConfig.alreadyPersonList); item.isWin = false;
this.personConfig.alreadyPersonList = []; });
} },
setDefaultPersonList() {
this.personConfig.allPersonList = defaultPersonList;
}, },
// 重置所有配置 // 重置所有配置
reset() { reset() {
this.personConfig = { this.personConfig = {
alreadyPersonList: [] as IPersonConfig[], allPersonList: [] as IPersonConfig[],
notPersonList: [] as IPersonConfig[],
tableRowCount: 12, tableRowCount: 12,
showField: [] as string[] showField: [] as string[]
} }

2
src/utils/index.ts
View File

@@ -1,5 +1,5 @@
// 筛选人员数据 // 筛选人员数据
export const filterData = (tableData: any[],localRowCount: number) => { export const filterData = (tableData: any[],localRowCount: number,startIndex=0) => {
const dataLength = tableData.length const dataLength = tableData.length
let j = 0; let j = 0;
for (let i = 0; i < dataLength; i++) { for (let i = 0; i < dataLength; i++) {

20
src/views/Config/Global/MusicConfig.vue
View File

@@ -13,29 +13,12 @@ const audioDbStore = localforage.createInstance({
const globalConfig = useStore().globalConfig const globalConfig = useStore().globalConfig
const { getMusicList: localMusicList } = storeToRefs(globalConfig); const { getMusicList: localMusicList } = storeToRefs(globalConfig);
const audio = ref(new Audio())
const limitType = ref('audio/*') const limitType = ref('audio/*')
const localMusicListValue = ref(localMusicList) const localMusicListValue = ref(localMusicList)
const play = async (item: any) => { const play = async (item: any) => {
let audioUrl = '' globalConfig.setCurrentMusic(item,false)
if (!item.url) {
return
} }
if (item.url == 'Storage') {
audioUrl = await audioDbStore.getItem(item.name) as string
}
else {
audioUrl = item.url
}
audio.value.pause()
audio.value.src = audioUrl
audio.value.currentTime = 0
audio.value.play()
}
const pausePlay = () => {
audio.value.pause()
}
const deleteMusic = (item: any) => { const deleteMusic = (item: any) => {
globalConfig.removeMusic(item.id) globalConfig.removeMusic(item.id)
audioDbStore.removeItem(item.name) audioDbStore.removeItem(item.name)
@@ -96,7 +79,6 @@ onMounted(() => {
:accept="limitType" /> :accept="limitType" />
<span class="btn btn-primary btn-sm">上传音乐</span> <span class="btn btn-primary btn-sm">上传音乐</span>
</label> </label>
<button class="btn btn-primary btn-sm" @click="pausePlay">暂停播放</button>
<button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button> <button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button>
</div> </div>
<div> <div>

29
src/views/Config/Person/PersonAll.vue
View File

@@ -10,7 +10,7 @@ import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
const personConfig = useStore().personConfig const personConfig = useStore().personConfig
const globalConfig = useStore().globalConfig const globalConfig = useStore().globalConfig
const { getAllPersonList:allPersonList} = storeToRefs(personConfig) const { getAllPersonList: allPersonList,getAlreadyPersonList:alreadyPersonList } = storeToRefs(personConfig)
const { getRowCount: rowCount } = storeToRefs(globalConfig) const { getRowCount: rowCount } = storeToRefs(globalConfig)
const limitType = '.xlsx,.xls' const limitType = '.xlsx,.xls'
const excelData = ref<any[]>([]) const excelData = ref<any[]>([])
@@ -31,6 +31,7 @@ const handleFileChange = async (e: any) => {
const deleteAll = () => { const deleteAll = () => {
personConfig.deleteAllPerson() personConfig.deleteAllPerson()
} }
const delPersonItem = (row: any) => { const delPersonItem = (row: any) => {
personConfig.deletePerson(row) personConfig.deletePerson(row)
} }
@@ -49,8 +50,8 @@ const tableColumns = [
props: 'department', props: 'department',
}, },
{ {
label: '职位', label: '身份',
props: 'other', props: 'identity',
}, },
{ {
label: '是否已中奖', label: '是否已中奖',
@@ -86,20 +87,30 @@ onMounted(() => {
<template> <template>
<div class="min-w-1000px"> <div class="min-w-1000px">
<div class="flex justify-center gap-3"> <div class="flex gap-3 justify-">
<button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
<div class="tooltip tooltip-bottom" data-tip="下载文件后，请在excel中填写数据，并保存为xlsx格式">
<a class="no-underline btn btn-secondary btn-sm" download="人口登记表.xlsx" target="_blank" href="/log-lottery/人口登记表.xlsx">下载模板</a>
</div>
<div class=""> <div class="">
<label for="explore"> <label for="explore">
<input type="file"
class="" <div class="tooltip tooltip-bottom" data-tip="上传修改好的excel文件">
id="explore" <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
style="display: none" :accept="limitType" />
@change="handleFileChange" :accept="limitType" />
<span class="btn btn-primary btn-sm">上传文件</span> <span class="btn btn-primary btn-sm">上传文件</span>
</div>
</label> </label>
<!-- <button class="btn btn-primary btn-sm">上传excel</button> --> <!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
</div> </div>
<div>
<span>中奖人数：</span>
<span>{{ alreadyPersonList.length }}</span>
<span>&nbsp;/&nbsp;</span>
<span>{{ allPersonList.length }}</span>
</div>
</div> </div>
<DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable> <DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
</div> </div>

25
src/views/Config/Person/PersonAlready.vue
View File

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-parsing-error --> <!-- eslint-disable vue/no-parsing-error -->
<script setup lang='ts'> <script setup lang='ts'>
import { ref } from 'vue'; // import { ref } from 'vue';
import useStore from '@/store' import useStore from '@/store'
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import DaiysuiTable from '@/components/DaiysuiTable/index.vue' import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
@@ -13,9 +13,9 @@ const { getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
// ) // )
const deleteAll = () => { // const deleteAll = () => {
personConfig.deleteAllPerson() // personConfig.deleteAllPerson()
} // }
const handleMoveNotPerson=(row:any)=>{ const handleMoveNotPerson=(row:any)=>{
personConfig.moveAlreadyToNot(row) personConfig.moveAlreadyToNot(row)
} }
@@ -24,6 +24,7 @@ const tableColumns = [
{ {
label: '编号', label: '编号',
props: 'uid', props: 'uid',
sort:true
}, },
{ {
label: '姓名', label: '姓名',
@@ -34,12 +35,13 @@ const tableColumns = [
props: 'department', props: 'department',
}, },
{ {
label: '职位', label: '身份',
props: 'other', props: 'identity',
}, },
{ {
label:'奖品', label:'奖品',
props:'prizeName' props:'prizeName',
sort:true
}, },
{ {
label: '中奖时间', label: '中奖时间',
@@ -71,9 +73,12 @@ const tableColumns = [
<template> <template>
<div class="overflow-y-auto"> <div class="overflow-y-auto">
<div class="flex justify-center gap-3"> <div class="flex justify-start gap-3">
<button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> <!-- <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> -->
<div>
<span>中奖人数：</span>
<span>{{ alreadyPersonList.length }}</span>
</div>
</div> </div>
<DaiysuiTable :tableColumns="tableColumns" :data="alreadyPersonList"></DaiysuiTable> <DaiysuiTable :tableColumns="tableColumns" :data="alreadyPersonList"></DaiysuiTable>
</div> </div>

16
src/views/Config/Prize/PrizeConfig.vue
View File

@@ -63,7 +63,6 @@ const sort = (item: any, isUp: number) => {
} }
const delItem = (item: IPrizeConfig) => { const delItem = (item: IPrizeConfig) => {
prizeConfig.deletePrizeConfig(item.id) prizeConfig.deletePrizeConfig(item.id)
// 更新奖项列表
} }
const delAll = async () => { const delAll = async () => {
await prizeConfig.deleteAllPrizeConfig() await prizeConfig.deleteAllPrizeConfig()
@@ -71,8 +70,8 @@ const delAll = async () => {
onMounted(() => { onMounted(() => {
getImageDbStore() getImageDbStore()
}) })
watch(() => prizeList, () => { watch(() => prizeList, (val:any) => {
prizeConfig.setPrizeConfig(prizeList.value) prizeConfig.setPrizeConfig(val)
}, { deep: true }) }, { deep: true })
</script> </script>
@@ -125,6 +124,13 @@ watch(() => prizeList, () => {
</div> </div>
<input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数" class="w-full max-w-xs input-sm input input-bordered" /> <input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数" class="w-full max-w-xs input-sm input input-bordered" />
</label> </label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">已抽取</span>
</div>
<input type="checkbox" :checked="item.isUsed" @change="item.isUsed?(()=>{item.isUsed=false;item.isUsedCount=0})():(()=>{item.isUsed=true;item.isUsedCount=item.count})()"
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
</label>
<label class="w-full max-w-xs mb-10 form-control"> <label class="w-full max-w-xs mb-10 form-control">
<div class="label"> <div class="label">
<span class="label-text">图片</span> <span class="label-text">图片</span>
@@ -142,13 +148,13 @@ watch(() => prizeList, () => {
<input type="checkbox" :checked="item.isShow" @change="item.isShow = !item.isShow" <input type="checkbox" :checked="item.isShow" @change="item.isShow = !item.isShow"
class="mt-2 border-solid checkbox checkbox-secondary border-1" /> class="mt-2 border-solid checkbox checkbox-secondary border-1" />
</label> </label>
<label class="w-full max-w-xs mb-10 form-control"> <!-- <label class="w-full max-w-xs mb-10 form-control">
<div class="label"> <div class="label">
<span class="label-text">抽取次数</span> <span class="label-text">抽取次数</span>
</div> </div>
<input type="text" v-model="item.frequency" placeholder="抽取次数" <input type="text" v-model="item.frequency" placeholder="抽取次数"
class="w-full max-w-xs input-sm input input-bordered" /> class="w-full max-w-xs input-sm input input-bordered" />
</label> </label> -->
<label class="w-full max-w-xs mb-10 form-control"> <label class="w-full max-w-xs mb-10 form-control">
<div class="label"> <div class="label">
<span class="label-text">操作</span> <span class="label-text">操作</span>

457
src/views/Home/index.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted,onUnmounted, watch } from 'vue' import { ref, onMounted, onUnmounted, } from 'vue'
import PrizeList from './PrizeList.vue' import PrizeList from './PrizeList.vue'
import { useElementStyle, useElementPosition } from '@/hooks/useElement' import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import StarsBackground from '@/components/StarsBackground/index.vue' import StarsBackground from '@/components/StarsBackground/index.vue'
import confetti from 'canvas-confetti' import confetti from 'canvas-confetti'
import { filterData } from '@/utils'
import * as THREE from 'three' import * as THREE from 'three'
import { import {
CSS3DRenderer, CSS3DObject CSS3DRenderer, CSS3DObject
@@ -12,18 +13,21 @@ import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls
import TWEEN from 'three/examples/jsm/libs/tween.module.js'; import TWEEN from 'three/examples/jsm/libs/tween.module.js';
import useStore from '@/store' import useStore from '@/store'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useToast } from 'vue-toast-notification'; import { useToast } from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css'; import 'vue-toast-notification/dist/theme-sugar.css';
const toast = useToast(); const toast = useToast();
const router = useRouter()
const personConfig = useStore().personConfig const personConfig = useStore().personConfig
const globalConfig = useStore().globalConfig const globalConfig = useStore().globalConfig
const prizeConfig = useStore().prizeConfig const prizeConfig = useStore().prizeConfig
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig) const { getAllPersonList: allPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig) const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
const { getTopTitle: topTitle, getCardColor: cardColor, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig) const { getTopTitle: topTitle, getCardColor: cardColor, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
const tableData = ref(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value)))) const tableData = ref<any[]>([])
// const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
const ballRotationY = ref(0) const ballRotationY = ref(0)
@@ -47,7 +51,26 @@ const targets = {
const luckyTargets = ref<any[]>([]) const luckyTargets = ref<any[]>([])
const luckyCardList = ref<any[]>([]) const luckyCardList = ref<any[]>([])
const currentPrizeValue=ref(JSON.parse(JSON.stringify(currentPrize.value))) // const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))
// 填充数据，填满七行
function initTableData() {
if (allPersonList.value.length <= 0) {
return
}
const totalCount = rowCount.value * 7
tableData.value = JSON.parse(JSON.stringify(allPersonList.value))
const tableDataLength = tableData.value.length
if (tableDataLength < totalCount) {
const repeatCount = Math.ceil(totalCount / tableDataLength)
// 复制数据
for (let i = 0; i < repeatCount; i++) {
tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(tableData.value)))
}
}
tableData.value = filterData(tableData.value.slice(0, totalCount), rowCount.value)
}
const init = () => { const init = () => {
const felidView = 40; const felidView = 40;
const width = window.innerWidth; const width = window.innerWidth;
@@ -60,18 +83,6 @@ const init = () => {
scene.value = new THREE.Scene(); scene.value = new THREE.Scene();
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane); camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
camera.value.position.z = cameraZ.value camera.value.position.z = cameraZ.value
// 侦听camera position变化
// watch(() => camera.value.position.z, (value) => {
// console.log('code line-63 \n\r😍 camara posi:\n\r',value);
// console.log('code line-63 \n\r😍 camara rrrr:\n\r',camera.value.rotation);
// cameraZ.value = value
// })
// watch(() => camera.value.rotation.z, (value) => {
// console.log('code line-68 \n\r😁 camraea rotation:\n\r',value);
// // cameraZ.value = value
// })
renderer.value = new CSS3DRenderer() renderer.value = new CSS3DRenderer()
renderer.value.setSize(width, height * 0.9) renderer.value.setSize(width, height * 0.9)
renderer.value.domElement.style.position = 'absolute'; renderer.value.domElement.style.position = 'absolute';
@@ -96,22 +107,17 @@ const init = () => {
const number = document.createElement('div'); const number = document.createElement('div');
number.className = 'card-id'; number.className = 'card-id';
// number.textContent = (i / 5 + 1).toString();
number.textContent = tableData.value[i].uid; number.textContent = tableData.value[i].uid;
// number.style.fontSize = `${textSize * 0.5}px`;
element.appendChild(number); element.appendChild(number);
const symbol = document.createElement('div'); const symbol = document.createElement('div');
symbol.className = 'card-name'; symbol.className = 'card-name';
symbol.textContent = tableData.value[i].name; symbol.textContent = tableData.value[i].name;
// symbol.style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
// symbol.style.fontSize = `${textSize}px`;
element.appendChild(symbol); element.appendChild(symbol);
const detail = document.createElement('div'); const detail = document.createElement('div');
detail.className = 'card-detail'; detail.className = 'card-detail';
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`; detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
// detail.style.fontSize = `${textSize * 0.5}px`;
element.appendChild(detail); element.appendChild(detail);
element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value) element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value)
@@ -243,7 +249,6 @@ function animation() {
TWEEN.update(); TWEEN.update();
controls.value.update(); controls.value.update();
// 设置自动旋转 // 设置自动旋转
// console.log('animation',controls.value.target);
// 设置相机位置 // 设置相机位置
requestAnimationFrame(animation); requestAnimationFrame(animation);
} }
@@ -324,6 +329,8 @@ const enterLottery = async () => {
if (!canOperate.value) { if (!canOperate.value) {
return return
} }
// luckyCardList.value = []
// prizeConfig.setCurrentPrize(currentPrize.value)
canOperate.value = false canOperate.value = false
transform(targets.sphere, 1000) transform(targets.sphere, 1000)
currentStatus.value = 1 currentStatus.value = 1
@@ -336,6 +343,28 @@ const startLottery = () => {
if (!canOperate.value) { if (!canOperate.value) {
return return
} }
// 验证是否已抽完全部奖项
if (currentPrize.value.isUsed) {
toast.open({
message: '抽奖抽完了',
type: 'warning',
position: 'top-right',
duration: 10000
})
return
}
// 验证抽奖人数是否还够
if (notPersonList.value.length < currentPrize.value.count) {
toast.open({
message: '抽奖人数不够',
type: 'warning',
position: 'top-right',
duration: 10000
})
return;
}
currentStatus.value = 2 currentStatus.value = 2
rollBall(10, 3000) rollBall(10, 3000)
} }
@@ -348,13 +377,15 @@ const stopLottery = async () => {
TWEEN.removeAll(); TWEEN.removeAll();
rollBall(0, 1) rollBall(0, 1)
currentStatus.value = 0 currentStatus.value = 0
const notPersonListLength = notPersonList.value.length; // 抽奖池是否为全体人员
// const personPool=currentPrize.value.isAll?
// const notPersonListLength = notPersonList.value.length;
// 每次最多抽十个 // 每次最多抽十个
let luckyCount = 10 let luckyCount = 10
const leftover = currentPrize.value.count - currentPrize.value.isUsedCount const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
leftover < luckyCount ? luckyCount = leftover : luckyCount leftover < luckyCount ? luckyCount = leftover : luckyCount
if (notPersonListLength < luckyCount) { if (notPersonList.value.length < leftover) {
toast.open({ toast.open({
message: '抽奖人数不够', message: '抽奖人数不够',
type: 'warning', type: 'warning',
@@ -364,20 +395,31 @@ const stopLottery = async () => {
return; return;
} }
for (let i = 0; i < luckyCount; i++) { for (let i = 0; i < luckyCount; i++) {
if (notPersonListLength > 0) { if (notPersonList.value.length > 0) {
const randomIndex = Math.floor(Math.random() * notPersonListLength); const randomIndex = Math.round(Math.random() * notPersonList.value.length - 1)
luckyTargets.value.push(notPersonList.value[randomIndex]) luckyTargets.value.push(notPersonList.value[randomIndex])
// console.log(
let LuckyCard = objects.value[randomIndex] // 'leftover:', leftover, '\n',
// 'luckyCount', luckyCount, '\n',
// 'currentPrize.value.isUsedCount', currentPrize.value.isUsedCount, '\n',
// 'randomIndex', randomIndex, '\n',
// 'notPersonList.value.length - 1', notPersonList.value.length - 1, '\n',
// 'notPersonList.value[randomIndex]', notPersonList.value[randomIndex], '\n',
// 'cadd id:', notPersonList.value[randomIndex].id
// )
let LuckyCard = objects.value[notPersonList.value[randomIndex].id]
luckyCardList.value.push(LuckyCard) luckyCardList.value.push(LuckyCard)
notPersonList.value.splice(randomIndex, 1)
// console.log(
// 'objects.value[notPersonList.value[randomIndex].id]', LuckyCard
// )
} }
} }
const luckyCardListLength = luckyCardList.value.length; const luckyCardListLength = luckyCardList.value.length;
const windowSize = { width: window.innerWidth, height: window.innerHeight } const windowSize = { width: window.innerWidth, height: window.innerHeight }
luckyCardListLength && luckyCardList.value.forEach((item: any, index: number) => { luckyCardListLength && luckyCardList.value.slice(-luckyCount).forEach((item: any, index: number) => {
item.element = useElementStyle(item.element, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky') item.element = useElementStyle(item.element, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
item = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index) item = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
new TWEEN.Tween(item.position) new TWEEN.Tween(item.position)
@@ -385,27 +427,33 @@ const stopLottery = async () => {
x: item.x, x: item.x,
y: item.y, y: item.y,
z: 1000 z: 1000
}, 700) }, 1000)
.easing(TWEEN.Easing.Exponential.InOut)
.start() .start()
new TWEEN.Tween(item.rotation) new TWEEN.Tween(item.rotation)
.to({ .to({
x: 0, x: 0,
y: 0, y: 0,
z: 0 z: 0
}, 600) }, 900)
.easing(TWEEN.Easing.Exponential.InOut)
.start() .start()
.onComplete(() => { .onComplete(() => {
confettiFire() confettiFire()
resetCamera() resetCamera()
}) })
}) })
currentPrizeValue.value.isUsedCount += luckyCount currentPrize.value.isUsedCount += luckyCount
if(currentPrizeValue.value.isUsedCount>=currentPrizeValue.value.count){ if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
currentPrizeValue.value.isUsed=true currentPrize.value.isUsed = true
} }
prizeConfig.setCurrentPrize(currentPrizeValue.value) // luckyCardList.value = []
prizeConfig.updatePrizeConfig(currentPrizeValue.value)
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value) personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
prizeConfig.updatePrizeConfig(currentPrize.value)
prizeConfig.setCurrentPrize(currentPrize.value)
luckyTargets.value = []
} }
// 庆祝动画 // 庆祝动画
const confettiFire = () => { const confettiFire = () => {
@@ -463,54 +511,58 @@ const centerFire = (particleRatio: number, opts: any) => {
particleCount: Math.floor(count * particleRatio) particleCount: Math.floor(count * particleRatio)
}); });
} }
// 监听空格键
const listenSpaceKey=()=>{
window.addEventListener('keydown', (e) => {
console.log('code line-468 \n\r😒 e:\n\r',e);
//
if (e.code !== 'Space') { const setDefaultPersonList = () => {
return personConfig.setDefaultPersonList()
} // 刷新页面
if(currentStatus.value==0){ window.location.reload()
enterLottery()
}
else if(currentStatus.value==1){
startLottery()
}
else if(currentStatus.value==2){
stopLottery()
}
})
} }
onMounted(() => { onMounted(() => {
initTableData();
init(); init();
animation(); animation();
containerRef.value!.style.color = `${textColor}` containerRef.value!.style.color = `${textColor}`
listenSpaceKey()
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('keydown', listenSpaceKey)
})
watch(()=>currentPrizeValue.value.isUsed,(val)=>{
if(val){
currentPrizeValue.value=JSON.parse(JSON.stringify(currentPrize.value))
}
}) })
// watch(() => currentPrize.value.isUsed, (val) => {
// if (val) {
// currentPrize.value = JSON.parse(JSON.stringify(currentPrize.value))
// }
// })
</script> </script>
<template> <template>
<div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
<h2 class="absolute w-full pt-12 m-0 font-mono tracking-wide text-center leading-12" :style="{fontSize:textSize*1.5+'px',color:textColor}">{{ topTitle }}</h2> <h2 class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12"
:style="{ fontSize: textSize * 1.5 + 'px', color: textColor }">{{ topTitle }}</h2>
<div class="flex gap-3">
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="router.push('config')">暂无人员信息，前往导入</button>
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="setDefaultPersonList">使用默认数据</button>
</div>
</div>
<div id="container" ref="containerRef" class="3dContainer"> <div id="container" ref="containerRef" class="3dContainer">
<!-- 选中菜单结构 start--> <!-- 选中菜单结构 start-->
<div id="menu"> <div id="menu">
<button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button> <button class="btn-end " @click="enterLottery" v-if="currentStatus == 0&&tableData.length > 0">进入抽奖</button>
<div class="start">
<button class="btn-start" @click="startLottery" v-if="currentStatus == 1"><strong>开始</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
<button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button> <div id="glow">
<div class="circle"></div>
<div class="circle"></div>
</div>
</button>
</div>
<button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button> <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
<!-- <button id="table" @click="transform(targets.table, 2000)">TABLE</button> --> <!-- <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
@@ -533,6 +585,271 @@ watch(()=>currentPrizeValue.value.isUsed,(val)=>{
width: 100%; width: 100%;
bottom: 50px; bottom: 50px;
text-align: center; text-align: center;
margin: 0 auto;
font-size: 32px; font-size: 32px;
} }
</style> .start{
// 居中
display: flex;
justify-content: center;
}
.btn-start {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 13rem;
overflow: hidden;
height: 3rem;
background-size: 300% 300%;
backdrop-filter: blur(1rem);
border-radius: 5rem;
transition: 0.5s;
animation: gradient_301 5s ease infinite;
border: double 4px transparent;
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
background-origin: border-box;
background-clip: content-box, border-box;
-webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
animation: pulsate-fwd 1.2s ease-in-out infinite both;
}
#container-stars {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
transition: 0.5s;
backdrop-filter: blur(1rem);
border-radius: 5rem;
}
strong {
z-index: 2;
font-family: 'Avalors Personal Use';
font-size: 12px;
letter-spacing: 5px;
color: #FFFFFF;
text-shadow: 0 0 4px white;
}
#glow {
position: absolute;
display: flex;
width: 12rem;
}
.circle {
width: 100%;
height: 30px;
filter: blur(2rem);
animation: pulse_3011 4s infinite;
z-index: -1;
}
.circle:nth-of-type(1) {
background: rgba(254, 83, 186, 0.636);
}
.circle:nth-of-type(2) {
background: rgba(142, 81, 234, 0.704);
}
.btn-start:hover #container-stars {
z-index: 1;
background-color: #212121;
}
.btn-start:hover {
transform: scale(1.1)
}
.btn-start:active {
border: double 4px #FE53BB;
background-origin: border-box;
background-clip: content-box, border-box;
animation: none;
}
.btn-start:active .circle {
background: #FE53BB;
}
#stars {
position: relative;
background: transparent;
width: 200rem;
height: 200rem;
}
#stars::after {
content: "";
position: absolute;
top: -10rem;
left: -100rem;
width: 100%;
height: 100%;
animation: animStarRotate 90s linear infinite;
}
#stars::after {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
}
#stars::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 170%;
height: 500%;
animation: animStar 60s linear infinite;
}
#stars::before {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
opacity: 0.5;
}
@keyframes animStar {
from {
transform: translateY(0);
}
to {
transform: translateY(-135rem);
}
}
@keyframes animStarRotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
@keyframes gradient_301 {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse_3011 {
0% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.btn-end {
-webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
animation: pulsate-fwd 0.9s ease-in-out infinite both;
cursor: pointer;
}
.btn-end {
--glow-color: rgb(217, 176, 255);
--glow-spread-color: rgba(191, 123, 255, 0.781);
--enhanced-glow-color: rgb(231, 206, 255);
--btn-color: rgb(100, 61, 136);
border: .25em solid var(--glow-color);
padding: 1em 3em;
color: var(--glow-color);
font-size: 15px;
font-weight: bold;
background-color: var(--btn-color);
border-radius: 1em;
outline: none;
box-shadow: 0 0 1em .25em var(--glow-color),
0 0 4em 1em var(--glow-spread-color),
inset 0 0 .75em .25em var(--glow-color);
text-shadow: 0 0 .5em var(--glow-color);
position: relative;
transition: all 0.3s;
}
.btn-end::after {
pointer-events: none;
content: "";
position: absolute;
top: 120%;
left: 0;
height: 100%;
width: 100%;
background-color: var(--glow-spread-color);
filter: blur(2em);
opacity: .7;
transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}
.btn-end:hover {
color: var(--btn-color);
background-color: var(--glow-color);
box-shadow: 0 0 1em .25em var(--glow-color),
0 0 4em 2em var(--glow-spread-color),
inset 0 0 .75em .25em var(--glow-color);
}
.btn-end:active {
box-shadow: 0 0 0.6em .25em var(--glow-color),
0 0 2.5em 2em var(--glow-spread-color),
inset 0 0 .5em .25em var(--glow-color);
}
// 按钮动画
@-webkit-keyframes pulsate-fwd {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulsate-fwd {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}</style>

2
tailwind.config.js
View File

@@ -8,7 +8,7 @@ module.exports = {
plugins: [require('@tailwindcss/typography'), require('daisyui')], plugins: [require('@tailwindcss/typography'), require('daisyui')],
daisyui: { daisyui: {
themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
darkTheme: 'dark', // name of one of the included themes for dark mode darkTheme: '', // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes utils: true, // adds responsive and modifier utility classes

1
vite.config.ts
View File

@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
const chunkName = mode == 'prebuild' ? '[name]' : 'chunk'; const chunkName = mode == 'prebuild' ? '[name]' : 'chunk';
return { return {
base:'/log-lottery/',
plugins: [ plugins: [
vue(), vue(),
viteCompression({ viteCompression({