feats

src/components/FireFlies/index.vue

@@ -1,12 +1,12 @@
 <template>
   <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 class="firefly fly1"></div>
+      <div class="firefly fly2"></div>
+      <div class="firefly fly3"></div>
+      <div class="firefly fly4"></div>
+      <div class="firefly fly5"></div>
+      <div class="firefly fly6"></div>
     </div>
   </div>
 </template>
@@ -35,30 +35,58 @@ export default {
       position:absolute;
       top:50%;
       left:50%;
-      width:0.3em;
-      height:0.3em;
-      background-color:rgb(255, 244, 48);
+      width: 0.3em;
+      height: 0.3em;
+      background-color:rgb(244,219,98);
       border-radius:50%;
-      box-shadow:0 0 1.4em rgb(200, 244, 66);
+      box-shadow:0 0 1.4em rgb(244,219,98);
+      opacity: 0;
     }
 
+    @tm-dur: 3s;
+    @tm-dly: .3s;
+
     .fly1 {
-      animation: flight1 7s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight1;
+      animation-duration: @tm-dur - .6;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
     .fly2 {
-      animation: flight2 9s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight2;
+      animation-duration: @tm-dur + .5;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
     .fly3 {
-      animation: flight3 8s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight3;
+      animation-duration: @tm-dur + .8;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
     .fly4 {
-      animation: flight4 8s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight4;
+      animation-duration: @tm-dur + .5;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
     .fly5 {
-      animation: flight5 6s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight5;
+      animation-duration: @tm-dur + .2;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
     .fly6 {
-      animation:flight6 9s ease-in-out alternate infinite;
+      animation-delay: @tm-dly;
+      animation-name: shake, flight6;
+      animation-duration: @tm-dur - .3;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
     }
   }
 
@@ -66,15 +94,10 @@ export default {
     0% { 
       opacity: 0.1;
     }
-    30% {
+    85% {
       opacity: 1;
-      width: 0.5em;
-      height: 0.5em;
-    }
-    70% {
-      opacity: 0.7;
-      width: 0.4em;
-      height: 0.4em;
+      width: 0.6em;
+      height: 0.6em;
     }
     100% {
       opacity: 0;
@@ -85,66 +108,85 @@ export default {
     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%;
+      top: 35%;
       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%;
+      top:15%;
       left:5%;
-      opacity:0;
     }
   }
   @keyframes flight2 {
-    
+    0% { 
+      top: 50%;
+      left: 50%;
+    }
+    60% {
+      top: 45%;
+      left: 15%;
+    }
+    100% {
+      top: 55%;
+      left:3%;
+    }
   }
   @keyframes flight3 {
-    
+    0% { 
+      top: 50%;
+      left: 50%;
+    }
+    50% {
+      top: 65%;
+      left: 25%;
+    }
+    100% {
+      top: 85%;
+      left:8%;
+    }
   }
   @keyframes flight4 {
-    
+    0% { 
+      top: 50%;
+      left: 50%;
+    }
+    60% {
+      top: 35%;
+      left: 76%;
+    }
+    100% {
+      top: 15%;
+      left: 95%;
+    }
   }
   @keyframes flight5 {
-    
+    0% { 
+      top: 50%;
+      left: 50%;
+    }
+    60% {
+      top: 52%;
+      left: 80%;
+    }
+    100% {
+      top: 55%;
+      left: 95%;
+    }
   }
   @keyframes flight6 {
-    
+    0% { 
+      top: 50%;
+      left: 50%;
+    }
+    50% {
+      top: 65%;
+      left: 75%;
+    }
+    100% {
+      top: 85%;
+      left: 88%;
+    }
   }
 }
 </style>

src/pages/Honghe.vue

@@ -210,23 +210,25 @@ export default {
   created() {
     this.getPrizes()
     this.noShowMy()
-    // 设置微信分享
-    share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
   },
   watch: {
-    binggo(newValue, oldValue) {
-      // 微信分享
-      // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
-      // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧
-      if (newValue && !oldValue) {
-        share({
-          title: '我中奖啦! 来试试你的运气吧',
-          desc: '抽取幸运签，解锁隐藏福利'
-        })
-      } else if (newValue !== oldValue) {
-        share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
-      }
-    }
+    binggo: {
+      handler(val) {
+        console.log('-------binggo---->', val)
+        // 微信分享
+        // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
+        // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧
+        if (val) {
+          share({
+            title: '我中奖啦! 来试试你的运气吧',
+            desc: '抽取幸运签，解锁隐藏福利'
+          })
+        } else {
+          share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
+        }
+      },
+      immediate: true,
+    },
   },
   methods: {
     noShowMy() {

src/router/index.js

@@ -37,6 +37,11 @@ router.beforeEach((to, from, next) => {
   // 未登录
   if (!person.personId) {
     getUserInfo().then(userinfo => {
+      if (!userinfo || !userinfo.openid) {
+        redirect(true)
+        return
+      }
+
       login(userinfo).then(res => {
         const { user, token } = res;
         setPerson(user)

src/utils/wx.js

@@ -30,7 +30,7 @@ function initSDK (url) {
  */
 export function share (opt) {
   const { origin, pathname } = window.location
-  const defaultLink = origin + pathname
+  // const defaultLink = origin + pathname
   const defaultImg = `${origin}${pathname}images/share.jpg`
 
   const link = window.location.href // opt.link || defaultLink
@@ -39,13 +39,15 @@ export function share (opt) {
   initSDK(link)
   window.wx.ready(function () {
     jsApiList.map((apiName) => {
-      const api = window.wx[apiName]
-      api({
-        title: opt.title || '', // 分享标题
-        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-        imgUrl, // 分享图标
-        desc: opt.desc || ''
-      })
+      const fn = window.wx[apiName]
+      if (typeof fn === 'function') {
+        fn({
+          title: opt.title || '', // 分享标题
+          link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl, // 分享图标
+          desc: opt.desc || ''
+        })
+      }
     })
   })
 }