init

jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "strict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ]
+}

package.json

@@ -15,6 +15,7 @@
     "@grace/built-in": "*",
     "@grace/svgaplayer": "*",
     "@grace/ui": "*",
+    "@spark/circle-turntable": "^1.0.3",
     "@spark/dbdomain": "^1.0.25",
     "@spark/share": "^2.0.340",
     "@tailwindcss/postcss": "^4.0.6",

src/pages/ResPage/ResPage.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import styles from './ResPage.module.less';
 import { Button } from "@grace/ui";
 import classNames from "classnames";
+import TurnTable from "@/pages/ResPage/TurnTable/TurnTable.tsx";
 
 @observer
 class ResPage extends React.Component<any, any> {
@@ -51,9 +52,15 @@ class ResPage extends React.Component<any, any> {
             <div className={tabCls}>
                 <div className={styles.tabBtn1} onClick={() => this.changeTab(1)}/>
                 <div className={styles.tabBtn2} onClick={() => this.changeTab(2)}/>
+            </div>
 
+            <div style={{ display: tab == 1 ? "block" : "none" }}>
+                <TurnTable/>
+            </div>
+            <div style={{ display: tab == 2 ? "block" : "none" }}>
 
             </div>
+
             <Button className={styles.backBtn} onClick={this.clickBack}/>
         </div>;
     }

src/pages/ResPage/TurnTable/TurnTable.less

+@import "../../../res.less";
+
+.TurnTable {
+  .tt_box {
+    width: 614px;
+    height: 614px;
+    left: 68px;
+    top: 694px;
+    position: absolute;
+
+    .turntable_bg {
+      width: 614px;
+      height: 614px;
+      left: 0;
+      top: 0;
+      position: absolute;
+      .sparkBg("ResPage/转盘背景.png");
+    }
+
+    .prize_item {
+      width: 70px;
+      height: 70px;
+      text-align: center;
+      color: #6a2913;
+      font-size: 22px;
+      margin-bottom: 15px;
+      margin-left: -65px;
+      transform: rotateZ(-8deg);
+
+      .prize_name {
+        position: absolute;
+        left: 0;
+        top: -40px;
+        width: 100%;
+        font-size: 25.75px;
+        color: #e3a754;
+        .lineClamp1();
+        font-weight: bold;
+      }
+
+      .prize_img {
+        width: 80px;
+        height: 80px;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .ttBtn {
+    position: absolute;
+    left: 278px;
+    top: 895px;
+    width: 193px;
+    height: 204px;
+    .webpBg("ResPage/点击抽奖.png");
+  }
+
+  .drawBtn {
+    position: absolute;
+    left: 167px;
+    top: 1361px;
+    width: 416px;
+    height: 142px;
+    .webpBg("ResPage/可抽奖.png");
+  }
+
+}
+

src/pages/ResPage/TurnTable/TurnTable.tsx

+import React from 'react';
+import { observer } from 'mobx-react';
+import './TurnTable.less';
+import { CircleTurntable } from "@spark/circle-turntable";
+// import turnTableStore from "@src/store/TurnTableStore";
+import { Button, Toast } from "@grace/ui";
+import { _asyncThrottle } from "@/utils/utils.ts";
+
+@observer
+class TurnTable extends React.Component {
+
+    turntableRef = null; // 大转盘
+    btnStarting = false; // 转盘是否启动
+    drawResultInfo = {};
+
+    async componentDidMount() {
+        // await store.getDrawInfo();
+    }
+
+    onStop = () => {
+        this.btnStarting = false;
+        // turnTableStore.updateInfo();
+        // modalStore.pushPop("PrizePanel", this.drawResultInfo);
+    }
+
+    // 开始抽奖
+    drawHandle = _asyncThrottle(async () => {
+        if (this.btnStarting) return false;
+        this.btnStarting = true;
+
+        // modalStore.pushPop("CheckPanel", {
+        //   text: `您将消耗${drawConsumeOil}加油值进行抽奖哦`,
+        //   ok: async () => {
+        //     const { success, data } = await API.dbgjDraw();
+        //     if (!success) {
+        //       turnTableStore.updateInfo();
+        //       return;
+        //     }
+        //
+        //     // 转盘转动开始抽奖
+        //     this.turntableRef.launch();
+        //     this.drawResultInfo = data;
+        //
+        //     const index = turnTableStore.info.prizeInfo?.findIndex((item) => item.prizeId === this.drawResultInfo.prizeId);
+        //     this.turntableRef.braking(index);
+        //   },
+        //   cancel: () => {
+        //     this.btnStarting = false;
+        //   },
+        // });
+
+    });
+
+
+    render() {
+        // const { drawConsumeOil, prizeInfo } = turnTableStore.info;
+
+        return <div className="TurnTable">
+            <CircleTurntable
+                className="tt_box"
+                ref={(ref) => (this.turntableRef = ref)}
+                options={new Array(6).fill({ prizeName: 123 })}
+                angleOffset={180 / 6 + 10} // 角度偏移量
+                radian={100} // 奖项半径
+                launchDuration={1000} // 启动时间
+                // 大转盘背景
+                renderBackground={<div className="turntable_bg"></div>}
+                // 大转盘指针
+                renderStartButton={<div className="ttBtn"/>}
+                // 渲染奖品信息
+                renderOption={(option) => {
+                    return <div className="prize_item">
+                        <div className="prize_name">{option.prizeName}</div>
+                        <img className="prize_img" src={option.prizeImg} alt=""/>
+                    </div>;
+                }}
+                didStop={this.onStop}
+            />
+            <Button className="drawBtn" onClick={this.drawHandle}/>
+        </div>;
+    }
+}
+
+export default TurnTable;