fix: 大转盘canvas适配，摇奖机中奖等

jdf2e · Nov 9, 2022 · 1e9b8c4 · 1e9b8c4
1 parent 30a53a8
commit 1e9b8c4
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-bingo",
-  "version": "1.0.7-beta.1",
+  "version": "1.0.7-beta.2",
   "description": "nutui生态之一抽奖组件库",
   "main": "dist/nutbig.umd.js",
   "module": "dist/nutbig.es.js",

diff --git a/src/packages/__VUE/lottoroll/index.taro.vue b/src/packages/__VUE/lottoroll/index.taro.vue
@@ -66,6 +66,10 @@ export default create({
       () => props.prizeIndex,
       (val) => {
         prize.value = val;
+      },
+      {
+        immediate: true,
+        deep: true,
       }
     );
 
@@ -81,7 +85,17 @@ export default create({
         window.setTimeout(cb, 1000 / 60);
       };
 
-    const list = ref(props.prizeList); // 奖品列表
+    const list = ref<TPrizeItem[]>([]); // 奖品列表
+    watch(
+      () => props.prizeList,
+      (val) => {
+        list.value = val;
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
     const options = ref(); // 可视区域每列展示的奖品数
     const startTime = ref();
     const lock = ref(false); //上锁

diff --git a/src/packages/__VUE/lottoroll/index.vue b/src/packages/__VUE/lottoroll/index.vue
@@ -61,6 +61,18 @@ export default create({
         prize.value = val;
       }
     );
+
+    const list = ref<TPrizeItem[]>([]); // 奖品列表
+    watch(
+      () => props.prizeList,
+      (val) => {
+        list.value = val;
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
     const _window: any = window;
     // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
     const animationFun =
@@ -73,7 +85,6 @@ export default create({
         _window.setTimeout(cb, 1000 / 60);
       };
 
-    const list: TPrizeItem[] = props.prizeList; // 奖品列表
     const options = ref<Array<TOptionsItem> | null>(); // 可视区域每列展示的奖品数
     const startTime = ref<number | null>(null);
     const lock = ref(false); //上锁
@@ -139,15 +150,15 @@ export default create({
         ).offsetHeight;
         let prizeIdx = prize.value; // 中奖编号
         if (prizeIdx < 0) {
-          prizeIdx = Math.floor(Math.random() * list.length);
+          prizeIdx = Math.floor(Math.random() * list.value.length);
         }
         // const prizeIndex = Math.floor(Math.random() * list.length); // 随机生成整数，测试用
         const opts = {
           el: dom.querySelector(".lotto-wrap"), //指向奖项元素的父级
           location: prizeIdx * itemHeight, // 奖品滚动到指定的位置
           rollTimes:
             2000 + Math.random() * 500 + i * 500 + 1000 * props.turnsNumber, // 转圈数
-          height: list.length * itemHeight, // 总的高度
+          height: list.value.length * itemHeight, // 总的高度
           duration: 6000 + i * 2000 + props.turnsTime, // 动画时间，毫秒数
           isFinished: false,
         };

diff --git a/src/packages/__VUE/marquee/doc.md b/src/packages/__VUE/marquee/doc.md
@@ -5,10 +5,11 @@
 用于跑马灯抽奖场景，可配置奖品、图片等。
 
 ### 安装
-``` javascript
-import { createApp } from 'vue';
+
+```javascript
+import { createApp } from "vue";
 // vue
-import { Marquee } from '@nutui/nutui-bingo';
+import { Marquee } from "@nutui/nutui-bingo";
 
 const app = createApp();
 app.use(Marquee);
@@ -36,93 +37,97 @@ export default {
     // 转盘上要展示的奖品数据
     const prizeList = ref([
       {
-        id: 'xiaomi',
-        prizeName: '小米手机',
-        prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png'
+        id: "xiaomi",
+        prizeName: "小米手机",
+        prizeImg:
+          "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png",
       },
       {
-        id: 'blue',
-        prizeColor: 'rgb(251, 219, 216)',
-        prizeName: '蓝牙耳机',
-        prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg'
+        id: "blue",
+        prizeColor: "rgb(251, 219, 216)",
+        prizeName: "蓝牙耳机",
+        prizeImg:
+          "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg",
       },
       {
-        id: 'thanks',
-        prizeName: '谢谢参与',
-        prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png'
+        id: "thanks",
+        prizeName: "谢谢参与",
+        prizeImg:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
       },
       {
-        id: 'apple',
-        prizeName: 'apple watch',
-        prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png'
+        id: "apple",
+        prizeName: "apple watch",
+        prizeImg:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png",
       },
       {
-        id: 'fruit',
-        prizeColor: 'rgba(246, 142, 46, 0.5)',
-        prizeName: '迪士尼苹果',
-        prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png'
+        id: "fruit",
+        prizeColor: "rgba(246, 142, 46, 0.5)",
+        prizeName: "迪士尼苹果",
+        prizeImg:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png",
       },
       {
-        id: 'thanks',
-        prizeName: '谢谢参与',
-        prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png'
+        id: "thanks",
+        prizeName: "谢谢参与",
+        prizeImg:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
       },
       {
-        id: 'fish',
-        prizeName: '海鲜套餐',
-        prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png'
+        id: "fish",
+        prizeName: "海鲜套餐",
+        prizeImg:
+          "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png",
       },
       {
-        id: 'thanks',
-        prizeName: '谢谢参与',
-        prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png'
-      }
+        id: "thanks",
+        prizeName: "谢谢参与",
+        prizeImg:
+          "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
+      },
     ]);
     // 转盘样式的选项
     const styleOpt = reactive({
       prizeItem: {},
-      startStyle:{},
+      startStyle: {},
       contentBg: {
-        background: "rgb(255, 231, 149)"
-      }
+        background: "rgb(255, 231, 149)",
+      },
     });
     // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
     const prizeIndex = ref(0);
     const startTurns = () => {
       const index = Math.floor(Math.random() * prizeList.value.length);
       prizeIndex.value = index;
-    }
+    };
     const endTurns = () => {
-      alert("中奖了")
-    }
+      console.log("中奖了");
+    };
     return {
       prizeList,
       styleOpt,
       prizeIndex,
       startTurns,
-      endTurns
+      endTurns,
     };
-  }
-}
+  },
+};
 ```
 
-
 ### Props
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| prize-list | 奖品列表 | Array | []
-| prize-index | 中奖奖品在列表的索引位置 | Number | -1
-| speed | 转动速度 | Number | 150
-| circle | 转动圈数 | Number | 30
-| style-opt | 跑马灯中的样式：contentBg-整个容器样式，prizeItem-每个奖品样式，startStyle-中间按钮样式 | Object | {contentBg: {},prizeItem: {},startStyle:{}}
-
-
+| 字段        | 说明                                                                                    | 类型   | 默认值                                      |
+| ----------- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------- |
+| prize-list  | 奖品列表                                                                                | Array  | []                                          |
+| prize-index | 中奖奖品在列表的索引位置                                                                | Number | -1                                          |
+| speed       | 转动速度                                                                                | Number | 150                                         |
+| circle      | 转动圈数                                                                                | Number | 30                                          |
+| style-opt   | 跑马灯中的样式：contentBg-整个容器样式，prizeItem-每个奖品样式，startStyle-中间按钮样式 | Object | {contentBg: {},prizeItem: {},startStyle:{}} |
 
 ### Events
 
-| 字段 | 说明 | 回调参数
-|----- | ----- | -----
-| start-turns | 开始跑动的回调函数，此时将接口中的中奖索引，赋值到 prize-index| - 
-| end-turns | 停止跑动后的回调函数 | - 
-
+| 字段        | 说明                                                           | 回调参数 |
+| ----------- | -------------------------------------------------------------- | -------- |
+| start-turns | 开始跑动的回调函数，此时将接口中的中奖索引，赋值到 prize-index | -        |
+| end-turns   | 停止跑动后的回调函数                                           | -        |
diff --git a/src/packages/__VUE/scratchcard/demo.vue b/src/packages/__VUE/scratchcard/demo.vue
@@ -38,7 +38,7 @@ export default createDemo({
   props: {},
   setup() {
     const opencard = () => {
-      alert("刮开事件完成");
+      console.log("刮开事件完成");
     };
     return { opencard };
   },

diff --git a/src/packages/__VUE/turntable/doc.md b/src/packages/__VUE/turntable/doc.md
@@ -122,7 +122,7 @@ export default {
       turntable.value.rotateTurn();
     };
     const endTurns = () => {
-      alert("中奖了");
+      console.log("中奖了");
     };
     return {
       turntable,

diff --git a/src/packages/__VUE/turntable/index.taro.vue b/src/packages/__VUE/turntable/index.taro.vue
@@ -1,9 +1,5 @@
 <template>
-  <view
-    :class="classes"
-    ref="turntableDom"
-    :style="{ width: width, height: height }"
-  >
+  <view :class="classes" ref="turntableDom" :style="{ width, height }">
     <view
       class="turntable"
       :style="{ transform: rotateAngle, transition: rotateTransition }"
@@ -173,11 +169,12 @@ export default create({
       // const ctx = canvas.getContext('2d');
       const ctx = Taro.createCanvasContext("canvasWx");
 
-      // const canvasW = (canvas.width = luckdraw.clientWidth); // 画板的高度
-      // const canvasH = (canvas.height = luckdraw.clientHeight); // 画板的宽度
-      const canvasW = Number(width.replace(/px/g, "")); // 画板的高度
-      const canvasH =
-        Number(height.replace(/px/g, "")) / (envApp.value == "WEAPP" ? 1 : 2); // 画板的宽度
+      // const canvasW = Number(width.replace(/px/g, "")); // 画板的高度
+      // const canvasH =
+      //   Number(height.replace(/px/g, "")) / (envApp.value == "WEAPP" ? 1 : 2); // 画板的宽度
+      const canvasW = parseFloat(width); // 画板的高度
+      const radis = envApp.value == "WEAPP" ? 1 : 2;
+      const canvasH = parseFloat(height) / radis;
 
       if (envApp.value == "WEAPP") {
         // translate方法重新映射画布上的 (0,0) 位置

diff --git a/src/sites/doc/components/demo-block/demoBlock.vue b/src/sites/doc/components/demo-block/demoBlock.vue
@@ -3,20 +3,25 @@
     <slot name="highlight"></slot>
     <slot></slot>
     <p class="online-part">
-      <a href="//gitpod.io/#https://github.com/jdf2e/nutui.git" target="_blank" class="online-btn">在线运行</a>
+      <a
+        href="//gitpod.io/#https://github.com/jdf2e/nutui.git"
+        target="_blank"
+        class="online-btn"
+        >在线运行</a
+      >
     </p>
   </div>
 </template>
 <script>
 export default {
   setup() {
     function onlineFun() {
-      alert('hello');
+      console.log("hello");
     }
     return {
-      onlineFun
+      onlineFun,
     };
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>