feat: 修改

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

@@ -30,7 +30,7 @@ const Reward: React.FC<Props> = ({ data }) => {
             data?.activity_reward?.forEach((item) => {
                 if (item?.item_id <= 0 || item?.item_id > 4) return;
                 result[item?.item_id] = {
-                    amount: `${item?.amount}`,
+                    amount: `${item?.amount}${getSuffix(item.reward)}`,
                     reward: item?.reward,
                 };
             });
@@ -42,18 +42,19 @@ const Reward: React.FC<Props> = ({ data }) => {
                 let amount = "";
                 if (hasData) {
                     if (hasData.reward === item.reward) {
-                        amount = `${Number(hasData.amount) + Number(item?.amount)}`;
+                        amount = `${Number(parseFloat(hasData.amount)) + Number(item?.amount)}${getSuffix(item.reward)}`;
                     } else {
-                        amount = `${hasData?.amount}${getSuffix(hasData.reward)}+${item?.amount}${getSuffix(item.reward)}`;
+                        amount = `${hasData?.amount}+${item?.amount}${getSuffix(item.reward)}`;
                     }
                 } else {
-                    amount = `${item?.amount}`;
+                    amount = `${item?.amount}${getSuffix(item.reward)}`;
                 }
                 result[item?.item_id] = {
-                    amount: `${amount}${typeof amount === "string" ? "" : getSuffix(item.reward)}`,
+                    amount: amount,
                 };
             });
         }
+        //${typeof amount === "string" ? "" : getSuffix(item.reward)}
         // return result;
         return {
             ...result,

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

@@ -31,8 +31,9 @@
         background-size: 100% 100%;
         background-repeat: no-repeat;
         position: relative;
-        padding: 0.2rem;
+        padding: 0.2rem 0.1rem;
         display: flex;
+        flex-direction: column;
         align-items: stretch;
         justify-content: space-between;
         &::after {
@@ -53,12 +54,32 @@
         position: relative;
         z-index: 2;
         color: #77223c;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
     }
     .cardRight {
-        text-align: right;
         position: relative;
         z-index: 2;
         color: #ff1d66;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 0.3rem 0.1rem 0.1rem;
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 0.1rem;
+        overflow: hidden;
+    }
+    .cardRightTitle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding: 0.04rem 0.1rem;
+        background-color: #f7e7fe;
+        border-radius: 0 0 0.1rem 0;
+        color: #77223c;
     }
     .money {
         color: #ff1d66;
@@ -67,6 +88,12 @@
     .text {
         color: #77223c;
     }
+    .text_1 {
+        color: #ff1d66;
+    }
+    .text_2 {
+        color: #ff0052;
+    }
     .rili {
         position: absolute;
         right: -0.02rem;
@@ -79,6 +106,7 @@
         align-items: center;
         justify-content: center;
         perspective: 500px;
+        z-index: 2;
     }
     .riliContent {
         transform: rotateZ(5deg);
@@ -313,6 +341,16 @@
     .text {
         color: #345078;
     }
+    .text_1 {
+        color: #3d98ff;
+    }
+    .text_2 {
+        color: #3d98ff;
+    }
+    .cardRightTitle {
+        background-color: #d3e4fc;
+        color: #345078;
+    }
     .lingquContent {
         background-color: #66a3ff;
         box-shadow: 0 0 0.15rem #34c1e6 inset;
@@ -350,6 +388,16 @@
     .text {
         color: #b67948;
     }
+    .text_1 {
+        color: #ff7e00;
+    }
+    .text_2 {
+        color: #b67948;
+    }
+    .cardRightTitle {
+        background-color: #fae4cc;
+        color: #b67948;
+    }
     .lingquContent {
         background-color: #fad5a9;
         box-shadow: 0 0 0.15rem #ecb778 inset;

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

@@ -24,11 +24,13 @@ const CardPage = () => {
     const router = useRouter();
     const searchParams = useSearchParams();
     const swiperRef = React.useRef<SwiperClass | null>(null);
-    const [act, setAct] = React.useState(0);
+
+    // const [act, setAct] = React.useState(0);
     const [amount, setAmount] = React.useState<any>({});
     const [visible, setVisible] = React.useState<boolean>(false);
     const [shopInfo, setShopInfo] = React.useState<ShopInfo>({} as ShopInfo);
     const [loading, setLoading] = React.useState(false);
+
     const shop_id = React.useMemo(() => {
         return Number(searchParams.get("shop_id"));
     }, []);
@@ -50,6 +52,7 @@ const CardPage = () => {
                 res.data.products.sort((a: any, b: any) => {
                     return a.pay - b.pay;
                 }); //TODO: sort sho
+
                 setShopInfo(res.data);
             }
         } finally {
@@ -77,10 +80,10 @@ const CardPage = () => {
         });
         const bounsAmount = boundsInfo?.amount || 0;
         const bounsValue =
-            boundsInfo?.reward === 1 ? bounsAmount : (bounsAmount / 100) * itemData.par_value;
+            boundsInfo?.reward === 1 ? bounsAmount : (bounsAmount / 100) * itemData.pay_value;
         const amountAmount = boundsInfo?.amount || 0;
         const amountValue =
-            boundsInfo?.reward === 1 ? amountAmount : (amountAmount / 100) * itemData.par_value;
+            boundsInfo?.reward === 1 ? amountAmount : (amountAmount / 100) * itemData.pay_value;
         return {
             amount: amountValue,
             amountRollover: amountInfo?.rollover || 0,
@@ -144,9 +147,9 @@ const CardPage = () => {
                     onSwiper={(swiper) => {
                         swiperRef.current = swiper;
                     }}
-                    onSlideChange={(swiper) => {
-                        setAct(swiper.realIndex);
-                    }}
+                    // onSlideChange={(swiper) => {
+                    //     setAct(swiper.realIndex);
+                    // }}
                     loop={data.length > 3}
                     modules={[Pagination]}
                     // loopAdditionalSlides={2}
@@ -188,18 +191,22 @@ const CardPage = () => {
                                         <div className={styles.cardContainerOut}>
                                             <div className={styles.cardContent}>
                                                 <div className={styles.cardLeft}>
-                                                    <div
-                                                        className={clsx("text-[.12rem] font-bold")}
-                                                    >
-                                                        PARA RECARREGAR
-                                                    </div>
-                                                    <div
-                                                        className={clsx(
-                                                            "my-[.04rem] text-[.36rem] font-bold",
-                                                            styles.money
-                                                        )}
-                                                    >
-                                                        {item.par_value}R
+                                                    <div>
+                                                        <div
+                                                            className={clsx(
+                                                                "text-[.11rem] font-bold"
+                                                            )}
+                                                        >
+                                                            Para Recarregar
+                                                        </div>
+                                                        <div
+                                                            className={clsx(
+                                                                "my-[.04rem] text-[.30rem] font-bold",
+                                                                styles.money
+                                                            )}
+                                                        >
+                                                            {item.pay_value}R
+                                                        </div>
                                                     </div>
                                                     <div className="pb-[.2rem] text-[.15rem] font-bold">
                                                         EXTRA {item.desc}%
@@ -208,17 +215,35 @@ const CardPage = () => {
                                                 <div className={styles.cardRight}>
                                                     <div
                                                         className={clsx(
-                                                            "text-[.12rem] font-bold",
-                                                            styles.text
+                                                            "text-[.1rem]",
+                                                            styles.cardRightTitle
                                                         )}
                                                     >
-                                                        RECEBA POR DIA
+                                                        Receba por dia
                                                     </div>
-                                                    <div className="text-[.12rem] font-bold">
-                                                        NUMERÁRIO {itemInfo.amount}R
+                                                    <div className="flex-1 text-[.1rem]">
+                                                        <div className={styles.text_1}>
+                                                            Nnuerário
+                                                        </div>
+                                                        <div
+                                                            className={clsx(
+                                                                "text-[.14rem] font-bold",
+                                                                styles.text_2
+                                                            )}
+                                                        >
+                                                            {itemInfo.amount}R
+                                                        </div>
                                                     </div>
-                                                    <div className="text-[.12rem] font-bold">
-                                                        BÔNUS {itemInfo.bouns}R
+                                                    <div className="flex-1 text-[.1rem]">
+                                                        <div className={styles.text_1}>Bônus</div>
+                                                        <div
+                                                            className={clsx(
+                                                                "text-[.14rem] font-bold",
+                                                                styles.text_2
+                                                            )}
+                                                        >
+                                                            {itemInfo.bouns}R
+                                                        </div>
                                                     </div>
                                                 </div>
                                                 <div className={styles.rili}>
@@ -344,7 +369,7 @@ const CardPage = () => {
                         const itemInfo = getActiveInfo(item);
                         return (
                             <div key={item.id} className={styles.configItem}>
-                                <div>{item.par_value}</div>
+                                <div>{item.pay_value}</div>
                                 <div>{itemInfo.amount}</div>
                                 <div>{itemInfo.bouns}</div>
                                 <div>{itemInfo.amountRollover}</div>