优化掉三个可选参数,跑抽奖接口抽离出去,同时更新数据也可在调用方控制了

README.md

@@ -11,12 +11,7 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
     renderCenter={<span className="logo"></span>}
     prizeList={this.state.prizeList}
     itemSelectImg={<span className="mask"></span>}
-    drawApi={API.doTurntableDraw}
-    updateInfoFunction={() => {
-      console.log("刷新数据");
-    }}
     matchInitName="prizeId"
-    matchApiName="prizeId"
     moveTime={100}
     beginIndex={0}
     turnTime={5000}
@@ -38,18 +33,18 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
 ```
 
 | 属性                       | 介绍                                                         | 是否必填 | 默认值             |
-| ------------------ | ------------------------------------------------------------ | -------- | ------------------ |
+| -------------------------- | ------------------------------------------------------------ | -------- | ------------------ |
 | ref                        | 用于获取组件对象                                             | 是       | /                  |
 | prizeList                  | 奖品列表                                                     | 是       | []                 |
 | itemSelectImg              | 被选中时奖品上方展示的内容                                   | 是       | ""                 |
-| drawApi            | 抽奖接口，只需给API中定义的就行                              | 是       | ()=>{}             |
+| drawApi（废弃）            | 抽奖接口，只需给API中定义的就行                              | 是       | ()=>{}             |
 | renderItem                 | 每个格子内渲染的内容                                         | 是       | ""                 |
 | className                  | 整体转盘样式设置                                             | 否       | 默认占满整个父元素 |
 | renderBg                   | 渲染转盘背景也可以渲染其他元素，将渲染在转盘底层             | 否       | ""                 |
 | renderCenter               | 渲染转盘中心位置的内容                                       | 否       | ""                 |
-| updateInfoFunction | 抽奖接口成功后，会执行                                       | 否       | ()=>{}             |
+| updateInfoFunction（废弃） | 抽奖接口成功后，会执行                                       | 否       | ()=>{}             |
 | matchInitName              | 奖品渲染时，将读取该奖品item上的matchInitName属性下的值绑定在dom上，例如data-prize-id={item[matchInitName]} | 否       | "prizeId"          |
-| matchApiName       | 抽奖接口返回的数据中用于和上方数据匹配的字段名               | 否       | "prizeId"          |
+| matchApiName（废弃）       | 抽奖接口返回的数据中用于和上方数据匹配的字段名               | 否       | "prizeId"          |
 | moveTime                   | 转盘移动间隔时间，单位ms                                     | 否       | 100                |
 | beginIndex                 | 转盘初次启动的索引                                           | 否       | 0                  |
 | addTime                    | 转盘每次移动增加的间隔时间                                   | 否       | 5                  |
@@ -64,5 +59,5 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
 | prizeRefList | 存放所有的奖品对象             |
 | oldIndex     | 记录上一轮结束的位置           |
 | timer        | 定时器，用于控制转盘转动的时间 |
-| draw         | 方法，转盘转动                 |
+| draw         | 方法，转盘转动，需要入参中奖id |
 

src/assetList.json

-{"preLoadImg":[],"asyncLoadImg":[]}
\ No newline at end of file
+{"preLoadImg":[],"asyncLoadImg":["Game/btn_top.png","Game/logo.png","Game/machine.png","Game/mask.png"]}
\ No newline at end of file

src/components/SquareTurntable/SquareTurntable.jsx

@@ -24,8 +24,11 @@ class SquareTurntable extends React.Component {
   waitTime = async(time) => {
     return new Promise((resolve) => setTimeout(resolve, time));
   }
-  /** 抽奖 */
-  draw = async () => {
+  /** 
+   * 抽奖
+   * @params targetId 中奖的id
+   * */
+  draw = async (targetId) => {
       const {
         moveTime = 100,
         beginIndex = 0,
@@ -51,17 +54,14 @@ class SquareTurntable extends React.Component {
       let select = {};
       // 数组长度
       const len = this.prizeRefList?.length || 0;
-      const res = await drawApi();
-      if (res?.success) {
-        !!updateInfoFunction && updateInfoFunction();
       this.timer = setTimeout(() => {
         flag = false;
       }, _turnTime);
       const move = async () => {
-          if (!flag && select.getAttribute("data-prize-id") === res?.data[matchApiName]) {
+        if (!flag && select.getAttribute("data-prize-id") === targetId) {
           this.setState({ isClick: false });
           this.oldIndex = _beginIndex;
-            return res;
+          return true;
         }
         if (len === 0) return false;
         if (!!itemSelectImg) {
@@ -70,6 +70,7 @@ class SquareTurntable extends React.Component {
         _beginIndex ++;
         if (_beginIndex >= len) _beginIndex = 0;
         select = this.prizeRefList[_beginIndex];
+        // console.log(JSON.parse(select.getAttribute("data-prize-id")));
         if (!!itemSelectImg) {
           this.prizeRefList[_beginIndex].lastChild.style.visibility = "visible";
         }
@@ -79,7 +80,6 @@ class SquareTurntable extends React.Component {
         return await move();
       };
       return await move();
-      }
   };
 
   render() {

src/pages/homeDemo/homeDemo.jsx

@@ -30,10 +30,13 @@ class HomeDemo extends React.Component {
   /** 点击抽奖 */
   handleClick = _throttle(async () => {
     console.log("table", this.table)
-    const result = await this.table.draw();
+    const res = await API.doTurntableDraw();
+    if (res?.success) {
+      const result = await this.table.draw(res?.data.prizeId);
       if (!!result) {
         console.log("抽奖结束", result)
       }
+    }
   })
   render() {