Merge branch 'milestone-20250722-抽奖' into pangluotong/feature-20250712103401-抽奖

.env.development

@@ -2,7 +2,7 @@
 VITE_ENV = 'development'
 VITE_OUTPUT_DIR = 'dev'
 # public path
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = /test
 
 #新数据接口
 VITE_APP_API_BASE_URL = "https://dbqb.nfdxy.net/devLotApi"

.env.production

@@ -2,7 +2,7 @@
 VITE_ENV = 'production'
 VITE_OUTPUT_DIR = 'dist'
 # public path
-VITE_PUBLIC_PATH = /aixiaocaishen
+VITE_PUBLIC_PATH = /
 # VITE_PUBLIC_PATH = /
 
 # Whether to open mock

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

@@ -376,7 +376,7 @@ const initAll = async () => {
   prizes.value.forEach((item, index) => {
     item.type = index;
     item.count = item.amount;
-    item.leftCount = item.amount; //剩余次数（用于计算奖品下方的进度条的百分比）
+    item.leftCount = item.remainNum; //剩余次数（用于计算奖品下方的进度条的百分比）
     item.hasCount = item.amount; //已抽次数（用于计算出奖）
     item.isLook = false; //
     EACH_COUNT.push(item.perWin);
@@ -917,7 +917,7 @@ function switchPage(direction) {
     const object = threeDCards[cardIndex];
     const cardPage = Math.floor(index / cardsPerPage);
     const isVisible = cardPage === newPage;
-
+    const wasVisible = cardPage === pageIndex.value;
     // 计算在当前页中的索引
     const pageNowIndex = index % cardsPerPage;
     const pageLocate = pageLocates[cardPage][pageNowIndex];
@@ -930,11 +930,53 @@ function switchPage(direction) {
     //   "pageLocate",
     //   pageLocate
     // );
+
+    // 根据切换方向决定动画效果
+    let targetY;
+    if (isVisible) {
+      // 当前页要显示的卡片
+      if (direction === "next") {
+        // 索引增大：从下方飞出
+        targetY = pageLocate.y;
+      } else {
+        // 索引减少：从上方飞出
+        targetY = pageLocate.y;
+      }
+    } else {
+      // 当前页要隐藏的卡片
+      if (direction === "next") {
+        // 索引增大：向上飞走
+        targetY = pageLocate.y + 1000;
+      } else {
+        // 索引减少：向下飞走
+        targetY = pageLocate.y - 1000;
+      }
+    }
+
+    // 设置起始位置
+    let startY;
+    if (wasVisible) {
+      // 当前页的卡片从当前位置开始
+      startY = object.position.y;
+    } else {
+      // 非当前页的卡片从隐藏位置开始
+      if (direction === "next") {
+        // 索引增大：从下方开始
+        startY = pageLocate.y - 1000;
+      } else {
+        // 索引减少：从上方开始
+        startY = pageLocate.y + 1000;
+      }
+    }
+
+    // 先设置起始位置
+    object.position.y = startY;
+
     new TWEEN.Tween(object.position)
       .to(
         {
           x: pageLocate.x,
-          y: isVisible ? pageLocate.y : pageLocate.y + 1000,
+          y: targetY,
           z: 2100,
         },
         duration
@@ -1073,16 +1115,17 @@ const lotteryBtn = () => {
 
   getPrizeUsers.value = [];
   let params = {
-    gradeName: currentPrize.value.gradeName,
-    prizeName: currentPrize.value.prizeName,
+    gradeId: currentPrize.value.gradeId,
+    prizeId: currentPrize.value.prizeId,
     perWin: currentPrize.value.perWin,
+    remainNum: currentPrize.value.leftCount,
   };
   // 异步调用API，不阻塞后续代码执行
   startLotteryApi(params)
     .then((res) => {
       // API返回结果时赋值
-      getPrizeUsers.value = res.data || [];
-      console.log("API返回结果:", res.data);
+      getPrizeUsers.value = res.data.data || [];
+      console.log("API返回结果:", res.data.data);
     })
     .catch((err) => {
       console.error("API调用失败:", err);
@@ -1114,7 +1157,8 @@ const lottery = () => {
     selectedCardIndex = [];
     // 当前同时抽取的数目,当前奖品抽完还可以继续抽，但是不记录数据
 
-    for (let i = 0; i < getPrizeUsers.value; i++) {
+    for (let i = 0; i < getPrizeUsers.value.length; i++) {
+      console.log("111", getPrizeUsers.value[i]);
       currentLuckys.push(getPrizeUsers.value[i]);
       currentPrize.value.hasCount--;
 
@@ -1164,7 +1208,7 @@ function random(num) {
  */
 function changeCard(cardIndex, user) {
   let card = threeDCards[cardIndex].element;
-
+  // console.log("user", user);
   card.innerHTML = `<div class="name">${user.jwcode}</div>`;
 }
 
@@ -1176,7 +1220,7 @@ function changeSelectedCard(cardIndex, user) {
 
   let card = threeDCards[cardIndex].element;
 
-  card.innerHTML = `<div class="name">${user[1]}</div>`;
+  card.innerHTML = `<div class="name">${user.jwcode}</div>`;
 }
 /**
  * 切换名牌背景

src/views/choujiang/lottery/PrizePanel.vue

@@ -36,9 +36,6 @@
                   <span class="progress-bar-text">
                     {{ getLeftCount(prize) }}/{{ prize.count }}
                   </span>
-
-
-                  
                 </div>
               </div>
             </div>
@@ -55,16 +52,16 @@
         <div></div>
         <div></div>
         <div></div>
-        <div class="prize-panel-footer">
-          <div class="arrow-up" @click="openWinnerList"></div>
-          <button
-            ref="winnerBtnRef"
-            class="winner-btn"
-            @click="toggleWinnerList"
-          >
-            获奖名单
-          </button>
-              </div>
+      </div>
+      <div class="prize-panel-footer">
+        <div class="arrow-up" @click="openWinnerList"></div>
+        <button
+          ref="winnerBtnRef"
+          class="winner-btn"
+          @click="toggleWinnerList"
+        >
+          获奖名单
+        </button>
       </div>
     </div>
   </div>
@@ -111,62 +108,61 @@
                       prizes[lastRevealedIdx].count
                     }}
                   </span>
-                </div>  <div class="prize-panel-footer">
-          <div class="arrow-down" @click="toggleWinnerList"></div>
-                <div
-            v-if="showWinnerList"
-            class="winner-modal-mask"
-            @click="closeWinnerList"
-          >
-            <div
-              class="winner-modal"
-              :style="{
-                position: 'absolute',
-                left: modalLeft + 'px',
-                top: modalTop + 'px',
-              }"
-              @click.stop
-            >
-              <div class="winner-modal-title">
-                <span>Homily ID</span><span>奖项</span>
-              </div>
-              <div
-                style="
-                  background: linear-gradient(
-                    to left,
-                    rgb(232 76 10),
-                    rgb(195 6 6),
-                    rgb(240 90 9)
-                  );
-                  height: 1px;
-                "
-              ></div>
-              <ul class="winner-list">
-                <li
-                  v-for="(user, idx) in fakeWinners"
-                  :key="idx"
-                  style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                  "
-                >
-                  <!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
-                  <span>{{ user.jwcode }}</span>
-                  <span>{{ user.prizeName }}</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+                </div>
+                <div class="prize-panel-footer">
+                  <div class="arrow-down" @click="toggleWinnerList"></div>
+                  <div
+                    v-if="showWinnerList"
+                    class="winner-modal-mask"
+                    @click="closeWinnerList"
+                  >
+                    <div
+                      class="winner-modal"
+                      :style="{
+                        position: 'absolute',
+                        left: modalLeft + 'px',
+                        top: modalTop + 'px',
+                      }"
+                      @click.stop
+                    >
+                      <div class="winner-modal-title">
+                        <span>Homily ID</span><span>奖项</span>
+                      </div>
+                      <div
+                        style="
+                          background: linear-gradient(
+                            to left,
+                            rgb(232 76 10),
+                            rgb(195 6 6),
+                            rgb(240 90 9)
+                          );
+                          height: 1px;
+                        "
+                      ></div>
+                      <ul class="winner-list">
+                        <li
+                          v-for="(user, idx) in fakeWinners"
+                          :key="idx"
+                          style="
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                          "
+                        >
+                          <!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
+                          <span>{{ user.jwcode }}</span>
+                          <span>{{ user.prizeName }}</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
-  
   </div>
 </template>
 
@@ -175,7 +171,6 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
 import { useLotteryStore } from "../../../store/lottery";
 import { useDataManager } from "../lottery/dataManager";
 
-
 const props = defineProps({
   prizes: Array,
 });
@@ -242,7 +237,10 @@ function canRevealPrize(idx) {
 // 卡片点击事件
 function handleReveal(idx) {
   // 检查是否可以揭秘这个奖品
-  if (idx !== nextRevealIdx.value ) {alert("请按顺序揭秘奖品!"); return;}
+  if (idx !== nextRevealIdx.value) {
+    alert("请按顺序揭秘奖品!");
+    return;
+  }
   if (idx === nextRevealIdx.value && canRevealPrize(idx)) {
     revealedCount.value++;
     lastRevealedIdx.value = idx; // 记录最新揭秘的索引
@@ -279,7 +277,9 @@ console.log("fakeWinners", fakeWinners.value);
 import { getGetPrizeUserListApi } from "../../../api/API";
 const updateWinners = async () => {
   try {
-    const response = await getGetPrizeUserListApi({})
+    const response = await getGetPrizeUserListApi({
+      
+    });
     console.log("updatePrizeList response", response);
     fakeWinners.value = response.data.list;
     console.log("updateWinners fakeWinners", fakeWinners.value);
@@ -288,7 +288,6 @@ const updateWinners = async () => {
   }
 };
 async function openWinnerList() {
-
   // showWinnerList.value = true;
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
@@ -361,39 +360,35 @@ function getProgressPercent(prize) {
 // onMounted(() => {
 //   updateWinners();
 // });
-
 </script>
 
 <style scoped>
 .prize-panel-list {
-  position: absolute;
-  top: 20px;
-  left: 20px;
+  position: relative;
   background: none;
   z-index: 10;
-  min-width: 320px;
+  min-width: 300px;
   max-width: 342px;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 18px;
-  height: 400px;
-   overflow-x: hidden !important;
+  height: 700px;
+  overflow-x: hidden !important;
   overflow-y: auto;
   padding-right: 10px;
   scrollbar-width: thin;
   scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */
 }
 .prize-panel-list1 {
-  position: absolute;
-  top: 20px;
-  left: 20px;
+  position: relative;
   background: none;
   z-index: 10;
   min-width: 320px;
   max-width: 342px;
   text-align: left;
-    display: flex;}
+  display: flex;
+}
 
 .prize-panel-list::-webkit-scrollbar {
   width: 6px;
@@ -503,10 +498,20 @@ function getProgressPercent(prize) {
   font-size: 20px;
   font-weight: bold;
 }
+.prize-panel-root {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: none;
+  z-index: 10;
+  min-width: 320px;
+  max-width: 342px;
+  display: flex;
+  flex-direction: column;
+}
+
 .prize-panel-footer {
-  position: fixed;
-     right: 750px;
-    bottom: 435px;
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -514,6 +519,7 @@ function getProgressPercent(prize) {
   z-index: 20;
   padding: 10px 0;
   border-radius: 0 0 6px 6px;
+  margin-top: 10px;
 }
 .arrow-up {
   position: relative;
@@ -537,7 +543,6 @@ function getProgressPercent(prize) {
   background-image: url("../../../assets/展开.png");
   background-size: cover;
   background-position: center;
-  
 }
 .winner-btn {
   background: rgba(255, 210, 131, 0.8);
@@ -553,7 +558,7 @@ function getProgressPercent(prize) {
 .winner-modal-mask {
   position: fixed;
   top: 142px;
-  left:-4px;
+  left: -4px;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.01);