feat: total-sum 控制烟花

src/views/total-sum/index.vue

@@ -2,13 +2,13 @@
  * @Author: wangjiacheng
  * @Date: 2021-10-14 11:57:19
  * @LastEditors: wangjiacheng
- * @LastEditTime: 2021-10-15 15:08:30
+ * @LastEditTime: 2021-10-15 16:15:46
  * @Description:
 -->
 <template>
   <div class="total-sum">
     <!-- <img src="../../assets/images/total-sum-bg.png" class="img-bg" /> -->
-    <canvas id="canvas"></canvas>
+    <canvas id="canvas" :style="{ visibility: showFire ? 'visible' : 'hidden' }"></canvas>
     <div class="content">
       <div class="title">
         线上缴费累计金额
@@ -31,7 +31,6 @@
 </template>
 
 <script>
-
 // import { totalSum } from '@/api'
 import mixin from './mixin.js'
 import wcLogo from '@/assets/images/wc.png'
@@ -41,11 +40,10 @@ export default {
   name: 'TotalSum',
   mixins: [mixin],
   components: {
-    // Flip
   },
   data () {
     return {
-      moneny: 99634580.96,
+      moneny: 99834580.96,
       monenyLength: 0,
       timer: null,
       showFire: false,
@@ -62,36 +60,27 @@ export default {
   },
   watch: {
     moneny (nVal) {
+      if (nVal >= 1e8 && !this.showFire) {
+        setTimeout(() => {
+          this.showFire = true
+        }, 1000)
+      }
       if (nVal >= 1e8) {
-        // this.showFire = true
         setTimeout(() => {
-          // this.fireworks()
-          // this.fireworkss()
           this.isBillion = true
-        }, 300)
+        }, 1000)
       }
     }
-    // showFire (nVal) {
-    //   if (nVal) {
-    //     setTimeout(() => {
-    //       this.showFire = false
-    //     }, 2000)
-    //   }
-    // }
   },
   methods: {
     getTotalSum () {
       this.timer = setInterval(() => {
-        const n = this.moneny + Math.floor(Math.random() * 1000000)
+        const n = this.moneny + Math.floor(Math.random() * 100000)
         this.moneny = n
-        // this.monenyLength = `${n.toLocaleString('hanidec')}`.length
         // totalSum.getTotalSum().then(res => {
         //   if (res && res.data) {
         //     const data = Number(res.data.data)
         //     this.moneny = data
-        //     // if (typeof data === 'number') {
-        //     //   this.moneny = data.toLocaleString('hanidec')
-        //     // }
         //   }
         // })
       }, 3000)
@@ -121,6 +110,7 @@ export default {
     top: 105px;
     position: relative;
     z-index: 100;
+    background: transparent;
   }
 
   .total-sum {
@@ -177,16 +167,16 @@ export default {
       }
     }
     .sum-billion {
-      animation: billion 2s;
+      animation: billion 2.2s;
     }
     @keyframes billion {
       0% {
         transform: scale(1);
       }
       50% {
-        transform: scale(1.2);
+        transform: scale(1.23);
       }
-      75% {
+      95% {
         transform: scale(1);
       }
     }

src/views/total-sum/mixin.js

@@ -2,7 +2,7 @@
  * @Author: wangjiacheng
  * @Date: 2021-10-15 10:58:28
  * @LastEditors: wangjiacheng
- * @LastEditTime: 2021-10-15 14:17:38
+ * @LastEditTime: 2021-10-15 15:40:26
  * @Description:
  */
 
@@ -62,7 +62,7 @@ export default {
 
       function paint() {
         ctx.globalCompositeOperation = 'source-over';
-        ctx.fillStyle = "rgba(0,0,0,0.2)";
+        ctx.fillStyle = "rgba(0,0,0,0.1)";
         ctx.fillRect(0, 0, w, h);
         ctx.globalCompositeOperation = 'lighter';
         for (var i = 0; i < particles.length; i++) {