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

feat: new

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-08 00:48:54 +08:00
parent 18c5429b58
commit bea54865ea
30 changed files with 1149 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>