Update DetailPage to integrate BuyPanel for purchase and redemption...

Update DetailPage to integrate BuyPanel for purchase and redemption simulations, add new assets, and modify App to default to DetailPage. Remove unused background image reference in ResPage styles.

src/App.tsx

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

src/pages/DetailPage/DetailPage.tsx

@@ -11,6 +11,8 @@ import API from "@/api";
 import { _asyncThrottle } from '@/utils/utils';
 
 import hxLink from "hx-product_detail-link";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import { BuyPanel } from "@/panels/BuyPanel/BuyPanel.tsx";
 
 enum EOpType {
     Buy = "buy",
@@ -73,7 +75,22 @@ class DetailPage extends React.Component<any, any> {
 
     clickSimulateBuy = _asyncThrottle(async () => {
         const { buyInput } = this.state;
-        await API.buy({ code: this.props.code, amount: +buyInput * 100 });
+
+        if (+buyInput * 100 > this.state.availableFunds) {
+            Toast.show("超出买入上限啦");
+            return;
+        }
+
+        ModalCtrl.showModal(BuyPanel, {
+            name: this.state.productName,
+            amount: buyInput,
+            call: async () => {
+                const { success, data } = await API.buy({ code: this.props.code, amount: +buyInput * 100 });
+                this.updateInfo();
+                if (!success) return;
+                Toast.show("购买成功");
+            }
+        });
     });
 
     clickReallyBuy = _asyncThrottle(async () => {
@@ -83,7 +100,22 @@ class DetailPage extends React.Component<any, any> {
 
     clickSimulateSell = _asyncThrottle(async () => {
         const { sellInput } = this.state;
-        await API.redeem({ code: this.props.code, amount: +sellInput * 100 });
+
+        if (+sellInput * 100 > this.state.tranche) {
+            Toast.show("超出赎回上限啦");
+            return;
+        }
+
+        ModalCtrl.showModal(BuyPanel, {
+            name: this.state.productName,
+            amount: sellInput,
+            call: async () => {
+                const { success, data } = await API.redeem({ code: this.props.code, amount: +sellInput * 100 });
+                this.updateInfo();
+                if (!success) return;
+                Toast.show("赎回成功");
+            }
+        });
     });
 
     render() {

src/pages/ResPage/ResPage.module.less

@@ -65,7 +65,7 @@
       top: 131px;
       width: 176px;
       height: 202px;
-      .webpBg("ResPage/理财大明星.png");
+      //.webpBg("ResPage/理财大明星.png");
     }
 
     .rank1 {

src/panels/BuyPanel/BuyPanel.less

+@import "../../res.less";
+
+.BuyPanel {
+  width: 750px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+
+  .bg {
+    position: absolute;
+    left: 82px;
+    top: 448px;
+    width: 585px;
+    height: 388px;
+    .webpBg("BuyPanel/bg.png");
+  }
+
+  .btn {
+    position: absolute;
+    left: 374px;
+    top: 673px;
+    width: 257px;
+    height: 138px;
+    .webpBg("BuyPanel/确认.png");
+  }
+
+  .cancel {
+    position: absolute;
+    left: 135px;
+    top: 677px;
+    width: 231px;
+    height: 110px;
+    .webpBg("BuyPanel/再想想.png");
+  }
+
+  .tip {
+    font-size: 36px;
+    color: rgb(1, 1, 1);
+    text-align: center;
+    position: absolute;
+    left: 125px;
+    width: 500px;
+    top: 525px;
+    font-weight: bold;
+  }
+
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1161px;
+    width: 58px;
+    height: 58px;
+    .webpBg("common/close.png");
+  }
+}

src/panels/BuyPanel/BuyPanel.tsx

+import { Component } from "react";
+
+import "./BuyPanel.less";
+import { Button } from "@grace/ui";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+
+export class BuyPanel extends Component<any, any> {
+
+    componentDidMount() {
+    }
+
+    clickOk = () => {
+        ModalCtrl.closeModal();
+        this.props?.call();
+    }
+    clickClose = () => {
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+
+        const {name, amount} = this.props;
+
+        return <div className="BuyPanel modal_center">
+            <div className="bg"/>
+            <div className="tip">您申请模拟购买{name}产品{amount}元</div>
+            <Button className="btn" onClick={this.clickOk}/>
+            <Button className="cancel" onClick={this.clickClose}/>
+            <Button className="close" onClick={this.clickClose}/>
+        </div>
+    }
+
+
+}

src/panels/SellPanel/SellPanel.less

+@import "../../res.less";
+
+.SellPanel {
+  width: 750px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+
+  .bg {
+    position: absolute;
+    left: 82px;
+    top: 448px;
+    width: 585px;
+    height: 388px;
+    .webpBg("BuyPanel/bg.png");
+  }
+
+  .btn {
+    position: absolute;
+    left: 374px;
+    top: 673px;
+    width: 257px;
+    height: 138px;
+    .webpBg("BuyPanel/确认.png");
+  }
+
+  .cancel {
+    position: absolute;
+    left: 135px;
+    top: 677px;
+    width: 231px;
+    height: 110px;
+    .webpBg("BuyPanel/再想想.png");
+  }
+
+  .tip {
+    font-size: 36px;
+    color: rgb(1, 1, 1);
+    text-align: center;
+    position: absolute;
+    left: 125px;
+    width: 500px;
+    top: 525px;
+    font-weight: bold;
+  }
+
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1161px;
+    width: 58px;
+    height: 58px;
+    .webpBg("common/close.png");
+  }
+}

src/panels/SellPanel/SellPanel.tsx

+import { Component } from "react";
+
+import "./SellPanel.less";
+import { Button } from "@grace/ui";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+
+export class SellPanel extends Component<any, any> {
+
+    componentDidMount() {
+    }
+
+    clickOk = () => {
+        ModalCtrl.closeModal();
+        this.props?.call();
+    }
+    clickClose = () => {
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+
+        const {name, amount} = this.props;
+
+        return <div className="SellPanel modal_center">
+            <div className="bg"/>
+            <div className="tip">您申请模拟赎回{name}产品{amount}份</div>
+            <Button className="btn" onClick={this.clickOk}/>
+            <Button className="cancel" onClick={this.clickClose}/>
+            <Button className="close" onClick={this.clickClose}/>
+        </div>
+    }
+
+
+}