2023.9.14

src/views/page/MidAutumnLotteryDraw.vue

@@ -22,28 +22,29 @@
         </el-image>
 
         <div class="info">
-          <p>奖品： {{ config.draw_prize.name }}</p>
+          <p>奖品： {{ config.draw_prize.name }} ✕ {{ config.draw_prize.has_total }}（个）</p>
           <p>赞助商： {{ config.draw_prize.apply }}</p>
         </div>
       </div>
 
       <div class="right">
-        <div class="numbers">
+        <div class="numbers" :class="{ 'numbers-active': isEnd }">
           <div
             class="numbers__item"
             :class="{
-              'numbers__item--active': !!resultNumbers.find((i) => i === item),
-            }"
+                'numbers__item--active': isEnd ? !!resultNumbers.find((i) => i === index) : !!resultNumbers.find((i) => i === item),
+              }"
             v-for="(item, index) in numbers"
-            :key="item"
+            :key="$route.query.result ? index : item"
           >
-            {{ item }}
+            <span>{{ isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item }}</span>
           </div>
         </div>
       </div>
     </div>
 
     <el-image
+      :style="{ 'filter': flag ? 'grayscale(90%)' : '' }"
       v-if="$route.query.result != 1"
       :lazy="false"
       class="btn"
@@ -64,11 +65,13 @@ export default {
     return {
       bkg,
       flag: false, //是否开始
+      isEnd: false,//视图结束
       timer: null,
       config: {
         draw_prize: {},
         numbers_list: [],
       },
+      result: [], //记录中奖
       resultNumbers: [],
     };
   },
@@ -109,7 +112,9 @@ export default {
             id: this.$route.params.id,
           });
           console.log(result);
+          this.result = result.draw_numbers;
           this.flag = true;
+          this.isEnd = true;
 
           this.timer = setInterval(() => {
             let set = new Set();
@@ -117,7 +122,7 @@ export default {
               let num = Math.floor(
                 Math.random() * this.config.numbers_list.length
               );
-              set.add(this.config.numbers_list[num]);
+              set.add(num);
             }
 
             this.resultNumbers = Array.from(set);
@@ -126,15 +131,18 @@ export default {
               clearInterval(this.timer);
               setTimeout(() => {
                 this.resultNumbers = result.draw_numbers;
-              }, 500);
+                this.isEnd = false;
+              }, 150);
             }
-          }, 500);
+          }, 150);
+
+          setTimeout(() => {
+            this.flag = false;
+            console.log("结束抽奖");
+          }, 3000)
         } catch (err) {
           console.log(err);
         }
-      } else {
-        this.flag = false;
-        console.log("结束抽奖");
       }
     }),
   },
@@ -144,7 +152,16 @@ export default {
         return this.resultNumbers;
       }
       if (this.config.numbers_list) {
-        return this.config.numbers_list.sort(() => Math.random() - 0.5);
+        if (this.result.length > 0) {
+          let set = new Set();
+          this.result.forEach(i => set.add(i))
+          while ((set.size < 36) && (set.size < this.config.numbers_list.length)) {
+            set.add(this.config.numbers_list[Math.floor(Math.random() * this.config.numbers_list.length)])
+          }
+
+          return Array.from(set).sort(() => Math.random() - 0.5)
+        }
+        return this.config.numbers_list.sort(() => Math.random() - 0.5).slice(0, 36);
       } else {
         return [];
       }
@@ -227,19 +244,33 @@ export default {
 
     .right {
       flex: 1;
-      max-height: 39.5vh;
-      overflow-y: scroll;
-
-      &::-webkit-scrollbar {
-        width: 0px;
-      }
+      overflow: hidden;
 
       .numbers {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(6, 1fr);
         grid-column-gap: 2.8em;
         grid-row-gap: 0.93vh;
+        overflow: hidden;
 
+        &-active {
+          & > div:nth-child(2n+1) {
+            animation: blur .15s infinite linear;
+          }
+          & > div:nth-child(2n+2) {
+            animation: blur .15s infinite linear reverse;
+          }
+        }
+        @keyframes blur {
+          from {
+            filter: blur(1.5px);
+          }
+          to {
+            filter: blur(1.5px);
+            transform: translateY(-100%);
+          }
+        }
         &__item {
           color: #ebd1a8;
           text-align: center;
@@ -247,10 +278,32 @@ export default {
           font-family: PingFang SC, sans-serif;
           font-weight: 800;
           border-radius: 2.8em;
-          transition: all 0.2s ease-out;
+          transition: all 0.3s ease-out;
 
+          position: relative;
+          & > span {
+            position: relative;
+          }
           &--active {
-            animation: filter 0.3s ease-out forwards;
+            color: #a9262c;
+            &::before {
+              content: "";
+              transition: all .5s ease-out;
+              border-radius: 2.8em;
+              color: #a9262c;
+              background: linear-gradient(
+                  264deg,
+                  #f8eacc,
+                  #e0c48a,
+                  #f5e0b8,
+                  #edddac,
+                  #e1b872
+              );
+
+              z-index: 0;
+              position: absolute;
+              inset: 0 0 0 0;
+            }
           }
         }
       }
@@ -258,7 +311,7 @@ export default {
   }
   @keyframes filter {
     from {
-      filter: blur(6px);
+      filter: blur(5px);
     }
     to {
       filter: blur(0);
@@ -278,6 +331,7 @@ export default {
     width: 46.67%;
     display: flex;
     justify-content: center;
+    transition: all .2s;
 
     margin: 4.5vh auto 0 auto;
   }