Merge branch 'wangyi/feature-20250710191445-抽奖' into milestone-20250722-抽奖

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
   }
 })

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

@@ -368,6 +368,7 @@ const initAll = async () => {
     getPrizeListApi(),
     getUserListApi(),
   ]);
+  console.log("hxl-cj调用一次接口", prizeList);
   //   奖品列表
   prizes.value = prizeList.data;
   //   用户列表

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;
+  }, 4000);
+
   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;
+      }, 2800);
       // result 状态下点击不做任何事，或者你可以加提示
+
       await lottery3DRef.value?.switchScreen?.("lottery");
 
       await new Promise((resolve) => setTimeout(resolve, 2500));

src/views/choujiang/lottery/Lottery3D.vue

@@ -154,8 +154,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);
   }
@@ -735,6 +737,7 @@ onMounted(async () => {
   };
 
   const userList = await getUserListApi();
+  console.log("3D调用一次接口", userList);
   // lotteryStore.setWinners(userList);
   // console.log("userList", userList);
   // 将用户数据转换为兼容格式，用于3D卡片显示

src/views/choujiang/lottery/PrizePanel.vue

@@ -206,6 +206,7 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
 import { useLotteryStore } from "../../../store/lottery";
 import { useDataManager } from "../lottery/dataManager";
 
+
 const props = defineProps({
   prizes: Array,
 });
@@ -305,11 +306,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);
@@ -423,6 +425,9 @@ function getProgressPercent(prize) {
   display: flex;
   flex-direction: column;
   gap: 18px;
+  overflow-y: auto;
+  max-height: 700px;
+  
 }
 .prize-panel-item {
   background: #ffd283;
@@ -430,7 +435,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 {

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);
@@ -49,6 +50,7 @@ export function useDataManager() {
     
     // 获取真实用户数据
     const userListResponse = await getUserListApi();
+    console.log("dataManager调用一次接口", userListResponse);
     console.log("userList", userListResponse);
     
     // 将后端返回的用户数据转换为兼容格式
@@ -170,7 +172,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);

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)) {
         // 后端返回中奖用户数据