From 38e7fb18b3fa79c400da56e0d220c389b906ecc3 Mon Sep 17 00:00:00 2001
From: Ethereal <3432649580@qq.com>
Date: Mon, 21 Jul 2025 19:45:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8A=BD=E5=A5=96=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/lottery.js                         | 11 +++-
 src/views/choujiang/index.vue                | 89 +++++++++++++++++++++++++---
 src/views/choujiang/lottery/Lottery3D.vue    |  6 +-
 src/views/choujiang/lottery/PrizePanel.vue   | 10 +++-
 src/views/choujiang/lottery/dataManager.js   |  6 +-
 src/views/choujiang/lottery/lotteryEngine.js | 38 ++++++++----
 6 files changed, 131 insertions(+), 29 deletions(-)

diff --git a/src/store/lottery.js b/src/store/lottery.js
index 53e4900..07fceb5 100644
--- a/src/store/lottery.js
+++ b/src/store/lottery.js
@@ -14,6 +14,9 @@ export const useLotteryStore = defineStore('lottery', () => {
   const allUsers = ref([])
   const isUsersLoaded = ref(false)
 
+  const winnerList = ref([])
+
+
   function setWinners(list) {
     // 如果是数组，则添加到现有数组中；如果是单个项目，则直接添加
     if (Array.isArray(list)) {
@@ -54,6 +57,10 @@ export const useLotteryStore = defineStore('lottery', () => {
     return ""
   }
 
+  function setWinnerList(list) {
+    winnerList.value = list
+  }
+
   return {
     lotteryState,
     setLotteryState,
@@ -67,6 +74,8 @@ export const useLotteryStore = defineStore('lottery', () => {
     allUsers,
     isUsersLoaded,
     setAllUsers,
-    getRandomUserName
+    getRandomUserName,
+    winnerList,
+    setWinnerList
   }
 })
\ No newline at end of file
diff --git a/src/views/choujiang/index.vue b/src/views/choujiang/index.vue
index 89b690a..55f3222 100644
--- a/src/views/choujiang/index.vue
+++ b/src/views/choujiang/index.vue
@@ -19,6 +19,12 @@
       </div>
     </div>
 
+    <div v-if="showPrizeExhaustedModal1" class="prize-exhausted-modal">
+      <div class="modal-content">
+        <p class="modal-text">请先揭秘一个礼品</p>
+      </div>
+    </div>
+
     <!-- <UserList
       :lucky-users="
         dataManager.state.basicData.luckyUsers[
@@ -44,10 +50,12 @@ import { useDataManager } from "./lottery/dataManager.js";
 import { useLotteryEngine } from "./lottery/lotteryEngine.js";
 
 import { useLotteryStore } from "../../store/lottery"; // 路径根据实际情况调整
+import { drawLottery } from "../../api/API";
 
 const qipaoText = ref("");
 const showQipao = ref(false);
 const showPrizeExhaustedModal = ref(false);
+const showPrizeExhaustedModal1 = ref(false);
 
 // const lotteryState = ref('idle'); // idle, ready, rotating, result
 
@@ -68,6 +76,11 @@ const waitingForNextReveal = computed({
   set: (val) => lotteryStore.setWaitingForNextReveal(val),
 });
 
+const winnerList = computed({
+  get: () => lotteryStore.winnerList,
+  set: (val) => lotteryStore.setWinnerList(val),
+});
+
 const isDisabled = ref(false);
 
 watch(isDisabled, (newVal, oldVal) => {
@@ -88,12 +101,17 @@ const lotteryEngine = useLotteryEngine(dataManager, {
 });
 
 onMounted(async () => {
+  isDisabled.value = true;
+  setTimeout(() => {
+    isDisabled.value = false;
+  }, 3800);
+
   await dataManager.getBasicData();
   await dataManager.getUsers();
 
   // 将 dataManager 挂载到 window 对象，供子组件使用
   window.dataManager = dataManager;
-  
+
   // 延迟一点时间确保音乐播放器组件已经加载完成
   setTimeout(() => {
     if (musicPlayerRef.value && !musicPlayerRef.value.isPlaying()) {
@@ -121,12 +139,15 @@ function showLotteryQipao() {
 async function handleLotteryClick() {
   if (isDisabled.value) return; // 2秒内不能重复点击
   isDisabled.value = true;
-  setTimeout(() => {
-    isDisabled.value = false;
-  }, 2000);
+  // setTimeout(() => {
+  //   isDisabled.value = false;
+  // }, 2000);
 
   switch (lotteryState.value) {
     case "idle":
+      setTimeout(() => {
+        isDisabled.value = false;
+      }, 2000);
       // 先切换到球体布局
       await lottery3DRef.value?.switchScreen?.("lottery");
 
@@ -135,6 +156,7 @@ async function handleLotteryClick() {
 
       lotteryState.value = "ready";
       console.log("lotteryState 变更后:", lotteryState.value);
+
       break;
     case "ready":
       if (waitingForNextReveal.value) {
@@ -144,25 +166,72 @@ async function handleLotteryClick() {
         setTimeout(() => {
           showPrizeExhaustedModal.value = false;
         }, 1000);
+        isDisabled.value = false;
+
         break;
       }
 
       if (lastRevealed.value === -1) {
         console.log("lastRevealed.value", lastRevealed.value);
+        showPrizeExhaustedModal1.value = true;
+        setTimeout(() => {
+          showPrizeExhaustedModal1.value = false;
+        }, 1000);
+        isDisabled.value = false;
+
         break;
       }
 
-      // 立即切换为“停止抽奖”
       console.log("lotteryState 变更前:", lotteryState.value, "-> rotating");
       lotteryState.value = "rotating";
       console.log("lotteryState 变更后:", lotteryState.value);
-      // 开始转动
-      // isRunning.value = false; // 无论如何都恢复
 
-      await lottery3DRef.value?.rotateBallStart?.();
+      const prize = dataManager.state.basicData.prizes[lastRevealed.value];
+      console.log("准备调用 drawLottery，prize:", prize);
+      console.log("lastRevealed.value:", lastRevealed.value);
+      // 先让球转起来，不等它结束
+      const rotatePromise = lottery3DRef.value?.rotateBallStart?.();
+
+      // 同时请求接口
+      try {
+        winnerList.value = await drawLottery({
+          perWin: prize.perWin,
+          remainNum: prize.remainNum,
+          gradeId: prize.gradeId,
+          prizeId: prize.prizeId,
+        });
+        setTimeout(() => {
+          isDisabled.value = false;
+        }, 2000);
+
+        console.log("drawLottery 调用成功，结果:", winnerList.value);
+      } catch (error) {
+        console.error("drawLottery 调用失败:", error);
+      }
+
+      // 如果你还需要等球转完再做别的，可以 await rotatePromise
+
       break;
     case "rotating":
+      setTimeout(() => {
+        isDisabled.value = false;
+      }, 2000);
       // 停止转动并开奖
+      // const prize = dataManager.state.basicData.prizes[lastRevealed.value];
+      // console.log("准备调用 drawLottery，prize:", prize);
+      // console.log("lastRevealed.value:", lastRevealed.value);
+      // try {
+      //   winnerList.value = await drawLottery({
+      //     perWin: prize.perWin,
+      //     remainNum: prize.remainNum,
+      //     gradeId: prize.gradeId,
+      //     prizeId: prize.prizeId,
+      //   });
+      //   console.log("drawLottery 调用成功，结果:", winnerList.value);
+      // } catch (error) {
+      //   console.error("drawLottery 调用失败:", error);
+      // }
+
       await lottery3DRef.value?.rotateBallStop?.();
       await lotteryEngine.executeLottery();
       await nextTick();
@@ -174,7 +243,11 @@ async function handleLotteryClick() {
 
       break;
     case "result":
+      setTimeout(() => {
+        isDisabled.value = false;
+      }, 2000);
       // result 状态下点击不做任何事，或者你可以加提示
+
       await lottery3DRef.value?.switchScreen?.("lottery");
 
       await new Promise((resolve) => setTimeout(resolve, 2500));
diff --git a/src/views/choujiang/lottery/Lottery3D.vue b/src/views/choujiang/lottery/Lottery3D.vue
index d9d1dd5..d054935 100644
--- a/src/views/choujiang/lottery/Lottery3D.vue
+++ b/src/views/choujiang/lottery/Lottery3D.vue
@@ -122,8 +122,10 @@ function createSphereTargets() {
     const theta = Math.sqrt(l * Math.PI) * phi;
     const object = new THREE.Object3D();
     object.position.setFromSphericalCoords(600, phi, theta);
-    // object.position.y -= 400; // 向下偏移10px// object.position.y -= 20; // yOffset 是你想要的偏移量
-    vector.copy(object.position).multiplyScalar(2);
+    object.position.y -= 200; // 向下偏移200px
+    
+    // 修正朝向计算：让卡牌朝向球体中心点
+    vector.set(0, -200, 0); // 球体中心点，Y轴偏移与上面保持一致
     object.lookAt(vector);
     targets.sphere.push(object);
   }
diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue
index 4527403..6b1f137 100644
--- a/src/views/choujiang/lottery/PrizePanel.vue
+++ b/src/views/choujiang/lottery/PrizePanel.vue
@@ -203,6 +203,7 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
 import { useLotteryStore } from "../../../store/lottery";
 import { useDataManager } from "../lottery/dataManager";
 
+
 const props = defineProps({
   prizes: Array,
 });
@@ -302,11 +303,12 @@ const fakeWinners = ref([]);
 // fakeWinners.value = winners.value;
 console.log("fakeWinners", fakeWinners.value);
 
+import { getGetPrizeUserListApi } from "../../../api/API";
 const updateWinners = async () => {
   try {
-    const response = await useDataManager().updatePrizeList();
+    const response = await getGetPrizeUserListApi({})
     console.log("updatePrizeList response", response);
-    fakeWinners.value = response.data.data.list;
+    fakeWinners.value = response.data.list;
     console.log("updateWinners fakeWinners", fakeWinners.value);
   } catch (error) {
     console.error("updatePrizeList error", error);
@@ -420,6 +422,9 @@ function getProgressPercent(prize) {
   display: flex;
   flex-direction: column;
   gap: 18px;
+  overflow-y: auto;
+  max-height: 700px;
+  
 }
 .prize-panel-item {
   background: #ffd283;
@@ -427,7 +432,6 @@ function getProgressPercent(prize) {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
-
   min-width: 320px;
 }
 .prize-card {
diff --git a/src/views/choujiang/lottery/dataManager.js b/src/views/choujiang/lottery/dataManager.js
index a5bd818..dde00bc 100644
--- a/src/views/choujiang/lottery/dataManager.js
+++ b/src/views/choujiang/lottery/dataManager.js
@@ -36,7 +36,8 @@ export function useDataManager() {
       img: item.imageUrl,
       gradeId: item.gradeId,
       prizeId: item.prizeId,
-      remainNum: item.remainNum
+      remainNum: item.remainNum,
+      perWin:  item.perWin
     }));
 
     const fakeEachCount = prizeList.data.map(item => item.perWin);
@@ -170,7 +171,8 @@ export function useDataManager() {
         img: item.imageUrl,
         gradeId: item.gradeId,
         prizeId: item.prizeId,
-        remainNum: item.remainNum
+        remainNum: item.remainNum,
+        perWin: item.perWin
       }));
 
       const fakeEachCount = prizeList.data.map(item => item.perWin);
diff --git a/src/views/choujiang/lottery/lotteryEngine.js b/src/views/choujiang/lottery/lotteryEngine.js
index e0423fa..3520454 100644
--- a/src/views/choujiang/lottery/lotteryEngine.js
+++ b/src/views/choujiang/lottery/lotteryEngine.js
@@ -2,14 +2,26 @@ import { ref, computed, watch } from 'vue';
 import { useLotteryStore } from '../../../store/lottery' // 路径根据实际情况调整
 import { drawLottery } from '../../../api/API'; // 导入新的抽奖接口
 
+
+
 function getRandomInt(max) {
   return Math.floor(Math.random() * max);
 }
 
 const lotteryStore = useLotteryStore();
-const winners = computed({
-  get: () => lotteryStore.winners,
-  set: (val) => lotteryStore.setWinners(val),
+// const winners = computed({
+//   get: () => lotteryStore.winners,
+//   set: (val) => lotteryStore.setWinners(val),
+// });
+
+const lastRevealed = computed({
+  get: () => lotteryStore.lastRevealedIdx,
+  set: (val) => lotteryStore.setLastRevealedIdx(val),
+});
+
+const winnerList = computed({
+  get: () => lotteryStore.winnerList,
+  set: (val) => lotteryStore.setWinnerList(val),
 });
 
 
@@ -34,13 +46,13 @@ export function useLotteryEngine(dataManager, renderer3D) {
     
     // 计算本次应该抽奖的人数
     const currentPrizeIndex = dataManager.state.currentPrizeIndex;
-    const prize = dataManager.state.basicData.prizes[currentPrizeIndex];
-    const luckyUsers = dataManager.state.basicData.luckyUsers[currentPrizeIndex] || [];
+    const prize = dataManager.state.basicData.prizes[lastRevealed.value];
+    const luckyUsers = dataManager.state.basicData.luckyUsers[lastRevealed.value] || [];
     const remainingPrizeCount = prize.count - luckyUsers.length; // 奖品剩余数量
-    const basePerCount = dataManager.state.config.EACH_COUNT[currentPrizeIndex] || 1;
+    const basePerCount = dataManager.state.config.EACH_COUNT[lastRevealed.value] || 1;
     const actualPerCount = Math.min(basePerCount, remainingPrizeCount); // 取最小值
     
-    console.log('executeLottery - currentPrizeIndex:', currentPrizeIndex, 'prize:', prize, 'basePerCount:', basePerCount, 'remainingPrizeCount:', remainingPrizeCount, 'actualPerCount:', actualPerCount);
+    console.log('executeLottery - currentPrizeIndex:', lastRevealed.value, 'prize:', prize, 'basePerCount:', basePerCount, 'remainingPrizeCount:', remainingPrizeCount, 'actualPerCount:', actualPerCount);
     
     // 请求后端进行抽奖
     try {
@@ -51,14 +63,14 @@ export function useLotteryEngine(dataManager, renderer3D) {
         remainNum: prize.remainNum
       };
       
-      console.log('请求后端抽奖，参数:', lotteryData);
-      const response = await drawLottery(lotteryData);
-      console.log('response', response);
-      winners.value = response.data.data;
-      console.log('抽奖的winners', winners.value);
+      // console.log('请求后端抽奖，参数:', lotteryData);
+      const response =  winnerList.value
+      console.log('后端抽奖返回结果:', response);
+      // winners.value = response.data.data;
+      // console.log('抽奖的winners', winners.value);
       // winners.value = response.data;  
 
-      console.log('后端抽奖返回结果:', response);
+      // console.log('后端抽奖返回结果:', response);
       
       if (response && response.data.data && Array.isArray(response.data.data)) {
         // 后端返回中奖用户数据