fix: 增加娃娃机配置文件

jd-opensource · Apr 8, 2022 · 3bf4f3f · 3bf4f3f
1 parent 49f8e2f
commit 3bf4f3f
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 66 deletions.
diff --git a/project.private.config.json b/project.private.config.json
@@ -16,8 +16,8 @@
           "name": "pages/guessgift/index",
           "pathName": "pages/guessgift/index",
           "query": "",
-          "scene": null,
-          "launchMode": "default"
+          "launchMode": "default",
+          "scene": null
         },
         {
           "name": "pages/scratchcard/index",
@@ -26,11 +26,11 @@
           "scene": null
         },
         {
-          "name": "pages/giftbox/index",
-          "pathName": "pages/giftbox/index",
+          "name": "pages/dollmachine/index",
+          "pathName": "pages/dollmachine/index",
           "query": "",
-          "launchMode": "default",
-          "scene": null
+          "scene": null,
+          "launchMode": "default"
         },
         {
           "name": "",

diff --git a/src/packages/__VUE/dollmachine/index.taro.vue b/src/packages/__VUE/dollmachine/index.taro.vue
@@ -6,7 +6,10 @@
         <view class="rope" ref="rope"></view>
         <!--爪子-->
         <view ref="clawBox" :class="['clawBox', catchFlag ? 'yes' : '']">
-          <img src="https://img14.360buyimg.com/imagetools/jfs/t1/146467/34/22553/4178/61b088afE198f676e/21952e7018d1d141.png" class="fail" />
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/146467/34/22553/4178/61b088afE198f676e/21952e7018d1d141.png"
+            class="fail"
+          />
           <view class="succ">
             <img :src="winImage" />
           </view>
@@ -45,34 +48,65 @@
 
 <script lang="ts">
 import { Toast } from "@nutui/nutui";
-import { reactive, toRefs, ref, onMounted, onUnmounted, nextTick, watch, computed, getCurrentInstance } from 'vue';
-import { createComponent } from '../../utils/create';
-const { create } = createComponent('doll-machine');
+import Taro from "@tarojs/taro";
+import {
+  reactive,
+  toRefs,
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  computed,
+  getCurrentInstance,
+} from "vue";
+import { createComponent } from "../../utils/create";
+const { create } = createComponent("doll-machine");
 
 export default create({
   props: {
     speed: {
       type: Number,
-      default: 20
+      default: 20,
     },
     prizeList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     turnsTime: {
       type: Number,
-      default: 0
+      default: 0,
     },
     prizeIndex: {
       type: Number,
-      default: -1
+      default: -1,
     },
   },
   emits: ["click", "start-turns", "end-turns"],
   setup(props, { emit }) {
+    const circle = ref(0);
+    const giftBox: any = ref(null);
+    const gift1: any = ref(null);
+    const gift2: any = ref(null);
+    const marqueeRun = () => {
+      if (!(giftBox && giftBox.value)) {
+        return;
+      }
+      circle.value++;
+      let box_width = giftBox.value.scrollLeft;
+      // let giftW1 = gift1.value.offsetWidth;
+      let giftW2 = gift2.value.offsetWidth;
+      if (giftW2 - box_width <= 0) {
+        circle.value = 0;
+        giftBox.value.scrollLeft = circle.value;
+      } else {
+        giftBox.value.scrollLeft = circle.value;
+      }
+    };
+
     const machineBox: any = ref(null);
     const clawBox: any = ref(null);
-    const activeArea: any= ref(null);
+    const activeArea: any = ref(null);
     var lock = ref(true); //是否已经点击
     // 爪子的位置
     let claw = ref(0);
@@ -85,37 +119,18 @@ export default create({
     onMounted(() => {
       claw.value = clawBox.value.offsetLeft + 55;
       // 获取整个可视区域的高度
-      let screenHeight = document.documentElement.clientHeight;
+      const info = Taro.getSystemInfoSync();
+      let screenHeight = info.windowHeight;
       machineBox.value.style.height = screenHeight - 120 + "px";
       maxLong.value = screenHeight - 300;
       // activeArea.value.style.height = maxLong.value + "px";
       if (props.prizeList.length < 4) {
         (Toast as any).text(`本版本目前只支持最少4个奖品`);
-      }else {
+      } else {
         timer.value = setInterval(marqueeRun, speed);
       }
     });
 
-    const circle = ref(0);
-    const giftBox: any = ref(null);
-    const gift1: any = ref(null);
-    const gift2: any = ref(null);
-    const marqueeRun = () => {
-      if (!(giftBox && giftBox.value)) {
-        return;
-      }
-      circle.value++;
-      let box_width = giftBox.value.scrollLeft;
-      // let giftW1 = gift1.value.offsetWidth;
-      let giftW2 = gift2.value.offsetWidth;
-      if (giftW2 - box_width <= 0) {
-        circle.value = 0;
-        giftBox.value.scrollLeft = circle.value;
-      } else {
-        giftBox.value.scrollLeft = circle.value;
-      }
-    }
-
     // 绳子
     const rope: any = ref(null);
     const start = () => {
@@ -129,19 +144,19 @@ export default create({
       rope.value.animate({ height: maxLong.value - 60 + "px" }, 2000);
       clawBox.value.animate({ top: maxLong.value - 20 + "px" }, 2000);
       setTimeout(() => {
-        rope.value.style.height = maxLong.value - 60+ "px";
-        clawBox.value.style.top = maxLong.value - 20  + "px";
+        rope.value.style.height = maxLong.value - 60 + "px";
+        clawBox.value.style.top = maxLong.value - 20 + "px";
         giftCalculation();
       }, 1900);
-    }
+    };
 
     //抓住了
     const catchFlag = ref(false);
     const winImage = ref("");
     const catchGift = (img: string) => {
       catchFlag.value = true;
       winImage.value = img;
-    }
+    };
 
     // 所有的奖品
     const giftimg: any = ref([]);
@@ -160,7 +175,7 @@ export default create({
         }
       });
       gameover();
-    }
+    };
 
     // 游戏结束
     const gameover = () => {
@@ -183,8 +198,8 @@ export default create({
       catchFlag.value = false;
       lock.value = true;
       timer.value = setInterval(marqueeRun, speed);
-    }
-    
+    };
+
     return {
       machineBox,
       clawBox,
@@ -198,13 +213,11 @@ export default create({
       lock,
       start,
       setGiftimg,
-      init
-    }
-  }
-
+      init,
+    };
+  },
 });
 </script>
-<style lang="scss" scoped>
-@import './index.scss'
+<style lang="scss">
+@import "./index.scss";
 </style>
-
diff --git a/src/sites/mobile-taro/vue/src/app.config.ts b/src/sites/mobile-taro/vue/src/app.config.ts
@@ -1,21 +1,22 @@
 export default {
   pages: [
-    'pages/index/index',
-    'pages/turntable/index',
-    'pages/marquee/index',
-    'pages/squarenine/index',
-    'pages/luckshake/index',
-    'pages/giftbox/index',
-    'pages/lottoroll/index',
-    'pages/guessgift/index',
-    'pages/scratchcard/index',
-    'pages/shakedice/index',
-    'pages/giftrain/index',
+    "pages/index/index",
+    "pages/turntable/index",
+    "pages/marquee/index",
+    "pages/squarenine/index",
+    "pages/luckshake/index",
+    "pages/giftbox/index",
+    "pages/lottoroll/index",
+    "pages/guessgift/index",
+    "pages/scratchcard/index",
+    "pages/shakedice/index",
+    "pages/giftrain/index",
+    "pages/dollmachine/index",
   ],
   window: {
-    backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'NutUI-Bingo',
-    navigationBarTextStyle: 'black'
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "NutUI-Bingo",
+    navigationBarTextStyle: "black",
   },
 };
diff --git a/src/sites/mobile-taro/vue/src/pages/dollmachine/index.config.ts b/src/sites/mobile-taro/vue/src/pages/dollmachine/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: "Dollmachine",
+};
diff --git a/src/sites/mobile-taro/vue/src/pages/dollmachine/index.vue b/src/sites/mobile-taro/vue/src/pages/dollmachine/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <div class="show-demo">
+      <nutbig-doll-machine
+        ref="lottoRollDom"
+        :prize-list="prizeList"
+        :prize-index="prizeIndex"
+        @start-turns="startTurns"
+        @end-turns="endTurns"
+      >
+      </nutbig-doll-machine>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, ref } from "vue";
+export default {
+  props: {},
+  setup() {
+    const lottoRollDom: any = ref(null);
+    const prizeList = reactive([
+      {
+        imagePath:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/147182/12/2440/6194/5f06cde6Ead240fe8/31082e30a182a5ce.png",
+        text: "大鸡腿",
+      },
+      {
+        imagePath:
+          "https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
+        text: "JOY",
+      },
+      {
+        imagePath:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/128607/26/6643/6790/5f06cd27E9b5e15f7/7509bc7ce2da66b8.png",
+        text: "VIP",
+      },
+      {
+        imagePath:
+          "https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
+        text: "JOY",
+      },
+    ]);
+
+    // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
+    const prizeIndex = ref(3);
+    const startTurns = () => {
+      console.log("开始抽奖");
+    };
+
+    const endTurns = () => {
+      console.log("抽奖结束");
+      setTimeout(() => {
+        setTimeout(() => {
+          lottoRollDom.value.init();
+        }, 300);
+      }, 4500);
+    };
+
+    return {
+      lottoRollDom,
+      prizeList,
+      prizeIndex,
+      startTurns,
+      endTurns,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+#app .demo {
+  padding: 57px 0 0 0;
+}
+.show-demo {
+  background: #ffffff;
+}
+h2 {
+  padding: 0 20px;
+}
+</style>