Merge branch 'milestone-20250722-抽奖' into milestone-20250722-众筹抽奖合并专用分支

src/api/API.js

@@ -24,7 +24,7 @@ export const getUserListApi = function (params) {
 // 查询中奖名单
 export const getGetPrizeUserListApi = function (params) {
   return request({
-    url: `${APIurl}/admin/win/list`,
+    url: `${APIurl}/api/winUser/list`,
     method: "POST",
     data: params,
   });

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

@@ -245,7 +245,7 @@ const closeGetPrize = () => {
 };
 
 //揭示奖品
-const lookPrize = (item) => {
+const lookPrize = async (item) => {
   // 未进入抽奖禁止揭晓
   if (!joinLottery) {
     addQipao("请先进入抽奖。");
@@ -293,6 +293,8 @@ const lookPrize = (item) => {
     //点击揭晓
     item.isLook = true;
   }
+  await nextTick();
+  setPrizeData(currentPrizeIndex);
 };
 
 function setPrizeData(currentPrizeIndex, isInit) {
@@ -323,7 +325,8 @@ function setPrizeData(currentPrizeIndex, isInit) {
     }
   }
 
-  //   console.log("currentPrize", currentPrize);
+  console.log("count", count);
+  console.log("totalCount", totalCount);
 
   let percent = (count / totalCount).toFixed(2);
   if (elements.bar) {

src/views/choujiang/index.vue

@@ -102,12 +102,14 @@ const lotteryEngine = useLotteryEngine(dataManager, {
 
 onMounted(async () => {
   isDisabled.value = true;
+  
+  await dataManager.getBasicData();
+
+  await dataManager.getUsers();
   setTimeout(() => {
     isDisabled.value = false;
-  }, 4000);
+  }, 3800);
 
-  await dataManager.getBasicData();
-  await dataManager.getUsers();
 
   // 将 dataManager 挂载到 window 对象，供子组件使用
   window.dataManager = dataManager;
@@ -159,7 +161,7 @@ async function handleLotteryClick() {
 
       break;
     case "ready":
-      if (waitingForNextReveal.value) {
+      if (waitingForNextReveal.value || lastRevealed.value === 0) {
         console.log("waitingForNextReveal.value", waitingForNextReveal.value);
         // 显示弹窗提示
         showPrizeExhaustedModal.value = true;
@@ -327,30 +329,22 @@ function handleNextPrize() {
 }
 
 .modal-text {
+  position: fixed !important;
+  top: 300px;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
   color: #ff0000;
-  font-size: 18px;
+  font-size: 50px;
   font-weight: bold;
-  text-align: center;
   margin: 0;
   white-space: nowrap;
+
 }
 
 @keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  20% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  80% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
+   0% { opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { opacity: 0; }
 }
 </style>

src/views/choujiang/lottery/PrizePanel.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="showOne">
     <div class="prize-panel-root">
+        <div v-if="showNotification" class="auto-hide-notification">
+      {{ notificationMessage }}
+    </div>
       <div class="prize-panel-list" v-if="prizes && prizes.length">
         <div
           class="prize-panel-item"
@@ -48,18 +51,11 @@
             />
           </div>
         </div>
-        <div></div>
-        <div></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 ref="winnerBtnRef" class="winner-btn" @click="openWinnerList">
           获奖名单
         </button>
       </div>
@@ -171,6 +167,17 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
 import { useLotteryStore } from "../../../store/lottery";
 import { useDataManager } from "../lottery/dataManager";
 
+const showNotification = ref(false);
+const notificationMessage = ref('');
+
+// 显示提示并自动消失
+const showAutoHideNotification = (message, duration = 1500) => {
+  notificationMessage.value = message;
+  showNotification.value = true;
+  setTimeout(() => {
+    showNotification.value = false;
+  }, duration);
+};
 const props = defineProps({
   prizes: Array,
 });
@@ -237,8 +244,10 @@ function canRevealPrize(idx) {
 // 卡片点击事件
 function handleReveal(idx) {
   // 检查是否可以揭秘这个奖品
-  if (idx !== nextRevealIdx.value) {
-    alert("请按顺序揭秘奖品!");
+  if (idx !== nextRevealIdx.value && !isRevealed(idx)) {
+    // alert("请按顺序揭秘奖品!");
+    showAutoHideNotification("请按顺序揭秘奖品!");
+   
     return;
   }
   if (idx === nextRevealIdx.value && canRevealPrize(idx)) {
@@ -278,7 +287,8 @@ import { getGetPrizeUserListApi } from "../../../api/API";
 const updateWinners = async () => {
   try {
     const response = await getGetPrizeUserListApi({
-      
+      pageSize: 1000,
+      pageNum: 1,
     });
     console.log("updatePrizeList response", response);
     fakeWinners.value = response.data.list;
@@ -291,7 +301,10 @@ async function openWinnerList() {
   // showWinnerList.value = true;
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-      alert("请先揭晓奖品,并抽奖！");
+      // alert("请先揭晓奖品,并抽奖！");
+      showAutoHideNotification("请先揭晓奖品,并抽奖！");
+      
+
     }
     //  await updatePrizeList();
   }
@@ -319,6 +332,7 @@ async function toggleWinnerList() {
   await updateWinners();
 
   showWinnerList.value = !showWinnerList.value;
+  
   console.log(
     "toggleWinnerList - showWinnerList:",
     showWinnerList.value,
@@ -329,7 +343,8 @@ async function toggleWinnerList() {
   );
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-      alert("请先揭晓奖品,并抽奖！");
+      // alert("请先揭晓奖品,并抽奖！");
+      showAutoHideNotification("请先揭晓奖品,并抽奖！");
     }
   }
 
@@ -357,26 +372,37 @@ function getProgressPercent(prize) {
   return Math.round((left / total) * 100);
 }
 
-// onMounted(() => {
-//   updateWinners();
-// });
+onMounted(() => {
+  updateWinners();
+});
 </script>
 
 <style scoped>
+.auto-hide-notification {
+  position: fixed;
+  top: 300px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #e61414;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 50px;
+  z-index: 1000;}
 .prize-panel-list {
   position: relative;
   background: none;
   z-index: 10;
   min-width: 300px;
-  max-width: 342px;
+  max-width: 362px;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 18px;
-  height: 700px;
+  max-height: 700px;
   overflow-x: hidden !important;
   overflow-y: auto;
   padding-right: 10px;
+  padding-left: 10px;
   scrollbar-width: thin;
   scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */
 }
@@ -386,6 +412,8 @@ function getProgressPercent(prize) {
   z-index: 10;
   min-width: 320px;
   max-width: 342px;
+  padding-right: 10px;
+  padding-left: 10px;
   text-align: left;
   display: flex;
 }
@@ -464,17 +492,10 @@ function getProgressPercent(prize) {
   color: #d84315;
   font-weight: 500;
 }
-/* .prize-row-bottom {
-  background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%);
-  background: #8a3500;
-  border-radius: 16px;
-  color: #fff;
-  font-size: 20px;
-  font-weight: bold;
-  padding: 2px 0 2px 0;
-  justify-content: center;
-  min-width: 80px;
-} */
+.prize-row-bottom {
+   /* margin-bottom: 8px; */
+  /* border: 1px solid #ea2b0a; */
+}
 .custom-arrow-icon {
   font-size: 24px; /* 图标大小 */
   color: #d84315; /* 图标颜色，使用项目主题橙色 */
@@ -505,14 +526,14 @@ function getProgressPercent(prize) {
   background: none;
   z-index: 10;
   min-width: 320px;
-  max-width: 342px;
+  max-width: 362px;
   display: flex;
   flex-direction: column;
 }
 
 .prize-panel-footer {
   position: relative;
-  width: 100%;
+  /* width: 100%; */
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -554,6 +575,7 @@ function getProgressPercent(prize) {
   font-weight: bold;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  outline: none;
 }
 .winner-modal-mask {
   position: fixed;
@@ -628,8 +650,8 @@ function getProgressPercent(prize) {
 }
 .progress-bar-bg {
   position: relative;
-  width: 220px;
-  height: 28px;
+  width: 228px;
+  height: 30px;
   background: #e9620e;
   border-radius: 16px;
   overflow: hidden;
@@ -642,6 +664,7 @@ function getProgressPercent(prize) {
   position: absolute;
   left: 0;
   top: 0;
+  /* width: 100%; */
   height: 100%;
   /* background: linear-gradient(90deg, #ff9800 0%, #8a3500 100%); */
   background: #8a3500;
@@ -682,9 +705,14 @@ function getProgressPercent(prize) {
 .prize-panel-item.revealed-highlight {
   /* border: 3px solid #ff9800; */
   box-shadow: 0 0 16px 4px #ff9800aa;
-  transform: scale(1.05);
+  transform: scale(1.03);
   z-index: 2;
   transition: all 0.3s;
+  /* 确保放大的元素不被遮挡 */
+  position: relative;
+  /* margin: 8px 0; */
+  /* 为放大的元素留出空间 */
+  transform-origin: center center;
 }
 
 .prize-panel-item.disabled {