|
|
|
@ -1,10 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="homepage"> |
|
|
|
<img src="../../../assets/qilin.webp" alt="麒麟" class="hllogo" /> |
|
|
|
<div class="music" @click="musicPlay()"> |
|
|
|
<audio id="music" :src="musicFile" class="music-item" loop></audio> |
|
|
|
<div id="musicBox" class="music-box" title="播放/暂停背景音乐">Music</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 添加worldcup音频元素 --> |
|
|
|
<audio ref="worldcupAudioRef" :src="worldcup" preload="auto"></audio> |
|
|
|
<!-- 添加dong音频元素 --> |
|
|
|
<audio ref="dongAudioRef" :src="dong" preload="auto"></audio> |
|
|
|
|
|
|
|
<div ref="qipaoTextRef" class="qipao">{{ qipaoText }}</div> |
|
|
|
|
|
|
|
@ -92,12 +93,12 @@ |
|
|
|
</div> |
|
|
|
</el-scrollbar> |
|
|
|
<div class="tableFoot"> |
|
|
|
<span><</span> |
|
|
|
1 |
|
|
|
<span>></span> |
|
|
|
<span @click="leftPage()" style="cursor: pointer"><</span> |
|
|
|
{{ currentPage }} |
|
|
|
<span @click="rightPage()" style="cursor: pointer">></span> |
|
|
|
<span class="tableTotalPage"> |
|
|
|
共 |
|
|
|
<span>10</span> |
|
|
|
<span>{{ totalPage }}</span> |
|
|
|
页 |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
@ -114,22 +115,6 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <img |
|
|
|
src="../../../assets/img/展开.png" |
|
|
|
alt="向右" |
|
|
|
@click="rightPage()" |
|
|
|
class="rightPage" |
|
|
|
id="rightPage" |
|
|
|
/> |
|
|
|
|
|
|
|
<img |
|
|
|
src="../../../assets/img/展开.png" |
|
|
|
alt="向左" |
|
|
|
@click="leftPage()" |
|
|
|
class="leftPage" |
|
|
|
id="leftPage" |
|
|
|
/> --> |
|
|
|
|
|
|
|
<div id="menu"> |
|
|
|
<div id="enter" ref="enterRef" @click="enterLottery()" class="btn"> |
|
|
|
进入抽奖 |
|
|
|
@ -156,6 +141,8 @@ import { NUMBER_MATRIX } from "../../../utils/config"; |
|
|
|
import { CSS3DObject, CSS3DRenderer } from "../../../utils/CSS3DRenderer.js"; |
|
|
|
import { TrackballControls } from "../../../utils/TrackballControls.js"; |
|
|
|
import TWEEN from "@tweenjs/tween.js"; |
|
|
|
import worldcup from "../../../data/worldcup.mp3"; |
|
|
|
import dong from "../../../data/dong.wav"; |
|
|
|
|
|
|
|
import { |
|
|
|
getPrizeListApi, |
|
|
|
@ -224,6 +211,42 @@ let prizeElement = {}; |
|
|
|
|
|
|
|
const qipaoText = ref(""); |
|
|
|
const qipaoTextRef = ref(null); |
|
|
|
|
|
|
|
const worldcupAudioRef = ref(null); |
|
|
|
const dongAudioRef = ref(null); |
|
|
|
// 播放worldcup音频 |
|
|
|
const playWorldcupAudio = () => { |
|
|
|
if (worldcupAudioRef.value) { |
|
|
|
worldcupAudioRef.value.currentTime = 0; // 重置播放位置 |
|
|
|
worldcupAudioRef.value.play().catch((error) => { |
|
|
|
console.log("音频播放失败:", error); |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 暂停worldcup音频 |
|
|
|
const pauseWorldcupAudio = () => { |
|
|
|
if (worldcupAudioRef.value) { |
|
|
|
worldcupAudioRef.value.pause(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const playDongAudio = () => { |
|
|
|
if (dongAudioRef.value) { |
|
|
|
dongAudioRef.value.currentTime = 0; // 重置播放位置 |
|
|
|
dongAudioRef.value.play().catch((error) => { |
|
|
|
console.log("音频播放失败:", error); |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 暂停dong音频 |
|
|
|
const pauseDongAudio = () => { |
|
|
|
if (dongAudioRef.value) { |
|
|
|
dongAudioRef.value.pause(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const addQipao = (text) => { |
|
|
|
qipaoTextRef.value.style.display = "block"; |
|
|
|
qipaoTextRef.value.style.opacity = "1"; |
|
|
|
@ -243,13 +266,22 @@ const addQipao = (text) => { |
|
|
|
|
|
|
|
const getPrizeUserList = ref([]); |
|
|
|
const isOpen = ref(false); |
|
|
|
|
|
|
|
const pageObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
}); |
|
|
|
|
|
|
|
const currentPage = ref(1); |
|
|
|
const totalPage = ref(10); |
|
|
|
|
|
|
|
const openGetPrize = async () => { |
|
|
|
if (!prizes.value[prizes.value.length - 1].isLook) { |
|
|
|
addQipao("请先揭晓奖品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let res = await getGetPrizeUserListApi({}); |
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
isOpen.value = true; |
|
|
|
// console.log("currentPrize", currentPrize.value); |
|
|
|
@ -277,6 +309,21 @@ const closeGetPrize = () => { |
|
|
|
// scroll.style.height = "650px"; |
|
|
|
}; |
|
|
|
|
|
|
|
const leftPage = async (item) => { |
|
|
|
if (currentPage.value == 1) return; |
|
|
|
currentPage.value--; |
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
}; |
|
|
|
const rightPage = async (item) => { |
|
|
|
if (currentPage.value == totalPage.value) return; |
|
|
|
currentPage.value++; |
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
}; |
|
|
|
|
|
|
|
//揭示奖品 |
|
|
|
const lookPrize = async (item) => { |
|
|
|
// 未进入抽奖禁止揭晓 |
|
|
|
@ -658,132 +705,6 @@ function render() { |
|
|
|
renderer.render(scene, camera); |
|
|
|
} |
|
|
|
|
|
|
|
// 展开 |
|
|
|
// const rightPage = () => { |
|
|
|
// if (pageIndex == pageMaxIndex) return; |
|
|
|
// console.log("点击了向右"); |
|
|
|
// // 先让当前卡片回去，然后显示下一页 |
|
|
|
// resetCard(300).then(() => { |
|
|
|
// pageIndex++; |
|
|
|
// selectCard(600, pageIndex); |
|
|
|
// }); |
|
|
|
// }; |
|
|
|
// const leftPage = () => { |
|
|
|
// if (pageIndex == 0) return; |
|
|
|
// console.log("点击了向左"); |
|
|
|
// // 先让当前卡片回去，然后显示上一页 |
|
|
|
// resetCard(300).then(() => { |
|
|
|
// pageIndex--; |
|
|
|
// selectCard(600, pageIndex); |
|
|
|
// }); |
|
|
|
// }; |
|
|
|
|
|
|
|
//停止抽奖动画 |
|
|
|
// function selectCard(duration = 600, index = 0) { |
|
|
|
// console.log("pageIndex", pageIndex, "pageMaxIndex", pageMaxIndex); |
|
|
|
// let right = document.getElementById("rightPage"); |
|
|
|
// let left = document.getElementById("leftPage"); |
|
|
|
|
|
|
|
// right.style.display = "flex"; |
|
|
|
// left.style.display = "flex"; |
|
|
|
|
|
|
|
// pageMaxIndex = Math.ceil(selectedCardIndex.length / 10) - 1; |
|
|
|
|
|
|
|
// let getCurrentIndex = []; |
|
|
|
// for (let i = 0; i < selectedCardIndex.length; i += 10) { |
|
|
|
// getCurrentIndex.push(selectedCardIndex.slice(i, i + 10)); |
|
|
|
// } |
|
|
|
|
|
|
|
// let getCurrentLucky = []; |
|
|
|
// for (let i = 0; i < currentLuckys.length; i += 10) { |
|
|
|
// getCurrentLucky.push(currentLuckys.slice(i, i + 10)); |
|
|
|
// } |
|
|
|
|
|
|
|
// console.log("getCurrentIndex", getCurrentIndex); |
|
|
|
// console.log("getCurrentLucky", getCurrentLucky); |
|
|
|
|
|
|
|
// rotate = false; //停止旋转 |
|
|
|
// let width = 180; |
|
|
|
// let tag = -(getCurrentLucky[index].length - 1) / 2; |
|
|
|
// let locates = []; |
|
|
|
|
|
|
|
// // 计算位置信息, 大于5个分两排显示 |
|
|
|
// if (getCurrentLucky[index].length > 5) { |
|
|
|
// let yPosition = [-120, 120]; |
|
|
|
|
|
|
|
// let l = getCurrentIndex[index].length; |
|
|
|
// let mid = Math.ceil(l / 2); |
|
|
|
// tag = -(mid - 1) / 2; |
|
|
|
// for (let i = 0; i < mid; i++) { |
|
|
|
// locates.push({ |
|
|
|
// x: tag * width * Resolution, |
|
|
|
// y: yPosition[0] * Resolution, |
|
|
|
// }); |
|
|
|
// tag++; |
|
|
|
// } |
|
|
|
// console.log("locates", locates); |
|
|
|
|
|
|
|
// // console.log("selectedCardIndex", selectedCardIndex); |
|
|
|
// // console.log("currentLuckys", currentLuckys); |
|
|
|
|
|
|
|
// tag = -(l - mid - 1) / 2; |
|
|
|
// for (let i = mid; i < l; i++) { |
|
|
|
// locates.push({ |
|
|
|
// x: tag * width * Resolution, |
|
|
|
// y: yPosition[1] * Resolution, |
|
|
|
// }); |
|
|
|
// tag++; |
|
|
|
// } |
|
|
|
// } else { |
|
|
|
// for (let i = getCurrentIndex[index].length; i > 0; i--) { |
|
|
|
// locates.push({ |
|
|
|
// x: tag * width * Resolution, |
|
|
|
// y: 0 * Resolution, |
|
|
|
// }); |
|
|
|
// tag++; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// getCurrentIndex[index].forEach((cardIndex, iindex) => { |
|
|
|
// changeCard(cardIndex, getCurrentLucky[index][iindex]); |
|
|
|
// var object = threeDCards[cardIndex]; |
|
|
|
// new TWEEN.Tween(object.position) |
|
|
|
// .to( |
|
|
|
// { |
|
|
|
// x: locates[iindex].x, |
|
|
|
// y: locates[iindex].y * Resolution, |
|
|
|
// z: 2000, |
|
|
|
// }, |
|
|
|
// Math.random() * duration + duration |
|
|
|
// ) |
|
|
|
// .easing(TWEEN.Easing.Exponential.InOut) |
|
|
|
// .start(); |
|
|
|
|
|
|
|
// new TWEEN.Tween(object.rotation) |
|
|
|
// .to( |
|
|
|
// { |
|
|
|
// x: 0, |
|
|
|
// y: 0, |
|
|
|
// z: 0, |
|
|
|
// }, |
|
|
|
// Math.random() * duration + duration |
|
|
|
// ) |
|
|
|
// .easing(TWEEN.Easing.Exponential.InOut) |
|
|
|
// .start(); |
|
|
|
|
|
|
|
// object.element.classList.add("prize"); |
|
|
|
// }); |
|
|
|
|
|
|
|
// new TWEEN.Tween(this) |
|
|
|
// .to({}, duration * 2) |
|
|
|
// .onUpdate(render) |
|
|
|
// .start() |
|
|
|
// .onComplete(() => { |
|
|
|
// // 动画结束后可以操作 |
|
|
|
// setLotteryStatus(); |
|
|
|
// }); |
|
|
|
// } |
|
|
|
|
|
|
|
const threeContainer = ref(null); |
|
|
|
function selectCard(duration = 600) { |
|
|
|
return new Promise((resolve) => { |
|
|
|
@ -1119,14 +1040,17 @@ const lotteryBtn = () => { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (!currentPrize.value.isLook) { |
|
|
|
addQipao("请先揭秘礼品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (currentPrize.value.leftCount <= 0) { |
|
|
|
addQipao("该礼品已抽取完毕，请揭秘下一个礼品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
// if (!currentPrize.value.isLook) { |
|
|
|
// addQipao("请先揭秘礼品。"); |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// if (currentPrize.value.leftCount <= 0) { |
|
|
|
// addQipao("该礼品已抽取完毕，请揭秘下一个礼品。"); |
|
|
|
// return; |
|
|
|
// } |
|
|
|
|
|
|
|
// 播放worldcup音频 |
|
|
|
playWorldcupAudio(); |
|
|
|
|
|
|
|
getPrizeUsers.value = []; |
|
|
|
let params = { |
|
|
|
@ -1196,6 +1120,10 @@ const lottery = () => { |
|
|
|
const stopLottery = () => { |
|
|
|
lotteryRef.value.innerHTML = "开始抽奖"; |
|
|
|
rotateObj.stop(); |
|
|
|
|
|
|
|
// 暂停worldcup音频 |
|
|
|
pauseWorldcupAudio(); |
|
|
|
playDongAudio(); |
|
|
|
}; |
|
|
|
|
|
|
|
const changePrize = async () => { |
|
|
|
@ -1294,70 +1222,6 @@ const createHighlight = () => { |
|
|
|
return highlight; |
|
|
|
}; |
|
|
|
|
|
|
|
// 音乐播放器初始化函数 |
|
|
|
const initMusicPlayer = () => { |
|
|
|
const musicBox = document.querySelector("#musicBox"); |
|
|
|
if (musicBox) { |
|
|
|
// 1秒后自动尝试播放 |
|
|
|
setTimeout(() => { |
|
|
|
musicPlay(); |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const musicPlay = () => { |
|
|
|
console.log("musicPlay 方法被调用"); |
|
|
|
|
|
|
|
const music = document.querySelector("#music"); |
|
|
|
const musicBox = document.querySelector("#musicBox"); |
|
|
|
|
|
|
|
if (!music || !musicBox) { |
|
|
|
console.error("音乐元素未找到"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (music.paused) { |
|
|
|
music |
|
|
|
.play() |
|
|
|
.then(() => { |
|
|
|
console.log("音乐开始播放"); |
|
|
|
startRotateAnimation(musicBox); |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error("音乐播放失败:", error); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
console.log("音乐暂停"); |
|
|
|
music.pause(); |
|
|
|
stopRotateAnimation(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 旋转动画管理 |
|
|
|
let rotationState = { rotated: 0, stopAnimate: false, animationId: null }; |
|
|
|
|
|
|
|
const startRotateAnimation = (element) => { |
|
|
|
rotationState.stopAnimate = false; |
|
|
|
|
|
|
|
function animate() { |
|
|
|
if (rotationState.stopAnimate) return; |
|
|
|
|
|
|
|
rotationState.rotated = (rotationState.rotated + 1) % 360; |
|
|
|
element.style.transform = `rotate(${rotationState.rotated}deg)`; |
|
|
|
rotationState.animationId = requestAnimationFrame(animate); |
|
|
|
} |
|
|
|
|
|
|
|
animate(); |
|
|
|
}; |
|
|
|
|
|
|
|
const stopRotateAnimation = () => { |
|
|
|
rotationState.stopAnimate = true; |
|
|
|
if (rotationState.animationId) { |
|
|
|
cancelAnimationFrame(rotationState.animationId); |
|
|
|
rotationState.animationId = null; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
function onWindowResize() { |
|
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
|
camera.updateProjectionMatrix(); |
|
|
|
|
no99
4 weeks ago