Merge branch 'milestone-20250722-抽奖' into milestone-20250722-众筹抽奖合并专用分支

README.md

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

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": {

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",

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 {