From 5b7a377bc0ae0de1980b4af405b998ebb5b75b35 Mon Sep 17 00:00:00 2001
From: jingfubo <jingfubo@jd.com>
Date: Mon, 11 Jul 2022 16:33:51 +0800
Subject: [PATCH] fix(giftrain): add taro

---
 src/packages/__VUE/giftrain/index.taro.vue    | 31 +++++++++++++++----
 .../vue/src/pages/giftrain/index.vue          |  2 +-
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/packages/__VUE/giftrain/index.taro.vue b/src/packages/__VUE/giftrain/index.taro.vue
index 6b4f1c7..9956951 100644
--- a/src/packages/__VUE/giftrain/index.taro.vue
+++ b/src/packages/__VUE/giftrain/index.taro.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { onMounted, toRefs, computed, ref, Ref, reactive, watch } from "vue";
 import { createComponent } from "../../utils/create";
+import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 const { componentName, create } = createComponent("giftrain");
 interface props {
   width: string; // 容器宽度
@@ -85,7 +86,17 @@ export default create({
     const rainScore: Ref<number> = ref(0); // 标记游戏是否结束
     const arr :any=reactive([])
     let timeout_gameTime = ref();
-    let requestAnimationFrame = ref();
+    let requestAnimationFrameValue = ref();
+
+    const requestAnimationFrame = function (callback: Function) {
+      var id = setTimeout(function () {
+        callback();
+      }, 16.7);
+      return id;
+    };
+    const cancelAnimationFrame = function (id: any) {
+      clearTimeout(id);
+    };
 
     const startRain = () => {
       init();
@@ -102,7 +113,7 @@ export default create({
       rainList.value = [];
       isOver.value = false;
       clearTimeout(timeout_gameTime.value);
-      window.cancelAnimationFrame(requestAnimationFrame.value);
+      cancelAnimationFrame(requestAnimationFrameValue.value);
       timeout_gameTime.value = null;
     };
     const rainOver = () => {
@@ -113,8 +124,12 @@ export default create({
     const render = () => {
       if (isOver.value) return;
       let redPacketWarp: any = rainContent.value;
-      let height = redPacketWarp.clientHeight;
-      let x = (redPacketWarp.clientWidth ? redPacketWarp.clientWidth : 200) - props.rainWidth;
+      let height = parseInt(redPacketWarp.clientHeight||props.height);
+      console.log(props.width);
+      
+      // console.log(redPacketWarp.clientWidth ? redPacketWarp.clientWidth :parseInt(props.width));
+      
+      let x = (redPacketWarp.clientWidth ? redPacketWarp.clientWidth :parseInt(props.width)) - props.rainWidth;
       rainList.value &&
         rainList.value.map((item: any) => {
           if (item.y > height + 80) {
@@ -124,12 +139,12 @@ export default create({
           }
           item.y += item.speed;
         });
-      requestAnimationFrame.value = window.requestAnimationFrame(render);
+      requestAnimationFrameValue.value = requestAnimationFrame(render);
     };
     const addRainList = () => {
       let redPacketWarp: any = rainContent.value;
       // let x = redPacketWarp.clientWidth - props.rainWidth;
-      let x = (redPacketWarp.clientWidth ? redPacketWarp.clientWidth : 200) - props.rainWidth;
+      let x = (redPacketWarp.clientWidth ? redPacketWarp.clientWidth :parseInt(props.width)) - props.rainWidth;
       let timeout = setInterval(() => {
         let state = reactive({
           width: props.rainWidth, // 红包宽度
@@ -190,6 +205,10 @@ export default create({
     //   }
     // })
 
+     onMounted(() => {
+      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
+    });
+
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
diff --git a/src/sites/mobile-taro/vue/src/pages/giftrain/index.vue b/src/sites/mobile-taro/vue/src/pages/giftrain/index.vue
index 4835f27..661aa2d 100644
--- a/src/sites/mobile-taro/vue/src/pages/giftrain/index.vue
+++ b/src/sites/mobile-taro/vue/src/pages/giftrain/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <nutbig-giftrain ref="rain" width="100%" height="580px" @gameOver="gameOver" @start="start" @click="click">
+    <nutbig-giftrain ref="rain" width="375px" height="580px" @gameOver="gameOver" @start="start" @click="click">
     </nutbig-giftrain>
      <div v-if="!isStart" class="start" @click="onStart">开始</div>
   </div>