5 Commits

  1. 3
      README.md
  2. 8
      package-lock.json
  3. 1
      package.json
  4. 52
      src/views/choujiang/hxl-cj/cj.vue

3
README.md

@ -9,4 +9,5 @@ npm install vue-router
npm install axios
npm install element-plus --save
npm install pinia
npm install three
npm install three
c 安装 lodash 组件,解决数据处理问题

8
package-lock.json

@ -13,6 +13,7 @@
"axios": "^1.10.0",
"dayjs": "^1.11.13",
"element-plus": "^2.10.3",
"lodash": "^4.17.21",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.4.1",
"three": "^0.178.0",
@ -1987,8 +1988,9 @@
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
"resolved": "https://mirrors.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"license": "MIT"
},
"node_modules/lodash-es": {
"version": "4.17.21",
@ -4055,7 +4057,7 @@
},
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash-es": {

1
package.json

@ -16,6 +16,7 @@
"axios": "^1.10.0",
"dayjs": "^1.11.13",
"element-plus": "^2.10.3",
"lodash": "^4.17.21",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.4.1",
"three": "^0.178.0",

52
src/views/choujiang/hxl-cj/cj.vue

@ -120,7 +120,12 @@
<div class="btn">{{ cjText }}</div>
</div>
<div v-else>
<div id="lottery" ref="lotteryRef" @click="lotteryBtn()" class="btn">
<div
id="lottery"
ref="lotteryRef"
@click="throttledLotteryBtn()"
class="btn"
>
{{ cjText }}
</div>
</div>
@ -142,6 +147,7 @@ import { TrackballControls } from "../../../utils/TrackballControls.js";
import TWEEN from "@tweenjs/tween.js";
import worldcup from "../../../assets/worldcup.mp3";
import dong from "../../../assets/dong.mp3";
import _ from "lodash";
import {
getPrizeListApi,
@ -535,7 +541,7 @@ const initCards = () => {
1,
10000
);
camera.position.z = 3000;
camera.position.z = 3500;
scene = new THREE.Scene();
@ -605,9 +611,10 @@ const initCards = () => {
//
let joinLottery = false;
//
const enterLottery = () => {
const enterLottery = async () => {
joinLottery = true;
removeHighlight();
await nextTick();
// rotate = !rotate;
rotate = true;
switchScreen("lottery");
@ -671,11 +678,14 @@ const createCard = (user, isBold, id) => {
return element;
};
function removeHighlight() {
const removeHighlight = async () => {
document.querySelectorAll(".highlight").forEach((node) => {
node.classList.remove("highlight");
console.log(node.id);
node.className = "";
node.classList.add("element");
node.style.backgroundColor = "rgb(255,170,22)";
});
}
};
function addHighlight() {
document.querySelectorAll(".lightitem").forEach((node) => {
@ -1096,7 +1106,7 @@ const lotteryBtn = () => {
// console.log("isLotting", isLotting);
// console.log("currentPrize.value", currentPrize.value);
if (isLotting) {
stopLottery();
throttledStopLottery();
return;
}
@ -1150,9 +1160,10 @@ const lotteryBtn = () => {
const text = "正在抽取[" + currentPrize.value.prizeName + "],调整好姿势";
// addQipao(text);
};
/**
* 抽奖
*/
const throttledLotteryBtn = _.throttle(lotteryBtn, 1000, {
trailing: false,
});
const lottery = () => {
rotateBall().then(() => {
@ -1192,6 +1203,10 @@ const stopLottery = () => {
playDongAudio();
};
const throttledStopLottery = _.throttle(stopLottery, 1000, {
trailing: false,
});
const changePrize = async () => {
let type = currentPrize.value.type;
@ -1234,13 +1249,15 @@ function changeSelectedCard(cardIndex, user) {
/**
* 切换名牌背景
*/
function changeBackground(cardIndex, color) {
const changeBackground = async (cardIndex) => {
let card = threeDCards[cardIndex].element;
// card.style.backgroundColor =
// color || "rgba(255,170,22," + (Math.random() * 0.7 + 0.25) + ")";
card.style.backgroundColor = color || "rgba(255,170,22,1)";
card.style.border = "2px solid rgba(255, 255, 255, 1)";
}
card.style.backgroundColor = "rgb(255,170,22) !important";
card.style.border = "2px solid rgb(255, 255, 255)";
// await nextTick();
};
/**
* 随机切换背景和人员信息
@ -1264,7 +1281,7 @@ function shineCard() {
continue;
}
changeBackground(cardIndex);
// changeBackground(cardIndex);
changeCard(cardIndex, users.value[index]);
}
}, 500);
@ -1297,7 +1314,6 @@ function onWindowResize() {
onMounted(async () => {
initAll();
window.addEventListener("resize", onWindowResize, false);
});
</script>
@ -1441,11 +1457,11 @@ button {
height: 70px;
color: #fff;
border: 0;
font-size: 2.5vh;
font-size: 20px;
font-weight: bold;
cursor: pointer;
text-align: center;
padding-top: 5px;
padding-top: 12px;
}
.highlight {

Loading…
Cancel
Save