refactor: 提取组件，优化代码
This commit is contained in:
LOG1997
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@@ -29,9 +29,6 @@ importers:
|
|||||||
localforage:
|
localforage:
|
||||||
specifier: ^1.10.0
|
specifier: ^1.10.0
|
||||||
version: 1.10.0
|
version: 1.10.0
|
||||||
lodash-es:
|
|
||||||
specifier: ^4.17.21
|
|
||||||
version: 4.17.21
|
|
||||||
markdown-it:
|
markdown-it:
|
||||||
specifier: ^14.1.0
|
specifier: ^14.1.0
|
||||||
version: 14.1.0
|
version: 14.1.0
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import PlayMusic from '@/components/PlayMusic/index.vue'
|
|
||||||
import useStore from '@/store'
|
|
||||||
import { themeChange } from '@/utils'
|
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import PlayMusic from '@/components/PlayMusic/index.vue'
|
||||||
|
import useStore from '@/store'
|
||||||
|
import { themeChange } from '@/utils'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const globalConfig = useStore().globalConfig
|
const globalConfig = useStore().globalConfig
|
||||||
|
|||||||
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
@@ -15,7 +15,6 @@ declare module 'vue' {
|
|||||||
PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
|
PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
StarsBackground: typeof import('./components/StarsBackground/index.vue')['default']
|
|
||||||
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
||||||
ToTop: typeof import('./components/ToTop/index.vue')['default']
|
ToTop: typeof import('./components/ToTop/index.vue')['default']
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
<script setup lang='ts'>
|
|
||||||
import Sparticles from 'sparticles';
|
|
||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
|
||||||
import { useElementSize } from '@vueuse/core';
|
|
||||||
import localforage from 'localforage'
|
|
||||||
const props = defineProps({
|
|
||||||
homeBackground: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
url: ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const imageDbStore = localforage.createInstance({
|
|
||||||
name: 'imgStore'
|
|
||||||
})
|
|
||||||
const imgUrl = ref('')
|
|
||||||
const starRef = ref();
|
|
||||||
|
|
||||||
const { width, height } = useElementSize(starRef);
|
|
||||||
let options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 });
|
|
||||||
function addSparticles(node: any, width: number, height: number) {
|
|
||||||
new Sparticles(node, options.value, width, height);
|
|
||||||
}
|
|
||||||
// 页面大小改变时
|
|
||||||
const listenWindowSize = () => {
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
if (width.value && height.value) {
|
|
||||||
addSparticles(starRef.value, width.value, height.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const getImageStoreItem = async (item: any): Promise<string> => {
|
|
||||||
let image = ''
|
|
||||||
if (item.url == 'Storage') {
|
|
||||||
const key = item.id;
|
|
||||||
image = await imageDbStore.getItem(key) as string
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
image = item.url
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return image
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
getImageStoreItem(props.homeBackground).then((image) => {
|
|
||||||
imgUrl.value = image
|
|
||||||
})
|
|
||||||
addSparticles(starRef.value, width.value, height.value);
|
|
||||||
listenWindowSize()
|
|
||||||
})
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener('resize', listenWindowSize)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="home-background w-screen h-screen overflow-hidden" v-if="homeBackground.url">
|
|
||||||
<img :src="imgUrl" class="w-full h-full object-cover" alt="">
|
|
||||||
</div>
|
|
||||||
<div v-else class="w-screen h-screen overflow-hidden" ref="starRef">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
89
src/views/Home/components/HeaderTitle/index.vue
Normal file
89
src/views/Home/components/HeaderTitle/index.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<script setup lang='ts'>
|
||||||
|
import { toRefs } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
textSize: number
|
||||||
|
textColor: string
|
||||||
|
topTitle: string
|
||||||
|
tableData: any[]
|
||||||
|
setDefaultPersonList: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
const router = useRouter()
|
||||||
|
const { tableData, textSize, textColor, topTitle, setDefaultPersonList } = toRefs(props)
|
||||||
|
const { t } = useI18n()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
|
||||||
|
<h2
|
||||||
|
class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
|
||||||
|
: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')"
|
||||||
|
>
|
||||||
|
{{ t('button.noInfoAndImport') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
|
||||||
|
@click="setDefaultPersonList"
|
||||||
|
>
|
||||||
|
{{ t('button.useDefault') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.header-title {
|
||||||
|
-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||||
|
animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes tracking-in-expand-fwd {
|
||||||
|
0% {
|
||||||
|
letter-spacing: -0.5em;
|
||||||
|
-webkit-transform: translateZ(-700px);
|
||||||
|
transform: translateZ(-700px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tracking-in-expand-fwd {
|
||||||
|
0% {
|
||||||
|
letter-spacing: -0.5em;
|
||||||
|
-webkit-transform: translateZ(-700px);
|
||||||
|
transform: translateZ(-700px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
335
src/views/Home/components/OptionsButton/index.scss
Normal file
335
src/views/Home/components/OptionsButton/index.scss
Normal file
@@ -0,0 +1,335 @@
|
|||||||
|
#menu {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
.start {
|
||||||
|
// 居中
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-stars {
|
||||||
|
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;
|
||||||
|
|
||||||
|
&:hover #container-stars {
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border: double 4px #FE53BB;
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active .circle {
|
||||||
|
background: #FE53BB;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
z-index: 2;
|
||||||
|
font-family: 'Avalors Personal Use';
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-shadow: 0 0 4px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container-stars {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: 0.5s;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
border-radius: 5rem;
|
||||||
|
|
||||||
|
#stars {
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
width: 200rem;
|
||||||
|
height: 200rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -10rem;
|
||||||
|
left: -100rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
animation: animStarRotate 90s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -50%;
|
||||||
|
width: 170%;
|
||||||
|
height: 500%;
|
||||||
|
animation: animStar 60s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#glow {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
width: 12rem;
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
filter: blur(2rem);
|
||||||
|
animation: pulse_3011 4s infinite;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
background: rgba(254, 83, 186, 0.636);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
background: rgba(142, 81, 234, 0.704);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-neon {
|
||||||
|
--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);
|
||||||
|
-webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||||
|
animation: pulsate-fwd 0.9s ease-in-out infinite both;
|
||||||
|
cursor: pointer;
|
||||||
|
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;
|
||||||
|
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||||
|
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
||||||
|
|
||||||
|
&::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);
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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);
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮动画
|
||||||
|
@-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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes tracking-in-expand-fwd {
|
||||||
|
0% {
|
||||||
|
letter-spacing: -0.5em;
|
||||||
|
-webkit-transform: translateZ(-700px);
|
||||||
|
transform: translateZ(-700px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tracking-in-expand-fwd {
|
||||||
|
0% {
|
||||||
|
letter-spacing: -0.5em;
|
||||||
|
-webkit-transform: translateZ(-700px);
|
||||||
|
transform: translateZ(-700px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
79
src/views/Home/components/OptionsButton/index.vue
Normal file
79
src/views/Home/components/OptionsButton/index.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<script setup lang='ts'>
|
||||||
|
import { toRefs } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { LotteryStatus } from '@/views/Home/type'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentStatus: LotteryStatus
|
||||||
|
tableData: any[]
|
||||||
|
enterLottery: () => void
|
||||||
|
startLottery: () => void
|
||||||
|
stopLottery: () => void
|
||||||
|
continueLottery: () => void
|
||||||
|
quitLottery: () => void
|
||||||
|
}
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
const { currentStatus, tableData, enterLottery, startLottery, stopLottery, continueLottery, quitLottery } = toRefs(props)
|
||||||
|
const { t } = useI18n()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="menu">
|
||||||
|
<button v-if="currentStatus === LotteryStatus.init && tableData.length > 0" class="btn-neon" @click="enterLottery">
|
||||||
|
{{ t('button.enterLottery') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div v-if="currentStatus === LotteryStatus.ready" class="start">
|
||||||
|
<button class="btn-stars" @click="startLottery">
|
||||||
|
<strong>{{ t('button.start') }}</strong>
|
||||||
|
<div id="container-stars">
|
||||||
|
<div id="stars" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="glow">
|
||||||
|
<div class="circle" />
|
||||||
|
<div class="circle" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button v-if="currentStatus === LotteryStatus.running" class="btn-neon btn glass btn-lg" @click="stopLottery">
|
||||||
|
{{ t('button.selectLucky') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div v-if="currentStatus === LotteryStatus.end" class="flex justify-center gap-6 enStop">
|
||||||
|
<div class="start">
|
||||||
|
<button class="btn-stars" @click="continueLottery">
|
||||||
|
<strong>{{ t('button.continue') }}</strong>
|
||||||
|
<div id="container-stars">
|
||||||
|
<div id="stars" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="glow">
|
||||||
|
<div class="circle" />
|
||||||
|
<div class="circle" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="start">
|
||||||
|
<button class="btn-stars btn-cancel" @click="quitLottery">
|
||||||
|
<strong>{{ t('button.cancel') }}</strong>
|
||||||
|
<div id="container-stars">
|
||||||
|
<div id="stars" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="glow">
|
||||||
|
<div class="circle" />
|
||||||
|
<div class="circle" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@use './index.scss'
|
||||||
|
</style>
|
||||||
@@ -318,5 +318,5 @@ onMounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
@import "./index.scss";
|
@use "./index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
71
src/views/Home/components/StarsBackground/index.vue
Normal file
71
src/views/Home/components/StarsBackground/index.vue
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<script setup lang='ts'>
|
||||||
|
import { useElementSize } from '@vueuse/core'
|
||||||
|
import localforage from 'localforage'
|
||||||
|
import Sparticles from 'sparticles'
|
||||||
|
import { onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
homeBackground: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
url: '',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const imageDbStore = localforage.createInstance({
|
||||||
|
name: 'imgStore',
|
||||||
|
})
|
||||||
|
const imgUrl = ref('')
|
||||||
|
const starRef = ref()
|
||||||
|
|
||||||
|
const { width, height } = useElementSize(starRef)
|
||||||
|
const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
|
||||||
|
function addSparticles(node: any, width: number, height: number) {
|
||||||
|
const sparticleInstance = new Sparticles(node, options.value, width, height)
|
||||||
|
return sparticleInstance
|
||||||
|
}
|
||||||
|
// 页面大小改变时
|
||||||
|
function listenWindowSize() {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (width.value && height.value) {
|
||||||
|
addSparticles(starRef.value, width.value, height.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getImageStoreItem(item: any): Promise<string> {
|
||||||
|
let image = ''
|
||||||
|
if (item.url === 'Storage') {
|
||||||
|
const key = item.id
|
||||||
|
image = await imageDbStore.getItem(key) as string
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
image = item.url
|
||||||
|
}
|
||||||
|
|
||||||
|
return image
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getImageStoreItem(props.homeBackground).then((image) => {
|
||||||
|
imgUrl.value = image
|
||||||
|
})
|
||||||
|
addSparticles(starRef.value, width.value, height.value)
|
||||||
|
listenWindowSize()
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', listenWindowSize)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="homeBackground.url" class="home-background w-screen h-screen overflow-hidden">
|
||||||
|
<img :src="imgUrl" class="w-full h-full object-cover" alt="">
|
||||||
|
</div>
|
||||||
|
<div v-else ref="starRef" class="w-screen h-screen overflow-hidden" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,341 +0,0 @@
|
|||||||
#menu {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 50px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-title {
|
|
||||||
-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
|
||||||
animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-cancel {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#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;
|
|
||||||
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
|
||||||
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes tracking-in-expand-fwd {
|
|
||||||
0% {
|
|
||||||
letter-spacing: -0.5em;
|
|
||||||
-webkit-transform: translateZ(-700px);
|
|
||||||
transform: translateZ(-700px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes tracking-in-expand-fwd {
|
|
||||||
0% {
|
|
||||||
letter-spacing: -0.5em;
|
|
||||||
-webkit-transform: translateZ(-700px);
|
|
||||||
transform: translateZ(-700px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,665 +1,42 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Material, Object3D } from 'three'
|
|
||||||
import type { IPersonConfig } from '@/types/storeType'
|
|
||||||
import * as TWEEN from '@tweenjs/tween.js'
|
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { PerspectiveCamera, Scene, Vector3 } from 'three'
|
|
||||||
import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
|
|
||||||
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
|
|
||||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useToast } from 'vue-toast-notification'
|
|
||||||
import StarsBackground from '@/components/StarsBackground/index.vue'
|
|
||||||
import { useElementPosition, useElementStyle } from '@/hooks/useElement'
|
|
||||||
import i18n from '@/locales/i18n'
|
|
||||||
import useStore from '@/store'
|
import useStore from '@/store'
|
||||||
import { selectCard } from '@/utils'
|
import HeaderTitle from './components/HeaderTitle/index.vue'
|
||||||
import { rgba } from '@/utils/color'
|
import OptionButton from './components/OptionsButton/index.vue'
|
||||||
import PrizeList from './components/PrizeList/index.vue'
|
import PrizeList from './components/PrizeList/index.vue'
|
||||||
import { confettiFire, createSphereVertices, createTableVertices, initTableData } from './index'
|
import StarsBackground from './components/StarsBackground/index.vue'
|
||||||
|
import { useViewModel } from './useViewModel'
|
||||||
import 'vue-toast-notification/dist/theme-sugar.css'
|
import 'vue-toast-notification/dist/theme-sugar.css'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const viewModel = useViewModel()
|
||||||
const toast = useToast()
|
const { setDefaultPersonList, tableData, currentStatus, enterLottery, stopLottery, containerRef, startLottery, continueLottery, quitLottery } = viewModel
|
||||||
const router = useRouter()
|
|
||||||
const personConfig = useStore().personConfig
|
|
||||||
const globalConfig = useStore().globalConfig
|
const globalConfig = useStore().globalConfig
|
||||||
const prizeConfig = useStore().prizeConfig
|
|
||||||
|
|
||||||
const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList,
|
const { getTopTitle: topTitle, getTextColor: textColor, getTextSize: textSize, getBackground: homeBackground } = storeToRefs(globalConfig)
|
||||||
} = storeToRefs(personConfig)
|
|
||||||
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
|
|
||||||
const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getBackground: homeBackground, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
|
|
||||||
const tableData = ref<any[]>([])
|
|
||||||
|
|
||||||
enum LotteryStatus {
|
|
||||||
init = 0,
|
|
||||||
ready = 1,
|
|
||||||
running = 2,
|
|
||||||
end = 3,
|
|
||||||
}
|
|
||||||
const currentStatus = ref<LotteryStatus>(LotteryStatus.init) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
|
|
||||||
const ballRotationY = ref(0)
|
|
||||||
const containerRef = ref<HTMLElement>()
|
|
||||||
const canOperate = ref(true)
|
|
||||||
const cameraZ = ref(3000)
|
|
||||||
|
|
||||||
const scene = ref()
|
|
||||||
const camera = ref()
|
|
||||||
const renderer = ref()
|
|
||||||
const controls = ref()
|
|
||||||
const objects = ref<any[]>([])
|
|
||||||
interface TargetType {
|
|
||||||
grid: any[]
|
|
||||||
helix: any[]
|
|
||||||
table: any[]
|
|
||||||
sphere: any[]
|
|
||||||
}
|
|
||||||
const targets: TargetType = {
|
|
||||||
grid: [],
|
|
||||||
helix: [],
|
|
||||||
table: [],
|
|
||||||
sphere: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
const luckyTargets = ref<any[]>([])
|
|
||||||
const luckyCardList = ref<number[]>([])
|
|
||||||
const luckyCount = ref(10)
|
|
||||||
const personPool = ref<IPersonConfig[]>([])
|
|
||||||
|
|
||||||
const intervalTimer = ref<any>(null)
|
|
||||||
function init() {
|
|
||||||
const felidView = 40
|
|
||||||
const width = window.innerWidth
|
|
||||||
const height = window.innerHeight
|
|
||||||
const aspect = width / height
|
|
||||||
const nearPlane = 1
|
|
||||||
const farPlane = 10000
|
|
||||||
const WebGLoutput = containerRef.value
|
|
||||||
|
|
||||||
scene.value = new Scene()
|
|
||||||
camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane)
|
|
||||||
camera.value.position.z = cameraZ.value
|
|
||||||
renderer.value = new CSS3DRenderer()
|
|
||||||
renderer.value.setSize(width, height * 0.9)
|
|
||||||
renderer.value.domElement.style.position = 'absolute'
|
|
||||||
// 垂直居中
|
|
||||||
renderer.value.domElement.style.paddingTop = '50px'
|
|
||||||
renderer.value.domElement.style.top = '50%'
|
|
||||||
renderer.value.domElement.style.left = '50%'
|
|
||||||
renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
|
|
||||||
WebGLoutput!.appendChild(renderer.value.domElement)
|
|
||||||
|
|
||||||
controls.value = new TrackballControls(camera.value, renderer.value.domElement)
|
|
||||||
controls.value.rotateSpeed = 1
|
|
||||||
controls.value.staticMoving = true
|
|
||||||
controls.value.minDistance = 500
|
|
||||||
controls.value.maxDistance = 6000
|
|
||||||
controls.value.addEventListener('change', render)
|
|
||||||
|
|
||||||
const tableLen = tableData.value.length
|
|
||||||
for (let i = 0; i < tableLen; i++) {
|
|
||||||
let element = document.createElement('div')
|
|
||||||
element.className = 'element-card'
|
|
||||||
|
|
||||||
const number = document.createElement('div')
|
|
||||||
number.className = 'card-id'
|
|
||||||
number.textContent = tableData.value[i].uid
|
|
||||||
if (isShowAvatar.value)
|
|
||||||
number.style.display = 'none'
|
|
||||||
element.appendChild(number)
|
|
||||||
|
|
||||||
const symbol = document.createElement('div')
|
|
||||||
symbol.className = 'card-name'
|
|
||||||
symbol.textContent = tableData.value[i].name
|
|
||||||
if (isShowAvatar.value)
|
|
||||||
symbol.className = 'card-name card-avatar-name'
|
|
||||||
element.appendChild(symbol)
|
|
||||||
|
|
||||||
const detail = document.createElement('div')
|
|
||||||
detail.className = 'card-detail'
|
|
||||||
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
|
|
||||||
if (isShowAvatar.value)
|
|
||||||
detail.style.display = 'none'
|
|
||||||
element.appendChild(detail)
|
|
||||||
|
|
||||||
const avatar = document.createElement('img')
|
|
||||||
avatar.className = 'card-avatar'
|
|
||||||
avatar.src = tableData.value[i].avatar
|
|
||||||
avatar.alt = 'avatar'
|
|
||||||
avatar.style.width = '140px'
|
|
||||||
avatar.style.height = '140px'
|
|
||||||
if (!isShowAvatar.value)
|
|
||||||
avatar.style.display = 'none'
|
|
||||||
element.appendChild(avatar)
|
|
||||||
|
|
||||||
element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
|
|
||||||
const object = new CSS3DObject(element)
|
|
||||||
object.position.x = Math.random() * 4000 - 2000
|
|
||||||
object.position.y = Math.random() * 4000 - 2000
|
|
||||||
object.position.z = Math.random() * 4000 - 2000
|
|
||||||
scene.value.add(object)
|
|
||||||
|
|
||||||
objects.value.push(object)
|
|
||||||
}
|
|
||||||
// 创建横铺的界面
|
|
||||||
const tableVertices = createTableVertices({ tableData: tableData.value, rowCount: rowCount.value, cardSize: cardSize.value })
|
|
||||||
targets.table = tableVertices
|
|
||||||
// 创建球体
|
|
||||||
const sphereVertices = createSphereVertices({ objectsLength: objects.value.length })
|
|
||||||
targets.sphere = sphereVertices
|
|
||||||
window.addEventListener('resize', onWindowResize, false)
|
|
||||||
transform(targets.table, 1000)
|
|
||||||
render()
|
|
||||||
}
|
|
||||||
|
|
||||||
function transform(targets: any[], duration: number) {
|
|
||||||
TWEEN.removeAll()
|
|
||||||
if (intervalTimer.value) {
|
|
||||||
clearInterval(intervalTimer.value)
|
|
||||||
intervalTimer.value = null
|
|
||||||
randomBallData('sphere')
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const objLength = objects.value.length
|
|
||||||
for (let i = 0; i < objLength; ++i) {
|
|
||||||
const object = objects.value[i]
|
|
||||||
const target = targets[i]
|
|
||||||
// console.log('target', i, target, targets)
|
|
||||||
new TWEEN.Tween(object.position)
|
|
||||||
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
|
|
||||||
.easing(TWEEN.Easing.Exponential.InOut)
|
|
||||||
.start()
|
|
||||||
|
|
||||||
new TWEEN.Tween(object.rotation)
|
|
||||||
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
|
|
||||||
.easing(TWEEN.Easing.Exponential.InOut)
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
if (luckyCardList.value.length) {
|
|
||||||
luckyCardList.value.forEach((cardIndex: any) => {
|
|
||||||
const item = objects.value[cardIndex]
|
|
||||||
useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
luckyTargets.value = []
|
|
||||||
luckyCardList.value = []
|
|
||||||
|
|
||||||
canOperate.value = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
|
|
||||||
new TWEEN.Tween({})
|
|
||||||
.to({}, duration * 2)
|
|
||||||
.onUpdate(render)
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
canOperate.value = true
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function onWindowResize() {
|
|
||||||
camera.value.aspect = window.innerWidth / window.innerHeight
|
|
||||||
camera.value.updateProjectionMatrix()
|
|
||||||
|
|
||||||
renderer.value.setSize(window.innerWidth, window.innerHeight)
|
|
||||||
render()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [animation update all tween && controls]
|
|
||||||
*/
|
|
||||||
function animation() {
|
|
||||||
TWEEN.update()
|
|
||||||
if (controls.value) {
|
|
||||||
controls.value.update()
|
|
||||||
}
|
|
||||||
// 设置自动旋转
|
|
||||||
// 设置相机位置
|
|
||||||
requestAnimationFrame(animation)
|
|
||||||
}
|
|
||||||
|
|
||||||
// // 旋转的动画
|
|
||||||
function rollBall(rotateY: number, duration: number) {
|
|
||||||
TWEEN.removeAll()
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
scene.value.rotation.y = 0
|
|
||||||
ballRotationY.value = Math.PI * rotateY * 1000
|
|
||||||
const rotateObj = new TWEEN.Tween(scene.value.rotation)
|
|
||||||
rotateObj
|
|
||||||
.to(
|
|
||||||
{
|
|
||||||
// x: Math.PI * rotateX * 1000,
|
|
||||||
x: 0,
|
|
||||||
y: ballRotationY.value,
|
|
||||||
// z: Math.PI * rotateZ * 1000
|
|
||||||
z: 0,
|
|
||||||
},
|
|
||||||
duration * 1000,
|
|
||||||
)
|
|
||||||
.onUpdate(render)
|
|
||||||
.start()
|
|
||||||
.onStop(() => {
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.onComplete(() => {
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 将视野转回正面
|
|
||||||
function resetCamera() {
|
|
||||||
new TWEEN.Tween(camera.value.position)
|
|
||||||
.to(
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
z: 3000,
|
|
||||||
},
|
|
||||||
1000,
|
|
||||||
)
|
|
||||||
.onUpdate(render)
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
new TWEEN.Tween(camera.value.rotation)
|
|
||||||
.to(
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
z: 0,
|
|
||||||
},
|
|
||||||
1000,
|
|
||||||
)
|
|
||||||
.onUpdate(render)
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
canOperate.value = true
|
|
||||||
// camera.value.lookAt(scene.value.position)
|
|
||||||
camera.value.position.y = 0
|
|
||||||
camera.value.position.x = 0
|
|
||||||
camera.value.position.z = 3000
|
|
||||||
camera.value.rotation.x = 0
|
|
||||||
camera.value.rotation.y = 0
|
|
||||||
camera.value.rotation.z = -0
|
|
||||||
controls.value.reset()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
if (renderer.value) {
|
|
||||||
renderer.value.render(scene.value, camera.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 进入抽奖，从平铺转为球体
|
|
||||||
async function enterLottery() {
|
|
||||||
if (!canOperate.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!intervalTimer.value) {
|
|
||||||
randomBallData()
|
|
||||||
}
|
|
||||||
if (patternList.value.length) {
|
|
||||||
for (let i = 0; i < patternList.value.length; i++) {
|
|
||||||
if (i < rowCount.value * 7) {
|
|
||||||
objects.value[patternList.value[i] - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
canOperate.value = false
|
|
||||||
await transform(targets.sphere, 1000)
|
|
||||||
currentStatus.value = LotteryStatus.ready
|
|
||||||
rollBall(0.1, 2000)
|
|
||||||
}
|
|
||||||
// 开始抽奖
|
|
||||||
function startLottery() {
|
|
||||||
if (!canOperate.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 验证是否已抽完全部奖项
|
|
||||||
if (currentPrize.value.isUsed || !currentPrize.value) {
|
|
||||||
toast.open({
|
|
||||||
message: i18n.global.t('error.personIsAllDone'),
|
|
||||||
type: 'warning',
|
|
||||||
position: 'top-right',
|
|
||||||
duration: 10000,
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
|
|
||||||
// 验证抽奖人数是否还够
|
|
||||||
if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
|
|
||||||
toast.open({
|
|
||||||
message: i18n.global.t('error.personNotEnough'),
|
|
||||||
type: 'warning',
|
|
||||||
position: 'top-right',
|
|
||||||
duration: 10000,
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
luckyCount.value = 10
|
|
||||||
// 自定义抽奖个数
|
|
||||||
|
|
||||||
let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
|
|
||||||
const customCount = currentPrize.value.separateCount
|
|
||||||
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
|
||||||
for (let i = 0; i < customCount.countList.length; i++) {
|
|
||||||
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
|
||||||
leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
luckyCount.value = leftover < luckyCount.value ? leftover : luckyCount.value
|
|
||||||
for (let i = 0; i < luckyCount.value; i++) {
|
|
||||||
if (personPool.value.length > 0) {
|
|
||||||
// 解决随机元素概率过于不均等问题
|
|
||||||
const randomIndex = Math.floor(Math.random() * (personPool.value.length - 1))
|
|
||||||
luckyTargets.value.push(personPool.value[randomIndex])
|
|
||||||
personPool.value.splice(randomIndex, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.open({
|
|
||||||
// message: `现在抽取${currentPrize.value.name} ${leftover}人`,
|
|
||||||
message: i18n.global.t('error.startDraw', { count: currentPrize.value.name, leftover }),
|
|
||||||
type: 'default',
|
|
||||||
position: 'top-right',
|
|
||||||
duration: 8000,
|
|
||||||
})
|
|
||||||
currentStatus.value = LotteryStatus.running
|
|
||||||
rollBall(10, 3000)
|
|
||||||
}
|
|
||||||
// 停止抽奖，开始选取中将卡片并展示
|
|
||||||
async function stopLottery() {
|
|
||||||
if (!canOperate.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// clearInterval(intervalTimer.value)
|
|
||||||
// intervalTimer.value = null
|
|
||||||
canOperate.value = false
|
|
||||||
rollBall(0, 1)
|
|
||||||
|
|
||||||
const windowSize = { width: window.innerWidth, height: window.innerHeight }
|
|
||||||
luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
|
|
||||||
const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
|
|
||||||
luckyCardList.value.push(cardIndex)
|
|
||||||
const totalLuckyCount = luckyTargets.value.length
|
|
||||||
const item = objects.value[cardIndex]
|
|
||||||
const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
|
|
||||||
new TWEEN.Tween(item.position)
|
|
||||||
.to({
|
|
||||||
x: xTable,
|
|
||||||
y: yTable,
|
|
||||||
z: 1000,
|
|
||||||
}, 1200)
|
|
||||||
.easing(TWEEN.Easing.Exponential.InOut)
|
|
||||||
.onStart(() => {
|
|
||||||
item.element = useElementStyle(item.element, person, cardIndex, patternList.value, patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
|
|
||||||
})
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
canOperate.value = true
|
|
||||||
currentStatus.value = LotteryStatus.end
|
|
||||||
})
|
|
||||||
new TWEEN.Tween(item.rotation)
|
|
||||||
.to({
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
z: 0,
|
|
||||||
}, 900)
|
|
||||||
.easing(TWEEN.Easing.Exponential.InOut)
|
|
||||||
.start()
|
|
||||||
.onComplete(() => {
|
|
||||||
confettiFire()
|
|
||||||
resetCamera()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 继续
|
|
||||||
async function continueLottery() {
|
|
||||||
if (!canOperate.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const customCount = currentPrize.value.separateCount
|
|
||||||
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
|
||||||
for (let i = 0; i < customCount.countList.length; i++) {
|
|
||||||
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
|
||||||
customCount.countList[i].isUsedCount += luckyCount.value
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
currentPrize.value.isUsedCount += luckyCount.value
|
|
||||||
luckyCount.value = 0
|
|
||||||
if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
|
|
||||||
currentPrize.value.isUsed = true
|
|
||||||
currentPrize.value.isUsedCount = currentPrize.value.count
|
|
||||||
}
|
|
||||||
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
|
|
||||||
prizeConfig.updatePrizeConfig(currentPrize.value)
|
|
||||||
await enterLottery()
|
|
||||||
}
|
|
||||||
function quitLottery() {
|
|
||||||
enterLottery()
|
|
||||||
currentStatus.value = LotteryStatus.init
|
|
||||||
}
|
|
||||||
|
|
||||||
function setDefaultPersonList() {
|
|
||||||
personConfig.setDefaultPersonList()
|
|
||||||
// 刷新页面
|
|
||||||
window.location.reload()
|
|
||||||
}
|
|
||||||
// 随机替换数据
|
|
||||||
function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
|
|
||||||
// 两秒执行一次
|
|
||||||
intervalTimer.value = setInterval(() => {
|
|
||||||
// 产生随机数数组
|
|
||||||
const indexLength = 4
|
|
||||||
const cardRandomIndexArr: number[] = []
|
|
||||||
const personRandomIndexArr: number[] = []
|
|
||||||
for (let i = 0; i < indexLength; i++) {
|
|
||||||
// 解决随机元素概率过于不均等问题
|
|
||||||
const randomCardIndex = Math.floor(Math.random() * (tableData.value.length - 1))
|
|
||||||
const randomPersonIndex = Math.floor(Math.random() * (allPersonList.value.length - 1))
|
|
||||||
if (luckyCardList.value.includes(randomCardIndex)) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
cardRandomIndexArr.push(randomCardIndex)
|
|
||||||
personRandomIndexArr.push(randomPersonIndex)
|
|
||||||
}
|
|
||||||
for (let i = 0; i < cardRandomIndexArr.length; i++) {
|
|
||||||
if (!objects.value[cardRandomIndexArr[i]]) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod, 'change')
|
|
||||||
}
|
|
||||||
}, 200)
|
|
||||||
}
|
|
||||||
// 监听键盘
|
|
||||||
function listenKeyboard(e: any) {
|
|
||||||
if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (e.keyCode === 27 && currentStatus.value === LotteryStatus.running) {
|
|
||||||
quitLottery()
|
|
||||||
}
|
|
||||||
if (e.keyCode !== 32) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
switch (currentStatus.value) {
|
|
||||||
case LotteryStatus.init:
|
|
||||||
enterLottery()
|
|
||||||
break
|
|
||||||
case LotteryStatus.ready:
|
|
||||||
startLottery()
|
|
||||||
break
|
|
||||||
case LotteryStatus.running:
|
|
||||||
stopLottery()
|
|
||||||
break
|
|
||||||
case LotteryStatus.end:
|
|
||||||
continueLottery()
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanup() {
|
|
||||||
clearInterval(intervalTimer.value)
|
|
||||||
intervalTimer.value = null
|
|
||||||
if (scene.value) {
|
|
||||||
scene.value.traverse((object: Object3D) => {
|
|
||||||
if ((object as any).material) {
|
|
||||||
if (Array.isArray((object as any).material)) {
|
|
||||||
(object as any).material.forEach((material: Material) => {
|
|
||||||
material.dispose()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
(object as any).material.dispose()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ((object as any).geometry) {
|
|
||||||
(object as any).geometry.dispose()
|
|
||||||
}
|
|
||||||
if ((object as any).texture) {
|
|
||||||
(object as any).texture.dispose()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
scene.value.clear()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (objects.value) {
|
|
||||||
objects.value.forEach((object) => {
|
|
||||||
if (object.element) {
|
|
||||||
object.element.remove()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
objects.value = []
|
|
||||||
}
|
|
||||||
|
|
||||||
if (controls.value) {
|
|
||||||
controls.value.removeEventListener('change')
|
|
||||||
controls.value.dispose()
|
|
||||||
}
|
|
||||||
// 移除所有事件监听
|
|
||||||
window.removeEventListener('resize', onWindowResize)
|
|
||||||
scene.value = null
|
|
||||||
camera.value = null
|
|
||||||
renderer.value = null
|
|
||||||
controls.value = null
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
tableData.value = initTableData({ allPersonList: allPersonList.value, rowCount: rowCount.value })
|
|
||||||
init()
|
|
||||||
animation()
|
|
||||||
containerRef.value!.style.color = `${textColor}`
|
|
||||||
randomBallData()
|
|
||||||
window.addEventListener('keydown', listenKeyboard)
|
|
||||||
})
|
|
||||||
onUnmounted(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
cleanup()
|
|
||||||
})
|
|
||||||
clearInterval(intervalTimer.value)
|
|
||||||
intervalTimer.value = null
|
|
||||||
window.removeEventListener('keydown', listenKeyboard)
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
|
<HeaderTitle
|
||||||
<h2
|
:table-data="tableData"
|
||||||
class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
|
:text-size="textSize"
|
||||||
:style="{ fontSize: `${textSize * 1.5}px`, color: textColor }"
|
:text-color="textColor"
|
||||||
>
|
:top-title="topTitle"
|
||||||
{{ topTitle }}
|
:set-default-person-list="setDefaultPersonList"
|
||||||
</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')"
|
|
||||||
>
|
|
||||||
{{ t('button.noInfoAndImport') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
|
|
||||||
@click="setDefaultPersonList"
|
|
||||||
>
|
|
||||||
{{ t('button.useDefault') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="container" ref="containerRef" class="3dContainer">
|
<div id="container" ref="containerRef" class="3dContainer">
|
||||||
<!-- 选中菜单结构 start -->
|
<OptionButton
|
||||||
<div id="menu">
|
:current-status="currentStatus"
|
||||||
<button v-if="currentStatus === LotteryStatus.init && tableData.length > 0" class="btn-end " @click="enterLottery">
|
:table-data="tableData"
|
||||||
{{ t('button.enterLottery') }}
|
:enter-lottery="enterLottery"
|
||||||
</button>
|
:start-lottery="startLottery"
|
||||||
|
:stop-lottery="stopLottery"
|
||||||
<div v-if="currentStatus === LotteryStatus.ready" class="start">
|
:continue-lottery="continueLottery"
|
||||||
<button class="btn-start" @click="startLottery">
|
:quit-lottery="quitLottery"
|
||||||
<strong>{{ t('button.start') }}</strong>
|
/>
|
||||||
<div id="container-stars">
|
|
||||||
<div id="stars" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="glow">
|
|
||||||
<div class="circle" />
|
|
||||||
<div class="circle" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button v-if="currentStatus === LotteryStatus.running" class="btn-end btn glass btn-lg" @click="stopLottery">
|
|
||||||
{{ t('button.selectLucky') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div v-if="currentStatus === LotteryStatus.end" class="flex justify-center gap-6 enStop">
|
|
||||||
<div class="start">
|
|
||||||
<button class="btn-start" @click="continueLottery">
|
|
||||||
<strong>{{ t('button.continue') }}</strong>
|
|
||||||
<div id="container-stars">
|
|
||||||
<div id="stars" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="glow">
|
|
||||||
<div class="circle" />
|
|
||||||
<div class="circle" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="start">
|
|
||||||
<button class="btn-cancel" @click="quitLottery">
|
|
||||||
<strong>{{ t('button.cancel') }}</strong>
|
|
||||||
<div id="container-stars">
|
|
||||||
<div id="stars" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="glow">
|
|
||||||
<div class="circle" />
|
|
||||||
<div class="circle" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- end -->
|
|
||||||
</div>
|
</div>
|
||||||
<StarsBackground :home-background="homeBackground" />
|
<StarsBackground :home-background="homeBackground" />
|
||||||
<PrizeList class="absolute left-0 top-32" />
|
<PrizeList class="absolute left-0 top-32" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "./index.scss";
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
12
src/views/Home/type.ts
Normal file
12
src/views/Home/type.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
export enum LotteryStatus {
|
||||||
|
init = 0,
|
||||||
|
ready = 1,
|
||||||
|
running = 2,
|
||||||
|
end = 3,
|
||||||
|
}
|
||||||
|
export interface TargetType {
|
||||||
|
grid: any[]
|
||||||
|
helix: any[]
|
||||||
|
table: any[]
|
||||||
|
sphere: any[]
|
||||||
|
}
|
||||||
606
src/views/Home/useViewModel.ts
Normal file
606
src/views/Home/useViewModel.ts
Normal file
@@ -0,0 +1,606 @@
|
|||||||
|
import type { Material, Object3D } from 'three'
|
||||||
|
import type { TargetType } from './type'
|
||||||
|
import type { IPersonConfig } from '@/types/storeType'
|
||||||
|
import * as TWEEN from '@tweenjs/tween.js'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { PerspectiveCamera, Scene } from 'three'
|
||||||
|
import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
|
||||||
|
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
|
||||||
|
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { useToast } from 'vue-toast-notification'
|
||||||
|
import { useElementPosition, useElementStyle } from '@/hooks/useElement'
|
||||||
|
import i18n from '@/locales/i18n'
|
||||||
|
import useStore from '@/store'
|
||||||
|
import { selectCard } from '@/utils'
|
||||||
|
import { rgba } from '@/utils/color'
|
||||||
|
import { LotteryStatus } from './type'
|
||||||
|
import { confettiFire, createSphereVertices, createTableVertices, initTableData } from './util'
|
||||||
|
|
||||||
|
export function useViewModel() {
|
||||||
|
const toast = useToast()
|
||||||
|
// store里面存储的值
|
||||||
|
const { personConfig, globalConfig, prizeConfig } = useStore()
|
||||||
|
const {
|
||||||
|
getAllPersonList: allPersonList,
|
||||||
|
getNotPersonList: notPersonList,
|
||||||
|
getNotThisPrizePersonList: notThisPrizePersonList,
|
||||||
|
} = storeToRefs(personConfig)
|
||||||
|
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
|
||||||
|
const { getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
|
||||||
|
// three初始值
|
||||||
|
const ballRotationY = ref(0)
|
||||||
|
const containerRef = ref<HTMLElement>()
|
||||||
|
const canOperate = ref(true)
|
||||||
|
const cameraZ = ref(3000)
|
||||||
|
const scene = ref()
|
||||||
|
const camera = ref()
|
||||||
|
const renderer = ref()
|
||||||
|
const controls = ref()
|
||||||
|
const objects = ref<any[]>([])
|
||||||
|
const targets: TargetType = {
|
||||||
|
grid: [],
|
||||||
|
helix: [],
|
||||||
|
table: [],
|
||||||
|
sphere: [],
|
||||||
|
}
|
||||||
|
// 页面数据初始值
|
||||||
|
const currentStatus = ref<LotteryStatus>(LotteryStatus.init) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
|
||||||
|
const tableData = ref<any[]>([])
|
||||||
|
const luckyTargets = ref<any[]>([])
|
||||||
|
const luckyCardList = ref<number[]>([])
|
||||||
|
const luckyCount = ref(10)
|
||||||
|
const personPool = ref<IPersonConfig[]>([])
|
||||||
|
const intervalTimer = ref<any>(null)
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
const felidView = 40
|
||||||
|
const width = window.innerWidth
|
||||||
|
const height = window.innerHeight
|
||||||
|
const aspect = width / height
|
||||||
|
const nearPlane = 1
|
||||||
|
const farPlane = 10000
|
||||||
|
const WebGLoutput = containerRef.value
|
||||||
|
|
||||||
|
scene.value = new Scene()
|
||||||
|
camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane)
|
||||||
|
camera.value.position.z = cameraZ.value
|
||||||
|
renderer.value = new CSS3DRenderer()
|
||||||
|
renderer.value.setSize(width, height * 0.9)
|
||||||
|
renderer.value.domElement.style.position = 'absolute'
|
||||||
|
// 垂直居中
|
||||||
|
renderer.value.domElement.style.paddingTop = '50px'
|
||||||
|
renderer.value.domElement.style.top = '50%'
|
||||||
|
renderer.value.domElement.style.left = '50%'
|
||||||
|
renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
|
||||||
|
WebGLoutput!.appendChild(renderer.value.domElement)
|
||||||
|
|
||||||
|
controls.value = new TrackballControls(camera.value, renderer.value.domElement)
|
||||||
|
controls.value.rotateSpeed = 1
|
||||||
|
controls.value.staticMoving = true
|
||||||
|
controls.value.minDistance = 500
|
||||||
|
controls.value.maxDistance = 6000
|
||||||
|
controls.value.addEventListener('change', render)
|
||||||
|
|
||||||
|
const tableLen = tableData.value.length
|
||||||
|
for (let i = 0; i < tableLen; i++) {
|
||||||
|
let element = document.createElement('div')
|
||||||
|
element.className = 'element-card'
|
||||||
|
|
||||||
|
const number = document.createElement('div')
|
||||||
|
number.className = 'card-id'
|
||||||
|
number.textContent = tableData.value[i].uid
|
||||||
|
if (isShowAvatar.value)
|
||||||
|
number.style.display = 'none'
|
||||||
|
element.appendChild(number)
|
||||||
|
|
||||||
|
const symbol = document.createElement('div')
|
||||||
|
symbol.className = 'card-name'
|
||||||
|
symbol.textContent = tableData.value[i].name
|
||||||
|
if (isShowAvatar.value)
|
||||||
|
symbol.className = 'card-name card-avatar-name'
|
||||||
|
element.appendChild(symbol)
|
||||||
|
|
||||||
|
const detail = document.createElement('div')
|
||||||
|
detail.className = 'card-detail'
|
||||||
|
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
|
||||||
|
if (isShowAvatar.value)
|
||||||
|
detail.style.display = 'none'
|
||||||
|
element.appendChild(detail)
|
||||||
|
|
||||||
|
const avatar = document.createElement('img')
|
||||||
|
avatar.className = 'card-avatar'
|
||||||
|
avatar.src = tableData.value[i].avatar
|
||||||
|
avatar.alt = 'avatar'
|
||||||
|
avatar.style.width = '140px'
|
||||||
|
avatar.style.height = '140px'
|
||||||
|
if (!isShowAvatar.value)
|
||||||
|
avatar.style.display = 'none'
|
||||||
|
element.appendChild(avatar)
|
||||||
|
|
||||||
|
element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
|
||||||
|
const object = new CSS3DObject(element)
|
||||||
|
object.position.x = Math.random() * 4000 - 2000
|
||||||
|
object.position.y = Math.random() * 4000 - 2000
|
||||||
|
object.position.z = Math.random() * 4000 - 2000
|
||||||
|
scene.value.add(object)
|
||||||
|
|
||||||
|
objects.value.push(object)
|
||||||
|
}
|
||||||
|
// 创建横铺的界面
|
||||||
|
const tableVertices = createTableVertices({ tableData: tableData.value, rowCount: rowCount.value, cardSize: cardSize.value })
|
||||||
|
targets.table = tableVertices
|
||||||
|
// 创建球体
|
||||||
|
const sphereVertices = createSphereVertices({ objectsLength: objects.value.length })
|
||||||
|
targets.sphere = sphereVertices
|
||||||
|
window.addEventListener('resize', onWindowResize, false)
|
||||||
|
transform(targets.table, 1000)
|
||||||
|
render()
|
||||||
|
}
|
||||||
|
function render() {
|
||||||
|
if (renderer.value) {
|
||||||
|
renderer.value.render(scene.value, camera.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 位置变换
|
||||||
|
* @param targets 目标位置
|
||||||
|
* @param duration 持续时间
|
||||||
|
*/
|
||||||
|
function transform(targets: any[], duration: number) {
|
||||||
|
TWEEN.removeAll()
|
||||||
|
if (intervalTimer.value) {
|
||||||
|
clearInterval(intervalTimer.value)
|
||||||
|
intervalTimer.value = null
|
||||||
|
randomBallData('sphere')
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const objLength = objects.value.length
|
||||||
|
for (let i = 0; i < objLength; ++i) {
|
||||||
|
const object = objects.value[i]
|
||||||
|
const target = targets[i]
|
||||||
|
// console.log('target', i, target, targets)
|
||||||
|
new TWEEN.Tween(object.position)
|
||||||
|
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
|
||||||
|
.easing(TWEEN.Easing.Exponential.InOut)
|
||||||
|
.start()
|
||||||
|
|
||||||
|
new TWEEN.Tween(object.rotation)
|
||||||
|
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
|
||||||
|
.easing(TWEEN.Easing.Exponential.InOut)
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
if (luckyCardList.value.length) {
|
||||||
|
luckyCardList.value.forEach((cardIndex: any) => {
|
||||||
|
const item = objects.value[cardIndex]
|
||||||
|
useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
luckyTargets.value = []
|
||||||
|
luckyCardList.value = []
|
||||||
|
canOperate.value = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
|
||||||
|
new TWEEN.Tween({})
|
||||||
|
.to({}, duration * 2)
|
||||||
|
.onUpdate(render)
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
canOperate.value = true
|
||||||
|
resolve('')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 窗口大小改变时重新设置渲染器的大小
|
||||||
|
*/
|
||||||
|
function onWindowResize() {
|
||||||
|
camera.value.aspect = window.innerWidth / window.innerHeight
|
||||||
|
camera.value.updateProjectionMatrix()
|
||||||
|
|
||||||
|
renderer.value.setSize(window.innerWidth, window.innerHeight)
|
||||||
|
render()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [animation update all tween && controls]
|
||||||
|
*/
|
||||||
|
function animation() {
|
||||||
|
TWEEN.update()
|
||||||
|
if (controls.value) {
|
||||||
|
controls.value.update()
|
||||||
|
}
|
||||||
|
// 设置自动旋转
|
||||||
|
// 设置相机位置
|
||||||
|
requestAnimationFrame(animation)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 旋转的动画
|
||||||
|
* @param rotateY 绕y轴旋转圈数
|
||||||
|
* @param duration 持续时间，单位秒
|
||||||
|
*/
|
||||||
|
function rollBall(rotateY: number, duration: number) {
|
||||||
|
TWEEN.removeAll()
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
scene.value.rotation.y = 0
|
||||||
|
ballRotationY.value = Math.PI * rotateY * 1000
|
||||||
|
const rotateObj = new TWEEN.Tween(scene.value.rotation)
|
||||||
|
rotateObj
|
||||||
|
.to(
|
||||||
|
{
|
||||||
|
// x: Math.PI * rotateX * 1000,
|
||||||
|
x: 0,
|
||||||
|
y: ballRotationY.value,
|
||||||
|
// z: Math.PI * rotateZ * 1000
|
||||||
|
z: 0,
|
||||||
|
},
|
||||||
|
duration * 1000,
|
||||||
|
)
|
||||||
|
.onUpdate(render)
|
||||||
|
.start()
|
||||||
|
.onStop(() => {
|
||||||
|
resolve('')
|
||||||
|
})
|
||||||
|
.onComplete(() => {
|
||||||
|
resolve('')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 视野转回正面
|
||||||
|
*/
|
||||||
|
function resetCamera() {
|
||||||
|
new TWEEN.Tween(camera.value.position)
|
||||||
|
.to(
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 3000,
|
||||||
|
},
|
||||||
|
1000,
|
||||||
|
)
|
||||||
|
.onUpdate(render)
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
new TWEEN.Tween(camera.value.rotation)
|
||||||
|
.to(
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0,
|
||||||
|
},
|
||||||
|
1000,
|
||||||
|
)
|
||||||
|
.onUpdate(render)
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
canOperate.value = true
|
||||||
|
// camera.value.lookAt(scene.value.position)
|
||||||
|
camera.value.position.y = 0
|
||||||
|
camera.value.position.x = 0
|
||||||
|
camera.value.position.z = 3000
|
||||||
|
camera.value.rotation.x = 0
|
||||||
|
camera.value.rotation.y = 0
|
||||||
|
camera.value.rotation.z = -0
|
||||||
|
controls.value.reset()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 开始抽奖，由横铺变换为球体（或其他图形）
|
||||||
|
* @returns 随机抽取球数据
|
||||||
|
*/
|
||||||
|
/// <IP_ADDRESS>description 进入抽奖准备状态
|
||||||
|
async function enterLottery() {
|
||||||
|
if (!canOperate.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!intervalTimer.value) {
|
||||||
|
randomBallData()
|
||||||
|
}
|
||||||
|
if (patternList.value.length) {
|
||||||
|
for (let i = 0; i < patternList.value.length; i++) {
|
||||||
|
if (i < rowCount.value * 7) {
|
||||||
|
objects.value[patternList.value[i] - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canOperate.value = false
|
||||||
|
await transform(targets.sphere, 1000)
|
||||||
|
currentStatus.value = LotteryStatus.ready
|
||||||
|
rollBall(0.1, 2000)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description 开始抽奖
|
||||||
|
*/
|
||||||
|
function startLottery() {
|
||||||
|
if (!canOperate.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 验证是否已抽完全部奖项
|
||||||
|
if (currentPrize.value.isUsed || !currentPrize.value) {
|
||||||
|
toast.open({
|
||||||
|
message: i18n.global.t('error.personIsAllDone'),
|
||||||
|
type: 'warning',
|
||||||
|
position: 'top-right',
|
||||||
|
duration: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
|
||||||
|
// 验证抽奖人数是否还够
|
||||||
|
if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
|
||||||
|
toast.open({
|
||||||
|
message: i18n.global.t('error.personNotEnough'),
|
||||||
|
type: 'warning',
|
||||||
|
position: 'top-right',
|
||||||
|
duration: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
luckyCount.value = 10
|
||||||
|
// 自定义抽奖个数
|
||||||
|
|
||||||
|
let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
|
||||||
|
const customCount = currentPrize.value.separateCount
|
||||||
|
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
||||||
|
for (let i = 0; i < customCount.countList.length; i++) {
|
||||||
|
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
||||||
|
leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
luckyCount.value = leftover < luckyCount.value ? leftover : luckyCount.value
|
||||||
|
for (let i = 0; i < luckyCount.value; i++) {
|
||||||
|
if (personPool.value.length > 0) {
|
||||||
|
// 解决随机元素概率过于不均等问题
|
||||||
|
const randomIndex = Math.floor(Math.random() * (personPool.value.length - 1))
|
||||||
|
luckyTargets.value.push(personPool.value[randomIndex])
|
||||||
|
personPool.value.splice(randomIndex, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.open({
|
||||||
|
// message: `现在抽取${currentPrize.value.name} ${leftover}人`,
|
||||||
|
message: i18n.global.t('error.startDraw', { count: currentPrize.value.name, leftover }),
|
||||||
|
type: 'default',
|
||||||
|
position: 'top-right',
|
||||||
|
duration: 8000,
|
||||||
|
})
|
||||||
|
currentStatus.value = LotteryStatus.running
|
||||||
|
rollBall(10, 3000)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 停止抽奖，抽出幸运人
|
||||||
|
*/
|
||||||
|
async function stopLottery() {
|
||||||
|
if (!canOperate.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// clearInterval(intervalTimer.value)
|
||||||
|
// intervalTimer.value = null
|
||||||
|
canOperate.value = false
|
||||||
|
rollBall(0, 1)
|
||||||
|
|
||||||
|
const windowSize = { width: window.innerWidth, height: window.innerHeight }
|
||||||
|
luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
|
||||||
|
const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
|
||||||
|
luckyCardList.value.push(cardIndex)
|
||||||
|
const totalLuckyCount = luckyTargets.value.length
|
||||||
|
const item = objects.value[cardIndex]
|
||||||
|
const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
|
||||||
|
new TWEEN.Tween(item.position)
|
||||||
|
.to({
|
||||||
|
x: xTable,
|
||||||
|
y: yTable,
|
||||||
|
z: 1000,
|
||||||
|
}, 1200)
|
||||||
|
.easing(TWEEN.Easing.Exponential.InOut)
|
||||||
|
.onStart(() => {
|
||||||
|
item.element = useElementStyle(item.element, person, cardIndex, patternList.value, patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
|
||||||
|
})
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
canOperate.value = true
|
||||||
|
currentStatus.value = LotteryStatus.end
|
||||||
|
})
|
||||||
|
new TWEEN.Tween(item.rotation)
|
||||||
|
.to({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0,
|
||||||
|
}, 900)
|
||||||
|
.easing(TWEEN.Easing.Exponential.InOut)
|
||||||
|
.start()
|
||||||
|
.onComplete(() => {
|
||||||
|
confettiFire()
|
||||||
|
resetCamera()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 继续,意味着这抽奖作数，计入数据库
|
||||||
|
*/
|
||||||
|
async function continueLottery() {
|
||||||
|
if (!canOperate.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const customCount = currentPrize.value.separateCount
|
||||||
|
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
||||||
|
for (let i = 0; i < customCount.countList.length; i++) {
|
||||||
|
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
||||||
|
customCount.countList[i].isUsedCount += luckyCount.value
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
currentPrize.value.isUsedCount += luckyCount.value
|
||||||
|
luckyCount.value = 0
|
||||||
|
if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
|
||||||
|
currentPrize.value.isUsed = true
|
||||||
|
currentPrize.value.isUsedCount = currentPrize.value.count
|
||||||
|
}
|
||||||
|
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
|
||||||
|
prizeConfig.updatePrizeConfig(currentPrize.value)
|
||||||
|
await enterLottery()
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 放弃本次抽奖，回到初始状态
|
||||||
|
*/
|
||||||
|
function quitLottery() {
|
||||||
|
enterLottery()
|
||||||
|
currentStatus.value = LotteryStatus.init
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 随机替换卡片中的数据（不改变原有的值，只是显示）
|
||||||
|
* @param {string} mod 模式
|
||||||
|
*/
|
||||||
|
function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
|
||||||
|
// 两秒执行一次
|
||||||
|
intervalTimer.value = setInterval(() => {
|
||||||
|
// 产生随机数数组
|
||||||
|
const indexLength = 4
|
||||||
|
const cardRandomIndexArr: number[] = []
|
||||||
|
const personRandomIndexArr: number[] = []
|
||||||
|
for (let i = 0; i < indexLength; i++) {
|
||||||
|
// 解决随机元素概率过于不均等问题
|
||||||
|
const randomCardIndex = Math.floor(Math.random() * (tableData.value.length - 1))
|
||||||
|
const randomPersonIndex = Math.floor(Math.random() * (allPersonList.value.length - 1))
|
||||||
|
if (luckyCardList.value.includes(randomCardIndex)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
cardRandomIndexArr.push(randomCardIndex)
|
||||||
|
personRandomIndexArr.push(randomPersonIndex)
|
||||||
|
}
|
||||||
|
for (let i = 0; i < cardRandomIndexArr.length; i++) {
|
||||||
|
if (!objects.value[cardRandomIndexArr[i]]) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod, 'change')
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 键盘监听，快捷键操作
|
||||||
|
*/
|
||||||
|
function listenKeyboard(e: any) {
|
||||||
|
if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.keyCode === 27 && currentStatus.value === LotteryStatus.running) {
|
||||||
|
quitLottery()
|
||||||
|
}
|
||||||
|
if (e.keyCode !== 32) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
switch (currentStatus.value) {
|
||||||
|
case LotteryStatus.init:
|
||||||
|
enterLottery()
|
||||||
|
break
|
||||||
|
case LotteryStatus.ready:
|
||||||
|
startLottery()
|
||||||
|
break
|
||||||
|
case LotteryStatus.running:
|
||||||
|
stopLottery()
|
||||||
|
break
|
||||||
|
case LotteryStatus.end:
|
||||||
|
continueLottery()
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 清理资源，避免内存溢出
|
||||||
|
*/
|
||||||
|
function cleanup() {
|
||||||
|
clearInterval(intervalTimer.value)
|
||||||
|
intervalTimer.value = null
|
||||||
|
if (scene.value) {
|
||||||
|
scene.value.traverse((object: Object3D) => {
|
||||||
|
if ((object as any).material) {
|
||||||
|
if (Array.isArray((object as any).material)) {
|
||||||
|
(object as any).material.forEach((material: Material) => {
|
||||||
|
material.dispose()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
(object as any).material.dispose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ((object as any).geometry) {
|
||||||
|
(object as any).geometry.dispose()
|
||||||
|
}
|
||||||
|
if ((object as any).texture) {
|
||||||
|
(object as any).texture.dispose()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
scene.value.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (objects.value) {
|
||||||
|
objects.value.forEach((object) => {
|
||||||
|
if (object.element) {
|
||||||
|
object.element.remove()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
objects.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
if (controls.value) {
|
||||||
|
controls.value.removeEventListener('change')
|
||||||
|
controls.value.dispose()
|
||||||
|
}
|
||||||
|
// 移除所有事件监听
|
||||||
|
window.removeEventListener('resize', onWindowResize)
|
||||||
|
scene.value = null
|
||||||
|
camera.value = null
|
||||||
|
renderer.value = null
|
||||||
|
controls.value = null
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 设置默认人员列表
|
||||||
|
*/
|
||||||
|
function setDefaultPersonList() {
|
||||||
|
personConfig.setDefaultPersonList()
|
||||||
|
// 刷新页面
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
tableData.value = initTableData({ allPersonList: allPersonList.value, rowCount: rowCount.value })
|
||||||
|
init()
|
||||||
|
animation()
|
||||||
|
containerRef.value!.style.color = `${textColor}`
|
||||||
|
randomBallData()
|
||||||
|
window.addEventListener('keydown', listenKeyboard)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
cleanup()
|
||||||
|
})
|
||||||
|
clearInterval(intervalTimer.value)
|
||||||
|
intervalTimer.value = null
|
||||||
|
window.removeEventListener('keydown', listenKeyboard)
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
setDefaultPersonList,
|
||||||
|
startLottery,
|
||||||
|
continueLottery,
|
||||||
|
quitLottery,
|
||||||
|
containerRef,
|
||||||
|
stopLottery,
|
||||||
|
enterLottery,
|
||||||
|
tableData,
|
||||||
|
currentStatus,
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user