Merge branch 'hongxilin/feature-20250710175148-抽奖' into milestone-20250722-抽奖

src/api/API.js

@@ -26,7 +26,7 @@ export const getGetPrizeUserListApi = function (params) {
   return request({
     url: `${APIurl}/api/winUser/list`,
     method: "POST",
-    data: params,
+    data: new URLSearchParams(params),
   });
 };
 

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

@@ -1,10 +1,11 @@
 <template>
   <div class="homepage">
     <img src="../../../assets/qilin.webp" alt="麒麟" class="hllogo" />
-    <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>
+
+    <!-- 添加worldcup音频元素 -->
+    <audio ref="worldcupAudioRef" :src="worldcup" preload="auto" loop></audio>
+    <!-- 添加dong音频元素 -->
+    <audio ref="dongAudioRef" :src="dong" preload="auto"></audio>
 
     <div ref="qipaoTextRef" class="qipao">{{ qipaoText }}</div>
 
@@ -91,6 +92,16 @@
               </div>
             </div>
           </el-scrollbar>
+          <div class="tableFoot">
+            <span @click="leftPage()" style="cursor: pointer"><</span>
+            {{ currentPage }}
+            <span @click="rightPage()" style="cursor: pointer">></span>
+            <span class="tableTotalPage">
+              共
+              <span>{{ totalPage }}</span>
+              页
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -104,22 +115,6 @@
       </div>
     </div>
 
-    <!-- <img
-      src="../../../assets/img/展开.png"
-      alt="向右"
-      @click="rightPage()"
-      class="rightPage"
-      id="rightPage"
-    />
-
-    <img
-      src="../../../assets/img/展开.png"
-      alt="向左"
-      @click="leftPage()"
-      class="leftPage"
-      id="leftPage"
-    /> -->
-
     <div id="menu">
       <div id="enter" ref="enterRef" @click="enterLottery()" class="btn">
         进入抽奖
@@ -137,7 +132,6 @@
 <script setup>
 import { ref, onMounted, reactive, nextTick } from "vue";
 import { useRouter } from "vue-router";
-import musicFile from "../../../data/music.mp3";
 import * as THREE from "three";
 import axios from "axios";
 import "../../../assets/css/animate.min.css";
@@ -146,6 +140,8 @@ import { NUMBER_MATRIX } from "../../../utils/config";
 import { CSS3DObject, CSS3DRenderer } from "../../../utils/CSS3DRenderer.js";
 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 {
   getPrizeListApi,
@@ -214,6 +210,42 @@ let prizeElement = {};
 
 const qipaoText = ref("");
 const qipaoTextRef = ref(null);
+
+const worldcupAudioRef = ref(null);
+const dongAudioRef = ref(null);
+// 播放worldcup音频
+const playWorldcupAudio = () => {
+  if (worldcupAudioRef.value) {
+    worldcupAudioRef.value.currentTime = 0; // 重置播放位置
+    worldcupAudioRef.value.play().catch((error) => {
+      console.log("音频播放失败:", error);
+    });
+  }
+};
+
+// 暂停worldcup音频
+const pauseWorldcupAudio = () => {
+  if (worldcupAudioRef.value) {
+    worldcupAudioRef.value.pause();
+  }
+};
+
+const playDongAudio = () => {
+  if (dongAudioRef.value) {
+    dongAudioRef.value.currentTime = 0; // 重置播放位置
+    dongAudioRef.value.play().catch((error) => {
+      console.log("音频播放失败:", error);
+    });
+  }
+};
+
+// 暂停dong音频
+const pauseDongAudio = () => {
+  if (dongAudioRef.value) {
+    dongAudioRef.value.pause();
+  }
+};
+
 const addQipao = (text) => {
   qipaoTextRef.value.style.display = "block";
   qipaoTextRef.value.style.opacity = "1";
@@ -233,14 +265,25 @@ const addQipao = (text) => {
 
 const getPrizeUserList = ref([]);
 const isOpen = ref(false);
+
+const pageObj = ref({
+  pageNum: 1,
+  pageSize: 14,
+});
+
+const currentPage = ref(1);
+const totalPage = ref(10);
+
 const openGetPrize = async () => {
   if (!prizes.value[prizes.value.length - 1].isLook) {
     addQipao("请先揭晓奖品。");
     return;
   }
 
-  let res = await getGetPrizeUserListApi({});
+  let res = await getGetPrizeUserListApi(pageObj.value);
   getPrizeUserList.value = res.data.list;
+  currentPage.value = res.data.pageNum;
+  totalPage.value = res.data.pages;
   isOpen.value = true;
   //   console.log("currentPrize", currentPrize.value);
   prizes.value.forEach((item) => {
@@ -267,6 +310,23 @@ const closeGetPrize = () => {
   //   scroll.style.height = "650px";
 };
 
+const leftPage = async (item) => {
+  if (currentPage.value == 1) return;
+  currentPage.value--;
+  pageObj.value.pageNum = currentPage;
+  let res = await getGetPrizeUserListApi(pageObj.value);
+  getPrizeUserList.value = res.data.list;
+  currentPage.value = res.data.pageNum;
+};
+const rightPage = async (item) => {
+  if (currentPage.value == totalPage.value) return;
+  currentPage.value++;
+  pageObj.value.pageNum = currentPage;
+  let res = await getGetPrizeUserListApi(pageObj.value);
+  getPrizeUserList.value = res.data.list;
+  currentPage.value = res.data.pageNum;
+};
+
 //揭示奖品
 const lookPrize = async (item) => {
   // 未进入抽奖禁止揭晓
@@ -648,132 +708,6 @@ function render() {
   renderer.render(scene, camera);
 }
 
-// 展开
-// 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);
-
-//   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) => {
@@ -1118,6 +1052,9 @@ const lotteryBtn = () => {
     return;
   }
 
+  // 播放worldcup音频
+  playWorldcupAudio();
+
   getPrizeUsers.value = [];
   let params = {
     gradeId: currentPrize.value.gradeId,
@@ -1186,6 +1123,10 @@ const lottery = () => {
 const stopLottery = () => {
   lotteryRef.value.innerHTML = "开始抽奖";
   rotateObj.stop();
+
+  // 暂停worldcup音频
+  pauseWorldcupAudio();
+  playDongAudio();
 };
 
 const changePrize = async () => {
@@ -1284,70 +1225,6 @@ const createHighlight = () => {
   return highlight;
 };
 
-// 音乐播放器初始化函数
-const initMusicPlayer = () => {
-  const musicBox = document.querySelector("#musicBox");
-  if (musicBox) {
-    // 1秒后自动尝试播放
-    setTimeout(() => {
-      musicPlay();
-    }, 1000);
-  }
-};
-
-const musicPlay = () => {
-  console.log("musicPlay 方法被调用");
-
-  const music = document.querySelector("#music");
-  const musicBox = document.querySelector("#musicBox");
-
-  if (!music || !musicBox) {
-    console.error("音乐元素未找到");
-    return;
-  }
-
-  if (music.paused) {
-    music
-      .play()
-      .then(() => {
-        console.log("音乐开始播放");
-        startRotateAnimation(musicBox);
-      })
-      .catch((error) => {
-        console.error("音乐播放失败:", error);
-      });
-  } else {
-    console.log("音乐暂停");
-    music.pause();
-    stopRotateAnimation();
-  }
-};
-
-// 旋转动画管理
-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() {
   camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
@@ -1736,7 +1613,7 @@ a {
   display: flex;
   margin-top: 50px;
   width: 100%;
-  height: 54vh;
+  height: 50vh;
   justify-content: center;
   overflow-y: auto;
   /* 启用垂直滚动 */
@@ -1772,6 +1649,14 @@ a {
   text-align: center;
 }
 
+.tableFoot {
+  color: black;
+}
+
+.tableTotalPage {
+  font-size: 10px;
+}
+
 .readyLook {
   width: 100%;
   height: 100%;