弹窗改为文字提示,改变奖品列表长度

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,10 +51,6 @@
             />
           </div>
         </div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
              </div>
       <div class="prize-panel-footer">
         <div class="arrow-up" @click="openWinnerList"></div>
@@ -171,6 +170,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 +247,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)) {
@@ -291,7 +303,10 @@ async function openWinnerList() {
   // showWinnerList.value = true;
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-      alert("请先揭晓奖品,并抽奖！");
+      // alert("请先揭晓奖品,并抽奖！");
+      showAutoHideNotification("请先揭晓奖品,并抽奖！");
+      
+
     }
     //  await updatePrizeList();
   }
@@ -329,7 +344,8 @@ async function toggleWinnerList() {
   );
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-      alert("请先揭晓奖品,并抽奖！");
+      // alert("请先揭晓奖品,并抽奖！");
+      showAutoHideNotification("请先揭晓奖品,并抽奖！");
     }
   }
 
@@ -363,6 +379,16 @@ function getProgressPercent(prize) {
 </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;
@@ -373,7 +399,7 @@ function getProgressPercent(prize) {
   display: flex;
   flex-direction: column;
   gap: 18px;
-  height: 700px;
+  max-height: 700px;
   overflow-x: hidden !important;
   overflow-y: auto;
   padding-right: 10px;