feat: xiugai

src/api/depositsApi.ts

@@ -107,6 +107,7 @@ export interface ShopProductItem {
     is_suss: 0 | 1;
     pay_reward: ShopPayRewardItem[];
     activity_reward: ShopActivityRewardItem[];
+    style: 1 | 2 | 3;
 }
 
 export interface ShopInfo {

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

@@ -2,6 +2,8 @@
     height: 100%;
 }
 .CardPage {
+    min-height: 100%;
+    background-color: #42118e;
     :global(.swiper-pagination) {
         bottom: -5px;
     }

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

@@ -8,6 +8,7 @@ import {
     ShopInfo,
     ShopProductItem,
 } from "@/api/depositsApi";
+import { useRouter } from "@/i18n/routing";
 import { formatAmount } from "@/utils/index";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
@@ -20,6 +21,7 @@ import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./page.module.scss";
 
 const CardPage = () => {
+    const router = useRouter();
     const searchParams = useSearchParams();
     const swiperRef = React.useRef<SwiperClass | null>(null);
     const [act, setAct] = React.useState(0);
@@ -44,7 +46,7 @@ const CardPage = () => {
         try {
             setLoading(true);
             const res = await getShopInfoApi({ shop_id });
-            if (res?.code === 200 && res?.data) {
+            if (res?.code === 200 && res?.data?.products) {
                 res.data.products.sort((a: any, b: any) => {
                     return a.pay - b.pay;
                 }); //TODO: sort sho
@@ -134,7 +136,7 @@ const CardPage = () => {
 
     return (
         <div className={styles.CardPage}>
-            <div className={styles.top}>
+            <div className={styles.top} style={{ minHeight: "300px" }}>
                 <Swiper
                     spaceBetween={10}
                     slidesPerView={1.25}
@@ -159,8 +161,8 @@ const CardPage = () => {
                                 <SwiperSlide
                                     key={item.id}
                                     className={clsx(styles.swiperSlide, {
-                                        [styles.swiperSlideBlue]: item.id === 1,
-                                        [styles.swiperSlideGold]: item.id === 2,
+                                        [styles.swiperSlideBlue]: item.style === 1,
+                                        [styles.swiperSlideGold]: item.style === 3,
                                     })}
                                 >
                                     <div className={styles.swiperItem}>
@@ -324,7 +326,10 @@ const CardPage = () => {
                 </div>
             </div>
             <div className={styles.main}>
-                <div className="my-[.15rem] cursor-pointer text-right text-[#00deff]">
+                <div
+                    className="my-[.15rem] cursor-pointer text-right text-[#00deff]"
+                    onClick={() => router.push("/cardRecord")}
+                >
                     Receba sens registros&gt;
                 </div>
                 <div className={styles.config}>

src/app/[locale]/(doings)/cardRecord/layout.tsx

@@ -0,0 +1,24 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <div className={styles.page}>
+            <HeaderBack
+                showBack={true}
+                title={"Registro mensal de coleta de cartões"}
+                useBg={false}
+            />
+            <main className={"main-header"}>{children}</main>
+        </div>
+    );
+}

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

@@ -0,0 +1,51 @@
+.page {
+    height: 100%;
+}
+.pageContainer {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    background-color: #43108e;
+}
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    background-color: #48128d;
+    &.header {
+        color: #fff;
+    }
+    div {
+        font-size: 0.1rem;
+        flex: 1 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.05rem 0.04rem;
+        text-align: center;
+        &:nth-child(1) {
+            flex: 0 0 0.6rem;
+        }
+        &:nth-child(2) {
+            flex: 0 0 0.6rem;
+        }
+        &:nth-child(4) {
+            flex: 0 0 0.6rem;
+        }
+    }
+    &.recordItem {
+        div {
+            &:nth-child(2) {
+                color: #00deff;
+            }
+            &:nth-child(4) {
+                color: #ffe21d;
+            }
+        }
+    }
+    &.even {
+        background-color: #390e79;
+    }
+}

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

@@ -0,0 +1,37 @@
+"use client";
+import { InfiniteScroll } from "antd-mobile"; // Import the CSS module for styling
+import clsx from "clsx";
+import React from "react";
+import styles from "./page.module.scss";
+
+const Record = () => {
+    const params = React.useRef({ current_page: 0, page_size: 20, use_page: true });
+
+    const loadMore = async () => {
+        params.current.current_page += 1;
+    };
+
+    return (
+        <div className={styles.pageContainer}>
+            <div className={clsx(styles.item, styles.header)}>
+                <div>Hora da coleta</div>
+                <div>Receber principal</div>
+                <div>Razão de codificação principal</div>
+                <div>Receber bônus</div>
+                <div>Proporção de codificação de bônus</div>
+            </div>
+            <div className="flex-1">
+                <div className={clsx(styles.item, styles.recordItem)}>
+                    <div>2025/04/23 14:46:23</div>
+                    <div>Receber principal</div>
+                    <div>Razão de codificação principal</div>
+                    <div>Receber bônus</div>
+                    <div>Proporção de codificação de bônus</div>
+                </div>
+                <InfiniteScroll loadMore={loadMore} hasMore={false}></InfiniteScroll>
+            </div>
+        </div>
+    );
+};
+
+export default Record;