解决了当第一个奖品已经抽完,但是没有揭示的时候,可以直接揭示第二个奖品的问题

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

@@ -11,9 +11,17 @@
     <div class="leftBar">
       <el-scrollbar id="prizeBar">
         <ul class="prize-list">
-          <li v-for="item in prizes" :key="item.type" :id="`prize-item-${item.type}`" :class="['prize-item']"
-            @click="lookPrize(item)">
-            <div v-if="item.isLook" style="display: flex; width: 100%; height: 100%">
+          <li
+            v-for="item in prizes"
+            :key="item.type"
+            :id="`prize-item-${item.type}`"
+            :class="['prize-item']"
+            @click="lookPrize(item)"
+          >
+            <div
+              v-if="item.isLook"
+              style="display: flex; width: 100%; height: 100%"
+            >
               <span></span><span></span><span></span><span></span>
               <div class="prize-img">
                 <img :src="item.imageUrl" :alt="item.title" />
@@ -27,17 +35,27 @@
                 </div>
                 <div class="prize-count">
                   <div class="progress">
-                    <div :id="`prize-bar-${item.type}`"
-                      class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 100%"></div>
+                    <div
+                      :id="`prize-bar-${item.type}`"
+                      class="progress-bar progress-bar-danger progress-bar-striped active"
+                      style="width: 100%"
+                    ></div>
                   </div>
-                  <div :id="`prize-count-${item.type}`" class="prize-count-left">
+                  <div
+                    :id="`prize-count-${item.type}`"
+                    class="prize-count-left"
+                  >
                     {{ item.leftCount }}/{{ item.count }}
                   </div>
                 </div>
               </div>
             </div>
             <div v-else style="display: flex; width: 100%; height: 100%">
-              <img src="../../../assets/img/待揭秘.png" alt="待揭秘" class="readyLook" />
+              <img
+                src="../../../assets/img/待揭秘.png"
+                alt="待揭秘"
+                class="readyLook"
+              />
             </div>
           </li>
         </ul>
@@ -50,7 +68,12 @@
       </div>
       <div v-else>
         <div class="dgetPrizeName">
-          <img src="../../../assets/img/展开.png" alt="展开" class="close" @click="closeGetPrize()" />
+          <img
+            src="../../../assets/img/展开.png"
+            alt="展开"
+            class="close"
+            @click="closeGetPrize()"
+          />
           <div class="tableHead">
             <div class="tableHead1">HomilyID</div>
             <div class="tableHead2">奖项</div>
@@ -265,6 +288,7 @@ const lookPrize = async (item) => {
     item.isLook = true;
   } else if (
     !isLotting && //未在抽奖状态
+    currentPrize.value.isLook &&
     currentPrize.value.leftCount == 0 && //当前奖项已抽完
     prizes.value[currentPrizeIndex - 1] == item //点击的奖项是当前奖项的下一个
   ) {
@@ -1651,7 +1675,6 @@ a {
 }
 
 @keyframes bounce1 {
-
   0%,
   100% {
     transform: rotate(180deg) translateY(0);
@@ -1663,7 +1686,6 @@ a {
 }
 
 @keyframes bounce2 {
-
   0%,
   100% {
     transform: translateY(0);
@@ -1699,11 +1721,13 @@ a {
   width: 90%;
   height: 3px;
   border-radius: 150%;
-  background: linear-gradient(to right,
-      transparent 0%,
-      #d5291f 45%,
-      #d5291f 55%,
-      transparent 100%);
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    #d5291f 45%,
+    #d5291f 55%,
+    transparent 100%
+  );
   position: absolute;
   bottom: -10px;
 }
@@ -1841,30 +1865,36 @@ a {
 }
 
 .progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg,
-      rgba(255, 255, 255, 0.15) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(255, 255, 255, 0.15) 50%,
-      rgba(255, 255, 255, 0.15) 75%,
-      transparent 75%,
-      transparent);
-  background-image: -o-linear-gradient(45deg,
-      rgba(255, 255, 255, 0.15) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(255, 255, 255, 0.15) 50%,
-      rgba(255, 255, 255, 0.15) 75%,
-      transparent 75%,
-      transparent);
-  background-image: linear-gradient(45deg,
-      rgba(255, 255, 255, 0.15) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(255, 255, 255, 0.15) 50%,
-      rgba(255, 255, 255, 0.15) 75%,
-      transparent 75%,
-      transparent);
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: -o-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
   -webkit-background-size: 8px 8px;
   background-size: 8px 8px;
 }