fix: 解决客服排列问题以及惠充页面bug修改

src/api/depositsApi.ts

@@ -33,6 +33,10 @@ export interface DepositsTypes {
      * 提示信息
      */
     tips: string;
+    /**
+     *  是否进行过充值，配合product中存在充值优惠，标识是首充还是惠充优惠
+     */
+    has_pay: boolean;
 }
 export interface Product {
     /**
@@ -49,4 +53,5 @@ export interface RewardsType {
     coin_type: 1 | 2 | 3 | 4;
     reward: number;
     ratio: number;
+    text?: string;
 }

src/api/user.ts

@@ -181,7 +181,7 @@ export interface Wallet {
     /**
      * 积分
      */
-    score: number;
+    score: number | undefined;
     /**
      * 目标免费钱包打码量
      */

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -9,6 +9,7 @@ import { useSocialStore } from "@/stores/useSocials";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
+import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { FC, useEffect, useRef } from "react";
 
@@ -86,6 +87,20 @@ const ServiceWidget: FC<Props> = (props) => {
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
     });
+
+    const grids = {
+        "0": "grid-color-0",
+        "1": "grid-color-1",
+        "2": "grid-color-2",
+        "3": "grid-color-3",
+        "4": "grid-color-4",
+        "5": "grid-color-5",
+        "6": "grid-color-6",
+        "7": "grid-color-7",
+        "8": "grid-color-8",
+        "9": "grid-color-9",
+    };
+    const gridClass = clsx();
     return (
         <>
             <div
@@ -169,7 +184,12 @@ const ServiceWidget: FC<Props> = (props) => {
 
             <UserRecharge ref={userRechargeRef} />
 
-            <div className={`grid grid-cols-${newServices.length >= 5 ? 5 : newServices.length}`}>
+            <div
+                className={`grid`}
+                style={{
+                    gridTemplateColumns: ` repeat(${newServices.length >= 5 ? 5 : newServices.length},1fr)`,
+                }}
+            >
                 {newServices.map((service, index) => {
                     return (
                         <Link
@@ -192,7 +212,12 @@ const ServiceWidget: FC<Props> = (props) => {
             {/*share*/}
             <div className={"my-[0.2rem] text-[0.08rem] text-[#adadad]"}>{t("Share")}</div>
 
-            <div className={`grid grid-cols-${socials.length >= 5 ? 5 : socials.length}`}>
+            <div
+                className={`grid`}
+                style={{
+                    gridTemplateColumns: ` repeat(${socials.length >= 5 ? 5 : socials.length},1fr)`,
+                }}
+            >
                 {socials.map((service, index) => {
                     return (
                         <Link

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

@@ -1,5 +1,5 @@
 "use client";
-import { DepositsTypes } from "@/api/depositsApi";
+import { DepositsTypes, RewardsType } from "@/api/depositsApi";
 import { getUserRechargeApi } from "@/api/user";
 import Box from "@/components/Box";
 import ButtonOwn from "@/components/ButtonOwn";
@@ -15,6 +15,40 @@ import "@/styles/deposit.scss";
 interface Props {
     deposits: DepositsTypes[];
 }
+
+interface RewardsProps {
+    rewards: RewardsType[];
+}
+const RewardsText: FC<RewardsProps> = (props) => {
+    const { rewards } = props;
+    // {/*1现金2彩金3免费币4重玩币*/}
+    const t = useTranslations();
+    const calcRewards = rewards
+        .map((item) => {
+            // 设置基础奖励文本
+            let text = item.ratio > 0 ? `${item.reward}%` : `${item.reward}`;
+            // 根据coin_type添加后缀
+            const suffixes = {
+                1: t("ProfilePage.Saldo"),
+                2: t("ProfilePage.Saldo"),
+                3: t("ProfilePage.free"),
+                4: t("ProfilePage.replay"),
+            };
+            // 如果coin_type在suffixes中存在，则添加相应的后缀
+            if (suffixes.hasOwnProperty(item.coin_type)) {
+                text += suffixes[item.coin_type];
+            }
+
+            return text;
+        })
+        .join(",");
+
+    return (
+        <div className={"flex flex-1 flex-wrap break-all"}>
+            <span className="amountTips">+ {calcRewards} </span>
+        </div>
+    );
+};
 const DepositData: FC<Props> = (props) => {
     const { deposits } = props;
     const t = useTranslations();
@@ -155,28 +189,10 @@ const DepositData: FC<Props> = (props) => {
                                             <span className="iconfont">R$</span>
                                             <span> {item.amount}</span>
                                         </div>
-                                        <div>
-                                            {item.rewards &&
-                                                item.rewards
-                                                    .sort((p, n) => p.coin_type - n.coin_type)
-                                                    .map((reward, index) => {
-                                                        return (
-                                                            <Fragment key={index}>
-                                                                {reward.ratio > 0 ? (
-                                                                    <span className="amountTips">
-                                                                        {t("DepositPage.Oferecer")}{" "}
-                                                                        {reward.ratio}%
-                                                                    </span>
-                                                                ) : null}
-                                                                {reward.reward > 0 ? (
-                                                                    <span className="amountTips">
-                                                                        + {reward.reward}
-                                                                    </span>
-                                                                ) : null}
-                                                            </Fragment>
-                                                        );
-                                                    })}
-                                        </div>
+
+                                        {!activeType.has_pay && (
+                                            <RewardsText rewards={item.rewards} />
+                                        )}
                                     </li>
                                 ))}
                             </ul>

src/app/[locale]/(navbar)/doings/discount/DepositData.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { DepositsTypes } from "@/api/depositsApi";
+import { DepositsTypes, RewardsType } from "@/api/depositsApi";
 import { getUserRechargeApi } from "@/api/user";
 import Box from "@/components/Box";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
@@ -15,12 +15,47 @@ import Image from "next/image";
 interface Props {
     deposits: DepositsTypes[];
 }
+
+interface RewardsProps {
+    rewards: RewardsType[];
+}
+const RewardsText: FC<RewardsProps> = (props) => {
+    const { rewards } = props;
+    // {/*1现金2彩金3免费币4重玩币*/}
+    const t = useTranslations();
+    const calcRewards = rewards
+        .map((item) => {
+            // 设置基础奖励文本
+            let text = item.ratio > 0 ? `${item.reward}%` : `${item.reward}`;
+            // 根据coin_type添加后缀
+            const suffixes = {
+                1: t("ProfilePage.Saldo"),
+                2: t("ProfilePage.Saldo"),
+                3: t("ProfilePage.free"),
+                4: t("ProfilePage.replay"),
+            };
+            // 如果coin_type在suffixes中存在，则添加相应的后缀
+            if (suffixes.hasOwnProperty(item.coin_type)) {
+                text += suffixes[item.coin_type];
+            }
+
+            return text;
+        })
+        .join(",");
+
+    return (
+        <div className={"flex flex-1 flex-wrap break-all"}>
+            <span className="amountTips">+</span>
+            <span className="amountTips">{calcRewards} </span>
+        </div>
+    );
+};
 const DepositData: FC<Props> = (props) => {
     const { deposits } = props;
     const t = useTranslations();
     const userInfo = useUserInfoStore((state) => state.userInfo);
 
-    const count = 2;
+    const count = 3;
     // 选中类型
     const [activeType, setActiveType] = useState<DepositsTypes>(deposits[0]);
 
@@ -175,9 +210,13 @@ const DepositData: FC<Props> = (props) => {
                                                 <span className="iconfont">R$</span>
                                                 <span> {item.amount}</span>
                                             </div>
-                                            <span className="amountTips">
-                                                {t("DepositPage.Oferecer")} 100%
-                                            </span>
+                                            <div className={"flex"}>
+                                                <RewardsText rewards={item.rewards} />
+                                            </div>
+
+                                            {/*<span className="amountTips">*/}
+                                            {/*    {t("DepositPage.Oferecer")} 100%*/}
+                                            {/*</span>*/}
                                         </li>
                                     ))}
                                 </ul>

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

@@ -14,6 +14,7 @@ const getDepositApi = async () => {
             return [];
         });
 };
+
 const Deposit = async () => {
     const deposits = await getDepositApi();
     if (!deposits.length) return <Empty />;

src/components/Header/HeaderRight.tsx

@@ -1,6 +1,5 @@
 import { getUserMoneyApi } from "@/api/user";
 import { Link } from "@/i18n";
-import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
@@ -9,7 +8,7 @@ import styles from "./style.module.scss";
 
 const HeaderRight = () => {
     const t = useTranslations("Header");
-    const { userInfo } = useUserInfoStore();
+
     const token = getToken();
     const score = useWalletStore((state) => state.score);
     const setScore = useWalletStore((state) => state.setScore);
@@ -36,7 +35,7 @@ const HeaderRight = () => {
     return (
         <div className={styles.headerRight}>
             <div className={styles.right}>
-                {userInfo ? (
+                {token ? (
                     <>
                         <Link href={"/profile"}>
                             <div className={"flex items-center text-[0.12rem]"}>

src/components/Layout/Sidebar.tsx

@@ -122,7 +122,12 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
 
             <section className={"mt-[0.11rem] text-[#fff]"}>
                 {/* todo components ?*/}
-                <div className={`grid grid-cols-${socials.length >= 5 ? 5 : socials.length}`}>
+                <div
+                    className={`grid`}
+                    style={{
+                        gridTemplateColumns: ` repeat(${socials.length >= 5 ? 5 : socials.length},1fr)`,
+                    }}
+                >
                     {socials.map((service, index) => {
                         return (
                             <Link

src/stores/useWalletStore.ts

@@ -13,7 +13,7 @@ interface Action {
 }
 const initialState: State = {
     wallet: {},
-    score: 0,
+    score: undefined,
 };
 export const useWalletStore = create<State & Action>()((set) => {
     return {

src/styles/deposit.scss

@@ -65,16 +65,18 @@
     height: auto;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
-    justify-content: space-between;
     flex-wrap: wrap;
-    //margin-top: .09rem;
-    display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: center;
+    gap: 20px;
+
     li {
-      width: 30%;
-      height: .48rem;
+      height: 100%;
+      width: 100%;
       border-radius: .06rem;
       color: #fff;
       font-size: .18rem;
@@ -90,10 +92,11 @@
       -webkit-box-pack: center;
       -ms-flex-pack: center;
       justify-content: center;
-      margin-top: .12rem;
       position: relative;
       overflow: hidden;
       cursor: pointer;
+      padding: 5px;
+      flex-wrap: wrap;
       &.active {
         background-color: #ff6a01;
         .hot {