feat: 部分迭代 表格2.5.8.14.17.18.19.22

mock/main.ts

@@ -138,7 +138,40 @@ export default [
             "experienceNum": 59442359
           },
           "giftPop1": {
-            todayPopFlag: true
+            "todayPopFlag": true,
+            "type": "2",
+            "actPrizeVO": [
+              {
+                "prizeId": "1",
+                "prizeName": "奖品名称1",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+              {
+                "prizeId": "2",
+                "prizeName": "奖品名称2",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+              {
+                "prizeId": "3",
+                "prizeName": "奖品名称3",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+              {
+                "prizeId": "4",
+                "prizeName": "奖品名称4",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+              {
+                "prizeId": "5",
+                "prizeName": "奖品名称5",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+              {
+                "prizeId": "thanks",
+                "prizeName": "thanks",
+                "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png"
+              },
+            ]
           },
           "virtualAssets": {
             "preDayIncome": "656",

mock/mncp.ts

@@ -10,11 +10,11 @@ export default [
                 data: {
                     productName: "productName",
                     totalProfit: Math.random() * 100000 >> 0,
-                    tranche: Math.random() * 100000 >> 0,
+                    tranche: 7660,
                     marketValue: Math.random() * 10000000 >> 0,
                     yesterdayProfit: Math.random() * 10000 >> 0,
-                    availableFunds: 7660,
-                    minBuyLimit: 100,
+                    availableFunds: 7690,
+                    minBuyLimit: 1,
                 }
             }
         },

mock/redPack.ts

@@ -6,8 +6,8 @@ export default [
                 "success": "enim ut velit",
                 "data": {
                     "prizeImg": "in velit dolor",
-                    "pirzeName": "do",
-                    "pirzeId": "deserunt sit"
+                    "prizeName": "do",
+                    "prizeId": "1" // thanks
                 },
                 "message": "est fugiat in Excepteur dolor",
                 "code": "commodo"

src/pages/DetailPage/DetailPage.module.less

@@ -15,60 +15,105 @@
   background-color: #f2f5f7;
 
   .topArea {
+    position: relative;
     flex-shrink: 0;
     margin-top: 40px;
     width: 691px;
-    height: 299px;
+    // height: 299px;
+    height: 254px;
     color: #ffffff;
     margin-bottom: 10px;
-    .webpBg("DetailPage/topBg.png");
+    // .webpBg("DetailPage/topBg.png");
+    border-radius: 13px;
+    background-image: linear-gradient( 0deg, rgb(170,52,39) 0%, rgb(199,68,54) 100%);
 
     .productName {
       position: absolute;
-      left: 0;
-      top: 55px;
-      width: 100%;
+      left: 149px;
+      top: 0;
+      width: 393px;
+      height: 42px;
       text-align: center;
       font-size: 28px;
+      background-image: linear-gradient( 0deg, #a5281e 0%, #a2261d 100%);
+      border-radius: 0 0 13px 13px;
+      .lineClamp1();
+    }
+
+    .label1 {
+      position: absolute;
+      left: 22px;
+      top: 45px;
+      width: 100%;
+      font-size: 28px;
+      color: rgba(255, 255, 255, 0.6);
     }
 
     .totalProfit {
       position: absolute;
-      left: 0;
-      top: 90px;
+      left: 22px;
+      top: 80px;
       width: 100%;
-      text-align: center;
       font-size: 60px;
       font-weight: bold;
     }
 
+    .label2 {
+      position: absolute;
+      left: 22px;
+      top: 166px;
+      width: 30%;
+      font-size: 22px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+
     .tranche {
       position: absolute;
-      left: 40px;
-      top: 270px;
+      left: 22px;
+      top: 198px;
       width: 30%;
-      text-align: center;
       font-size: 30px;
       font-weight: bold;
     }
 
+    .label3 {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 166px;
+      width: 30%;
+      font-size: 22px;
+      text-align: center;
+      color: rgba(255, 255, 255, 0.6);
+    }
+
     .marketValue {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 270px;
+      top: 198px;
       width: 30%;
       text-align: center;
       font-size: 30px;
       font-weight: bold;
     }
 
+    .label4 {
+      position: absolute;
+      right: 22px;
+      top: 166px;
+      width: 30%;
+      font-size: 22px;
+      text-align: right;
+      color: rgba(255, 255, 255, 0.6);
+    }
+
     .yesterdayProfit {
       position: absolute;
-      right: 40px;
-      top: 270px;
+      right: 22px;
+      top: 198px;
       width: 30%;
-      text-align: center;
+      text-align: right;
       font-size: 30px;
       font-weight: bold;
     }
@@ -288,6 +333,9 @@
     width: 18px;
     height: 32px;
     .webpBg("DetailPage/backBtn.png");
+    &.backBtn2 {
+      top: 42px;
+    }
   }
 
 }

src/pages/DetailPage/DetailPage.tsx

@@ -37,10 +37,8 @@ class DetailPage extends React.Component<any, any> {
         sellInput: "",
         buyInput: "",
         iframeUrl: "",
-        firtIn: true,
     }
 
-
     async componentDidMount() {
         this.getFrameUrl();
         this.updateInfo();
@@ -66,7 +64,7 @@ class DetailPage extends React.Component<any, any> {
             yesterdayProfit: data.yesterdayProfit,
             availableFunds: data.availableFunds,
             minBuyLimit: data.minBuyLimit,
-            buyInput: data.availableFunds,
+            buyInput: data.availableFunds / 100,
         });
     }
 
@@ -87,44 +85,28 @@ class DetailPage extends React.Component<any, any> {
             return;
         }
 
-        if (this.state.firtIn && (+buyInput < this.state.minBuyLimit)) {
-            Toast.show("低于起购价");
-            return;
-        }
-
-        if (+buyInput * 100 < this.state.minBuyLimit && !this.state.firtIn) {
+        // +(+xxx * 100).toFixed(0) 解决精度问题 比如76.9*100=7690.000000000001 而不是7690
+        if(+(+buyInput * 100).toFixed(0) < this.state.minBuyLimit){
             Toast.show("低于起购价");
             return;
         }
 
-        let div = +buyInput * 100 / this.state.minBuyLimit;
-
-        if(this.state.firtIn) {
-            div = +buyInput / this.state.minBuyLimit;
-        }
+        const div = +(+buyInput * 100).toFixed(0) / this.state.minBuyLimit;
         if (div !== Math.floor(div)) {
             Toast.show("按起购倍数递增哦～");
             return;
         }
 
-        if(this.state.firtIn && (+buyInput > this.state.availableFunds)) {
-            Toast.show("超出买入上限啦");
-            return;
-        }
-
-        if (+buyInput * 100 > this.state.availableFunds && !this.state.firtIn) {
+        if (+(+buyInput * 100).toFixed(0) > this.state.availableFunds) {
             Toast.show("超出买入上限啦");
             return;
         }
 
         ModalCtrl.showModal(BuyPanel, {
             name: this.state.productName,
-            amount: this.state.firtIn ? +buyInput / 100 : +buyInput,
+            amount: buyInput,
             call: async () => {
-                const { success, data } = await API.buy({ code: this.props.code, amount: !this.state.firtIn ? +buyInput * 100 : +buyInput});
-                this.setState({
-                  firtIn: true
-                })
+                const { success, data } = await API.buy({ code: this.props.code, amount: +(+buyInput * 100).toFixed(0) });
                 this.updateInfo();
                 if (!success) return;
                 Toast.show("购买成功");
@@ -151,7 +133,7 @@ class DetailPage extends React.Component<any, any> {
             return;
         }
 
-        if (+sellInput * 100 > this.state.tranche) {
+        if (+(+sellInput * 100).toFixed(0) > this.state.tranche) {
             Toast.show("超出赎回上限啦");
             return;
         }
@@ -160,7 +142,7 @@ class DetailPage extends React.Component<any, any> {
             name: this.state.productName,
             amount: sellInput,
             call: async () => {
-                const { success, data } = await API.redeem({ code: this.props.code, amount: +sellInput * 100 });
+                const { success, data } = await API.redeem({ code: this.props.code, amount: +(+sellInput * 100).toFixed(0) });
                 this.updateInfo();
                 if (!success) return;
                 Toast.show("赎回成功");
@@ -170,7 +152,6 @@ class DetailPage extends React.Component<any, any> {
 
     // 新增：输入校验，只允许数字和最多两位小数
     handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, key: 'buyInput' | 'sellInput') => {
-        key == 'buyInput' && this.setState({ firtIn: false })
         let value = e.target.value;
         // 只允许输入数字和最多两位小数
         if (value === '' || /^\d*(\.\d{0,2})?$/.test(value)) {
@@ -203,9 +184,13 @@ class DetailPage extends React.Component<any, any> {
             {isBuyed
                 ? <div className={styles.topArea}>
                     <div className={styles.productName}>{productName}</div>
+                    <div className={styles.label1}>累计收益</div>
                     <div className={styles.totalProfit}>{totalProfit / 100}</div>
+                    <div className={styles.label2}>持有份额</div>
                     <div className={styles.tranche}>{tranche / 100}</div>
+                    <div className={styles.label3}>持有市值</div>
                     <div className={styles.marketValue}>{marketValue / 100}</div>
+                    <div className={styles.label4}>昨日收益</div>
                     <div className={styles.yesterdayProfit}>{yesterdayProfit / 100}</div>
                 </div>
                 : <div className={styles.topArea2}>
@@ -306,7 +291,7 @@ class DetailPage extends React.Component<any, any> {
                 </motion.div>
             </motion.div>
             <Button
-                className={classNames(styles.backBtn)}
+                className={classNames(styles.backBtn, isBuyed ? styles.backBtn2 : "")}
                 onClick={this.clickBack}
             />
         </div>;

src/pages/HomePage/HomePage.less

@@ -8,6 +8,7 @@
   position: relative;
   background-color: #ffe6c5;
   padding-top: 700px;
+  padding-bottom: 85px;
   box-sizing: border-box;
 
   .bg {
@@ -186,6 +187,18 @@
         margin: 0 4px;
       }
     }
+    .time_box_over {
+      position: absolute;
+      right: 29px;
+      top: 26px;
+      width: 223px;
+      height: 40px;
+      .sparkBg("homePage/time_box_over_bg.png");
+      font-size: 22px;
+      color: rgb(255, 255, 255);
+      letter-spacing: 2px;
+      .flex_center();
+    }
 
     .yesterday_label {
       width: 153px;
@@ -333,9 +346,9 @@
     }
 
     .realbuy_btn {
-      width: 302px;
-      height: 86px;
-      left: 205px;
+      width: 327px;
+      height: 83px;
+      left: 193px;
       top: 380px;
       position: absolute;
       font-size: 35px;
@@ -347,9 +360,9 @@
   }
 
   .prize_banner {
-    width: 707px;
-    height: 316px;
-    left: 22px;
+    width: 713px;
+    height: 322px;
+    left: 19px;
     // top: 1060px;
     position: relative;
     .sparkBg("homePage/prize_banner.png");
@@ -499,16 +512,19 @@
   .bottom_products {
     width: 714px;
     height: auto;
-    min-height: 957px;
+    min-height: 990px;
     background-color: #fce398;
     left: 18px;
     // top: 2192px;
     position: relative;
     margin-top: 20px;
     padding-top: 152px;
+    padding-bottom: 19px;
     box-sizing: border-box;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
+    border-bottom: 3px solid #fff;
+    border-radius: 0 0 38px 38px;
 
     &::before {
       content: "";
@@ -516,8 +532,9 @@
       top: 800px;
       left: 15px;
       width: 685px;
-      height: calc(100% - 800px);
+      height: calc(100% - 800px - 19px);
       background-color: #fff;
+      border-radius: 0 0 20px 20px;
     }
 
     .tab1_bg {

src/pages/HomePage/HomePage.tsx

@@ -320,7 +320,7 @@ class HomePage extends React.Component<any, any> {
                   }}
                   countdownOver={() => store.updateIndex()}
                 />
-                : <div className="time_box">理财体验金已失效</div>
+                : <div className="time_box_over">理财体验金已失效</div>
             }
             <span className="yesterday_label">累计收益(元)</span>
             <span className="yesterday_amount">{this.settleMoney(virtualAssets?.totalIncome || 0)}</span>

src/panels/PrizePanel/PrizePanel.less

@@ -55,6 +55,18 @@
     .lineClamp1();
   }
 
+  .tips  {
+    width: 100%;
+    font-size: 24px;
+    color: rgba(1, 1, 1, 0.6);
+    line-height: 4.284;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 920px;
+    text-align: center;
+  }
+
   .close {
     position: absolute;
     left: 346px;

src/panels/PrizePanel/PrizePanel.tsx

@@ -31,11 +31,11 @@ export class PrizePanel extends Component<any, any> {
         const {optionImg, optionName, type} = this.props;
 
         return <div className="PrizePanel modal_center">
-            {type != 'red' && <div className="bg"/>}
-            {type == 'red' && <div className="bg2"/>}
+            <div className="bg2"/>
             <img className="img" src={optionImg}/>
             <div className="prizeName">{optionName}</div>
             <Button className={`btn md${type == 'red' ? '26' : '18'}`}onClick={this.clickBtn}/>
+            {type != 'red' && <div className="tips">奖品可在【首页】_【我的奖品】中查看</div>}
             <Button className="close" onClick={this.clickClose}/>
         </div>
     }

src/panels/newbieModal/newbieModal.less

@@ -106,5 +106,12 @@
     .sparkBg("newbieModal/drawBtn.png");
   }
 
-
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1240px;
+    width: 58px;
+    height: 58px;
+    .webpBg("common/close.png");
+  }
 }
\ No newline at end of file

src/panels/redPackRainModal/redPackRainModal.less

@@ -4,6 +4,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
+  background-color: rgba(0, 0, 0, 0.3);
 
   .gameCutDownBg {
     position: absolute;

src/store/store.ts

@@ -73,8 +73,9 @@ class Store {
     giftPop?: {
       type?: string,
       actPrizeVO?: Array<{
-        pirzeName?: string,
-        pirzeImg?: string
+        prizeName?: string,
+        prizeImg?: string,
+        prizeId?: string,
       }>
     }
     // 大明星配置