feat: 修改代码

src/app/[locale]/(TabBar)/deposit/Reward.tsx

@@ -7,29 +7,75 @@ interface Props {
     data: ShopProductItem;
 }
 
+const mapKey: any = {
+    1: "Saldo",
+    2: "Bonus",
+    3: "Free",
+    4: "Replay",
+};
+
 const Reward: React.FC<Props> = ({ data }) => {
-    console.log(data); //TODO: delet
+    const renderData = React.useMemo(() => {
+        if (!!(!data?.activity_reward || !data?.activity_reward)) return [];
+        const result: any = {};
+        if (data?.activity_reward?.length > 0) {
+            data?.activity_reward?.forEach((item) => {
+                if (item?.item_id <= 0 || item?.item_id > 4) return;
+                result[item?.item_id] = {
+                    amount: item?.amount,
+                    suffix: item.reward === 1 ? "BRL" : "%",
+                };
+            });
+        }
+        if (data?.pay_reward?.length > 0) {
+            data?.activity_reward?.forEach((item) => {
+                if (item?.item_id <= 0 || item?.item_id > 4) return;
+                result[item?.item_id] = {
+                    amount: item?.amount,
+                    suffix: item.reward === 1 ? "BRL" : "%",
+                };
+            });
+        }
+        // return result;
+        return {
+            ...result,
+            1: {
+                amount: 20,
+                suffix: "BRL",
+            },
+            2: {
+                amount: 20,
+                suffix: "%",
+            },
+            3: {
+                amount: 20,
+                suffix: "BRL",
+            },
+            4: {
+                amount: 20,
+                suffix: "BRL",
+            },
+        };
+    }, [data]);
+    // D 1现金2彩金3免费币4重玩币
+    if (Object.keys(renderData).length === 0) return <div className="h-[50px] w-[1px]"></div>;
 
     return (
         <div className={clsx(styles.rewardBox, "text-[.1rem] text-[#ccc]")}>
-            <div className="flex w-[100%] flex-row items-start justify-between">
-                <div>充值奖励</div>
-                <div>
-                    <div>2323</div>
-                    <div>2323</div>
-                    <div>2323</div>
-                    <div>2323</div>
-                </div>
-            </div>
-            <div className="flex w-[100%] flex-row items-start justify-between">
-                <div>活动奖励</div>
-                <div>
-                    <div>2323</div>
-                    <div>2323</div>
-                    <div>2323</div>
-                    <div>2323</div>
-                </div>
-            </div>
+            {Object.keys(renderData).map((key) => {
+                if (renderData[key] === 0) return null;
+                return (
+                    <div key={key} className={styles.rewardItem}>
+                        <i className={clsx(styles[mapKey[key]])}></i>
+                        <div className="relative -top-[5px] text-[#fff]">
+                            <div>{mapKey[key]}</div>
+                            <div>
+                                {renderData[key].amount} {renderData[key].suffix}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
         </div>
     );
 };

src/app/[locale]/(TabBar)/deposit/reward.module.scss

@@ -0,0 +1,44 @@
+.rewardBox {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    flex: 1;
+    grid-column: 5px;
+}
+.rewardItem {
+    display: flex;
+    align-items: center;
+}
+.Free {
+    background-image: url("/deposite/free.png");
+    width: 40px;
+    height: 40px;
+    display: block;
+    background-size: 100% 100%;
+    background-position: center center;
+}
+.Bonus {
+    background-image: url("/deposite/bonus.png");
+    width: 40px;
+    height: 40px;
+    display: block;
+    background-size: 100% 100%;
+    background-position: center center;
+}
+
+.Replay {
+    background-image: url("/deposite/repalay.png");
+    width: 40px;
+    height: 40px;
+    display: block;
+    background-size: 100% 100%;
+    background-position: center center;
+}
+
+.Saldo {
+    background-image: url("/deposite/Saldo.png");
+    width: 40px;
+    height: 40px;
+    display: block;
+    background-size: 100% 100%;
+    background-position: center center;
+}

src/app/[locale]/(doings)/card/page.tsx

@@ -73,10 +73,16 @@ const CardPage = () => {
         const boundsInfo = itemData.activity_reward.find((item: ShopActivityRewardItem) => {
             return item.item_id === 2;
         });
+        const bounsAmount = boundsInfo?.amount || 0;
+        const bounsValue =
+            boundsInfo?.reward === 1 ? bounsAmount : (bounsAmount / 100) * itemData.par_value;
+        const amountAmount = boundsInfo?.amount || 0;
+        const amountValue =
+            boundsInfo?.reward === 1 ? amountAmount : (amountAmount / 100) * itemData.par_value;
         return {
-            amount: amountInfo?.amount || 0,
+            amount: amountValue,
             amountRollover: amountInfo?.rollover || 0,
-            bouns: boundsInfo?.amount || 0,
+            bouns: bounsValue,
             bounsRollover: boundsInfo?.rollover || 0,
         };
     };
@@ -255,7 +261,7 @@ const CardPage = () => {
                                                                             styles.receiveText
                                                                         )}
                                                                     >
-                                                                        NUMERÁRIO{itemInfo.amount}R
+                                                                        NUMERÁRIO {itemInfo.amount}R
                                                                     </div>
                                                                     <div
                                                                         className={clsx(

src/styles/deposit.scss

@@ -100,22 +100,12 @@
             color: #fff;
             font-size: 0.18rem;
             margin-bottom: 0.1rem;
-            // background: #494949;
-            // display: flex;
-            // -webkit-box-align: center;
-            // -ms-flex-align: center;
-            // align-items: center;
-            // -webkit-box-orient: vertical;
-            // -webkit-box-direction: normal;
-            // -ms-flex-direction: column;
-            // flex-direction: column;
-            // -webkit-box-pack: center;
-            // -ms-flex-pack: center;
-            // justify-content: center;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
             position: relative;
-            // overflow: hidden;
             cursor: pointer;
-            padding: 5px;
+            padding: 15px 5px 5px 5px;
             flex-wrap: wrap;
             &.active {
                 background-color: #d917ff;
@@ -143,11 +133,10 @@
                 background-size: 100% 100%;
             }
             .amountContent {
-                width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
-
+                margin-right: 10px;
                 .iconfont {
                     margin-right: 0.03rem;
                     font-size: 0.14rem;