feats

src/components/FireFlies/fireflies.js

@@ -5,10 +5,12 @@ function Animation(selector, option) {
   });
 }
 
+var resize = null;
+
 Animation.prototype.init = function (canvas) {
-  var resize = function () {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
+  resize = function () {
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
   }
 
   resize();
@@ -26,6 +28,10 @@ Animation.prototype.draw = function () {
   return function () {
     console.log('------cancelAnimationFrame----123')
     cancelAnimationFrame(reqId);
+    // window.removeEventListener('resize', resize);
+    // resize = null;
+    this.canvas = null;
+    this.fireflies = null;
   }
 }
 

src/components/FireFlies/index.vue

@@ -1,44 +1,24 @@
 <template>
-  <canvas class="fireflies"></canvas>
+  <div class="fireflies-box">
+    <div class="fireflies">
+      <div class="firefly"></div>
+      <div class="firefly"></div>
+      <div class="firefly"></div>
+      <div class="firefly"></div>
+      <div class="firefly"></div>
+      <div class="firefly"></div>
+    </div>
+  </div>
 </template>
 
 <script>
-import Animation from "./fireflies"
-
 export default {
-  name: 'FireFlies',
-  data() {
-    return {
-      animation: undefined,
-      deAnimation: undefined,
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.animation = new Animation(this.$el, {
-        count: 20,
-        color: 'rgba(236, 196, 94, 1)',
-        speed: 0.7,
-        radius: 3
-      })
-      const cancelDraw = this.animation.draw();
-
-      this.deAnimation = () => {
-        cancelDraw();
-        this.animation = undefined;
-      }
-    })
-  },
-  beforeDestroy() {
-    if (this.deAnimation) {
-      this.deAnimation()
-    }
-  }
+  name: 'FireFlies'
 }
 </script>
 
 <style lang="less" scoped>
-.fireflies {
+.fireflies-box {
   width: 100%;
   height: 100%;
   background: transparent;
@@ -46,5 +26,125 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
+
+  .fireflies {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .firefly {
+      position:absolute;
+      top:50%;
+      left:50%;
+      width:0.3em;
+      height:0.3em;
+      background-color:rgb(255, 244, 48);
+      border-radius:50%;
+      box-shadow:0 0 1.4em rgb(200, 244, 66);
+    }
+
+    .fly1 {
+      animation: flight1 7s ease-in-out alternate infinite;
+    }
+    .fly2 {
+      animation: flight2 9s ease-in-out alternate infinite;
+    }
+    .fly3 {
+      animation: flight3 8s ease-in-out alternate infinite;
+    }
+    .fly4 {
+      animation: flight4 8s ease-in-out alternate infinite;
+    }
+    .fly5 {
+      animation: flight5 6s ease-in-out alternate infinite;
+    }
+    .fly6 {
+      animation:flight6 9s ease-in-out alternate infinite;
+    }
+  }
+
+  @keyframes shake {
+    0% { 
+      opacity: 0.1;
+    }
+    30% {
+      opacity: 1;
+      width: 0.5em;
+      height: 0.5em;
+    }
+    70% {
+      opacity: 0.7;
+      width: 0.4em;
+      height: 0.4em;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes flight1 {
+    0% { 
+      top: 50%;
+      left: 50%;
+      opacity: 0.1;
+    }
+    10% {
+      top: 40%;
+      left: 40%;
+      opacity:0.5;
+      width:0.4em;
+      height:0.4em;
+    }
+    20% {
+      top: 32%;
+      left: 35%;
+      opacity: 1;
+    }
+    30% {
+      top: 25%;
+      left: 25%;
+      opacity:1;
+      width:0.1em;
+      height:0.1em;
+    }
+    40% {
+      top: 20%;
+      left: 20%;
+      opacity: 1;
+    }
+    60% {
+      top: 25%;
+      left: 16%;
+      opacity: 0.5;
+      width:0.4em;
+      height:0.4em;
+    }
+    70% {
+      top: 10%;
+      left: 10%;
+      opacity:0.1;
+      width:0.3em;
+      height:0.3em;
+    }
+    100% {
+      top:5%;
+      left:5%;
+      opacity:0;
+    }
+  }
+  @keyframes flight2 {
+    
+  }
+  @keyframes flight3 {
+    
+  }
+  @keyframes flight4 {
+    
+  }
+  @keyframes flight5 {
+    
+  }
+  @keyframes flight6 {
+    
+  }
 }
 </style>

src/components/FireFlies/index2.vue

@@ -0,0 +1,51 @@
+<template>
+  <canvas class="fireflies"></canvas>
+</template>
+
+<script>
+import Animation from "./fireflies"
+
+export default {
+  name: 'FireFlies',
+  data() {
+    return {
+      animation: undefined,
+      deAnimation: undefined,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.animation = new Animation(this.$el, {
+        count: 10,
+        color: 'rgba(236, 196, 94, 1)',
+        speed: 0.6,
+        radius: 3
+      })
+      const cancelDraw = this.animation.draw();
+
+      this.deAnimation = () => {
+        cancelDraw();
+        this.$el = null;
+        this.animation = null;
+      }
+    })
+  },
+  beforeDestroy() {
+    if (this.deAnimation) {
+      this.deAnimation()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.fireflies {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/pages/Honghe.vue

@@ -214,7 +214,7 @@ export default {
     share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
   },
   watch: {
-    showMyWinning(newValue, oldValue) {
+    binggo(newValue, oldValue) {
       // 微信分享
       // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
       // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧

src/router/index.js

@@ -3,11 +3,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Honghe from '../pages/Honghe.vue'
-import SaveShare from '../pages/SaveShare.vue'
 import { useModel } from '../store'
 import { getUserInfo } from '../utils/wx'
 import { login } from '../services/person'
 import { setToken } from '../utils/token'
+import { redirect } from '../utils/wx'
 
 Vue.use(Router)
 
@@ -42,6 +42,8 @@ router.beforeEach((to, from, next) => {
         setPerson(user)
         setToken(token)
       })
+    }).catch(() => {
+      redirect(true)
     })
   }
 

src/utils/wx.js

@@ -64,14 +64,14 @@ function getCode () {
 /**
  * 跳转授权页面
  */
-export function redirect () {
+export function redirect (force) {
   if (process.env.NODE_ENV === 'development') return;
 
   const originCode = localStorage.getItem('wxcode');
   const queryCode = getCode();
   localStorage.setItem('wxcode', queryCode)
 
-  if (!queryCode || queryCode === originCode) {
+  if (!queryCode || queryCode === originCode || force) {
     const local = encodeURIComponent(location.origin + location.pathname)
     const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
     window.location.href = url