feat: 对接数据相关

src/api/depositsApi.ts

@@ -1,3 +1,4 @@
+import { BtnTypeEnum } from "@/enums";
 import { server } from "@/utils/client";
 
 export interface DepositsTypes {
@@ -108,11 +109,13 @@ export interface ShopProductItem {
     end_time: number;
     desc: number;
     days: number;
-    is_suss: 0 | 1;
+    is_suss: 0 | 1 | -1;
+    is_buy: boolean;
     pay_reward: ShopPayRewardItem[];
     activity_reward: ShopActivityRewardItem[];
     style: 1 | 2 | 3;
     type: 1 | 2;
+    btnType?: BtnTypeEnum;
 }
 
 export interface ShopInfo {

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

@@ -27,6 +27,7 @@ interface Props {
     currentChannel?: PayChannel;
     setChannel?: (data: PayChannel) => void;
     currentShop?: ShopInfo;
+    onBuy?: () => void;
 }
 
 const getDepositApi = async () => {
@@ -74,11 +75,17 @@ const DepositData: FC<Props> = (props) => {
                     formProduct = item;
                     return;
                 }
+                if (!item.is_buy) {
+                    return;
+                }
                 normalProduct.push(item);
             });
 
             setFormInput(formProduct);
             setBtns(normalProduct);
+        } else {
+            setFormInput(null);
+            setBtns([]);
         }
     }, [shopInfo]);
 
@@ -132,6 +139,10 @@ const DepositData: FC<Props> = (props) => {
             await actions();
         } catch (error: any) {
             Toast.show({ content: t(`code.${error.data.code}`), maskClickable: false });
+        } finally {
+            if (typeof props.onBuy === "function") {
+                props.onBuy();
+            }
         }
     };
 
@@ -148,20 +159,27 @@ const DepositData: FC<Props> = (props) => {
     const amountValidator = (rules: any, value: any) => {
         if (!value) {
             let msg = t("form.amount");
-            Toast.show({ content: msg, maskClickable: false });
+            if (!formInput) {
+                Toast.show({ content: msg, maskClickable: false });
+            }
 
             return Promise.reject(new Error(msg));
         }
         if (currentShop?.condition) {
             if (+value < currentShop.condition.min) {
                 let msg = t("form.amountMinReg", { amount: currentShop.condition.min });
-                Toast.show({ content: msg, maskClickable: false });
+                if (!formInput) {
+                    Toast.show({ content: msg, maskClickable: false });
+                }
 
                 return Promise.reject(new Error(msg));
             }
             if (+value > currentShop.condition.max) {
                 let msg = t("form.amountMaxReg", { amount: currentShop.condition.max });
-                Toast.show({ content: msg, maskClickable: false });
+                if (!formInput) {
+                    Toast.show({ content: msg, maskClickable: false });
+                }
+
                 return Promise.reject(new Error(msg));
             }
         }

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

@@ -24,7 +24,7 @@ const Left: React.FC<Props> = ({ channelData, data, actIdx = 0, onChange }) => {
                     <img
                         src={channelData?.icon}
                         alt={channelData?.name}
-                        className="inline-block w-[80%] object-cover"
+                        className="inline-block h-[.2rem] object-cover"
                     />
                 </div>
             )}

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

@@ -26,15 +26,15 @@ const Reward: React.FC<Props> = ({ data }) => {
         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}${getSuffix(item.reward)}`,
-                    reward: item?.reward,
-                };
-            });
-        }
+        // 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}${getSuffix(item.reward)}`,
+        //             reward: item?.reward,
+        //         };
+        //     });
+        // }
         if (data?.pay_reward?.length > 0) {
             data?.pay_reward?.forEach((item) => {
                 if (item?.item_id <= 0 || item?.item_id > 4) return;
@@ -70,7 +70,7 @@ const Reward: React.FC<Props> = ({ data }) => {
                 return (
                     <div key={key} className={styles.rewardItem}>
                         <i className={clsx(styles[mapKey[key]])}></i>
-                        <div className="relative -top-[5px] text-[#fff]">
+                        <div className="relative text-[#fff]">
                             <div>{mapKey[key]}</div>
                             <div>{renderData[key].amount}</div>
                         </div>

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

@@ -9,7 +9,7 @@ const Deposit = () => {
     const [actIdx, setActIdx] = React.useState(0);
     const [shopTypeList, setShopTypeList] = React.useState<any[]>([]);
     const [currentChannel, setCurrentChannel] = React.useState<any>({});
-    const [shopInfo, setShopInfo] = React.useState<ShopInfo>({} as ShopInfo);
+    const [shopInfo, setShopInfo] = React.useState<ShopInfo | null>(null);
     const [loading, setLoading] = React.useState(false);
 
     const actChange = (idx: number) => {
@@ -39,20 +39,25 @@ const Deposit = () => {
         }
     };
 
-    const getInfo = async (id: number) => {
+    const getInfo = async (id: number, isClear = true) => {
         if (!id) {
-            setShopInfo({} as ShopInfo);
+            setShopInfo(null);
             return;
         }
+        if (isClear) {
+            setShopInfo(null);
+        }
         try {
             setLoading(true);
             const res = await getShopInfoApi({ shop_id: id });
             if (res?.code === 200 && res?.data?.products?.length) {
                 res.data.products.sort((a: any, b: any) => {
-                    return a.pay - b.pay;
-                }); //TODO: sort sho
-                setShopInfo(res.data);
+                    return a.order - b.order;
+                });
+                setShopInfo(res?.data || {});
             }
+        } catch {
+            setShopInfo(null);
         } finally {
             setLoading(false);
         }
@@ -61,11 +66,9 @@ const Deposit = () => {
     const doChangeChannel = (data: any) => {
         setCurrentChannel(data);
     };
-
-    console.log(9991, currentChannel);
     return (
         <div className="flex h-[100%] flex-row items-stretch">
-            <div className="w-[1rem]">
+            <div className="w-[0.9rem]">
                 <Left
                     data={shopTypeList}
                     onChange={actChange}
@@ -75,17 +78,18 @@ const Deposit = () => {
             </div>
 
             <div className="flex-1 overflow-auto">
-                {!loading && (
+                {shopInfo && (
                     <DepositData
                         onActiveChange={doChangeChannel}
                         currentChannel={currentChannel}
                         setChannel={doChangeChannel}
-                        shopInfo={shopInfo}
+                        shopInfo={shopInfo || ({} as ShopInfo)}
                         channel={currentShop?.pay_channel || []}
                         currentShop={currentShop}
+                        onBuy={() => getInfo(currentShop?.id, false)}
                     />
                 )}
-                {loading && (
+                {loading && !shopInfo?.id && (
                     <div className="flex h-[100%] items-center justify-center">
                         <Loading></Loading>
                     </div>

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

@@ -2,43 +2,81 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     flex: 1;
-    grid-column: 5px;
+    grid-column-gap: 5px;
+    min-width: 0;
+    max-width: 1.7rem;
 }
 .rewardItem {
     display: flex;
     align-items: center;
 }
 .Free {
-    background-image: url("/deposite/free.png");
     width: 40px;
-    height: 40px;
+    height: 30px;
     display: block;
-    background-size: 100% 100%;
-    background-position: center center;
+    position: relative;
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 40px;
+        background-image: url("/deposite/free.png");
+        background-size: 100% 100%;
+        background-position: center center;
+    }
 }
 .Bonus {
-    background-image: url("/deposite/bonus.png");
     width: 40px;
-    height: 40px;
+    height: 30px;
     display: block;
-    background-size: 100% 100%;
-    background-position: center center;
+    position: relative;
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 40px;
+        background-image: url("/deposite/bonus.png");
+        background-size: 100% 100%;
+        background-position: center center;
+    }
 }
 
 .Replay {
-    background-image: url("/deposite/repalay.png");
     width: 40px;
-    height: 40px;
+    height: 30px;
     display: block;
-    background-size: 100% 100%;
-    background-position: center center;
+    position: relative;
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 40px;
+        background-image: url("/deposite/repalay.png");
+        background-size: 100% 100%;
+        background-position: center center;
+    }
 }
 
 .Saldo {
-    background-image: url("/deposite/Saldo.png");
     width: 40px;
-    height: 40px;
+    height: 30px;
     display: block;
-    background-size: 100% 100%;
-    background-position: center center;
+    position: relative;
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 40px;
+        background-image: url("/deposite/Saldo.png");
+        background-size: 100% 100%;
+        background-position: center center;
+    }
 }

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

@@ -165,7 +165,12 @@
     align-items: center;
     justify-content: center;
     margin-top: 0.2rem;
-    font-size: 0.2rem;
+    font-size: 0.14rem;
+    text-align: center;
+    word-break: break-word;
+    padding-left: 0.1rem;
+    padding-right: 0.1rem;
+    line-height: 1;
     &.disabled {
         background: url("/card/btn1.png") no-repeat;
         background-size: 100% 100%;
@@ -182,6 +187,11 @@
     margin-top: 0.2rem;
     font-size: 0.2rem;
     padding-bottom: 0.06rem;
+    font-size: 0.14rem;
+    text-align: center;
+    line-height: 1;
+    padding-left: 0.1rem;
+    padding-right: 0.1rem;
 }
 .config {
     border-radius: 0.1rem;

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

@@ -8,6 +8,7 @@ import {
     ShopInfo,
     ShopProductItem,
 } from "@/api/depositsApi";
+import { BtnTypeEnum, BtnTypeMap } from "@/enums";
 import { useRouter } from "@/i18n/routing";
 import { formatAmount } from "@/utils/index";
 import { Toast } from "antd-mobile";
@@ -48,12 +49,32 @@ const CardPage = () => {
         try {
             setLoading(true);
             const res = await getShopInfoApi({ shop_id });
+
             if (res?.code === 200 && res?.data?.products) {
+                let actKey = 0;
                 res.data.products.sort((a: any, b: any) => {
                     return a.pay - b.pay;
-                }); //TODO: sort sho
+                });
+                const result = res.data.products.map((item: ShopProductItem, idx: number) => {
+                    item.btnType = BtnTypeEnum.DISABLED;
+                    //|| item.is_suss === -1
+                    if (item.days <= 0) {
+                        item.btnType = BtnTypeEnum.DEPOSITE;
+                    }
+                    if (!actKey && item.days > 0 && item.is_suss === 0) {
+                        actKey = idx;
+                    }
+                    if (item.days > 0 && item.is_suss === 0) {
+                        item.btnType = BtnTypeEnum.CANCLAIM;
+                    }
 
-                setShopInfo(res.data);
+                    return item;
+                });
+                //自动滚动到第一个买了的商品
+                setTimeout(() => {
+                    swiperRef.current?.slideToLoop(actKey, 0, false);
+                }, 100);
+                setShopInfo({ ...res.data, products: result || [] });
             }
         } finally {
             setLoading(false);
@@ -81,9 +102,9 @@ const CardPage = () => {
         const bounsAmount = boundsInfo?.amount || 0;
         const bounsValue =
             boundsInfo?.reward === 1 ? bounsAmount : (bounsAmount / 100) * itemData.pay_value;
-        const amountAmount = boundsInfo?.amount || 0;
+        const amountAmount = amountInfo?.amount || 0;
         const amountValue =
-            boundsInfo?.reward === 1 ? amountAmount : (amountAmount / 100) * itemData.pay_value;
+            amountInfo?.reward === 1 ? amountAmount : (amountAmount / 100) * itemData.pay_value;
         return {
             amount: amountValue,
             amountRollover: amountInfo?.rollover || 0,
@@ -97,7 +118,11 @@ const CardPage = () => {
             Toast.show({ content: "Missing product ID" });
             return;
         }
-        if (itemData.is_suss !== 0) {
+        if (itemData.btnType === BtnTypeEnum.DEPOSITE) {
+            router.push(`/deposit`);
+            return;
+        }
+        if (itemData.btnType !== BtnTypeEnum.CANCLAIM) {
             return;
         }
         try {
@@ -185,7 +210,7 @@ const CardPage = () => {
                                                     "pr-[.12rem] pt-[.02rem] text-[.1rem]"
                                                 )}
                                             >
-                                                {item.is_suss > -1 && "Já foi comprado"}
+                                                {item.is_buy && "Já foi comprado"}
                                             </div>
                                         </div>
                                         <div className={styles.cardContainerOut}>
@@ -258,76 +283,82 @@ const CardPage = () => {
                                                     </div>
                                                 </div>
                                             </div>
-                                            {item.is_suss > -1 && (
-                                                <div className={styles.lingqu}>
-                                                    <div
-                                                        className={clsx(
-                                                            styles.lingquTop,
-                                                            "text-[.15rem] font-bold text-[#e4292d]"
+                                            <div className={styles.lingqu}>
+                                                <div
+                                                    className={clsx(
+                                                        styles.lingquTop,
+                                                        "text-[.15rem] font-bold text-[#e4292d]"
+                                                    )}
+                                                >
+                                                    Receba por dia
+                                                </div>
+                                                <div className={clsx(styles.lingquContent)}>
+                                                    <div className={clsx(styles.lingquInfo)}>
+                                                        {item.btnType === BtnTypeEnum.DEPOSITE && (
+                                                            <>
+                                                                <div className="text-center text-[.16rem] font-bold text-[#fffc03]">
+                                                                    Você ainda não comprou
+                                                                </div>
+                                                                <div
+                                                                    className={styles.btn2}
+                                                                    onClick={() => doClaim(item)}
+                                                                >
+                                                                    {BtnTypeMap.get(item.btnType)}
+                                                                </div>
+                                                            </>
                                                         )}
-                                                    >
-                                                        Receba por dia
-                                                    </div>
-                                                    <div className={clsx(styles.lingquContent)}>
-                                                        <div className={clsx(styles.lingquInfo)}>
-                                                            {item.id == 2 && (
-                                                                <>
-                                                                    <div className="text-center text-[.16rem] font-bold text-[#fffc03]">
-                                                                        Você ainda não comprou
-                                                                    </div>
-                                                                    <div className={styles.btn2}>
-                                                                        comprar
-                                                                    </div>
-                                                                </>
-                                                            )}
-                                                            {item.id !== 2 && (
-                                                                <>
-                                                                    <div
-                                                                        className={clsx(
-                                                                            "text-[.18rem] font-bold",
-                                                                            styles.receiveText
-                                                                        )}
-                                                                    >
-                                                                        NUMERÁRIO {itemInfo.amount}R
-                                                                    </div>
-                                                                    <div
-                                                                        className={clsx(
-                                                                            "text-[.18rem]",
-                                                                            styles.receiveText
-                                                                        )}
-                                                                    >
-                                                                        +
-                                                                    </div>
-                                                                    <div
-                                                                        className={clsx(
-                                                                            "text-[.18rem] font-bold",
-                                                                            styles.receiveText
-                                                                        )}
-                                                                    >
-                                                                        BÔNUS {itemInfo.bouns}R
-                                                                    </div>
-                                                                    <div
-                                                                        className={clsx(
-                                                                            "mt-[.08rem] text-[.18rem] font-bold",
-                                                                            styles.receiveText2
+                                                        {item.btnType !== BtnTypeEnum.DEPOSITE && (
+                                                            <>
+                                                                <div
+                                                                    className={clsx(
+                                                                        "text-[.18rem] font-bold",
+                                                                        styles.receiveText
+                                                                    )}
+                                                                >
+                                                                    NUMERÁRIO {itemInfo.amount}R
+                                                                </div>
+                                                                <div
+                                                                    className={clsx(
+                                                                        "text-[.18rem]",
+                                                                        styles.receiveText
+                                                                    )}
+                                                                >
+                                                                    +
+                                                                </div>
+                                                                <div
+                                                                    className={clsx(
+                                                                        "text-[.18rem] font-bold",
+                                                                        styles.receiveText
+                                                                    )}
+                                                                >
+                                                                    BÔNUS {itemInfo.bouns}R
+                                                                </div>
+                                                                <div
+                                                                    className={clsx(
+                                                                        "mt-[.08rem] text-[.18rem] font-bold",
+                                                                        styles.receiveText2
+                                                                    )}
+                                                                >
+                                                                    {item.days} DIAS RESTANTES
+                                                                </div>
+                                                                <div
+                                                                    className={clsx(styles.btn, {
+                                                                        [styles.disabled]:
+                                                                            item.btnType ===
+                                                                            BtnTypeEnum.DISABLED,
+                                                                    })}
+                                                                    onClick={() => doClaim(item)}
+                                                                >
+                                                                    {item.btnType != undefined &&
+                                                                        BtnTypeMap.get(
+                                                                            item.btnType
                                                                         )}
-                                                                    >
-                                                                        {item.days} DIAS RESTANTES
-                                                                    </div>
-                                                                    <div
-                                                                        className={styles.btn}
-                                                                        onClick={() =>
-                                                                            doClaim(item)
-                                                                        }
-                                                                    >
-                                                                        Resgatar
-                                                                    </div>
-                                                                </>
-                                                            )}
-                                                        </div>
+                                                                </div>
+                                                            </>
+                                                        )}
                                                     </div>
                                                 </div>
-                                            )}
+                                            </div>
                                         </div>
                                     </div>
                                 </SwiperSlide>

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

@@ -31,7 +31,7 @@ const Record = () => {
             res.data.forEach((item: any) => {
                 // result.push({...item,claim_time:item.claim_time/1000})
                 let itemResult: any = {
-                    claim_time: item.claim_time / 1000,
+                    claim_time: item.claim_time * 1000,
                 };
                 if (item.list.length > 0) {
                     item.list.forEach((citem: any) => {
@@ -54,24 +54,25 @@ const Record = () => {
                 <div>Receber bônus</div>
                 <div>Proporção de codificação de bônus</div>
             </div>
-            <div className="flex-1">
+            <div className="flex-1 overflow-auto">
                 {!!dataSource?.length &&
-                    dataSource.map((item) => {
+                    dataSource.map((item, idx) => {
                         return (
                             <div
                                 key={item.claim_time}
-                                className={clsx(styles.item, styles.recordItem)}
+                                className={clsx(styles.item, styles.recordItem, {
+                                    [styles.even]: idx % 2 === 0,
+                                })}
                             >
-                                <div>
-                                    {dayjs(item.claim_time * 1000).format("YYYY/MM/DD HH:mm:ss")}
-                                </div>
-                                <div>{item.amount_1}</div>
-                                <div>{item.rollover_1}</div>
-                                <div>{item.amount_2}</div>
-                                <div>{item.rollover_2}</div>
+                                <div>{dayjs(item.claim_time).format("YYYY/MM/DD HH:mm:ss")}</div>
+                                <div>{item.amount_1 || 0}</div>
+                                <div>{item.rollover_1 || 0}</div>
+                                <div>{item.amount_2 || 0}</div>
+                                <div>{item.rollover_2 || 0}</div>
                             </div>
                         );
                     })}
+
                 <InfiniteScroll loadMore={loadMore} hasMore={false}></InfiniteScroll>
             </div>
         </div>

src/styles/deposit.scss

@@ -2,7 +2,7 @@
     width: 100%;
     //height: 100%;
     overflow-y: auto;
-    padding: 0.1rem 0.18rem;
+    padding: 0.1rem 0.1rem;
     //background-color: #1f1f1f;
     //display: flex;
     //flex-direction: column;
@@ -105,7 +105,7 @@
             justify-content: flex-end;
             position: relative;
             cursor: pointer;
-            padding: 15px 5px 5px 5px;
+            padding: 15px 5px 15px 5px;
             flex-wrap: wrap;
             &.active {
                 background-color: #d917ff;
@@ -137,6 +137,7 @@
                 align-items: center;
                 justify-content: flex-end;
                 margin-right: 4px;
+
                 .iconfont {
                     margin-right: 0.03rem;
                     font-size: 0.14rem;