refactor: 提取组件，优化代码
This commit is contained in:
LOG1997
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@@ -29,9 +29,6 @@ importers:
|
||||
localforage:
|
||||
specifier: ^1.10.0
|
||||
version: 1.10.0
|
||||
lodash-es:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
markdown-it:
|
||||
specifier: ^14.1.0
|
||||
version: 14.1.0
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import PlayMusic from '@/components/PlayMusic/index.vue'
|
||||
import useStore from '@/store'
|
||||
import { themeChange } from '@/utils'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import PlayMusic from '@/components/PlayMusic/index.vue'
|
||||
import useStore from '@/store'
|
||||
import { themeChange } from '@/utils'
|
||||
|
||||
const { t } = useI18n()
|
||||
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']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
StarsBackground: typeof import('./components/StarsBackground/index.vue')['default']
|
||||
SvgIcon: typeof import('./components/SvgIcon/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>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "./index.scss";
|
||||
@use "./index.scss";
|
||||
</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">
|
||||
import type { Material, Object3D } from 'three'
|
||||
import type { IPersonConfig } from '@/types/storeType'
|
||||
import * as TWEEN from '@tweenjs/tween.js'
|
||||
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 { selectCard } from '@/utils'
|
||||
import { rgba } from '@/utils/color'
|
||||
import HeaderTitle from './components/HeaderTitle/index.vue'
|
||||
import OptionButton from './components/OptionsButton/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'
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
const personConfig = useStore().personConfig
|
||||
const viewModel = useViewModel()
|
||||
const { setDefaultPersonList, tableData, currentStatus, enterLottery, stopLottery, containerRef, startLottery, continueLottery, quitLottery } = viewModel
|
||||
const globalConfig = useStore().globalConfig
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
|
||||
const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList,
|
||||
} = 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)
|
||||
})
|
||||
const { getTopTitle: topTitle, getTextColor: textColor, getTextSize: textSize, getBackground: homeBackground } = storeToRefs(globalConfig)
|
||||
</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>
|
||||
<HeaderTitle
|
||||
:table-data="tableData"
|
||||
:text-size="textSize"
|
||||
:text-color="textColor"
|
||||
:top-title="topTitle"
|
||||
:set-default-person-list="setDefaultPersonList"
|
||||
/>
|
||||
<div id="container" ref="containerRef" class="3dContainer">
|
||||
<!-- 选中菜单结构 start -->
|
||||
<div id="menu">
|
||||
<button v-if="currentStatus === LotteryStatus.init && tableData.length > 0" class="btn-end " @click="enterLottery">
|
||||
{{ t('button.enterLottery') }}
|
||||
</button>
|
||||
|
||||
<div v-if="currentStatus === LotteryStatus.ready" class="start">
|
||||
<button class="btn-start" @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-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 -->
|
||||
<OptionButton
|
||||
:current-status="currentStatus"
|
||||
:table-data="tableData"
|
||||
:enter-lottery="enterLottery"
|
||||
:start-lottery="startLottery"
|
||||
:stop-lottery="stopLottery"
|
||||
:continue-lottery="continueLottery"
|
||||
:quit-lottery="quitLottery"
|
||||
/>
|
||||
</div>
|
||||
<StarsBackground :home-background="homeBackground" />
|
||||
<PrizeList class="absolute left-0 top-32" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</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