feat: new

2024-01-08 00:48:54 +08:00
parent 18c5429b58
commit bea54865ea
30 changed files with 1149 additions and 373 deletions
--- a/src/views/Home/LuckyThree.vue
+++ b/src/views/Home/LuckyThree.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, onMounted,computed,watch,toRef } from 'vue'
+// import { tableData2 as tableData } from './data'
+import { rgba } from '@/utils/color'
+
+import {filterData} from '@/utils'
+import * as THREE from 'three'
+import {
+    CSS3DRenderer, CSS3DObject
+} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
+import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import useStore from '@/store'
+
+const props=defineProps({
+    luckyPersonList:{
+        type:Array as ()=>Array<any>,
+        default:()=>{[]}
+    }
+})
+
+// const emits=defineEmits()=
+
+const globalConfig = useStore().globalConfig
+
+const { getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
+const tableData = computed(()=>{
+    console.log('pppppprops:',props.luckyPersonList)
+    const cloneData=toRef(props.luckyPersonList)
+    
+    console.log(props.luckyPersonList,cloneData.value)
+    const luckyList=filterData(cloneData.value,Math.floor(rowCount/2))
+    console.log('lucskskskskksks:',luckyList)
+    
+return luckyList
+})
+
+
+const luckyContainerRef = ref<HTMLElement>()
+
+const scene = ref()
+const camera = ref()
+const renderer = ref()
+const controls = ref()
+const objects = ref<any[]>([])
+
+const targets = {
+    table: <any[]>[],
+};
+
+
+const init = () => {
+    const felidView = 40;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const aspect = width / height;
+    const nearPlane = 1;
+    const farPlane = 10000;
+    const WebGLoutput = luckyContainerRef.value
+
+    scene.value = new THREE.Scene();
+    camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
+    camera.value.position.z = 3000;
+
+    renderer.value = new CSS3DRenderer()
+    renderer.value.setSize(width, height)
+    renderer.value.domElement.style.position = 'absolute';
+    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++) {
+        const element = document.createElement('div');
+        element.className = 'lucky-element-card';
+        // element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+        element.style.backgroundColor = rgba(luckyCardColor, Math.random() * 0.5 + 0.25)
+        element.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
+        element.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
+        // hover style
+        element.addEventListener('mouseover', function () {
+            this.style.border = `1px solid ${rgba(luckyCardColor, 0.75)}`
+            this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.75)}`
+        })
+        element.addEventListener('mouseout', function () {
+            this.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
+            this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
+        })
+        element.style.width = `${cardSize.width*2}px`;
+        element.style.height = `${cardSize.height*2}px`;
+
+        // element.style.color=localTheme.detail.primary
+
+        const number = document.createElement('div');
+        number.className = 'lucky-card-id';
+        // number.textContent = (i / 5 + 1).toString();
+        number.textContent = tableData.value[i].uid;
+        number.style.fontSize = `${textSize}px`;
+        element.appendChild(number);
+
+        const symbol = document.createElement('div');
+        symbol.className = 'lucky-card-name';
+        symbol.textContent = tableData.value[i].name;
+        symbol.style.textShadow = `0 0 12px ${rgba(luckyCardColor, 0.95)}`
+        symbol.style.fontSize = `${textSize*2}px`;
+        element.appendChild(symbol);
+
+        const detail = document.createElement('div');
+        detail.className = 'lucky-card-detail';
+        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
+        detail.style.fontSize = `${textSize}px`;
+        element.appendChild(detail);
+
+        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);
+    }
+
+    createTableVertices();
+
+    function createTableVertices() {
+        const tableLen = tableData.value.length;
+
+        for (let i = 0; i < tableLen; i++) {
+            const object = new THREE.Object3D();
+
+            object.position.x = tableData.value[i].x * (cardSize.width*2 + 40) - rowCount * 90;
+            object.position.y = -tableData.value[i].y * (cardSize.height*2 + 20) + 1000;
+            object.position.z = 0;
+
+            targets.table.push(object);
+        }
+    }
+
+    window.addEventListener('resize', onWindowResize, false);
+    transform(targets.table, 2000)
+    render();
+}
+
+const transform = (targets: any[], duration: number) => {
+    TWEEN.removeAll();
+    const objLength = objects.value.length;
+    for (let i = 0; i < objLength; ++i) {
+        let object = objects.value[i];
+        let target = targets[i];
+        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();
+    }
+
+    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+    new TWEEN.Tween({})
+        .to({}, duration * 2)
+        .onUpdate(render)
+        .start();
+    // 整体自动旋转
+}
+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();
+    controls.value.update();
+    // 设置自动旋转
+    // console.log('animation',controls.value.target);
+    // 设置相机位置
+    requestAnimationFrame(animation);
+}
+
+
+function render() {
+    renderer.value.render(scene.value, camera.value);
+}
+
+const submit=()=>{
+    tableData.value.length=0;
+}
+onMounted(() => {
+});
+
+watch(()=>props.luckyPersonList,()=>{
+    luckyContainerRef.value!.style.zIndex='100'
+    init();
+    animation();
+    luckyContainerRef.value!.style.color = `${textColor}`
+
+    console.log('tableData',tableData.value)
+},{deep:true})
+
+</script>
+
+<template>
+<div class="absolute top-0 w-full h-full bg-gray-400/10 -z-50" ref="luckyContainerRef">
+    <button class="btn glass" @click="submit">确定</button>
+</div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/views/Home/PlayMusic.vue
+++ b/src/views/Home/PlayMusic.vue
@@ -1,75 +0,0 @@
-<script setup lang='ts'>
-import { ref, onMounted, onUnmounted } from 'vue'
-import useStore from '@/store';
-import localforage from 'localforage'
-
-const audioDbStore = localforage.createInstance({
-    name: 'audioStore'
-})
-
-const audio = ref(new Audio())
-const currentMusic = ref<any>()
-const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList } = globalConfig;
-const localMusicListValue = ref(localMusicList)
-
-const play = async (item: any,skip=false) => {
-    if (!audio.value.paused&&!skip) {
-        audio.value.pause()
-
-        return
-    }
-    let audioUrl = ''
-    if (!item.url) {
-        return
-    }
-    if (item.url == 'Storage') {
-        audioUrl = await audioDbStore.getItem(item.name) as string
-    }
-    else {
-        audioUrl = item.url
-    }
-    audio.value.pause()
-    audio.value.src = audioUrl
-
-    audio.value.currentTime = 0
-    audio.value.play()
-}
-
-const nextPlay = () => {
-    // 播放下一首
-    if (localMusicListValue.value.length > 1) {
-        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name)
-        index++
-        if (index >= localMusicListValue.value.length) {
-            index = 0
-        }
-        currentMusic.value = localMusicListValue.value[index]
-        play(currentMusic.value,true)
-    }
-}
-// 监听播放成后开始下一首
-const onPlayEnd = () => {
-    audio.value.addEventListener('ended', nextPlay)
-}
-
-onMounted(() => {
-    currentMusic.value = localMusicListValue.value[0]
-    onPlayEnd()
-})
-onUnmounted(() => {
-    audio.value.removeEventListener('ended', nextPlay)
-})
-
-</script>
-
-<template>
-    <div class="flex gap-3">
-        <div class="bg-red-300 cursor-pointer" @click="play(currentMusic)">
-            播放/暂停
-        </div>
-        <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div>
-    </div>
-</template>
-
-<style lang='scss' scoped></style>
--- a/src/views/Home/PrizeList.vue
+++ b/src/views/Home/PrizeList.vue
@@ -1,11 +1,23 @@
 <script setup lang='ts'>
-import {ref} from 'vue'
-import {storeToRefs} from 'pinia'
+import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import useStore from '@/store'

-const prizeConfig=useStore().prizeConfig
-const {getPrizeConfig:localPrizeList}=storeToRefs(prizeConfig)
+const prizeConfig = useStore().prizeConfig
+const globalConfig = useStore().globalConfig
+const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+const {getIsShowPrizeList:isShowPrizeList}= storeToRefs(globalConfig)
+const prizeListRef = ref()
+const prizeListContainerRef = ref()
+// 获取prizeListRef高度
+const getPrizeListHeight = () => {
+    let height=200;
+    if(prizeListRef.value){
+     height = (prizeListRef.value as HTMLElement).offsetHeight}

+    return height
+}
+const prizeShow = ref(structuredClone(isShowPrizeList.value))

 const delAll = () => {
    prizeConfig.deleteAllPrizeConfig()
@@ -18,20 +30,204 @@ const resetDefault = () => {
 const print = () => {
    console.log(prizeConfig)
 }
+const addTemporaryPrize = () => {
+    console.log('addTemporaryPrize')
+}
+onMounted(() => {
+    prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'
+})
 </script>

 <template>
-<div>
-    
-    <button class="btn btn-secondary" @click="delAll">全部删除</button>
-    
-    <button class="btn btn-secondary" @click="resetDefault">默认</button>
+    <div class="flex items-center">
+        <div ref="prizeListContainerRef">
+            <transition name="prize-list" :appear="true">
+                <div v-if="prizeShow" class="flex items-center">
+                    <ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">

-    
-    <button class="btn btn-secondary" @click="print">打印</button>
-</div>
+                        <li v-for="item in localPrizeList" :key="item.id"
+                            :class="currentPrize.id == item.id ? 'current-prize' : ''">
+                            <div
+                                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100">
+                                <div v-if="item.isUsed" class="absolute w-full h-full bg-gray-800/90 item-mask z-200 rounded-xl"></div>
+                                <figure class="w-10 h-10 rounded-xl">
+                                    <img :src="item.picture.url" alt="Shoes" class="object-cover h-full rounded-xl" />
+                                </figure>
+                                <div class="items-center text-center card-body">
+                                    <h2 class="card-title">{{ item.name }}</h2>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="flex flex-col gap-3">
+                        <div class="tooltip" data-tip="抽奖">
+                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+                                @click="prizeShow = !prizeShow">
+                                <svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
+                            </div>
+                        </div>
+                        <div class="tooltip" data-tip="添加抽奖">
+                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+                                @click="addTemporaryPrize">
+                                <svg-icon name="add" class="w-full h-full"></svg-icon>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </div>
+
+        <transition name="prize-operate" :appear="true">
+            <div class="tooltip" data-tip="抽奖" v-show="!prizeShow">
+                <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+                    @click="prizeShow = !prizeShow">
+                    <svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
+                </div>
+            </div>
+        </transition>
+    </div>
 </template>

 <style lang='scss' scoped>
+.prize-list-enter-active {
+    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}

-</style>
+.prize-list-leave-active {
+    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-operate-enter-active {
+    // 延时显示
+    animation: show-operate 0.6s;
+    -webkit-animation: show-operate 0.6s;
+}
+
+// .prize-operate-leave-active {
+//     -webkit-animation-delay: 0.5s;
+//     -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+//     animation-delay: 0.5s;
+//     animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+// }
+.current-prize {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    isolation: isolate;
+
+    border-radius: 20px;
+    padding: 3px;
+}
+
+.current-prize::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 400%;
+    height: 100%;
+    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
+    background-size: 25% 100%;
+    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
+    // animation-play-state: paused;
+    translate: -5% 0%;
+    transition: translate 0.25s ease-out;
+
+    animation-play-state: running;
+    transition-duration: 0.75s;
+    translate: 0% 0%;
+}
+
+
+.current-prize::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    z-index: -1;
+}
+
+@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
+    to {
+        transform: translateX(-25%);
+    }
+}
+
+@-webkit-keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(30px);
+        transform: translateX(30px);
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(-200px);
+        transform: translateX(-200px);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@-webkit-keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px);
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-400px);
+        transform: translateX(-400px);
+    }
+}
+
+@-webkit-keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}</style>
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -2,9 +2,11 @@
 import { ref, onMounted } from 'vue'
 // import { tableData2 as tableData } from './data'
 import { rgba } from '@/utils/color'
-import PlayMusic from './PlayMusic.vue'
+// import PlayMusic from './PlayMusic.vue'
 import PrizeList from './PrizeList.vue'
+import { useElementStyle } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
+import LuckyView from './LuckyThree.vue'
 import * as THREE from 'three'
 import {
    CSS3DRenderer, CSS3DObject
@@ -13,17 +15,22 @@ import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls
 import TWEEN from 'three/examples/jsm/libs/tween.module.js';
 import useStore from '@/store'

+
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-// const globalConfig = useStore().globalConfig
+const prizeConfig = useStore().prizeConfig

-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList, getTableRowCount: rowCount } = personConfig
-const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize } = globalConfig
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = personConfig
+const { getCurrentPrize: currentPrize } = prizeConfig
+const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
 const tableData = ref(
    alreadyPersonList.concat(notPersonList)
 )

+const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
+const ballRotationY = ref(0)
 const containerRef = ref<HTMLElement>()
+// const LuckyViewRef= ref()

 const scene = ref()
 const camera = ref()
@@ -38,6 +45,8 @@ const targets = {
    sphere: <any[]>[]
 };

+const luckyTargets = ref<any[]>([])
+const luckyCardList = ref<any[]>([])
 const init = () => {
    const felidView = 40;
    const width = window.innerWidth;
@@ -65,23 +74,25 @@ const init = () => {

    const tableLen = tableData.value.length
    for (let i = 0; i < tableLen; i++) {
-        const element = document.createElement('div');
+        let element = document.createElement('div');
        element.className = 'element-card';
        // element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
-        element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
-        element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-        element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
+        // element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+        // element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // element.style.width = `${cardSize.width}px`;
+        // element.style.height = `${cardSize.height}px`;
+        // element.addEventListener('mouseover', function () {
+        //     console.log(this)
+        //     this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
+        //     this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
+        // })
+        // element.addEventListener('mouseout', function () {
+        //     this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+        //     this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // })
        // hover style
-        element.addEventListener('mouseover', function () {
-            this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
-            this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
-        })
-        element.addEventListener('mouseout', function () {
-            this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-            this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
-        })
-        element.style.width = `${cardSize.width}px`;
-        element.style.height = `${cardSize.height}px`;
+

        // element.style.color=localTheme.detail.primary

@@ -89,22 +100,23 @@ const init = () => {
        number.className = 'card-id';
        // number.textContent = (i / 5 + 1).toString();
        number.textContent = tableData.value[i].uid;
-        number.style.fontSize = `${textSize * 0.5}px`;
+        // number.style.fontSize = `${textSize * 0.5}px`;
        element.appendChild(number);

        const symbol = document.createElement('div');
        symbol.className = 'card-name';
        symbol.textContent = tableData.value[i].name;
-        symbol.style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
-        symbol.style.fontSize = `${textSize}px`;
+        // symbol.style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
+        // symbol.style.fontSize = `${textSize}px`;
        element.appendChild(symbol);

        const detail = document.createElement('div');
        detail.className = 'card-detail';
        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
-        detail.style.fontSize = `${textSize * 0.5}px`;
+        // detail.style.fontSize = `${textSize * 0.5}px`;
        element.appendChild(detail);

+        element = useElementStyle(element, cardColor, cardSize, textSize)
        const object = new CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
@@ -178,7 +190,7 @@ const init = () => {
        }
    }
    window.addEventListener('resize', onWindowResize, false);
-    transform(targets.table, 2000)
+    transform(targets.table, 1000)
    render();
 }

@@ -198,7 +210,15 @@ const transform = (targets: any[], duration: number) => {
        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();
+            .start()
+            .onComplete(() => {
+                if (luckyCardList.value.length) {
+                    luckyCardList.value.forEach((item: any) => {
+                        return useElementStyle(item.element, cardColor, { width: cardSize.width, height: cardSize.height }, textSize)
+                    })
+                }
+                luckyCardList.value = [];
+            });
    }

    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
@@ -229,24 +249,95 @@ function animation() {
 }

 // // 自动旋转的动画
-function autoRotate() {
-   const rotateObj= new TWEEN.Tween(scene.value.rotation);
-   rotateObj
-      .to(
-        {
-          y: Math.PI * Math.random() * 1000,
-          x:Math.PI*Math.random()*1000,
-        },
-        3000 * 1000
-      )
-      .onUpdate(render)
-     .start();
+function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore' = 'default') {
+    TWEEN.removeAll();
+
+    return new Promise((resolve, reject) => {
+        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(() => {
+                scene.value.rotation.y = 0;
+                resolve('')
+            })
+            .onComplete(() => {
+                resolve('')
+            })
+    })
 }


 function render() {
    renderer.value.render(scene.value, camera.value);
 }
+const enterLottery = async () => {
+    transform(targets.sphere, 1000)
+    currentStatus.value = 1
+    // setTimeout(() => {
+    //     rollBall(0.1,3000)
+    // }, 3000)
+}
+// 开始抽奖
+const startLottery = () => {
+    currentStatus.value = 2
+    rollBall(10, 3000)
+}
+
+const stopLottery = async () => {
+    TWEEN.removeAll();
+    rollBall(0, 1)
+    // scene正面
+    currentStatus.value = 0
+    // 从notPersonList随机抽取currentPrize.count个
+    const notPersonListLength = notPersonList.length;
+    for (let i = 0; i < currentPrize.count; i++) {
+        if (notPersonListLength > 0) {
+            const randomIndex = Math.floor(Math.random() * notPersonListLength);
+            luckyTargets.value.push(notPersonList[randomIndex])
+
+            let LuckyCard = objects.value[randomIndex]
+            console.log(LuckyCard)
+            LuckyCard.element = useElementStyle(LuckyCard.element, '#ffd700', { width: cardSize.width * 2, height: cardSize.height * 2 }, textSize * 2, 'lucky')
+            // 重新设置位置
+            LuckyCard.position.x = 100
+            LuckyCard.position.y = 300
+            LuckyCard.position.z = 0
+            // LuckyCard.rotation.x = 0
+            // LuckyCard.rotation.y = 0
+            // LuckyCard.rotation.z = 0
+            new TWEEN.Tween(LuckyCard.position)
+                .to({
+                    x: LuckyCard.x,
+                    y: LuckyCard.y,
+                    z: 1200
+                }, 1000)
+                .start()
+            new TWEEN.Tween(LuckyCard.rotation)
+                .to({
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }, 1000)
+                .start()
+            luckyCardList.value.push(LuckyCard)
+        }
+    }
+
+    personConfig.addAlreadyPersonList(luckyTargets.value)
+}

 onMounted(() => {
    init();
@@ -260,18 +351,22 @@ onMounted(() => {
    <div id="container" ref="containerRef">
        <!-- 选中菜单结构 start-->
        <div id="menu">
+            <button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button>
+
+            <button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button>
+
+            <button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button>
            <button id="table" @click="transform(targets.table, 2000)">TABLE</button>
-            <button id="sphere" @click="transform(targets.sphere, 2000)">SPHERE</button>
            <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>

-            <button  @click="autoRotate">旋转</button>
        </div>
        <!-- end -->
    </div>
-
    <StarsBackground></StarsBackground>
-    <PlayMusic class="absolute bottom-10 right-10"></PlayMusic>
-    <PrizeList class="absolute bottom-20 right-10"></PrizeList>
+
+    <!-- <LuckyView :luckyPersonList="luckyTargets"  ref="LuckyViewRef"></LuckyView> -->
+    <!-- <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic> -->
+    <PrizeList class="absolute left-0 top-32"></PrizeList>
 </template>

 <style scoped lang="scss">
@@ -283,21 +378,4 @@ onMounted(() => {
    text-align: center;
    font-size: 32px;
 }
-
-button {
-    border: none;
-    background-color: transparent;
-    color: rgba(127, 255, 255, 0.75);
-    padding: 12px 24px;
-    cursor: pointer;
-    outline: 1px solid rgba(127, 255, 255, 0.75);
-}
-
-button:hover {
-    background-color: rgba(127, 255, 255, 0.5);
-}
-
-button:active {
-    background-color: rgba(127, 255, 255, 0.75);
-}
 </style>