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

fix: 连续点击按钮数据报错

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-19 22:02:05 +08:00
parent 44a35a504f
commit 9a44f2819e
3 changed files with 79 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/store/prizeConfig.ts
View File

@@ -83,15 +83,9 @@ return state.prizeConfig.prizeList;
}, },
// 更新奖项数据 // 更新奖项数据
updatePrizeConfig(prizeConfigItem: IPrizeConfig) { updatePrizeConfig(prizeConfigItem: IPrizeConfig) {
// const index = this.prizeConfig.prizeList.findIndex(item => item.id === prizeConfigItem.id); const prizeListLength=this.prizeConfig.prizeList.length;
// this.prizeConfig.prizeList[index] = prizeConfigItem; if(prizeConfigItem.isUsed&&prizeListLength){
// if(prizeConfigItem.isUsed&&index+1<this.prizeConfig.prizeList.length){ for(let i=0;i<prizeListLength;i++){
// // 设置下一个为currentPrize
// this.setCurrentPrize(this.prizeConfig.prizeList[index+1]);
// }
if(prizeConfigItem.isUsed&&this.prizeConfig.prizeList.length){
// 设置下一个为currentPrize
for(let i=0;i<this.prizeConfig.prizeList.length;i++){
if(!this.prizeConfig.prizeList[i].isUsed){ if(!this.prizeConfig.prizeList[i].isUsed){
this.setCurrentPrize(this.prizeConfig.prizeList[i]); this.setCurrentPrize(this.prizeConfig.prizeList[i]);
break; break;

1
src/views/Home/PrizeList.vue
View File

@@ -44,7 +44,6 @@ const submitTemporaryPrize = () => {
temporaryPrize.value.isShow = true temporaryPrize.value.isShow = true
temporaryPrize.value.id=new Date().getTime().toString() temporaryPrize.value.id=new Date().getTime().toString()
prizeConfig.setCurrentPrize(temporaryPrize.value) prizeConfig.setCurrentPrize(temporaryPrize.value)
prizeConfig.setCurrentPrize(temporaryPrize.value)
} }
onMounted(() => { onMounted(() => {
prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px' prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'

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

@@ -5,7 +5,7 @@ import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import StarsBackground from '@/components/StarsBackground/index.vue' import StarsBackground from '@/components/StarsBackground/index.vue'
import confetti from 'canvas-confetti' import confetti from 'canvas-confetti'
import { filterData, selectCard } from '@/utils' import { filterData, selectCard } from '@/utils'
import {rgba} from '@/utils/color' import { rgba } from '@/utils/color'
import { IPersonConfig } from '@/types/storeType' import { IPersonConfig } from '@/types/storeType'
// import * as THREE from 'three' // import * as THREE from 'three'
import { Scene, PerspectiveCamera, Object3D, Vector3 } from 'three' import { Scene, PerspectiveCamera, Object3D, Vector3 } from 'three'
@@ -29,9 +29,9 @@ const personConfig = useStore().personConfig
const globalConfig = useStore().globalConfig const globalConfig = useStore().globalConfig
const prizeConfig = useStore().prizeConfig const prizeConfig = useStore().prizeConfig
const { getAllPersonList: allPersonList, getNotPersonList: notPersonList,getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig) const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig)
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig) const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
const { getTopTitle: topTitle, getCardColor: cardColor,getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig) const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
const tableData = ref<any[]>([]) const tableData = ref<any[]>([])
// const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value)))) // const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
@@ -57,7 +57,7 @@ const targets = {
const luckyTargets = ref<any[]>([]) const luckyTargets = ref<any[]>([])
const luckyCardList = ref<number[]>([]) const luckyCardList = ref<number[]>([])
let luckyCount = ref(10) let luckyCount = ref(10)
const personPool=ref<IPersonConfig[]>([]) const personPool = ref<IPersonConfig[]>([])
const intervalTimer = ref<any>(null) const intervalTimer = ref<any>(null)
// const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value))) // const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))
@@ -129,7 +129,7 @@ const init = () => {
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`; detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
element.appendChild(detail); element.appendChild(detail);
element = useElementStyle(element, tableData.value[i],i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value) element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
const object = new CSS3DObject(element); const object = new CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000; object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000; object.position.y = Math.random() * 4000 - 2000;
@@ -209,13 +209,13 @@ const init = () => {
const transform = (targets: any[], duration: number) => { const transform = (targets: any[], duration: number) => {
TWEEN.removeAll(); TWEEN.removeAll();
if(intervalTimer.value){ if (intervalTimer.value) {
clearInterval(intervalTimer.value); clearInterval(intervalTimer.value);
intervalTimer.value=null intervalTimer.value = null
randomBallData('sphere') randomBallData('sphere')
} }
return new Promise((resolve) => { return new Promise((resolve) => {
const objLength = objects.value.length; const objLength = objects.value.length;
for (let i = 0; i < objLength; ++i) { for (let i = 0; i < objLength; ++i) {
let object = objects.value[i]; let object = objects.value[i];
@@ -233,9 +233,9 @@ return new Promise((resolve) => {
.start() .start()
.onComplete(() => { .onComplete(() => {
if (luckyCardList.value.length) { if (luckyCardList.value.length) {
luckyCardList.value.forEach((cardIndex:any)=>{ luckyCardList.value.forEach((cardIndex: any) => {
const item = objects.value[cardIndex] const item = objects.value[cardIndex]
useElementStyle(item.element, {} as any,i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value,'sphere') useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
}) })
} }
luckyTargets.value = []; luckyTargets.value = [];
@@ -255,8 +255,6 @@ return new Promise((resolve) => {
resolve('') resolve('')
}); });
}) })
// 整体自动旋转
} }
function onWindowResize() { function onWindowResize() {
camera.value.aspect = window.innerWidth / window.innerHeight camera.value.aspect = window.innerWidth / window.innerHeight
@@ -303,7 +301,6 @@ function rollBall(rotateY: number, duration: number) {
}) })
.onComplete(() => { .onComplete(() => {
resolve('') resolve('')
canOperate.value = true
}) })
}) })
} }
@@ -333,7 +330,7 @@ function resetCamera() {
.onUpdate(render) .onUpdate(render)
.start() .start()
.onComplete(() => { .onComplete(() => {
canOperate.value = true // 相机恢复原位 canOperate.value = true
// camera.value.lookAt(scene.value.position) // camera.value.lookAt(scene.value.position)
camera.value.position.y = 0 camera.value.position.y = 0
camera.value.position.x = 0 camera.value.position.x = 0
@@ -356,11 +353,11 @@ const enterLottery = async () => {
if (!intervalTimer.value) { if (!intervalTimer.value) {
randomBallData() randomBallData()
} }
if(patternList.value.length){ if (patternList.value.length) {
patternList.value.forEach((item:number)=>{ patternList.value.forEach((item: number) => {
objects.value[item-1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25) objects.value[item - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
}) })
} }
canOperate.value = false canOperate.value = false
await transform(targets.sphere, 1000) await transform(targets.sphere, 1000)
currentStatus.value = 1 currentStatus.value = 1
@@ -372,7 +369,7 @@ const startLottery = () => {
return return
} }
// 验证是否已抽完全部奖项 // 验证是否已抽完全部奖项
if (currentPrize.value.isUsed) { if (currentPrize.value.isUsed||!currentPrize.value) {
toast.open({ toast.open({
message: '抽奖抽完了', message: '抽奖抽完了',
type: 'warning', type: 'warning',
@@ -382,9 +379,9 @@ const startLottery = () => {
return return
} }
personPool.value=currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
// 验证抽奖人数是否还够 // 验证抽奖人数是否还够
if (personPool.value.length < currentPrize.value.count-currentPrize.value.isUsedCount) { if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
toast.open({ toast.open({
message: '抽奖人数不够', message: '抽奖人数不够',
type: 'warning', type: 'warning',
@@ -405,11 +402,10 @@ const stopLottery = async () => {
clearInterval(intervalTimer.value) clearInterval(intervalTimer.value)
intervalTimer.value = null intervalTimer.value = null
canOperate.value = false canOperate.value = false
// TWEEN.removeAll();
rollBall(0, 1) rollBall(0, 1)
// 抽奖池是否为全体人员 // 抽奖池是否为全体人员
// personPool=currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
// 每次最多抽十个 // 每次最多抽十个
luckyCount.value = 10
const leftover = currentPrize.value.count - currentPrize.value.isUsedCount const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
if (personPool.value.length < leftover) { if (personPool.value.length < leftover) {
@@ -443,9 +439,13 @@ const stopLottery = async () => {
}, 1200) }, 1200)
.easing(TWEEN.Easing.Exponential.InOut) .easing(TWEEN.Easing.Exponential.InOut)
.onStart(() => { .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') 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() .start()
.onComplete(() => {
canOperate.value = true
currentStatus.value = 3
})
new TWEEN.Tween(item.rotation) new TWEEN.Tween(item.rotation)
.to({ .to({
x: 0, x: 0,
@@ -459,23 +459,21 @@ const stopLottery = async () => {
resetCamera() resetCamera()
}) })
}) })
currentStatus.value = 3
} }
// 继续 // 继续
const continueLottery = async () => { const continueLottery = async () => {
if (!canOperate.value) {
return
}
currentPrize.value.isUsedCount += luckyCount.value currentPrize.value.isUsedCount += luckyCount.value
luckyCount.value = 0
if (currentPrize.value.isUsedCount >= currentPrize.value.count) { if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
currentPrize.value.isUsed = true currentPrize.value.isUsed = true
currentPrize.value.isUsedCount = currentPrize.value.count
} }
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value) personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
prizeConfig.updatePrizeConfig(currentPrize.value) prizeConfig.updatePrizeConfig(currentPrize.value)
prizeConfig.setCurrentPrize(currentPrize.value)
luckyCount.value = 10
await enterLottery() await enterLottery()
// startLottery()
currentStatus.value = 1
} }
const quitLottery = () => { const quitLottery = () => {
enterLottery() enterLottery()
@@ -544,7 +542,7 @@ const setDefaultPersonList = () => {
window.location.reload() window.location.reload()
} }
// 随机替换数据 // 随机替换数据
const randomBallData = (mod: 'default' | 'lucky' |'sphere'='default') => { const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = 'default') => {
// 两秒执行一次 // 两秒执行一次
intervalTimer.value = setInterval(() => { intervalTimer.value = setInterval(() => {
// 产生随机数数组 // 产生随机数数组
@@ -552,7 +550,7 @@ const randomBallData = (mod: 'default' | 'lucky' |'sphere'='default') => {
const personRandomIndexArr = [Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1))] const personRandomIndexArr = [Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1))]
for (let i = 0; i < cardRandomIndexArr.length; i++) { for (let i = 0; i < cardRandomIndexArr.length; i++) {
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) 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)
} }
// const randomCardIndex = Math.round(Math.random() * (tableData.value.length - 1)) // const randomCardIndex = Math.round(Math.random() * (tableData.value.length - 1))
// const randomPersonIndex = Math.round(Math.random() * (allPersonList.value.length - 1)) // const randomPersonIndex = Math.round(Math.random() * (allPersonList.value.length - 1))
@@ -606,9 +604,9 @@ onUnmounted(() => {
</div> </div>
</button> </button>
</div> </div>
<button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button> <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
<div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop"> <div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
<div class="start"> <div class="start">
<button class="btn-start" @click="continueLottery"><strong>继续！</strong> <button class="btn-start" @click="continueLottery"><strong>继续！</strong>
@@ -659,10 +657,12 @@ onUnmounted(() => {
margin: 0 auto; margin: 0 auto;
font-size: 32px; font-size: 32px;
} }
.header-title{
.header-title {
-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; -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; animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
} }
.start { .start {
// 居中 // 居中
display: flex; display: flex;
@@ -886,7 +886,7 @@ strong {
position: relative; position: relative;
transition: all 0.3s; transition: all 0.3s;
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; -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; animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
} }
.btn-end::after { .btn-end::after {
@@ -951,38 +951,42 @@ strong {
transform: scale(1); transform: scale(1);
} }
} }
@-webkit-keyframes tracking-in-expand-fwd { @-webkit-keyframes tracking-in-expand-fwd {
0% { 0% {
letter-spacing: -0.5em; letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px); -webkit-transform: translateZ(-700px);
transform: translateZ(-700px); transform: translateZ(-700px);
opacity: 0; opacity: 0;
} }
40% {
opacity: 0.6; 40% {
} opacity: 0.6;
100% { }
-webkit-transform: translateZ(0);
transform: translateZ(0); 100% {
opacity: 1; -webkit-transform: translateZ(0);
} transform: translateZ(0);
opacity: 1;
}
} }
@keyframes tracking-in-expand-fwd { @keyframes tracking-in-expand-fwd {
0% { 0% {
letter-spacing: -0.5em; letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px); -webkit-transform: translateZ(-700px);
transform: translateZ(-700px); transform: translateZ(-700px);
opacity: 0; opacity: 0;
} }
40% {
opacity: 0.6; 40% {
} opacity: 0.6;
100% { }
-webkit-transform: translateZ(0);
transform: translateZ(0); 100% {
opacity: 1; -webkit-transform: translateZ(0);
} transform: translateZ(0);
opacity: 1;
}
} }
</style> </style>