init

mock/draw.ts

@@ -38,6 +38,7 @@ export default [
                     optionId: `prizeId${i}`,
                     optionImg: "optionImg",
                     prizeId: `prizeId${i}`,
+                    optionName: `optionName${i}`,
                     prizeType: Math.random() * 5 >> 0,
                     position: Math.random() * 6 >> 0,
                     userRecordId: "userRecordId",

src/pages/ResPage/TurnTable/TurnTable.tsx

@@ -10,13 +10,14 @@ import resStore from "@/store/ResStore.ts";
 import classNames from "classnames";
 import { NoPrizePanel } from "@/panels/NoPrizePanel/NoPrizePanel.tsx";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import { PrizePanel } from "@/panels/PrizePanel/PrizePanel.tsx";
 
 @observer
 class TurnTable extends React.Component {
 
     turntableRef = null; // 大转盘
     btnStarting = false; // 转盘是否启动
-    drawResultInfo = {};
+    drawResultInfo: any = {};
 
     async componentDidMount() {
     }
@@ -24,7 +25,14 @@ class TurnTable extends React.Component {
     onStop = () => {
         this.btnStarting = false;
         resStore.updateInfo();
-        // ModalCtrl.showModal(NoPrizePanel, this.drawResultInfo);
+
+        console.log(this.drawResultInfo)
+
+        if (this.drawResultInfo.prizeId == "thanks") {
+            ModalCtrl.showModal(NoPrizePanel, this.drawResultInfo);
+        } else {
+            ModalCtrl.showModal(PrizePanel, this.drawResultInfo);
+        }
     }
 
     // 开始抽奖
@@ -42,9 +50,9 @@ class TurnTable extends React.Component {
             this.btnStarting = false;
             return;
         }
+        this.drawResultInfo = data;
 
         this.turntableRef.launch();
-        this.drawResultInfo = data;
         const index = resStore.info.prizeInfo?.findIndex((item) => item.prizeId === this.drawResultInfo.prizeId);
         this.turntableRef.braking(index);
     });

src/panels/NoPrizePanel/NoPrizePanel.tsx

@@ -15,7 +15,7 @@ export class NoPrizePanel extends Component<any, any> {
 
     render() {
 
-        return <div className="NoPrizePanel">
+        return <div className="NoPrizePanel modal_center">
             <div className="bg"/>
             <Button className="btn" onClick={this.clickClose}/>
             <Button className="close" onClick={this.clickClose}/>

src/panels/PrizePanel/PrizePanel.less

+@import "../../res.less";
+
+.PrizePanel {
+  width: 750px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+
+  .bg {
+    position: absolute;
+    left: 82px;
+    top: 348px;
+    width: 585px;
+    height: 671px;
+    .webpBg("PrizePanel/bg.png");
+  }
+
+  .btn {
+    position: absolute;
+    left: 120px;
+    top: 811px;
+    width: 510px;
+    height: 138px;
+    .webpBg("PrizePanel/btn.png");
+  }
+
+  .img {
+    border-radius: 22px;
+    background-color: white;
+    position: absolute;
+    left: 265px;
+    top: 494px;
+    width: 220px;
+    height: 220px;
+  }
+
+  .prizeName {
+    font-size: 28px;
+    color: rgb(1, 1, 1);
+    text-align: center;
+    position: absolute;
+    left: 100px;
+    width: 550px;
+    top: 740px;
+    .lineClamp1();
+  }
+
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1161px;
+    width: 58px;
+    height: 58px;
+    .webpBg("common/close.png");
+  }
+}

src/panels/PrizePanel/PrizePanel.tsx

+import { Component } from "react";
+
+import "./PrizePanel.less";
+import { Button } from "@grace/ui";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+
+export class PrizePanel extends Component<any, any> {
+
+    componentDidMount() {
+    }
+
+    clickClose = () => {
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+
+        const {optionImg, optionName} = this.props;
+
+        return <div className="PrizePanel modal_center">
+            <div className="bg"/>
+            <img className="img" src={optionImg}/>
+            <div className="prizeName">{optionName}</div>
+            <Button className="btn" onClick={this.clickClose}/>
+            <Button className="close" onClick={this.clickClose}/>
+        </div>
+    }
+
+
+}