From d147d7a03c8395cac807f2c4fa50c317bf39e4b3 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 14 Sep 2023 17:30:57 +0800
Subject: [PATCH] 2023.9.14

---
 src/views/page/MidAutumnLotteryDraw.vue | 109 +++++++++++++++++-------
 1 file changed, 78 insertions(+), 31 deletions(-)

diff --git a/src/views/page/MidAutumnLotteryDraw.vue b/src/views/page/MidAutumnLotteryDraw.vue
index e51e08d..2b95767 100644
--- a/src/views/page/MidAutumnLotteryDraw.vue
+++ b/src/views/page/MidAutumnLotteryDraw.vue
@@ -22,29 +22,58 @@
         </el-image>
 
         <div class="info">
-          <p>奖品： {{ config.draw_prize.name }} ✕ {{ config.draw_prize.has_total }}（个）</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" :class="{ 'numbers-active': isEnd }">
+      <div class="right" :style="{ 'height': maxHeight }">
+        <div class="numbers" :class="{ 'numbers-active': isEnd }" ref="numbers">
           <div
             class="numbers__item"
+            :style="{
+              'animation-timing-function': flag ? '' : 'ease-out'
+            }"
             :class="{
-                'numbers__item--active': isEnd ? !!resultNumbers.find((i) => i === index) : !!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="$route.query.result ? index : item"
           >
-            <span>{{ isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item }}</span>
+            <span>{{
+              isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item
+            }}</span>
+          </div>
+
+          <div
+            v-show="isEnd"
+            class="numbers__item"
+            :style="{
+              'animation-timing-function': flag ? '' : 'ease-out'
+            }"
+            :class="{
+              'numbers__item--active': isEnd
+                ? !!resultNumbers.find((i) => i === index)
+                : !!resultNumbers.find((i) => i === item),
+            }"
+            v-for="(item, index) in numbers"
+            :key="($route.query.result ? index : item) + 'b'"
+          >
+            <span>{{
+              isEnd ? config.numbers_list[Math.floor(Math.random() * 36)] : item
+            }}</span>
           </div>
         </div>
       </div>
     </div>
 
     <el-image
-      :style="{ 'filter': flag ? 'grayscale(90%)' : '' }"
+      :style="{ filter: flag ? 'grayscale(90%)' : '' }"
       v-if="$route.query.result != 1"
       :lazy="false"
       class="btn"
@@ -63,9 +92,10 @@ import { drawLog } from "@/api/activity/drawPrize";
 export default {
   data() {
     return {
+      maxHeight: '40vh',
       bkg,
       flag: false, //是否开始
-      isEnd: false,//视图结束
+      isEnd: false, //视图结束
       timer: null,
       config: {
         draw_prize: {},
@@ -81,12 +111,21 @@ export default {
       const dom = document.getElementById("lottery-draw");
       const scale = document.documentElement.clientWidth / 1920;
       dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
+
+      this.$nextTick(() => {
+        this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
+      })
     },
     async getConfig() {
       const res = await drawConfig({
         id: this.$route.params.id,
       });
+      res.numbers_list = res.numbers_list.map(i => i.toString().padStart(3,'0'))
       this.config = res;
+
+      this.$nextTick(() => {
+        this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
+      })
     },
     async getResult() {
       const res = await drawLog(
@@ -101,7 +140,7 @@ export default {
 
       this.resultNumbers = res.data
         .filter((i) => i.draw_prize_id == this.$route.params.id)
-        .map((i) => Number(i.mobile));
+        .map((i) => i.mobile.padStart(3, "0"));
     },
 
     draw: throttle(async function () {
@@ -112,6 +151,9 @@ export default {
             id: this.$route.params.id,
           });
           console.log(result);
+          result.draw_numbers = result.draw_numbers.map((i) =>
+            i.toString().padStart(3, "0")
+          );
           this.result = result.draw_numbers;
           this.flag = true;
           this.isEnd = true;
@@ -139,7 +181,7 @@ export default {
           setTimeout(() => {
             this.flag = false;
             console.log("结束抽奖");
-          }, 3000)
+          }, 3000);
         } catch (err) {
           console.log(err);
         }
@@ -154,14 +196,20 @@ export default {
       if (this.config.numbers_list) {
         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)])
+          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 Array.from(set).sort(() => Math.random() - 0.5);
         }
-        return this.config.numbers_list.sort(() => Math.random() - 0.5).slice(0, 36);
+        return this.config.numbers_list
+          .sort(() => Math.random() - 0.5)
+          .slice(0, 36);
       } else {
         return [];
       }
@@ -252,23 +300,22 @@ export default {
         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 + 1) {
+            animation: blur 0.15s infinite linear;
           }
-          & > div:nth-child(2n+2) {
-            animation: blur .15s infinite linear reverse;
+          & > div:nth-child(2n + 2) {
+            animation: blur 0.15s infinite linear reverse;
           }
         }
         @keyframes blur {
           from {
-            filter: blur(1.5px);
+            filter: blur(1.5px)  drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
           }
           to {
-            filter: blur(1.5px);
-            transform: translateY(-100%);
+            filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
+            transform: translateY(-300%);
           }
         }
         &__item {
@@ -288,16 +335,16 @@ export default {
             color: #a9262c;
             &::before {
               content: "";
-              transition: all .5s ease-out;
+              transition: all 0.5s ease-out;
               border-radius: 2.8em;
               color: #a9262c;
               background: linear-gradient(
-                  264deg,
-                  #f8eacc,
-                  #e0c48a,
-                  #f5e0b8,
-                  #edddac,
-                  #e1b872
+                264deg,
+                #f8eacc,
+                #e0c48a,
+                #f5e0b8,
+                #edddac,
+                #e1b872
               );
 
               z-index: 0;
@@ -331,7 +378,7 @@ export default {
     width: 46.67%;
     display: flex;
     justify-content: center;
-    transition: all .2s;
+    transition: all 0.2s;
 
     margin: 4.5vh auto 0 auto;
   }