feat: 增加佣金弹窗

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeTabs.tsx

@@ -124,7 +124,7 @@ interface Props {
     };
 }
 const Tabs: FC<Props> = (props) => {
-    const { tabs, config } = props;
+    const { tabs, config = { show_free_game: 2, show_again_game: 2 } } = props;
 
     const newButtonGroup = buttonGroup.filter((item: any) => {
         if (item.url === "/freeGames" && config.show_free_game !== 1) {

src/app/[locale]/(navbar)/withdraw/WithdrawWidget.tsx

@@ -10,8 +10,7 @@ import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { isEmail } from "@/utils";
 import { flatPoint, percentage } from "@/utils/methods";
-import { ActionSheet, Form, Input, ProgressBar, Toast } from "antd-mobile";
-import type { Action } from "antd-mobile/es/components/action-sheet";
+import { ActionSheet, Button, Form, Input, ProgressBar, Toast } from "antd-mobile";
 import { FormInstance } from "antd-mobile/es/components/form";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
@@ -117,6 +116,9 @@ const WithdrawWidget: FC<Props> = (props) => {
     // 表单
     const formRef = useRef<FormInstance>(null);
 
+    // 是否能提现
+    const [isPay, setIsPay] = useState(false);
+
     const [activeWallet, setActiveWallet] = useState<WithDrawType>(channels[0]);
     const walletAction =
         activeWallet &&
@@ -126,11 +128,6 @@ const WithdrawWidget: FC<Props> = (props) => {
             ...item,
         }));
 
-    const defaultActions: Array<Action & { id: number }> = [
-        { text: "CPF", key: "CPF", id: ChannelEnum.CPF },
-        { text: t("WithdrawPage.Número"), key: "Celular", id: ChannelEnum.Phone },
-        { text: "EMAIL", key: "EMAIL", id: ChannelEnum.Email },
-    ];
     const userInfo = useUserInfoStore((state) => state.userInfo);
     const initParams = {
         channel: "",
@@ -138,6 +135,7 @@ const WithdrawWidget: FC<Props> = (props) => {
         passport: userInfo.passport,
         user_name: userInfo.user_name,
     };
+    const paramsTarget = useRef<any>(null);
 
     const AmountValidator = (rules: any, value: string) => {
         const num = +value;
@@ -180,15 +178,22 @@ const WithdrawWidget: FC<Props> = (props) => {
 
     const onFinish = async (value: any) => {
         const params = { ...value, ...value.channel, amount: +value.amount };
-        getWithDrawApi(params)
-            .then((res) => {
-                if (res.code === 200) {
-                    Toast.show(t("code.200"));
-                }
-            })
-            .catch((error) => {
-                Toast.show(t(`code.${error.data.code}`));
-            });
+        paramsTarget.current = params;
+        if (
+            flatPoint(wallet.target_point_rollover - wallet.current_point_rollover) !== 0 &&
+            !isPay
+        ) {
+            withdrawRef.current?.onOpen();
+            setIsPay(true);
+            return;
+        }
+        console.log(`🚀🚀🚀🚀🚀-> in WithdrawWidget.tsx on 185`, value);
+        const withResult = await getWithDrawApi(params).catch((error) => {
+            Toast.show(t(`code.${error.data.code}`));
+        });
+        if (withResult && withResult.code === 200) {
+            Toast.show(t("code.200"));
+        }
         await clearWallet();
     };
 
@@ -408,14 +413,24 @@ const WithdrawWidget: FC<Props> = (props) => {
             {/*彩金*/}
             <TipsModal
                 title={
-                    <div className={"flex items-center"}>
-                        <i
-                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
-                        ></i>
-                        {t("WithdrawPage.pointTitle")}
-                    </div>
+                    isPay ? (
+                        <div className={"text-left text-[0.12rem] font-medium text-[#666]"}>
+                            Retirar bem sucedido, seu dinheiro de prémio será limpo. Você tem
+                            certeza?
+                        </div>
+                    ) : (
+                        <div className={"flex items-center"}>
+                            <i
+                                className={
+                                    "iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"
+                                }
+                            ></i>
+                            {t("WithdrawPage.pointTitle")}
+                        </div>
+                    )
                 }
                 ref={withdrawRef}
+                onBeforeClose={() => setIsPay(false)}
             >
                 <ul>
                     <li className={"mb-[0.0694rem]"}>
@@ -452,6 +467,35 @@ const WithdrawWidget: FC<Props> = (props) => {
                                 )}
                             </span>
                         </div>
+
+                        {isPay ? (
+                            <div className={"mt-[20px] flex justify-around"}>
+                                <Button
+                                    color={"default"}
+                                    fill={"none"}
+                                    style={{
+                                        "--text-color": "var(--primary-color)",
+                                    }}
+                                    onClick={() => {
+                                        setIsPay(false);
+                                        withdrawRef.current?.onClose();
+                                    }}
+                                >
+                                    cancelar
+                                </Button>
+                                <Button
+                                    color={"primary"}
+                                    className={"ml-[30px]"}
+                                    style={{
+                                        "--background-color": "var(--primary-color)",
+                                        "--border-color": "var(--primary-color)",
+                                    }}
+                                    onClick={() => onFinish(paramsTarget.current)}
+                                >
+                                    confirmação
+                                </Button>
+                            </div>
+                        ) : null}
                     </li>
                 </ul>
             </TipsModal>

src/app/[locale]/(wheel)/cashWheel/page.tsx

@@ -24,8 +24,10 @@ const getWheelApi = async () => {
             method: "POST",
         })
         .then(async (res) => {
-            console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 27`, res);
-            if (Array.isArray(res.data) || res.data.activate.end_time === 0) {
+            if (Array.isArray(res.data.not_receive) && res.data.not_receive.length > 0) {
+                return;
+            }
+            if (!Array.isArray(res.data) && res.data.activate.end_time === 0) {
                 redirect({ href: "/", locale: "br" });
             }
         });

src/app/[locale]/affiliate/component/TabsCom/index.tsx

@@ -54,6 +54,320 @@ const LevelCard: FC<LevelProps> = (props) => {
         </div>
     );
 };
+export const CommissionModel: FC<{ visible: boolean; setVisible: (value: boolean) => void }> = (
+    props
+) => {
+    const { visible, setVisible } = props;
+    return (
+        <Popup
+            visible={visible}
+            getContainer={null}
+            onMaskClick={() => {
+                setVisible(false);
+            }}
+            position="right"
+            bodyStyle={{ width: "100%" }}
+        >
+            <div className={"h-[100%] w-[100%] overflow-scroll bg-[#0e1b22]"}>
+                <div
+                    className={
+                        "absolute top-0 flex items-center justify-between " +
+                        " h-[0.4167rem] w-[100%] border-[1px] bg-[#17181c] px-[0.1389rem]" +
+                        " z-10 border-[#666]"
+                    }
+                >
+                    <p>Regras de cálculo de comissão</p>
+                    <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
+                </div>
+                {/*body*/}
+                <div className={"mt-[0.4167rem] px-[0.1389rem] pt-[0.1389rem]"}>
+                    <div className={"rounded-[5px] border-[1px] border-[#22343e] p-[0.0694rem]"}>
+                        <div className={"flex items-center"}>
+                            <div className={"relative ml-[0.0694rem]"}>
+                                <Image
+                                    src={"/avatar/1.png"}
+                                    alt={""}
+                                    className={"rounded-[0.1389rem] border-[2px] border-[#e5811d]"}
+                                    width={168}
+                                    height={168}
+                                />
+                                <div
+                                    className={
+                                        "absolute bottom-[0.0347rem] right-[0.0556rem]" +
+                                        " w-[0.2778rem]" +
+                                        " flex h-[0.2778rem] rounded-[50%] bg-[#e5811d]" +
+                                        " items-center justify-center"
+                                    }
+                                >
+                                    A
+                                </div>
+                            </div>
+                            <div className={"ml-[0.2083rem] text-[#465f80]"}>
+                                <p> O C3 é poderoso e também possui </p>
+                                <span className={"text-[#e5811d]"}>110</span>
+                                <span>/million</span>
+                            </div>
+                        </div>
+
+                        <div className={"mt-[0.1389rem]"}>
+                            Desempenho total 3,31M, Bônus total do agente{" "}
+                            <span className={"text-[#e5811d]"}>2500</span>
+                        </div>
+                        <div>
+                            Desempenho de subordinado 180K, Contribuiu
+                            <span className={"text-[#e5811d]"}> 1980</span>
+                        </div>
+                        <div className={"text-center"}>
+                            Outro desempenho 3,13M, Contribuir
+                            <span className={"text-[#e5811d]"}> 520</span>
+                        </div>
+                    </div>
+
+                    <div className={"mt-[0.1042rem] grid grid-cols-3"}>
+                        <Image
+                            src={"/avatar/right.png"}
+                            alt={""}
+                            width={80}
+                            className={"justify-self-end"}
+                            height={200}
+                        />
+                        <Image
+                            src={"/avatar/up.png"}
+                            className={"justify-self-center"}
+                            alt={""}
+                            width={23}
+                            height={100}
+                        />
+                        <Image src={"/avatar/left.png"} alt={""} width={80} height={200} />
+                    </div>
+                    <div className={"grid grid-cols-3 text-[0.0972rem]"}>
+                        <div className={"text-center"}>
+                            <p>Contribuição de B1:</p>
+                            <p className={"text-center text-[#e5811d]"}>1320</p>
+                            <p>
+                                Outras contribuições de C1 e C2:{" "}
+                                <span className={"text-[#e5811d]"}>520</span>{" "}
+                            </p>
+                        </div>
+
+                        <div className={"text-center"}>
+                            <p> Contribuir para A: </p>
+                            <p className={"text-[#e5811d]"}>440</p>
+                        </div>
+                        <div className={"text-center"}>
+                            <p> Contribuição de B3: </p>
+                            <p className={"text-[#e5811d]"}>220</p>
+                            <p>
+                                Outras contribuições de C3:
+                                <span className={"text-[#e5811d]"}> 0</span>
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
+                        <LevelCard
+                            url={"/avatar/2.png"}
+                            level={"B1"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    Subagente ganha, geralmente
+                                    <p>
+                                        <span className={"text-[#e5811d]"}>70</span> /10K
+                                    </p>
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 120K</p>}
+                        />
+                        <LevelCard
+                            url={"/avatar/3.png"}
+                            level={"B2"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    B2 não tem subordinados, por isso não tem lucros
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 120K</p>}
+                        />
+                        <LevelCard
+                            url={"/avatar/4.png"}
+                            level={"B3"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    Muito bem subagente, ganhou
+                                    <p>
+                                        <span className={"text-[#e5811d]"}>110</span> /10K
+                                    </p>
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 20K</p>}
+                        />
+                    </div>
+
+                    <div className={"mt-[0.0347rem] grid grid-cols-3"}>
+                        <Image
+                            src={"/avatar/up.png"}
+                            alt={""}
+                            width={25}
+                            className={"justify-self-center"}
+                            height={100}
+                        />
+                        <div className={"relative"}>
+                            <Image
+                                src={"/avatar/left.png"}
+                                alt={""}
+                                width={80}
+                                className={
+                                    "absolute -left-[0.2778rem] top-0 h-[100%]" +
+                                    "w-[0.4722rem] transition"
+                                }
+                                height={100}
+                            />
+                        </div>
+
+                        <Image
+                            src={"/avatar/up.png"}
+                            alt={""}
+                            width={25}
+                            className={"justify-self-center"}
+                            height={100}
+                        />
+                    </div>
+                    <div className={"grid grid-cols-3 text-[0.0972rem]"}>
+                        <div className={"text-center"}>
+                            <p>Contribuir para A:</p>
+                            <p className={"text-center text-[#e5811d]"}>400</p>
+                            <p>Contribuir para B1: </p>
+                            <p className={"text-[#e5811d]"}>700</p>
+                        </div>
+
+                        <div className={"text-center"}>
+                            <p> Contribuir para A: </p>
+                            <p className={"text-[#e5811d]"}>120</p>
+                            <p>Contribuir para B1:</p>
+                            <p className={"text-[#e5811d]"}>210</p>
+                        </div>
+                        <div className={"text-center"}>
+                            <p> Contribuir para A: </p>
+                            <p className={"text-[#e5811d]"}>220</p>
+                            <p>Contribuir para B3:</p>
+                            <p className={"text-[#e5811d]"}> 0</p>
+                        </div>
+                    </div>
+                    <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
+                        <LevelCard
+                            url={"/avatar/5.png"}
+                            level={"B1"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    C1 não tem subordinados, por isso não tem lucros
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 100K</p>}
+                        />
+                        <LevelCard
+                            url={"/avatar/6.png"}
+                            level={"B2"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    <div data-v-a24e5faa="" className="desc-txt">
+                                        {" "}
+                                        C2 não tem subordinados, por isso não tem lucros
+                                    </div>
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 30K</p>}
+                        />
+                        <LevelCard
+                            url={"/avatar/7.png"}
+                            level={"B3"}
+                            body={
+                                <div className={"text-[#495b73]"}>
+                                    C3 não tem subordinados, por isso não tem lucros
+                                </div>
+                            }
+                            footer={<p>Apostas válidas 3000K</p>}
+                        />
+                    </div>
+                    <div className={"mt-[5px]"}>
+                        <p>Por exemplo:</p>
+                        <p>
+                            Neste website o bónus do agente é calculado por apostas. Por exemplo, se
+                            as apostas forem 10-200000, a taxa de bónus correspondente será
+                            70/10000, e se as apostas forem superiores a 3000000, o bónus de agente
+                            é 110/10000. A é o agente do website, ele recruta B1, B2 e B3 como seus
+                            agentes e B1 também recruta C1 e C2 como seus agentes. B2 não tem
+                            agentes e B3 tem apenas um agente C3. Alguns dias depois, a aposta
+                            efetiva do próprio B1 é de 120.000, a aposta efetiva de B2 é de 40.000,
+                            as apostas efetivas de B3 são 20.000, as apostas efetivas do C1 são
+                            100.000, as apostas efetivas do C2 são 30.000, C3 Eu tenho 3 milhões de
+                            apostas eficazes, Em seguida, o desempenho total de B1 vem de 130.000 de
+                            C1 e C2, e a taxa de retorno da comissão correspondente é 70/10.000; B2
+                            não tem desempenho subordinado 0; a taxa de retorno da comissão é
+                            110/10.000; a tem 180.000 do Equipe direta e 3,13 milhões de outras
+                            equipes, com um desempenho total de 3,31 milhões, e a taxa de retorno
+                            correspondente é 110/10.000.{" "}
+                        </p>
+                        <p>Por conseguinte, o bónus é calculado da seguinte forma:</p>
+                        <p>
+                            1. Equipa direta: refere-se aos membros do desenvolvimento vertical, que
+                            são coletivamente chamados de equipa direta.{" "}
+                        </p>
+                        <p>
+                            (1) B1, B2, B3 contribuem para A: (120000+40000+20000)x110/10000=1980.{" "}
+                        </p>
+                        <p> (2) C1 e C2 contribuem para B1:(100000+30000)x70/10000=910. </p>
+                        <p>(3) C3 contribui para B3: 3 milhões x 110/10000=33000.</p>
+                        <p>
+                            2. Outras equipas: refere-se aos membros do desenvolvimento de
+                            subordinados, subordinados, etc., que são coletivamente chamados de
+                            outras equipas; porque este sistema pode desenvolver subordinados
+                            indefinidamente, para melhor compreensão, este artigo apenas toma como
+                            exemplo uma estrutura de 2 níveis.{" "}
+                        </p>
+                        <p>
+                            (1) De C1 e C2: Visto que o desempenho total de B1 é de 130000, tem
+                            apenas uma taxa de desconto de 70/10000, enquanto que o desempenho total
+                            de A é de 3,31 milhões, e tem uma taxa de desconto de 110/10000. Então a
+                            diferença de desconto entre A e B1 é de: 110-70=40/100000, esta
+                            diferença é a parte contribuída por C1 e C2 para A, portanto C1 e C2
+                            contribuem para A: (100000+30000)×40/10000=520.{" "}
+                        </p>
+                        <p>
+                            2. Outras equipas: refere-se aos membros do desenvolvimento de
+                            subordinados, subordinados, etc., que são coletivamente chamados de
+                            outras equipas; porque este sistema pode desenvolver subordinados
+                            indefinidamente, para melhor compreensão, este artigo apenas toma como
+                            exemplo uma estrutura de 2 níveis.{" "}
+                        </p>
+                        <p>3. Resumo:</p>
+                        <p>
+                            (1) C3 é poderoso, indiretamente permite que todo o desempenho de A
+                            desfrute de uma proporção maior de retornos da comissão.{" "}
+                        </p>
+                        <p>
+                            (2) B2 pode ser preguiçoso, e não tem vantagem se não houver
+                            desenvolvimento de subordinados.{" "}
+                        </p>
+                        <p>
+                            (3) Apesar de B3 se ter juntado relativamente tarde e pertencer aos
+                            subordinados de A, o seu subordinado C3 é poderoso, permitindo que B3
+                            desfrute diretamente da mais alta taxa de desconto, e A não pode ganhar
+                            diretamente a diferença de B3. Por isso, de quem é a posição de B3
+                            quando este se junta? Os benefícios dos subordinados, independentemente
+                            do nível em que se encontrem, nunca serão afetados, deixarão de sofrer
+                            as perdas de outros subordinados, e o seu desenvolvimento não será
+                            restringido.
+                        </p>
+                        <p>
+                            (4) Este é um modelo de agência absolutamente justo, e não prejudicará
+                            sempre quem se juntar mais tarde.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </Popup>
+    );
+};
 const App: FC<Props> = (props) => {
     const pathname = usePathname();
     const t = useTranslations("TabsCom");
@@ -85,11 +399,11 @@ const App: FC<Props> = (props) => {
         >
             <Tabs
                 onChange={tabsChange}
-                stretch={false}
+                stretch={true}
                 style={{
                     "--active-line-color": "#ff6a01",
                     "--active-title-color": "#ff6a01",
-                    "--title-font-size": "0.12rem",
+                    "--title-font-size": "0.11rem",
                 }}
                 activeKey={activeTab}
             >
@@ -103,156 +417,7 @@ const App: FC<Props> = (props) => {
                     );
                 })}
             </Tabs>
-            <Popup
-                visible={visible}
-                getContainer={null}
-                onMaskClick={() => {
-                    setVisible(false);
-                }}
-                position="right"
-                bodyStyle={{ width: "100%" }}
-            >
-                <div className={"h-[100%] w-[100%] overflow-scroll bg-[#0e1b22]"}>
-                    <div
-                        className={
-                            "absolute top-0 flex items-center justify-between " +
-                            " h-[0.4167rem] w-[100%] border-[1px] bg-[#17181c] px-[0.1389rem]" +
-                            " border-[#666]"
-                        }
-                    >
-                        <p>Regras de cálculo de comissão</p>
-                        <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
-                    </div>
-                    {/*body*/}
-                    <div className={"mt-[0.4167rem] px-[0.1389rem] pt-[0.1389rem]"}>
-                        <div
-                            className={"rounded-[5px] border-[1px] border-[#22343e] p-[0.0694rem]"}
-                        >
-                            <div className={"flex items-center"}>
-                                <div className={"relative ml-[0.0694rem]"}>
-                                    <Image
-                                        src={"/avatar/1.png"}
-                                        alt={""}
-                                        className={
-                                            "rounded-[0.1389rem] border-[2px] border-[#e5811d]"
-                                        }
-                                        width={168}
-                                        height={168}
-                                    />
-                                    <div
-                                        className={
-                                            "absolute bottom-[0.0347rem] right-[0.0556rem]" +
-                                            " w-[0.2778rem]" +
-                                            " flex h-[0.2778rem] rounded-[50%] bg-[#e5811d]" +
-                                            " items-center justify-center"
-                                        }
-                                    >
-                                        A
-                                    </div>
-                                </div>
-                                <div className={"ml-[0.2083rem] text-[#465f80]"}>
-                                    <p> O C3 é poderoso e também possui </p>
-                                    <span className={"text-[#e5811d]"}>110</span>
-                                    <span>/million</span>
-                                </div>
-                            </div>
-
-                            <div className={"mt-[0.1389rem]"}>
-                                Desempenho total 3,31M, Bônus total do agente{" "}
-                                <span className={"text-[#e5811d]"}>2500</span>
-                            </div>
-                            <div>
-                                Desempenho de subordinado 180K, Contribuiu
-                                <span className={"text-[#e5811d]"}> 1980</span>
-                            </div>
-                            <div className={"text-center"}>
-                                Outro desempenho 3,13M, Contribuir
-                                <span className={"text-[#e5811d]"}> 520</span>
-                            </div>
-                        </div>
-
-                        <div className={"mt-[0.1042rem] grid grid-cols-3"}>
-                            <Image
-                                src={"/avatar/right.png"}
-                                alt={""}
-                                width={80}
-                                className={"justify-self-end"}
-                                height={200}
-                            />
-                            <Image
-                                src={"/avatar/up.png"}
-                                className={"justify-self-center"}
-                                alt={""}
-                                width={23}
-                                height={100}
-                            />
-                            <Image src={"/avatar/left.png"} alt={""} width={80} height={200} />
-                        </div>
-                        <div className={"grid grid-cols-3 text-[0.0972rem]"}>
-                            <div className={"text-center"}>
-                                <p>Contribuição de B1:</p>
-                                <p className={"text-center text-[#e5811d]"}>1320</p>
-                                <p>
-                                    Outras contribuições de C1 e C2:{" "}
-                                    <span className={"text-[#e5811d]"}>520</span>{" "}
-                                </p>
-                            </div>
-
-                            <div className={"text-center"}>
-                                <p> Contribuir para A: </p>
-                                <p className={"text-[#e5811d]"}>440</p>
-                            </div>
-                            <div className={"text-center"}>
-                                <p> Contribuição de B3: </p>
-                                <p className={"text-[#e5811d]"}>220</p>
-                                <p>
-                                    Outras contribuições de C3:
-                                    <span className={"text-[#e5811d]"}> 0</span>
-                                </p>
-                            </div>
-                        </div>
-
-                        <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
-                            <LevelCard
-                                url={"/avatar/2.png"}
-                                level={"B1"}
-                                body={
-                                    <div className={"text-[#495b73]"}>
-                                        Subagente ganha, geralmente
-                                        <p>
-                                            <span className={"text-[#e5811d]"}>70</span> /10K
-                                        </p>
-                                    </div>
-                                }
-                                footer={<p>Apostas válidas 120K</p>}
-                            />
-                            <LevelCard
-                                url={"/avatar/3.png"}
-                                level={"B2"}
-                                body={
-                                    <div className={"text-[#495b73]"}>
-                                        B2 não tem subordinados, por isso não tem lucros
-                                    </div>
-                                }
-                                footer={<p>Apostas válidas 120K</p>}
-                            />
-                            <LevelCard
-                                url={"/avatar/4.png"}
-                                level={"B3"}
-                                body={
-                                    <div className={"text-[#495b73]"}>
-                                        Muito bem subagente, ganhou
-                                        <p>
-                                            <span className={"text-[#e5811d]"}>110</span> /10K
-                                        </p>
-                                    </div>
-                                }
-                                footer={<p>Apostas válidas 20K</p>}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Popup>
+            <CommissionModel visible={visible} setVisible={setVisible} />
         </div>
     );
 };

src/app/[locale]/affiliate/summary/page.scss

@@ -178,7 +178,7 @@
     margin: .11rem 0;
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     justify-content: center;
     text-align: center;
 }

src/app/[locale]/affiliate/summary/page.tsx

@@ -7,26 +7,161 @@ import {
 } from "@/api/summary";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { useRequest } from "ahooks";
-import { Toast } from "antd-mobile";
+import { Mask, Toast } from "antd-mobile";
 import { useLocale, useTranslations } from "next-intl";
 
+import { CashbackTypes, Rule } from "@/api/cashback";
+import { CommissionModel } from "@/app/[locale]/affiliate/component/TabsCom";
+import Table, { TableHeaderItem } from "@/components/Table";
 import TipsModal, { ModalProps } from "@/components/TipsModal";
+import { server } from "@/utils/client";
 import { getToken } from "@/utils/Cookies";
 import { copyText } from "@/utils/methods";
 import Image from "next/image";
-import { FC, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import "./page.scss";
 
 interface Props {}
 
-const SHARE_SOURCE = [
-    { icon: "/summary/Mais.png", label: "Mais" },
-    { icon: "/summary/Facebook.png", label: "Facebook" },
-    { icon: "/summary/WhatsApp.png", label: "WhatsApp" },
-    { icon: "/summary/Telegram.png", label: "Telegram" },
-    { icon: "/summary/Twitter.png", label: "Twitter" },
-    { icon: "/summary/Email.png", label: "Email" },
-];
+const RulesClient = () => {
+    const t = useTranslations("cashback");
+    const [rules, setRules] = useState<any[]>([]);
+    const [visible, setVisible] = useState(false);
+    const columns: TableHeaderItem[] = [
+        {
+            title: <div className={"text-center text-[#98a7b5]"}>Nivel Agente</div>,
+            dataIndex: "level",
+            align: "center",
+            render: (item: Rule) => (
+                <div className={"text-[0.12rem] text-[#98a7b5]"}>{item.level}</div>
+            ),
+        },
+        {
+            title: <div className={"text-center text-[#98a7b5]"}>Apostas Validas</div>,
+            dataIndex: "aposta",
+            align: "center",
+            render: (item: Rule) => (
+                <div className={"text-[0.12rem] text-[#98a7b5]"}>{item.aposta} Dez mil+</div>
+            ),
+        },
+        {
+            title: <div className={"text-center text-[#98a7b5]"}>Comissão</div>,
+            dataIndex: "cashback",
+            render: (item: Rule) => (
+                <div className={"text-center text-[0.12rem] text-[#db922b]"}>
+                    {item.cashback}
+                    <span className={"text-[#98a7b5]"}>/Dez mill</span>
+                </div>
+            ),
+        },
+    ];
+    const loadMore = async () => {
+        return Promise.resolve();
+    };
+
+    const getCashBackApi = async () => {
+        return server
+            .request<CashbackTypes>({
+                url: "/v1/api/front/activity_cash",
+                method: "post",
+            })
+            .then((res) => {
+                return res.data;
+            })
+            .catch((error) => {
+                return {
+                    rules: [],
+                    last_period: { end_time: 0, start_time: 0 },
+                    next_period: {
+                        end_time: 0,
+                        start_time: 0,
+                    },
+                    amount: 0,
+                    bet: 0,
+                    status: "expired",
+                };
+            });
+    };
+    useEffect(() => {
+        getCashBackApi().then((res) => {
+            setRules(res.rules);
+        });
+    }, []);
+    return (
+        <div className={"text-[0.12rem]"}>
+            <div className={"bg-[#0e1319] p-[0.0694rem]"}>
+                <Table
+                    columns={columns}
+                    headerClassName={" bg-[#151d28]  "}
+                    bodyClassName={"odd:bg-[#0e1319] even:bg-[#151d28]"}
+                    dataSource={rules || []}
+                    loadMore={loadMore}
+                    hasMore={false}
+                    isLoadMore={false}
+                    isBackground={false}
+                />
+            </div>
+            <div className={"mt-[0.1389rem] flex items-center text-[#98a7b5]"}>
+                <p
+                    className={"mr-[0.1389rem] h-[0.0694rem] w-[0.0694rem] rounded bg-[#98a7b5]"}
+                ></p>{" "}
+                A apostas válidas depende dos diferentes jogos:
+            </div>
+
+            <div className={"mt-[0.1389rem] flex bg-[#25262b] p-[0.1389rem] text-[#98a7b5]"}>
+                <span className={"iconfont icon-tishi text-[0.10rem]"}></span>
+                <div className={"ml-[0.0694rem]"}>
+                    Os tipos de crash e os jogos virtuais não serão considerados apostas válidas{" "}
+                </div>
+            </div>
+
+            <div className={"mt-[0.1389rem] bg-[#25262b] p-[0.1389rem] text-[#98a7b5]"}>
+                <div>
+                    <span className={"text-[0.22rem] text-[#fff]"}>100%</span>
+                    <span> De aposta </span>
+                </div>
+                <div>
+                    <span className={"text-[#575f6a]"}>Jogos : </span>
+                    <span> Live Casino, 3rd Party</span>
+                </div>
+            </div>
+            <div className={"mt-[0.1389rem] bg-[#25262b] p-[20px] text-[#98a7b5]"}>
+                <div>
+                    <span className={"text-[0.22rem] text-[#fff]"}>100%</span>
+                    <span> De aposta </span>
+                </div>
+                <div>
+                    <span className={"text-[#575f6a]"}>Jogos : </span>
+                    <span>Os outros jogos originais</span>
+                </div>
+            </div>
+
+            <div
+                onClick={() => setVisible(true)}
+                className={
+                    "mt-[0.1389rem] flex justify-between bg-[#25262b] p-[0.1042rem] text-[#98a7b5]"
+                }
+            >
+                Regras de cálculo de comissão
+                <span className={"iconfont icon-xiangyou2"}></span>
+            </div>
+
+            <ul className={"ml-[0.1389rem] mt-[0.1389rem] list-disc text-[#98a7b5]"}>
+                <li className={"mt-[0.0694rem]"}>
+                    As comissões podem ser retiradas em nossa carteira 8pg do painel a qualquer
+                    momento.
+                </li>
+                <li className={"mt-[0.0694rem]"}>O sistema calcula a comissão a cada 24 horas.</li>
+                <li className={"mt-[0.0694rem]"}>Comissão máxima diária : 10000 BRL</li>
+                <li className={"mt-[0.0694rem]"}>
+                    A comissão não será creditada para o mesmo IP ou dispositivo, e a inflação
+                    intencional do volume de negócios não será creditada para a comissão.{" "}
+                </li>
+            </ul>
+            <CommissionModel visible={visible} setVisible={setVisible} />
+        </div>
+    );
+};
 const App: FC<Props> = (props) => {
     const t = useTranslations("SummaryPage");
     const locale = useLocale();
@@ -35,6 +170,8 @@ const App: FC<Props> = (props) => {
     const [num, setNum] = useState(100);
     const [money, setMoney] = useState("5000");
 
+    const [visible, setVisible] = useState(false);
+
     const todayModalRef = useRef<ModalProps>(null);
     const totalModalRef = useRef<ModalProps>(null);
     const { userInfo } = useUserInfoStore();
@@ -43,6 +180,36 @@ const App: FC<Props> = (props) => {
     // 生成分享链接
     const BASE_URL = process.env.NEXT_PUBLIC_SHARE_URL;
     const shareUrl = `${BASE_URL}/${locale}/${userInfo ? userInfo.referrer_code : "xxxxxx"}`;
+
+    const url = encodeURIComponent(`${shareUrl}`);
+    const SHARE_SOURCE = [
+        {
+            icon: "/summary/Facebook.png",
+            label: "Facebook",
+            shareUrl: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        },
+        {
+            icon: "/summary/WhatsApp.png",
+            label: "WhatsApp",
+            shareUrl: `https://api.whatsapp.com/send?text=${url}`,
+        },
+        {
+            icon: "/summary/Telegram.png",
+            label: "Telegram",
+            shareUrl: `https://t.me/share/url?url=${url}`,
+        },
+        {
+            icon: "/summary/Twitter.png",
+            label: "Twitter",
+            shareUrl: `https://twitter.com/intent/tweet?text=${url}`,
+        },
+        {
+            icon: "/summary/Email.png",
+            label: "Email",
+            shareUrl: `mailto: ?&subject=&cc=&bcc=&body=${url}`,
+        },
+    ];
+
     // 轮询时间
     const TIME = 180000;
     const getUserMoneyHandler = () => {
@@ -243,7 +410,10 @@ const App: FC<Props> = (props) => {
                     <div className="title">
                         <div>
                             {t("Comissão")}
-                            <span className="iconfont icon-bangzhu" />
+                            <span
+                                className="iconfont icon-bangzhu"
+                                onClick={() => setVisible(true)}
+                            />
                         </div>
                     </div>
                     <div className="cardMian">
@@ -260,7 +430,10 @@ const App: FC<Props> = (props) => {
                             </div>
                             <div>
                                 {t("Nível")}
-                                <span className="iconfont icon-tishi"></span>
+                                <span
+                                    className="iconfont icon-tishi"
+                                    onClick={() => setVisible(true)}
+                                ></span>
                             </div>
                         </div>
                         <div>
@@ -303,15 +476,22 @@ const App: FC<Props> = (props) => {
                         <ul className="sharePlatform">
                             {SHARE_SOURCE.map((item, index) => {
                                 return (
-                                    <li key={index}>
+                                    <a
+                                        href={item.shareUrl}
+                                        key={index}
+                                        target={"_blank"}
+                                        className={"flex flex-col items-center"}
+                                    >
                                         <Image
                                             src={item.icon}
-                                            alt={item.label}
-                                            width={100}
-                                            height={100}
+                                            alt={"Mais"}
+                                            width={70}
+                                            height={70}
                                         />
-                                        <span>{t(item.label)}</span>
-                                    </li>
+                                        <p className={"mt-[0.0347rem] text-[12px] text-[#808080]"}>
+                                            {item.label}
+                                        </p>
+                                    </a>
                                 );
                             })}
                         </ul>
@@ -362,7 +542,10 @@ const App: FC<Props> = (props) => {
                     <div className="title">
                         <div>
                             {t("title3")}
-                            <span className="iconfont icon-bangzhu"></span>
+                            <span
+                                className="iconfont icon-bangzhu"
+                                onClick={() => setVisible(true)}
+                            ></span>
                         </div>
                     </div>
                     <div className="hint">
@@ -424,6 +607,24 @@ const App: FC<Props> = (props) => {
                 </ul>
                 <p className={"text-[gray]"}>{t("modalTips")}</p>
             </TipsModal>
+
+            <Mask visible={visible} getContainer={null}>
+                <div className={"h-[100vh] w-[100%] overflow-scroll bg-[#1f2024]"}>
+                    <div
+                        className={
+                            "absolute top-0 flex items-center justify-between " +
+                            " h-[0.4167rem] w-[100%] border-[1px] bg-[#17181c] px-[0.1389rem]" +
+                            " z-10 border-[#666]"
+                        }
+                    >
+                        <p>Regras de recompensas por comissão</p>
+                        <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
+                    </div>
+                    <div className={"mt-[0.4167rem] px-[0.1389rem] pt-[0.1389rem]"}>
+                        <RulesClient />
+                    </div>
+                </div>
+            </Mask>
         </div>
     );
 };

src/app/globals.scss

@@ -110,7 +110,7 @@ input {
 }
 .layout-tabs{
   .adm-tabs-tab-wrapper{
-    padding: 0 0.0764rem;
+    padding: 0 0.05rem;
   }
 }
 

src/components/Box/WheelModal.tsx

@@ -229,6 +229,8 @@ export const WheelClient: FC<WheelProps> = (props) => {
                 onRotateEnd && onRotateEnd();
                 setButtonText(data?.activate.can || 0);
             });
+            // 重置状态
+            setIsWin(false);
         }, 2000);
     };
 

src/components/TipsModal/index.tsx

@@ -4,13 +4,14 @@ import { forwardRef, PropsWithChildren, ReactNode, useImperativeHandle, useState
 
 type Props = {
     title?: string | ReactNode;
+    onBeforeClose?: () => void;
 };
 export type ModalProps = {
     onClose: () => void;
     onOpen: () => void;
 };
 const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function TipsModal(props, ref) {
-    const { children, title } = props;
+    const { children, title, onBeforeClose } = props;
     const [visible, setVisible] = useState(false);
     useImperativeHandle(ref, () => {
         return {
@@ -28,7 +29,10 @@ const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function Tips
                         </div>
                         <span
                             className="iconfont icon-guanbi"
-                            onClick={() => setVisible(false)}
+                            onClick={() => {
+                                onBeforeClose && onBeforeClose();
+                                setVisible(false);
+                            }}
                         ></span>
                     </div>
                     <div className="popUpMain">{children}</div>