一期终版

.env.development

@@ -5,7 +5,7 @@ VITE_OUTPUT_DIR = 'dev'
 VITE_PUBLIC_PATH = /
 
 #新数据接口
-VITE_APP_API_BASE_URL = "http://47.92.148.30:3003/mock/3267"
+VITE_APP_API_BASE_URL = "https://dbqb.nfdxy.net/devLotApi"
 
 
 # Whether to open mock

.env.production

@@ -9,7 +9,7 @@ VITE_PUBLIC_PATH = /aixiaocaishen
 VITE_USE_MOCK = true
 
 #新数据接口
-VITE_APP_API_BASE_URL = http://47.92.148.30:3003/mock/3267
+VITE_APP_API_BASE_URL = https://dbqb.nfdxy.net/devLotApi
 
 # Whether to enable gzip or brotli compression
 # Optional: gzip | brotli | none

src/api/API.js

@@ -2,3 +2,29 @@ import request from "../utils/request";
 
 const APIurl = import.meta.env.VITE_APP_API_BASE_URL;
 
+// 查询所有奖品和对应等级,按sort排序
+export const getPrizeListApi = function (params) {
+  return request({
+    url: `/Api/api/prize/list`,
+    method: "POST",
+    data: new URLSearchParams(params),
+  });
+};
+
+// 查询用户
+export const getUserListApi = function (params) {
+  return request({
+    url: `/Api/api/user/list`,
+    method: "POST",
+    data: new URLSearchParams(params),
+  });
+};
+
+// 查询中奖名单
+export const getGetPrizeUserListApi = function (params) {
+  return request({
+    url: `/Api/admin/win/list`,
+    method: "POST",
+    data: params,
+  });
+};

src/utils/TrackballControls.js

@@ -375,7 +375,7 @@ export class TrackballControls extends THREE.EventDispatcher {
           event.preventDefault();
           event.stopPropagation();
 
-          return;
+          // return;
 
           switch (event.deltaMode) {
             case 2:
@@ -485,7 +485,7 @@ export class TrackballControls extends THREE.EventDispatcher {
         this.dispose = function () {
           this.domElement.removeEventListener("contextmenu", contextmenu, false);
           this.domElement.removeEventListener("mousedown", mousedown, false);
-          this.domElement.removeEventListener("wheel", mousewheel, false);
+          // this.domElement.removeEventListener("wheel", mousewheel, false);
 
           this.domElement.removeEventListener("touchstart", touchstart, false);
           this.domElement.removeEventListener("touchend", touchend, false);
@@ -500,7 +500,7 @@ export class TrackballControls extends THREE.EventDispatcher {
 
         this.domElement.addEventListener("contextmenu", contextmenu, false);
         this.domElement.addEventListener("mousedown", mousedown, false);
-        this.domElement.addEventListener("wheel", mousewheel, false);
+        // this.domElement.addEventListener("wheel", mousewheel, false);
 
         this.domElement.addEventListener("touchstart", touchstart, false);
         this.domElement.addEventListener("touchend", touchend, false);

src/utils/request.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
-import { config } from '@/config'
 
 const ERROR_MESSAGES = {
 	badRequest: '请求错误(400)',

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

@@ -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,99 +642,212 @@ 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));
-  }
-
-  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);
+// 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;
 
-  rotate = false; //停止旋转
-  let width = 180;
-  let tag = -(getCurrentLucky[index].length - 1) / 2;
-  let locates = [];
+      const pageLocate = [];
 
-  // 计算位置信息, 大于5个分两排显示
-  if (getCurrentLucky[index].length > 5) {
-    let yPosition = [-120, 120];
+      // 根据当前页的人数决定排列方式
+      if (pageCount > 5) {
+        // 大于5个分两排显示（与抽10人时的排列相同）
+        const yPosition = [-75, 120];
+        const mid = Math.ceil(pageCount / 2);
+        let tag = -(mid - 1) / 2;
 
-    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,
+          pageLocate.push({
+            x: tag * width,
+            y: yPosition[0],
           });
           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 = -(pageCount - mid - 1) / 2;
+        for (let i = mid; i < pageCount; i++) {
+          pageLocate.push({
+            x: tag * width,
+            y: yPosition[1],
           });
           tag++;
         }
       } else {
-    for (let i = getCurrentIndex[index].length; i > 0; i--) {
-      locates.push({
-        x: tag * width * Resolution,
-        y: 0 * Resolution,
+        // 小于等于5个一排显示（与抽不足10人时的排列相同）
+        let tag = -(pageCount - 1) / 2;
+        for (let i = 0; i < pageCount; i++) {
+          pageLocate.push({
+            x: tag * width,
+            y: 0,
           });
           tag++;
         }
       }
 
-  getCurrentIndex[index].forEach((cardIndex, iindex) => {
-    changeCard(cardIndex, getCurrentLucky[index][iindex]);
-    var object = threeDCards[cardIndex];
+      pageLocates.push(pageLocate);
+    }
+
+    // console.log("pageLocates calculated:", pageLocates);
+
+    // 初始化所有卡片位置（隐藏超出第一页的卡片）
+    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: locates[iindex].x,
-          y: locates[iindex].y * Resolution,
-          z: 2000,
+            x: isVisible ? pageLocate.x : pageLocate.x,
+            y: isVisible ? pageLocate.y : pageLocate.y + 1000, // 隐藏的卡片移到下方
+            z: 2100,
           },
           Math.random() * duration + duration
         )
@@ -749,16 +869,122 @@ function selectCard(duration = 600, index = 0) {
       object.element.classList.add("prize");
     });
 
-  new TWEEN.Tween(this)
+    // 保存页面位置信息到全局变量，供switchPage使用
+    window.pageLocates = pageLocates;
+
+    new TWEEN.Tween({})
       .to({}, duration * 2)
-    .onUpdate(render)
+      .onUpdate(() => render())
       .start()
       .onComplete(() => {
-      // 动画结束后可以操作
+        console.log("selectCard animation completed");
+        // 如果有多页，添加鼠标滚轮事件监听
+        if (pageMaxIndex.value > 1) {
+          //   console.log("pageMaxIndex添加滚轮", pageMaxIndex.value);
+          // 添加滚轮事件监听
+          addWheelListener();
+        }
+
         setLotteryStatus();
+        resolve();
+      });
   });
 }
 
+// 分页切换函数
+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;
+  }
+
+  // 动画切换卡片位置
+  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: pageLocate.x,
+          y: isVisible ? pageLocate.y : pageLocate.y + 1000,
+          z: 2100,
+        },
+        duration
+      )
+      .easing(TWEEN.Easing.Cubic.InOut)
+      .start();
+  });
+
+  new TWEEN.Tween({})
+    .to({}, duration)
+    .onUpdate(() => render())
+    .onComplete(() => {
+      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;
-
-window.onload = function () {
-  if (onload) {
-    onload();
+// 音乐播放器初始化函数
+const initMusicPlayer = () => {
+  const musicBox = document.querySelector("#musicBox");
+  if (musicBox) {
+    // 1秒后自动尝试播放
+    setTimeout(() => {
+      musicPlay();
+    }, 1000);
   }
+};
 
-  let music = document.querySelector("#music");
+const musicPlay = () => {
+  console.log("musicPlay 方法被调用");
 
-  let rotated = 0;
-  let stopAnimate = false;
-  let musicBox = document.querySelector("#musicBox");
+  const music = document.querySelector("#music");
+  const musicBox = document.querySelector("#musicBox");
 
-  function animate() {
-    requestAnimationFrame(function () {
-      if (stopAnimate) {
+  if (!music || !musicBox) {
+    console.error("音乐元素未找到");
     return;
   }
-      rotated = rotated % 360;
-      musicBox.style.transform = "rotate(" + rotated + "deg)";
-      rotated += 1;
-      animate();
-    });
-  }
 
-  musicBox.addEventListener(
-    "click",
-    function (e) {
   if (music.paused) {
-        music.play().then(
-          () => {
-            stopAnimate = false;
-            animate();
-          },
-          () => {
-            addQipao("背景音乐自动播放失败，请手动播放！");
-          }
-        );
+    music
+      .play()
+      .then(() => {
+        console.log("音乐开始播放");
+        startRotateAnimation(musicBox);
+      })
+      .catch((error) => {
+        console.error("音乐播放失败:", error);
+      });
   } else {
+    console.log("音乐暂停");
     music.pause();
-        stopAnimate = true;
+    stopRotateAnimation();
   }
-    },
-    false
-  );
+};
 
-  setTimeout(function () {
-    musicBox.click();
-  }, 1000);
+// 旋转动画管理
+let rotationState = { rotated: 0, stopAnimate: false, animationId: null };
+
+const startRotateAnimation = (element) => {
+  rotationState.stopAnimate = false;
+
+  function animate() {
+    if (rotationState.stopAnimate) return;
+
+    rotationState.rotated = (rotationState.rotated + 1) % 360;
+    element.style.transform = `rotate(${rotationState.rotated}deg)`;
+    rotationState.animationId = requestAnimationFrame(animate);
+  }
+
+  animate();
+};
+
+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;

src/views/choujiang/lottery/Lottery3D.vue

@@ -189,7 +189,10 @@ function selectCard(selectedCardIndex, currentLuckys, duration = 600) {
 
     for (let page = 0; page < totalPages.value; page++) {
       const startIndex = page * cardsPerPage;
-      const endIndex = Math.min((page + 1) * cardsPerPage, currentLuckys.length);
+      const endIndex = Math.min(
+        (page + 1) * cardsPerPage,
+        currentLuckys.length
+      );
       const pageCount = endIndex - startIndex;
 
       const pageLocate = [];
@@ -296,7 +299,8 @@ function selectCard(selectedCardIndex, currentLuckys, duration = 600) {
 function switchPage(direction) {
   if (isPageTransitioning || totalPages.value <= 1) return;
 
-  const newPage = direction === 'next' ? currentPage.value + 1 : currentPage.value - 1;
+  const newPage =
+    direction === "next" ? currentPage.value + 1 : currentPage.value - 1;
   if (newPage < 0 || newPage >= totalPages.value) return;
 
   isPageTransitioning = true;
@@ -305,11 +309,11 @@ function switchPage(direction) {
   // 使用保存的页面位置信息
   const pageLocates = window.pageLocates;
   if (!pageLocates) {
-    console.error('页面位置信息未找到');
+    console.error("页面位置信息未找到");
     isPageTransitioning = false;
     return;
   }
-  
+  console.log("globalCardIndexes", globalCardIndexes);
   // 动画切换卡片位置
   globalCardIndexes.forEach((cardIndex, index) => {
     const object = threeDCards[cardIndex];
@@ -320,6 +324,15 @@ function switchPage(direction) {
     const pageIndex = index % cardsPerPage;
     const pageLocate = pageLocates[cardPage][pageIndex];
 
+    console.log(
+      "cardPage",
+      cardPage,
+      "pageIndex",
+      pageIndex,
+      "pageLocate",
+      pageLocate
+    );
+
     new TWEEN.Tween(object.position)
       .to(
         {
@@ -339,12 +352,13 @@ function switchPage(direction) {
     .onComplete(() => {
       currentPage.value = newPage;
       isPageTransitioning = false;
-      console.log(`切换到第 ${currentPage.value + 1} 页，共 ${totalPages.value} 页`);
+      console.log(
+        `切换到第 ${currentPage.value + 1} 页，共 ${totalPages.value} 页`
+      );
     })
     .start();
 }
 
-
 // function switchPage(direction) {
 //   if (isPageTransitioning || totalPages.value <= 1) return;
 
@@ -405,24 +419,26 @@ function handleWheel(event) {
 
   if (event.deltaY > 0) {
     // 向下滚动，显示下一页
-    switchPage('next');
+    switchPage("next");
   } else if (event.deltaY < 0) {
     // 向上滚动，显示上一页
-    switchPage('prev');
+    switchPage("prev");
   }
 }
 
 // 添加鼠标滚轮事件监听器
 function addWheelListener() {
   if (threeContainer.value) {
-    threeContainer.value.addEventListener('wheel', handleWheel, { passive: false });
+    threeContainer.value.addEventListener("wheel", handleWheel, {
+      passive: false,
+    });
   }
 }
 
 // 移除鼠标滚轮事件监听器
 function removeWheelListener() {
   if (threeContainer.value) {
-    threeContainer.value.removeEventListener('wheel', handleWheel);
+    threeContainer.value.removeEventListener("wheel", handleWheel);
   }
 }
 
@@ -501,17 +517,15 @@ function changeCard(cardIndex, user) {
   //   user[0] || ""
   // }<br/>${user[2] || "PSST"}</div>`;
 
-    card.style.setProperty('background-color', '#ffffff', 'important');
+  card.style.setProperty("background-color", "#ffffff", "important");
 
   // card.style.backgroundColor = '#ffffff';
 
   // card.style.backgroundColor = '';
-
-
 }
 
 function changeCard1() {
-  console.log('执行取消高光，当前卡片索引:', globalCardIndexes);
+  console.log("执行取消高光，当前卡片索引:", globalCardIndexes);
 
   // 移除鼠标滚轮事件监听器
   removeWheelListener();
@@ -526,13 +540,17 @@ function changeCard1() {
     delete window.pageLocates;
   }
 
-  globalCardIndexes.forEach(cardIndex => {
+  globalCardIndexes.forEach((cardIndex) => {
     const card = threeDCards[cardIndex].element;
-    console.log('取消卡片', cardIndex, '的高光');
-    card.style.setProperty('background-color', 'rgba(254, 177, 48, 1)', 'important');
+    console.log("取消卡片", cardIndex, "的高光");
+    card.style.setProperty(
+      "background-color",
+      "rgba(254, 177, 48, 1)",
+      "important"
+    );
 
     // 移除prize类，因为CSS规则会覆盖backgroundColor
-    card.classList.remove('prize');
+    card.classList.remove("prize");
   });
   // 清空数组
   globalCardIndexes = [];
@@ -633,9 +651,9 @@ onMounted(() => {
     10000
   );
   camera.position.z = 3000;
-// camera.position.y = 250; // 整体上移10px
-// 或
-// scene.position.y = 10; // 整体上移10px
+  // camera.position.y = 250; // 整体上移10px
+  // 或
+  // scene.position.y = 10; // 整体上移10px
   renderer = new CSS3DRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   if (threeContainer.value) {
@@ -837,7 +855,12 @@ defineExpose({
 }
 
 @keyframes fadeInOut {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 </style> 

vite.config.js

@@ -2,6 +2,22 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
+// export default defineConfig({
+//   plugins: [vue()],
+// })
+
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+  ],
+  server: {
+    proxy: {
+      '/Api': {
+        target: 'https://dbqb.nfdxy.net/devLotApi',
+        // target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/Api/, '')
+      }
+    }
+  }
 })