init

mock/draw.ts

+export default [
+    {
+        url: '/draw/index.do',
+        response: ({ query }) => {
+            return {
+                success: true,
+                code: "",
+                message: "",
+                timeStamp: Date.now(),
+                data: {
+                    titleImg: "titleImg",
+                    interval: "interval",
+                    amount: Math.random() * 100000 >> 0,
+                    profit: Math.random() * 10000000 >> 0,
+                    cycle: "12312312cyclecycle",
+                    remainDrawTime: Math.random() * 3 >> 0,
+                    prizeInfo: new Array(6).fill(1).map((_, i) => {
+                        return {
+                            prizeId: `prizeId${i}`,
+                            prizeName: `prizeName${i}`,
+                            prizeImg: `prizeImg${i}`,
+                        }
+                    })
+                }
+            }
+        },
+    },
+    {
+        url: '/draw/join.do',
+        response: ({ query }) => {
+            const i = Math.random() * 6 >> 0;
+            return {
+                success: true,
+                code: "",
+                message: "",
+                data: {
+                    ruleId: "ruleId",
+                    optionId: `prizeId${i}`,
+                    optionImg: "optionImg",
+                    prizeId: `prizeId${i}`,
+                    prizeType: Math.random() * 5 >> 0,
+                    position: Math.random() * 6 >> 0,
+                    userRecordId: "userRecordId",
+                    url: "url",
+                    sendCount: 1,
+                },
+            }
+        },
+    },
+]

src/App.tsx

@@ -30,7 +30,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: LoadingDemo,
-    }[skinId] || DetailPage;
+    }[skinId] || ResPage;
     PageCtrl.changePage(defaultPage);
   }
 

src/api/index.ts

@@ -74,6 +74,8 @@ const API = generateAPI({
   redeem: "mncp/redeem.do",
   buy: "mncp/buy.do",
   mncpIndex: "mncp/index.do",
+  drawIndex: "draw/index.do",
+  drawJoin: "draw/join.do",
 
 
 })

src/pages/DetailPage/DetailPage.tsx

@@ -73,7 +73,7 @@ class DetailPage extends React.Component<any, any> {
 
     clickSimulateBuy = _asyncThrottle(async () => {
         const { buyInput } = this.state;
-        await API.buy({ code: this.props.code, amount: buyInput });
+        await API.buy({ code: this.props.code, amount: +buyInput * 100 });
     });
 
     clickReallyBuy = _asyncThrottle(async () => {
@@ -83,7 +83,7 @@ class DetailPage extends React.Component<any, any> {
 
     clickSimulateSell = _asyncThrottle(async () => {
         const { sellInput } = this.state;
-        await API.redeem({ code: this.props.code, amount: sellInput });
+        await API.redeem({ code: this.props.code, amount: +sellInput * 100 });
     });
 
     render() {

src/pages/ResPage/ResPage.tsx

@@ -4,6 +4,7 @@ import styles from './ResPage.module.less';
 import { Button } from "@grace/ui";
 import classNames from "classnames";
 import TurnTable from "@/pages/ResPage/TurnTable/TurnTable.tsx";
+import resStore from "@/store/ResStore.ts";
 
 @observer
 class ResPage extends React.Component<any, any> {
@@ -13,7 +14,7 @@ class ResPage extends React.Component<any, any> {
     }
 
     async componentDidMount() {
-
+        resStore.updateInfo();
     }
 
     clickBack = () => {
@@ -24,8 +25,10 @@ class ResPage extends React.Component<any, any> {
         this.setState({ tab, });
     }
 
+
     render() {
         const { tab } = this.state;
+        const { titleImg, interval, cycle, profit, remainDrawTime, prizeInfo, amount } = resStore.info;
 
         const tabCls = classNames(styles.tab, {
             [styles.tab1]: tab === 1,
@@ -35,18 +38,18 @@ class ResPage extends React.Component<any, any> {
         return <div className={styles.ResPage}>
             <div className={styles.bg}/>
             <div className={styles.rankBg}>
-                <div className={styles.rankImg}/>
+                <img className={styles.rankImg} src={titleImg}/>
                 <div className={classNames(styles.rankTip, styles.rank1)}>
-                    我的收益区间在<span>3000元及以上</span>
+                    我的收益区间在<span>{interval}</span>
                 </div>
                 <div className={classNames(styles.rankTip, styles.rank2)}>
-                    理财资金<span>334556675元</span>
+                    理财资金<span>{amount/100}元</span>
                 </div>
                 <div className={classNames(styles.rankTip, styles.rank3)}>
-                    累计收益<span>2213元</span>
+                    累计收益<span>{profit/100}元</span>
                 </div>
                 <div className={classNames(styles.rankTip, styles.rank4)}>
-                    理财周期<span>2025.06.22-2025.07.22</span>
+                    理财周期<span>{cycle}</span>
                 </div>
             </div>
             <div className={tabCls}>

src/pages/ResPage/TurnTable/TurnTable.less

@@ -29,9 +29,10 @@
 
       .prize_name {
         position: absolute;
-        left: 0;
+        left: 50%;
+        transform: translateX(-50%);
         top: -40px;
-        width: 100%;
+        width: 300%;
         font-size: 25.75px;
         color: #e3a754;
         .lineClamp1();
@@ -61,7 +62,14 @@
     top: 1361px;
     width: 416px;
     height: 142px;
-    .webpBg("ResPage/可抽奖.png");
+
+    &.enable {
+      .webpBg("ResPage/可抽奖.png");
+    }
+
+    &.disable {
+      .webpBg("ResPage/不可抽奖.png");
+    }
   }
 
 }

src/pages/ResPage/TurnTable/TurnTable.tsx

@@ -5,6 +5,9 @@ import { CircleTurntable } from "@spark/circle-turntable";
 // import turnTableStore from "@src/store/TurnTableStore";
 import { Button, Toast } from "@grace/ui";
 import { _asyncThrottle } from "@/utils/utils.ts";
+import API from "@/api";
+import resStore from "@/store/ResStore.ts";
+import classNames from "classnames";
 
 @observer
 class TurnTable extends React.Component {
@@ -14,52 +17,45 @@ class TurnTable extends React.Component {
     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;
+
+        if (resStore.info.remainDrawTime <= 0) {
+            return Toast.show("已抽过奖哦");
+        }
+
         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;
-        //   },
-        // });
+        const { success, data } = await API.drawJoin();
+        if (!success) {
+            this.btnStarting = false;
+            return;
+        }
 
+        this.turntableRef.launch();
+        this.drawResultInfo = data;
+        const index = resStore.info.prizeInfo?.findIndex((item) => item.prizeId === this.drawResultInfo.prizeId);
+        this.turntableRef.braking(index);
     });
 
 
     render() {
-        // const { drawConsumeOil, prizeInfo } = turnTableStore.info;
+
+        const { prizeInfo, remainDrawTime } = resStore.info;
 
         return <div className="TurnTable">
             <CircleTurntable
                 className="tt_box"
                 ref={(ref) => (this.turntableRef = ref)}
-                options={new Array(6).fill({ prizeName: 123 })}
+                options={prizeInfo || []}
                 angleOffset={180 / 6 + 10} // 角度偏移量
                 radian={100} // 奖项半径
                 launchDuration={1000} // 启动时间
@@ -76,7 +72,12 @@ class TurnTable extends React.Component {
                 }}
                 didStop={this.onStop}
             />
-            <Button className="drawBtn" onClick={this.drawHandle}/>
+
+            <Button className={classNames("drawBtn", {
+                enable: remainDrawTime > 0,
+                disable: remainDrawTime <= 0,
+            })} onClick={this.drawHandle}/>
+
         </div>;
     }
 }

src/store/ResStore.ts

+import { makeAutoObservable, } from 'mobx';
+import API from "@/api";
+
+class ResStore {
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+
+    info = {
+      titleImg: "",
+      interval: "",
+      amount: 0,
+      profit: 0,
+      cycle: "",
+      remainDrawTime: 0,
+      prizeInfo: [],
+    };
+
+    async updateInfo() {
+        const { success, data } = await API.drawIndex();
+        if (!success) return;
+        this.info = data;
+    }
+
+}
+
+export default (new ResStore());