Merge branch 'master' of http://git.ycjcjy.com/honghe/h5-draw-lots

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
-    <title>华侨城</title>
+    <title>抽取幸运签，解锁隐藏福利</title>
     <style>
       .page-loading-wrapper {
         position: absolute;

src/components/FireFlies/fireflies.js

@@ -21,7 +21,12 @@ Animation.prototype.draw = function () {
   var drawer = this.draw.bind(this);
 
   this.redraw();
-  window.requestAnimationFrame(drawer);
+  
+  var reqId = window.requestAnimationFrame(drawer);
+  return function () {
+    console.log('------cancelAnimationFrame----123')
+    cancelAnimationFrame(reqId);
+  }
 }
 
 Animation.prototype.redraw = function () {

src/components/FireFlies/index.vue

@@ -7,15 +7,32 @@ import Animation from "./fireflies"
 
 export default {
   name: 'FireFlies',
+  data() {
+    return {
+      animation: undefined,
+      deAnimation: undefined,
+    }
+  },
   mounted() {
     this.$nextTick(() => {
-      new Animation(this.$el, {
+      this.animation = new Animation(this.$el, {
         count: 20,
         color: 'rgba(236, 196, 94, 1)',
         speed: 0.7,
         radius: 3
-      }).draw();
+      })
+      const cancelDraw = this.animation.draw();
+
+      this.deAnimation = () => {
+        cancelDraw();
+        this.animation = undefined;
+      }
     })
+  },
+  beforeDestroy() {
+    if (this.deAnimation) {
+      this.deAnimation()
+    }
   }
 }
 </script>

src/components/Modal.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="modal-wrapper" v-show="show">
+    <div class="modal" :style="modalStyle" @click.stop="handleMaskClick">
+      <fire-flies v-if="showFireflies"></fire-flies>
+      <div class="modal-action back-btn" v-if="showBack" @click.stop="$emit('close')">
+        <img src="~@/assets/buttonImg/backImg.png" alt="">
+      </div>
+      <div class="modal-action share-guide" v-if="showShare">
+        <img src="~@/assets/buttonImg/shareText.png" alt="">
+      </div>
+      <div class="modal-action"><slot name="action"></slot></div>
+      <div class="modal-body"><slot></slot></div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  components: {
+    FireFlies: () => import('@/components/FireFlies')
+  },
+  props: {
+    show: Boolean,
+    mask: {
+      type: Boolean,
+      default: true,
+    },
+    maskClickCloseable: {
+      type: Boolean,
+      default: true,
+    },
+    showBack: Boolean,
+    showFireflies: {
+      type: Boolean,
+      default: true
+    },
+    showShare: Boolean
+  },
+  computed: {
+    modalStyle() {
+      return {
+        background: 'rgba(0, 0, 0, 0.6)'
+      }
+    }
+  },
+  methods: {
+    handleMaskClick() {
+      if (this.maskClickCloseable) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.modal-wrapper {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  z-index: 999;
+
+  .modal {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .modal-action {
+      position: absolute;
+      z-index: 50;
+    }
+
+    .back-btn {
+      top: 4em;
+      left: 1.5em;
+      width: 4em;
+
+      & > img {
+        width: 100%;
+      }
+    }
+
+    .share-guide {
+      top: 0.5em;
+      right: 0em;
+      width: 3em;
+      
+      & > img {
+        width: 100%;
+      }
+    }
+
+    .modal-body {
+      position: relative;
+      z-index: 20;
+    }
+  }
+}
+</style>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
+import Modal from '@/components/Modal.vue'
 import App from './App.vue'
-
 import router from './router/index'//路由
 
 import { redirect } from './utils/wx'
@@ -8,6 +8,8 @@ redirect()
 
 Vue.config.productionTip = false
 
+Vue.component('modal', Modal)
+
 const app = new Vue({
   router,
   render: h => h(App),