|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div class="homepage"> |
|
|
|
<img src="../../../assets/img/麒麟.png" alt="麒麟" class="hllogo" /> |
|
|
|
<div class="music"> |
|
|
|
<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> |
|
|
|
@ -29,9 +29,9 @@ |
|
|
|
<div class="prize-text"> |
|
|
|
<div class="prize-title"> |
|
|
|
<div class="level"> |
|
|
|
{{ item.text }} |
|
|
|
{{ item.gradeName }} |
|
|
|
</div> |
|
|
|
{{ item.title }} |
|
|
|
{{ item.prizeName }} |
|
|
|
</div> |
|
|
|
<div class="prize-count"> |
|
|
|
<div class="progress"> |
|
|
|
@ -80,19 +80,13 @@ |
|
|
|
<div class="gradient-line"></div> |
|
|
|
</div> |
|
|
|
<el-scrollbar class="tableBody"> |
|
|
|
<div |
|
|
|
v-for="item in [ |
|
|
|
{ id: '11111', prize: '六等奖' }, |
|
|
|
{ id: '22222', prize: '六等奖' }, |
|
|
|
]" |
|
|
|
:key="item" |
|
|
|
> |
|
|
|
<div v-for="item in getPrizeUserList" :key="item"> |
|
|
|
<div class="tableItem"> |
|
|
|
<div class="tableItem1"> |
|
|
|
{{ item.id }} |
|
|
|
{{ item.jwcode }} |
|
|
|
</div> |
|
|
|
<div class="tableItem2"> |
|
|
|
{{ item.prize }} |
|
|
|
{{ item.gradeName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -101,9 +95,16 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="container"></div> |
|
|
|
<div id="container"> |
|
|
|
<div ref="threeContainer" class="three-container"></div> |
|
|
|
|
|
|
|
<img |
|
|
|
<!-- 分页指示器 --> |
|
|
|
<div v-if="pageMaxIndex > 1" class="page-indicator"> |
|
|
|
第 {{ pageIndex + 1 }} 页 / 共 {{ pageMaxIndex }} 页 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <img |
|
|
|
src="../../../assets/img/展开.png" |
|
|
|
alt="向右" |
|
|
|
@click="rightPage()" |
|
|
|
@ -117,7 +118,7 @@ |
|
|
|
@click="leftPage()" |
|
|
|
class="leftPage" |
|
|
|
id="leftPage" |
|
|
|
/> |
|
|
|
/> --> |
|
|
|
|
|
|
|
<div id="menu"> |
|
|
|
<div id="enter" ref="enterRef" @click="enterLottery()" class="btn"> |
|
|
|
@ -145,6 +146,12 @@ import { NUMBER_MATRIX } from "../../../utils/config"; |
|
|
|
import { CSS3DObject, CSS3DRenderer } from "../../../utils/CSS3DRenderer.js"; |
|
|
|
import { TrackballControls } from "../../../utils/TrackballControls.js"; |
|
|
|
|
|
|
|
import { |
|
|
|
getPrizeListApi, |
|
|
|
getUserListApi, |
|
|
|
getGetPrizeUserListApi, |
|
|
|
} from "../../../api/API"; |
|
|
|
|
|
|
|
// 常量 |
|
|
|
const ROTATE_TIME = 10000; //旋转动画的总时长 |
|
|
|
const ROTATE_LOOP = 1000; |
|
|
|
@ -184,7 +191,7 @@ let rotate = false; |
|
|
|
//奖品列表 |
|
|
|
const prizes = ref([]); |
|
|
|
//每个奖品每次抽取的数目 |
|
|
|
let EACH_COUNT; |
|
|
|
let EACH_COUNT = []; |
|
|
|
|
|
|
|
const users = ref([]); |
|
|
|
|
|
|
|
@ -203,9 +210,6 @@ const currentPrize = ref({}); |
|
|
|
let currentLuckys = []; |
|
|
|
let prizeElement = {}; |
|
|
|
|
|
|
|
let defaultType = 0; |
|
|
|
let lasetPrizeIndex = 0; |
|
|
|
|
|
|
|
const qipaoText = ref(""); |
|
|
|
const qipaoTextRef = ref(null); |
|
|
|
const addQipao = (text) => { |
|
|
|
@ -221,21 +225,24 @@ const addQipao = (text) => { |
|
|
|
// 动画完成后隐藏元素 |
|
|
|
setTimeout(() => { |
|
|
|
qipaoTextRef.value.style.display = "none"; |
|
|
|
}, 500); |
|
|
|
}, 800); |
|
|
|
}, 1000); |
|
|
|
}; |
|
|
|
|
|
|
|
const getPrizeUserList = ref([]); |
|
|
|
const isOpen = ref(false); |
|
|
|
const openGetPrize = () => { |
|
|
|
const openGetPrize = async () => { |
|
|
|
if (!prizes.value[prizes.value.length - 1].isLook) { |
|
|
|
addQipao("请先揭晓奖品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let res = await getGetPrizeUserListApi({}); |
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
isOpen.value = true; |
|
|
|
console.log("currentPrize", currentPrize.value); |
|
|
|
// console.log("currentPrize", currentPrize.value); |
|
|
|
prizes.value.forEach((item) => { |
|
|
|
console.log("item", item); |
|
|
|
// console.log("item", item); |
|
|
|
if (item.type != currentPrize.value.type) { |
|
|
|
let box = document.querySelector(`#prize-item-${item.type}`); |
|
|
|
box.style.display = "none"; |
|
|
|
@ -248,7 +255,7 @@ const openGetPrize = () => { |
|
|
|
const closeGetPrize = () => { |
|
|
|
isOpen.value = false; |
|
|
|
prizes.value.forEach((item) => { |
|
|
|
console.log("item", item); |
|
|
|
// console.log("item", item); |
|
|
|
if (item.type != currentPrize.value.type) { |
|
|
|
let box = document.querySelector(`#prize-item-${item.type}`); |
|
|
|
box.style.display = "flex"; |
|
|
|
@ -262,7 +269,7 @@ const closeGetPrize = () => { |
|
|
|
const lookPrize = (item) => { |
|
|
|
// 未进入抽奖禁止揭晓 |
|
|
|
if (!joinLottery) { |
|
|
|
addQipao("请先进入抽奖"); |
|
|
|
addQipao("请先进入抽奖。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 如果已经揭示，那返回 |
|
|
|
@ -295,7 +302,7 @@ const lookPrize = (item) => { |
|
|
|
} |
|
|
|
if (lastIndex != -1) { |
|
|
|
let lastPrize = prizes.value[lastIndex]; |
|
|
|
console.log("lastPrize", lastPrize); |
|
|
|
// console.log("lastPrize", lastPrize); |
|
|
|
let lastBox = document.querySelector(`#prize-item-${lastPrize.type}`); |
|
|
|
lastBox.classList.remove("shine"); |
|
|
|
lastBox.classList.add("done"); |
|
|
|
@ -309,13 +316,8 @@ const lookPrize = (item) => { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
function setPrizes(pri) { |
|
|
|
defaultType = pri[0]["type"]; |
|
|
|
lasetPrizeIndex = pri.length - 1; |
|
|
|
} |
|
|
|
|
|
|
|
function setPrizeData(currentPrizeIndex, isInit) { |
|
|
|
console.log("prizes", prizes.value); |
|
|
|
// console.log("prizes", prizes.value); |
|
|
|
// let currentPrize = prizes.value[currentPrizeIndex]; |
|
|
|
let type = currentPrize.value.type; |
|
|
|
let elements = prizeElement[type]; |
|
|
|
@ -342,8 +344,7 @@ function setPrizeData(currentPrizeIndex, isInit) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
console.log("lasetPrizeIndex", lasetPrizeIndex); |
|
|
|
console.log("currentPrize", currentPrize); |
|
|
|
// console.log("currentPrize", currentPrize); |
|
|
|
|
|
|
|
let percent = (count / totalCount).toFixed(2); |
|
|
|
if (elements.bar) { |
|
|
|
@ -354,24 +355,34 @@ function setPrizeData(currentPrizeIndex, isInit) { |
|
|
|
/** |
|
|
|
* 初始化所有DOM |
|
|
|
*/ |
|
|
|
let pageIndex = 0; |
|
|
|
let pageMaxIndex = 1; |
|
|
|
const pageIndex = ref(0); |
|
|
|
const pageMaxIndex = ref(0); |
|
|
|
const cardsPerPage = 10; // 每页显示的卡片数量 |
|
|
|
let isPageTransitioning = false; // 防止页面切换时的重复操作 |
|
|
|
// 全局变量存储当前选中的卡片索引数组 |
|
|
|
let globalCardIndexes = []; |
|
|
|
|
|
|
|
const initAll = async () => { |
|
|
|
const response = await axios.post(`http://192.168.3.35:8090/getTempData`); |
|
|
|
console.log("response", response); |
|
|
|
let data = response.data; |
|
|
|
const [prizeList, userList] = await Promise.all([ |
|
|
|
getPrizeListApi(), |
|
|
|
getUserListApi(), |
|
|
|
]); |
|
|
|
// 奖品列表 |
|
|
|
prizes.value = data.cfgData.prizes; |
|
|
|
prizes.value[7].count = 100; |
|
|
|
prizes.value.forEach((item) => { |
|
|
|
item.leftCount = item.count; //剩余次数（用于计算奖品下方的进度条的百分比） |
|
|
|
item.hasCount = item.count; //已抽次数（用于计算出奖） |
|
|
|
item.isLook = false; //是否已经揭晓 |
|
|
|
prizes.value = prizeList.data; |
|
|
|
// 用户列表 |
|
|
|
users.value = userList.data; |
|
|
|
prizes.value.forEach((item, index) => { |
|
|
|
item.type = index; |
|
|
|
item.count = item.amount; |
|
|
|
item.leftCount = item.amount; //剩余次数（用于计算奖品下方的进度条的百分比） |
|
|
|
item.hasCount = item.amount; //已抽次数（用于计算出奖） |
|
|
|
item.isLook = false; // |
|
|
|
EACH_COUNT.push(item.perWin); |
|
|
|
}); |
|
|
|
EACH_COUNT = data.cfgData.EACH_COUNT; |
|
|
|
EACH_COUNT[7] = 19; |
|
|
|
console.log("prizes", prizes.value); |
|
|
|
console.log("EACH_COUNT", EACH_COUNT); |
|
|
|
|
|
|
|
HIGHLIGHT_CELL = createHighlight(); |
|
|
|
setPrizes(prizes.value); |
|
|
|
|
|
|
|
TOTAL_CARDS = ROW_COUNT * COLUMN_COUNT; |
|
|
|
|
|
|
|
@ -380,16 +391,6 @@ const initAll = async () => { |
|
|
|
|
|
|
|
await nextTick(); |
|
|
|
setPrizeData(currentPrizeIndex, true); |
|
|
|
// window.AJAX({ |
|
|
|
// url: "/getTempData", |
|
|
|
// success(data) { |
|
|
|
// // 获取基础数据 |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
|
|
|
|
const response1 = await axios.post(`http://192.168.3.35:8090/getUsers`); |
|
|
|
const data1 = response1.data; |
|
|
|
users.value = data1; |
|
|
|
|
|
|
|
initCards(); |
|
|
|
// startMaoPao(); |
|
|
|
@ -461,8 +462,12 @@ const initCards = () => { |
|
|
|
|
|
|
|
renderer = new CSS3DRenderer(); |
|
|
|
renderer.setSize(window.innerWidth * 1, window.innerHeight * 0.9); |
|
|
|
renderer.domElement.style.margin = "7% 0 0 4%"; |
|
|
|
document.getElementById("container").appendChild(renderer.domElement); |
|
|
|
renderer.domElement.style.margin = "7% 0 0 0"; |
|
|
|
// document.getElementById("container").appendChild(renderer.domElement); |
|
|
|
|
|
|
|
if (threeContainer.value) { |
|
|
|
threeContainer.value.appendChild(renderer.domElement); |
|
|
|
} |
|
|
|
|
|
|
|
// |
|
|
|
|
|
|
|
@ -525,7 +530,9 @@ const createElement = (css, text) => { |
|
|
|
const createCard = (user, isBold, id) => { |
|
|
|
var element = createElement(); |
|
|
|
element.id = "card-" + id; |
|
|
|
|
|
|
|
element.style.display = "flex"; |
|
|
|
element.style.alignItems = "center"; |
|
|
|
element.style.justifyContent = "center"; |
|
|
|
if (isBold) { |
|
|
|
element.className = "element lightitem"; |
|
|
|
element.classList.add("highlight"); |
|
|
|
@ -537,7 +544,7 @@ const createCard = (user, isBold, id) => { |
|
|
|
element.style.border = "2px solid rgba(255, 255, 255, 1)"; |
|
|
|
} |
|
|
|
|
|
|
|
element.appendChild(createElement("name", user[1])); |
|
|
|
element.appendChild(createElement("name", user.jwcode)); |
|
|
|
|
|
|
|
return element; |
|
|
|
}; |
|
|
|
@ -635,128 +642,347 @@ function render() { |
|
|
|
} |
|
|
|
|
|
|
|
// 展开 |
|
|
|
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); |
|
|
|
}); |
|
|
|
}; |
|
|
|
// 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)); |
|
|
|
} |
|
|
|
// 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) => { |
|
|
|
const width = 160; |
|
|
|
|
|
|
|
// 计算总页数 |
|
|
|
pageMaxIndex.value = Math.ceil(currentLuckys.length / cardsPerPage); |
|
|
|
pageIndex.value = 0; |
|
|
|
|
|
|
|
// 为每页计算位置信息 |
|
|
|
const pageLocates = []; |
|
|
|
|
|
|
|
for (let page = 0; page < pageMaxIndex.value; page++) { |
|
|
|
const startIndex = page * cardsPerPage; |
|
|
|
const endIndex = Math.min( |
|
|
|
(page + 1) * cardsPerPage, |
|
|
|
currentLuckys.length |
|
|
|
); |
|
|
|
const pageCount = endIndex - startIndex; |
|
|
|
|
|
|
|
const pageLocate = []; |
|
|
|
|
|
|
|
// 根据当前页的人数决定排列方式 |
|
|
|
if (pageCount > 5) { |
|
|
|
// 大于5个分两排显示（与抽10人时的排列相同） |
|
|
|
const yPosition = [-75, 120]; |
|
|
|
const mid = Math.ceil(pageCount / 2); |
|
|
|
let tag = -(mid - 1) / 2; |
|
|
|
|
|
|
|
for (let i = 0; i < mid; i++) { |
|
|
|
pageLocate.push({ |
|
|
|
x: tag * width, |
|
|
|
y: yPosition[0], |
|
|
|
}); |
|
|
|
tag++; |
|
|
|
} |
|
|
|
|
|
|
|
let getCurrentLucky = []; |
|
|
|
for (let i = 0; i < currentLuckys.length; i += 10) { |
|
|
|
getCurrentLucky.push(currentLuckys.slice(i, i + 10)); |
|
|
|
} |
|
|
|
tag = -(pageCount - mid - 1) / 2; |
|
|
|
for (let i = mid; i < pageCount; i++) { |
|
|
|
pageLocate.push({ |
|
|
|
x: tag * width, |
|
|
|
y: yPosition[1], |
|
|
|
}); |
|
|
|
tag++; |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 小于等于5个一排显示（与抽不足10人时的排列相同） |
|
|
|
let tag = -(pageCount - 1) / 2; |
|
|
|
for (let i = 0; i < pageCount; i++) { |
|
|
|
pageLocate.push({ |
|
|
|
x: tag * width, |
|
|
|
y: 0, |
|
|
|
}); |
|
|
|
tag++; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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++; |
|
|
|
pageLocates.push(pageLocate); |
|
|
|
} |
|
|
|
console.log("locates", locates); |
|
|
|
|
|
|
|
// console.log("selectedCardIndex", selectedCardIndex); |
|
|
|
// console.log("currentLuckys", currentLuckys); |
|
|
|
// console.log("pageLocates calculated:", pageLocates); |
|
|
|
|
|
|
|
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, |
|
|
|
// 初始化所有卡片位置（隐藏超出第一页的卡片） |
|
|
|
selectedCardIndex.forEach((cardIndex, index) => { |
|
|
|
changeSelectedCard(cardIndex, currentLuckys[index]); |
|
|
|
const object = threeDCards[cardIndex]; |
|
|
|
|
|
|
|
// 计算卡片应该在第几页 |
|
|
|
const cardPage = Math.floor(index / cardsPerPage); |
|
|
|
const isVisible = cardPage === 0; |
|
|
|
|
|
|
|
// 计算在当前页中的索引 |
|
|
|
const pageNowIndex = index % cardsPerPage; |
|
|
|
const pageLocate = pageLocates[cardPage][pageNowIndex]; |
|
|
|
|
|
|
|
new TWEEN.Tween(object.position) |
|
|
|
.to( |
|
|
|
{ |
|
|
|
x: isVisible ? pageLocate.x : pageLocate.x, |
|
|
|
y: isVisible ? pageLocate.y : pageLocate.y + 1000, // 隐藏的卡片移到下方 |
|
|
|
z: 2100, |
|
|
|
}, |
|
|
|
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"); |
|
|
|
}); |
|
|
|
|
|
|
|
// 保存页面位置信息到全局变量，供switchPage使用 |
|
|
|
window.pageLocates = pageLocates; |
|
|
|
|
|
|
|
new TWEEN.Tween({}) |
|
|
|
.to({}, duration * 2) |
|
|
|
.onUpdate(() => render()) |
|
|
|
.start() |
|
|
|
.onComplete(() => { |
|
|
|
console.log("selectCard animation completed"); |
|
|
|
// 如果有多页，添加鼠标滚轮事件监听 |
|
|
|
if (pageMaxIndex.value > 1) { |
|
|
|
// console.log("pageMaxIndex添加滚轮", pageMaxIndex.value); |
|
|
|
// 添加滚轮事件监听 |
|
|
|
addWheelListener(); |
|
|
|
} |
|
|
|
|
|
|
|
setLotteryStatus(); |
|
|
|
resolve(); |
|
|
|
}); |
|
|
|
tag++; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 分页切换函数 |
|
|
|
function switchPage(direction) { |
|
|
|
if (isPageTransitioning || pageMaxIndex.value <= 1) return; |
|
|
|
|
|
|
|
const newPage = |
|
|
|
direction === "next" ? pageIndex.value + 1 : pageIndex.value - 1; |
|
|
|
if (newPage < 0 || newPage >= pageMaxIndex.value) return; |
|
|
|
|
|
|
|
isPageTransitioning = true; |
|
|
|
const duration = 800; |
|
|
|
|
|
|
|
// 使用保存的页面位置信息 |
|
|
|
const pageLocates = window.pageLocates; |
|
|
|
if (!pageLocates) { |
|
|
|
console.error("页面位置信息未找到"); |
|
|
|
isPageTransitioning = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
getCurrentIndex[index].forEach((cardIndex, iindex) => { |
|
|
|
changeCard(cardIndex, getCurrentLucky[index][iindex]); |
|
|
|
var object = threeDCards[cardIndex]; |
|
|
|
// 动画切换卡片位置 |
|
|
|
globalCardIndexes.forEach((cardIndex, index) => { |
|
|
|
const object = threeDCards[cardIndex]; |
|
|
|
const cardPage = Math.floor(index / cardsPerPage); |
|
|
|
const isVisible = cardPage === newPage; |
|
|
|
|
|
|
|
// 计算在当前页中的索引 |
|
|
|
const pageNowIndex = index % cardsPerPage; |
|
|
|
const pageLocate = pageLocates[cardPage][pageNowIndex]; |
|
|
|
|
|
|
|
// console.log( |
|
|
|
// "cardPage", |
|
|
|
// cardPage, |
|
|
|
// "pageNowIndex", |
|
|
|
// pageNowIndex, |
|
|
|
// "pageLocate", |
|
|
|
// pageLocate |
|
|
|
// ); |
|
|
|
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, |
|
|
|
x: pageLocate.x, |
|
|
|
y: isVisible ? pageLocate.y : pageLocate.y + 1000, |
|
|
|
z: 2100, |
|
|
|
}, |
|
|
|
Math.random() * duration + duration |
|
|
|
duration |
|
|
|
) |
|
|
|
.easing(TWEEN.Easing.Exponential.InOut) |
|
|
|
.easing(TWEEN.Easing.Cubic.InOut) |
|
|
|
.start(); |
|
|
|
|
|
|
|
object.element.classList.add("prize"); |
|
|
|
}); |
|
|
|
|
|
|
|
new TWEEN.Tween(this) |
|
|
|
.to({}, duration * 2) |
|
|
|
.onUpdate(render) |
|
|
|
.start() |
|
|
|
new TWEEN.Tween({}) |
|
|
|
.to({}, duration) |
|
|
|
.onUpdate(() => render()) |
|
|
|
.onComplete(() => { |
|
|
|
// 动画结束后可以操作 |
|
|
|
setLotteryStatus(); |
|
|
|
pageIndex.value = newPage; |
|
|
|
isPageTransitioning = false; |
|
|
|
console.log( |
|
|
|
`切换到第 ${pageIndex.value + 1} 页，共 ${pageMaxIndex.value} 页` |
|
|
|
); |
|
|
|
}) |
|
|
|
.start(); |
|
|
|
} |
|
|
|
|
|
|
|
// 鼠标滚轮事件处理 |
|
|
|
function handleWheel(event) { |
|
|
|
if (isPageTransitioning || pageMaxIndex.value <= 1) return; |
|
|
|
|
|
|
|
event.preventDefault(); |
|
|
|
|
|
|
|
if (event.deltaY > 0) { |
|
|
|
// 向下滚动，显示下一页 |
|
|
|
switchPage("next"); |
|
|
|
} else if (event.deltaY < 0) { |
|
|
|
// 向上滚动，显示上一页 |
|
|
|
switchPage("prev"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 添加鼠标滚轮事件监听器 |
|
|
|
function addWheelListener() { |
|
|
|
if (threeContainer.value) { |
|
|
|
threeContainer.value.addEventListener("wheel", handleWheel, { |
|
|
|
passive: false, |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 移除鼠标滚轮事件监听器 |
|
|
|
function removeWheelListener() { |
|
|
|
if (threeContainer.value) { |
|
|
|
threeContainer.value.removeEventListener("wheel", handleWheel); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -767,6 +993,20 @@ function resetCard(duration = 500) { |
|
|
|
return Promise.resolve(); |
|
|
|
} |
|
|
|
|
|
|
|
globalCardIndexes = []; |
|
|
|
// 移除鼠标滚轮事件监听器 |
|
|
|
removeWheelListener(); |
|
|
|
|
|
|
|
// 重置分页状态 |
|
|
|
pageIndex.value = 0; |
|
|
|
pageMaxIndex.value = 0; |
|
|
|
isPageTransitioning = false; |
|
|
|
|
|
|
|
// 清理保存的页面位置信息 |
|
|
|
if (window.pageLocates) { |
|
|
|
delete window.pageLocates; |
|
|
|
} |
|
|
|
|
|
|
|
selectedCardIndex.forEach((index) => { |
|
|
|
let object = threeDCards[index], |
|
|
|
target = targets.sphere[index]; |
|
|
|
@ -813,19 +1053,19 @@ function resetCard(duration = 500) { |
|
|
|
|
|
|
|
// 抽奖 |
|
|
|
const lotteryBtn = () => { |
|
|
|
console.log("isLotting", isLotting); |
|
|
|
console.log("currentPrize.value", currentPrize.value); |
|
|
|
// console.log("isLotting", isLotting); |
|
|
|
// console.log("currentPrize.value", currentPrize.value); |
|
|
|
if (isLotting) { |
|
|
|
stopLottery(); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (!currentPrize.value.isLook) { |
|
|
|
addQipao("请先揭秘礼品"); |
|
|
|
addQipao("请先揭秘礼品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (currentPrize.value.leftCount <= 0) { |
|
|
|
addQipao("该礼品已抽取完毕，请揭秘下一个礼品"); |
|
|
|
addQipao("该礼品已抽取完毕，请揭秘下一个礼品。"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -840,8 +1080,8 @@ const lotteryBtn = () => { |
|
|
|
|
|
|
|
console.log("currentPrize", currentPrize.value); |
|
|
|
|
|
|
|
const text = "正在抽取[" + currentPrize.value.title + "],调整好姿势"; |
|
|
|
addQipao(text); |
|
|
|
const text = "正在抽取[" + currentPrize.value.prizeName + "],调整好姿势"; |
|
|
|
// addQipao(text); |
|
|
|
}; |
|
|
|
/** |
|
|
|
* 抽奖 |
|
|
|
@ -862,7 +1102,6 @@ const lottery = () => { |
|
|
|
let index = user[0] + i; |
|
|
|
user[0] = index; |
|
|
|
user[1] = index; |
|
|
|
user[2] = index; |
|
|
|
currentLuckys.push(user); |
|
|
|
currentPrize.value.hasCount--; |
|
|
|
|
|
|
|
@ -878,7 +1117,7 @@ const lottery = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
selectCard(600, pageIndex); |
|
|
|
selectCard(600); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -913,6 +1152,17 @@ function random(num) { |
|
|
|
function changeCard(cardIndex, user) { |
|
|
|
let card = threeDCards[cardIndex].element; |
|
|
|
|
|
|
|
card.innerHTML = `<div class="name">${user.jwcode}</div>`; |
|
|
|
} |
|
|
|
|
|
|
|
function changeSelectedCard(cardIndex, user) { |
|
|
|
// 保存到全局变量数组 |
|
|
|
if (!globalCardIndexes.includes(cardIndex)) { |
|
|
|
globalCardIndexes.push(cardIndex); |
|
|
|
} |
|
|
|
|
|
|
|
let card = threeDCards[cardIndex].element; |
|
|
|
|
|
|
|
card.innerHTML = `<div class="name">${user[1]}</div>`; |
|
|
|
} |
|
|
|
/** |
|
|
|
@ -972,55 +1222,68 @@ const createHighlight = () => { |
|
|
|
return highlight; |
|
|
|
}; |
|
|
|
|
|
|
|
let onload = window.onload; |
|
|
|
// 音乐播放器初始化函数 |
|
|
|
const initMusicPlayer = () => { |
|
|
|
const musicBox = document.querySelector("#musicBox"); |
|
|
|
if (musicBox) { |
|
|
|
// 1秒后自动尝试播放 |
|
|
|
setTimeout(() => { |
|
|
|
musicPlay(); |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
window.onload = function () { |
|
|
|
if (onload) { |
|
|
|
onload(); |
|
|
|
const musicPlay = () => { |
|
|
|
console.log("musicPlay 方法被调用"); |
|
|
|
|
|
|
|
const music = document.querySelector("#music"); |
|
|
|
const musicBox = document.querySelector("#musicBox"); |
|
|
|
|
|
|
|
if (!music || !musicBox) { |
|
|
|
console.error("音乐元素未找到"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let music = document.querySelector("#music"); |
|
|
|
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 }; |
|
|
|
|
|
|
|
let rotated = 0; |
|
|
|
let stopAnimate = false; |
|
|
|
let musicBox = document.querySelector("#musicBox"); |
|
|
|
const startRotateAnimation = (element) => { |
|
|
|
rotationState.stopAnimate = false; |
|
|
|
|
|
|
|
function animate() { |
|
|
|
requestAnimationFrame(function () { |
|
|
|
if (stopAnimate) { |
|
|
|
return; |
|
|
|
} |
|
|
|
rotated = rotated % 360; |
|
|
|
musicBox.style.transform = "rotate(" + rotated + "deg)"; |
|
|
|
rotated += 1; |
|
|
|
animate(); |
|
|
|
}); |
|
|
|
if (rotationState.stopAnimate) return; |
|
|
|
|
|
|
|
rotationState.rotated = (rotationState.rotated + 1) % 360; |
|
|
|
element.style.transform = `rotate(${rotationState.rotated}deg)`; |
|
|
|
rotationState.animationId = requestAnimationFrame(animate); |
|
|
|
} |
|
|
|
|
|
|
|
musicBox.addEventListener( |
|
|
|
"click", |
|
|
|
function (e) { |
|
|
|
if (music.paused) { |
|
|
|
music.play().then( |
|
|
|
() => { |
|
|
|
stopAnimate = false; |
|
|
|
animate(); |
|
|
|
}, |
|
|
|
() => { |
|
|
|
addQipao("背景音乐自动播放失败，请手动播放！"); |
|
|
|
} |
|
|
|
); |
|
|
|
} else { |
|
|
|
music.pause(); |
|
|
|
stopAnimate = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
false |
|
|
|
); |
|
|
|
animate(); |
|
|
|
}; |
|
|
|
|
|
|
|
setTimeout(function () { |
|
|
|
musicBox.click(); |
|
|
|
}, 1000); |
|
|
|
const stopRotateAnimation = () => { |
|
|
|
rotationState.stopAnimate = true; |
|
|
|
if (rotationState.animationId) { |
|
|
|
cancelAnimationFrame(rotationState.animationId); |
|
|
|
rotationState.animationId = null; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
function onWindowResize() { |
|
|
|
@ -1030,8 +1293,9 @@ function onWindowResize() { |
|
|
|
render(); |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
onMounted(async () => { |
|
|
|
initAll(); |
|
|
|
initMusicPlayer(); |
|
|
|
|
|
|
|
window.addEventListener("resize", onWindowResize, false); |
|
|
|
}); |
|
|
|
@ -1065,7 +1329,7 @@ body, |
|
|
|
width: 100%; |
|
|
|
z-index: 100; |
|
|
|
position: absolute; |
|
|
|
top: 11vh; |
|
|
|
top: 27vh; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
color: #db5c58; |
|
|
|
@ -1091,6 +1355,26 @@ a { |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.three-container { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 分页指示器样式 */ |
|
|
|
.page-indicator { |
|
|
|
position: absolute; |
|
|
|
bottom: 10%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
z-index: 1000; |
|
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
|
color: white; |
|
|
|
padding: 8px 16px; |
|
|
|
border-radius: 20px; |
|
|
|
font-size: 14px; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
.rightPage { |
|
|
|
width: 75px; |
|
|
|
position: fixed; |
|
|
|
@ -1157,10 +1441,6 @@ a { |
|
|
|
} |
|
|
|
|
|
|
|
.element .name { |
|
|
|
position: absolute; |
|
|
|
top: 4.6vh; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
font-size: 2.9vh; |
|
|
|
font-weight: bold; |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
@ -1243,7 +1523,7 @@ a { |
|
|
|
|
|
|
|
#prizeBar { |
|
|
|
height: 650px; |
|
|
|
width: 500px; |
|
|
|
width: 330px; |
|
|
|
|
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
|
no99
4 weeks ago