抽奖接口返回过慢时的解决

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

@@ -93,14 +93,9 @@
             </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>
+            <span @click="leftPage()" id="leftPage" class="leftPage"><</span>
+            {{ currentPage }}/<span>{{ totalPage }}</span>
+            <span @click="rightPage()" id="rightPage" class="rightPage">></span>
           </div>
         </div>
       </div>
@@ -121,8 +116,13 @@
       </div>
 
       <div id="lotteryBar" ref="lotteryBarRef" class="none">
+        <div v-if="isBackApi">
+          <div class="btn">{{ cjText }}</div>
+        </div>
+        <div v-else>
           <div id="lottery" ref="lotteryRef" @click="lotteryBtn()" class="btn">
-          开始抽奖
+            {{ cjText }}
+          </div>
         </div>
       </div>
     </div>
@@ -311,20 +311,57 @@ const closeGetPrize = () => {
 };
 
 const leftPage = async (item) => {
-  if (currentPage.value == 1) return;
+  if (currentPage.value == 1) {
+    return;
+  }
+  if (currentPage.value == totalPage.value) {
+    const rightPageBtn = document.getElementById("rightPage");
+    rightPageBtn.style.cursor = "pointer";
+    rightPageBtn.style.setProperty(
+      "background",
+      "linear-gradient(90deg, #ff9800 0%, #ff5722 100%)",
+      "important"
+    );
+  }
   currentPage.value--;
   pageObj.value.pageNum = currentPage;
   let res = await getGetPrizeUserListApi(pageObj.value);
   getPrizeUserList.value = res.data.list;
   currentPage.value = res.data.pageNum;
+
+  if (currentPage.value == 1) {
+    const leftPageBtn = document.getElementById("leftPage");
+    leftPageBtn.style.cursor = "not-allowed";
+    leftPageBtn.style.background = "#ccc";
+  }
 };
 const rightPage = async (item) => {
-  if (currentPage.value == totalPage.value) return;
+  if (currentPage.value == totalPage.value) {
+    return;
+  }
+
+  if (currentPage.value == 1) {
+    const leftPageBtn = document.getElementById("leftPage");
+    console.log("leftPageBtn", leftPageBtn);
+    leftPageBtn.style.cursor = "pointer";
+    leftPageBtn.style.setProperty(
+      "background",
+      "linear-gradient(90deg, #ff9800 0%, #ff5722 100%)",
+      "important"
+    );
+  }
+
   currentPage.value++;
   pageObj.value.pageNum = currentPage;
   let res = await getGetPrizeUserListApi(pageObj.value);
   getPrizeUserList.value = res.data.list;
   currentPage.value = res.data.pageNum;
+
+  if (currentPage.value == totalPage.value) {
+    const rightPageBtn = document.getElementById("rightPage");
+    rightPageBtn.style.cursor = "not-allowed";
+    rightPageBtn.style.background = "#ccc";
+  }
 };
 
 //揭示奖品
@@ -1034,6 +1071,8 @@ function resetCard(duration = 500) {
   });
 }
 
+const isBackApi = ref(false);
+const cjText = ref("开始抽奖");
 // 抽奖
 const lotteryBtn = () => {
   //   console.log("isLotting", isLotting);
@@ -1052,6 +1091,10 @@ const lotteryBtn = () => {
     return;
   }
 
+  // lotteryRef.value.innerHTML = "结束抽奖";
+  cjText.value = "结束抽奖";
+
+  isBackApi.value = true;
   // 播放worldcup音频
   playWorldcupAudio();
 
@@ -1067,9 +1110,11 @@ const lotteryBtn = () => {
     .then((res) => {
       // API返回结果时赋值
       getPrizeUsers.value = res.data.data || [];
+      isBackApi.value = false;
       console.log("API返回结果:", res.data.data);
     })
     .catch((err) => {
+      isBackApi.value = false;
       console.error("API调用失败:", err);
       getPrizeUsers.value = [];
     });
@@ -1092,7 +1137,6 @@ const lotteryBtn = () => {
  */
 
 const lottery = () => {
-  lotteryRef.value.innerHTML = "结束抽奖";
   rotateBall().then(() => {
     // 将之前的记录置空
     currentLuckys = [];
@@ -1121,7 +1165,8 @@ const lottery = () => {
 };
 
 const stopLottery = () => {
-  lotteryRef.value.innerHTML = "开始抽奖";
+  // lotteryRef.value.innerHTML = "开始抽奖";
+  cjText.value = "开始抽奖";
   rotateObj.stop();
 
   // 暂停worldcup音频
@@ -1234,7 +1279,6 @@ function onWindowResize() {
 
 onMounted(async () => {
   initAll();
-  initMusicPlayer();
 
   window.addEventListener("resize", onWindowResize, false);
 });
@@ -1314,26 +1358,6 @@ a {
   pointer-events: none;
 }
 
-.rightPage {
-  width: 75px;
-  position: fixed;
-  transform: rotate(270deg);
-  top: 50%;
-  right: 15%;
-  display: none;
-  z-index: 999;
-}
-
-.leftPage {
-  width: 75px;
-  position: fixed;
-  transform: rotate(90deg);
-  top: 50%;
-  left: 23%;
-  display: none;
-  z-index: 999;
-}
-
 .canvas-box {
   /* background-color: rgb(214, 0, 0); */
   position: fixed;
@@ -1386,6 +1410,10 @@ a {
   /* text-shadow: 0 0 1vh rgba(0, 255, 255, 0.95); */
 }
 
+button {
+  border: none;
+}
+
 .btn {
   background-image: url("../../../assets/img/抽奖按钮.png");
   background-color: transparent;
@@ -1399,6 +1427,7 @@ a {
   font-weight: bold;
   cursor: pointer;
   text-align: center;
+  padding-top: 5px;
 }
 
 .highlight {
@@ -1650,11 +1679,33 @@ a {
 }
 
 .tableFoot {
-  color: black;
+  color: #e64f39;
+  display: flex;
+  gap: 10px;
 }
 
-.tableTotalPage {
-  font-size: 10px;
+.leftPage {
+  background-color: #ccc;
+  color: white;
+  cursor: not-allowed;
+  /* background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); */
+  border-radius: 50%;
+  display: flex;
+  width: 35px;
+  height: 35px;
+  justify-content: center;
+  /* align-items: center; */
+}
+
+.rightPage {
+  color: white;
+  cursor: pointer;
+  background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%);
+  border-radius: 50%;
+  display: flex;
+  width: 35px;
+  height: 35px;
+  justify-content: center;
 }
 
 .readyLook {