xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/Lottery/components/LotteryAnimation/index.js

@@ -0,0 +1,64 @@
+import animationJson from './animation'
+import {connect} from '../../store/index'
+
+const lottie = require('./lottie-miniprogram-sdk')
+
+const mapState = state => ({
+  visible: state.lotteryAnimationVisible
+})
+Component(
+  connect(mapState)({
+    data: {
+      canvasStyle: ''
+    },
+    observers: {
+      visible(val) {
+        if (val) {
+          wx.nextTick(() => {
+            this.setAnimation()
+          })
+        } else if (this.animation) {
+          this.animation.stop()
+        }
+      }
+    },
+    lifetimes: {
+      attached() {
+        const ANIMATION_WIDTH = 750
+        const ANIMATION_HEIGHT = 1624
+        const animationRatio = ANIMATION_WIDTH / ANIMATION_HEIGHT
+        const {windowWidth} = wx.getSystemInfoSync()
+        this.setData({
+          canvasStyle: `width:${windowWidth}px;height:${windowWidth / animationRatio}px;`
+        })
+      },
+      detached() {}
+    },
+    methods: {
+      setAnimation() {
+        wx.createSelectorQuery()
+          .in(this)
+          .select('.lottery_animation_canvas')
+          .node(res => {
+            const canvas = res.node
+            const context = canvas.getContext('2d')
+            canvas.width = 750
+            canvas.height = 1624
+            const run = () => {
+              lottie.setup(canvas)
+              this.animation = lottie.loadAnimation({
+                loop: true,
+                autoplay: true,
+                animationData: animationJson,
+                rendererSettings: {
+                  context
+                }
+              })
+            }
+            run()
+          })
+          .exec()
+      }
+    }
+  })
+)

package/miniprogram_dist/Lottery/components/LotteryAnimation/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/Lottery/components/LotteryAnimation/index.less

@@ -0,0 +1,14 @@
+.lottery_animation_box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .6);
+  .lottery_animation_canvas {
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryAnimation/index.wxml

@@ -0,0 +1,4 @@
+<view wx:if="{{visible}}" class="lottery_animation_box">
+  <canvas class="lottery_animation_canvas" type="2d" style="{{canvasStyle}}"></canvas>
+  <view></view>
+</view>

package/miniprogram_dist/Lottery/components/LotteryAnimation/index.wxss

@@ -0,0 +1,12 @@
+.lottery_animation_box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+}