fix: 增加电话号码区号

src/api/home.ts

@@ -133,9 +133,26 @@ export interface GameListRep {
      */
     release_date: string;
     // 自定义demo试玩
-    demo?: number,
+    demo?: number;
     // 自定义游戏类型
-    category_name? : string
+    category_name?: string;
+}
+
+/**
+ * @description 大奖展示
+ */
+export interface PrizeTypes {
+    amount: number;
+    phone: string;
+    id: number;
+    provider: string;
+    game_id: string;
+    game_name: string;
+    game_name_cn: string;
+    release_date: string;
+    game_icon: string;
+    game_type: string;
+    coin_types: number;
 }
 
 export const getGamesApi = () => {

src/api/user.ts

@@ -254,6 +254,8 @@ export interface Wallet {
      * 是否允许转移重玩币
      */
     is_lose_transfer?: boolean;
+
+    tips_reset_rollover?: boolean;
 }
 // 前台用户获取金额信息
 export const getUserMoneyApi = () => {
@@ -326,9 +328,9 @@ export interface DepositsRep {
 }
 
 // 用户钱包余额转移
-export const getUserTransferApi = (data: {wallet_type: number}) => {
+export const getUserTransferApi = (data: { wallet_type: number }) => {
     return server.post<any>({
         url: "/v1/api/user/user_transfer",
-        data
+        data,
     });
-};
+};

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

@@ -21,7 +21,7 @@ const Scroll = () => {
         sessionStorage.setItem("shareId", shareId);
     }, []);
     return (
-        <div className={"mt-[0.3rem] flex items-center justify-around pb-[0.5rem] text-[#fff]"}>
+        <div className={"mt-[0.1rem] flex items-center justify-around pb-[0.5rem] text-[#fff]"}>
             <div
                 className={
                     "h-[0.45rem] w-[0.45rem] rounded bg-gradient-to-b from-[#ff9323]" +
@@ -30,7 +30,6 @@ const Scroll = () => {
             >
                 <span className={"iconfont icon-shoucang text-[0.15rem]"}></span>
             </div>
-            <div className={"iconfont icon-a-18 text-[0.2778rem] text-[red]"}></div>
             <div
                 className={
                     "flex h-[0.46rem] w-[0.46rem] rounded-[0.02rem] bg-[#25272c]" +

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

@@ -67,6 +67,10 @@ const Page = async () => {
                         </div>
                     </div>
                 </div>
+                <div className={"flex justify-center"}>
+                    <div className={"iconfont icon-a-18 text-[0.3958rem] text-[red]"}></div>
+                </div>
+
                 {/*support*/}
                 <Scroll />
             </div>

src/app/[locale]/(TabBar)/[[...share]]/@prizeWidget/page.tsx

@@ -1,15 +1,16 @@
+import { PrizeTypes } from "@/api/home";
 import { server } from "@/utils/server";
 import HomePrize from "../_home/HomePrize";
 
 const getPrizeApi = () => {
-    return server.request({
+    return server.request<PrizeTypes[]>({
         url: "/v1/api/front/games_notice_win",
         method: "post",
     });
 };
 const Page = async () => {
     const result = await getPrizeApi();
-    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 12`, result);
-    return <HomePrize></HomePrize>;
+    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 12`, result.data);
+    return <HomePrize data={result.data}></HomePrize>;
 };
 export default Page;

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

@@ -0,0 +1,58 @@
+"use client";
+import { Link } from "@/i18n/routing";
+import { useEffect, useState } from "react";
+
+const DownloadSection = () => {
+    const [visible, setVisible] = useState<boolean>(true);
+
+    useEffect(() => {
+        const isCloseDownload = sessionStorage.getItem("isCloseDownload");
+        if (isCloseDownload) {
+            setVisible(false);
+        }
+    }, []);
+
+    const closeDownloadSection = () => {
+        sessionStorage.setItem("isCloseDownload", "true");
+        setVisible(false);
+    };
+
+    if (!visible) return null;
+    return (
+        <div
+            className={"relative flex items-center px-[0.1389rem] py-[0.0694rem]"}
+            style={{
+                background: "linear-gradient(169deg,#4d820b,rgba(0,75,61))",
+            }}
+        >
+            <div
+                className={
+                    "absolute -left-[0px] -top-[0px] h-[0.22rem] w-[0.24rem] text-[0.1rem]" +
+                    " rounded-br-[0.3472rem] indent-[0.05rem] leading-[0.17rem]" +
+                    " bg-[#d8d8d8] text-[#000]"
+                }
+                onClick={closeDownloadSection}
+            >
+                <i className={"iconfont icon-guanbi text-[0.1rem]"}></i>
+            </div>
+            <div className={"ml-[0.1389rem] flex-1"}>
+                <p className={"font-bold text-[#b6ff00]"}>BCWIN777</p>
+                <p className={"text-[0.1rem] font-bold"}>
+                    Baixe o APP e ganhe um pontos grátis de 10 pontos
+                </p>
+            </div>
+            <Link
+                href={"/download"}
+                className={
+                    "flex h-[0.33rem] rounded-[0.04rem] bg-[#a0f10d] p-[0.12rem] " +
+                    " items-center justify-center text-[0.12rem] text-[#000]"
+                }
+            >
+                <i className={"iconfont icon-android text-[0.25rem]"}></i>
+                <p className={"font-bold"}>BAIXE</p>
+            </Link>
+        </div>
+    );
+};
+
+export default DownloadSection;

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

@@ -1,43 +1,48 @@
 "use client";
-import { GameListRep, gamesNoticeWinApi } from "@/api/home";
+import { PrizeTypes } from "@/api/home";
 import Box from "@/components/Box";
 import styles from "@/components/Card/style.module.scss";
 import useGame from "@/hooks/useGame";
 import { useRouter } from "@/i18n/routing";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { getToken } from "@/utils/Cookies";
-import { useRequest } from "ahooks";
 import { Button, Popup } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, useState } from "react";
+import { FC, useRef, useState } from "react";
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-interface Props {}
+interface Props {
+    data: PrizeTypes[];
+}
 
-const HomePrize: FC<Props> = () => {
+const HomePrize: FC<Props> = (props) => {
+    const { data } = props;
     const t = useTranslations("HomePage");
     const tt = useTranslations("Game");
 
     const [winImg, setWinImg] = useState<any>([{}]);
-    const { run, cancel } = useRequest(gamesNoticeWinApi, {
-        pollingInterval: 600000,
-        pollingWhenHidden: true,
-        pollingErrorRetryCount: 3,
-        staleTime: 5000,
-        onError: (error) => {},
-        onSuccess: (res) => {
-            console.log(`🚀🚀🚀🚀🚀-> in HomePrize.tsx on 30`, res);
-            setWinImg(res.data || []);
-        },
-    });
+    // const { run, cancel } = useRequest(gamesNoticeWinApi, {
+    //     pollingInterval: 600000,
+    //     pollingWhenHidden: true,
+    //     pollingErrorRetryCount: 3,
+    //     staleTime: 5000,
+    //     onError: (error) => {},
+    //     onSuccess: (res) => {
+    //         console.log(`🚀🚀🚀🚀🚀-> in HomePrize.tsx on 30`, res);
+    //         setWinImg(res.data || []);
+    //     },
+    // });
 
     const [visible, setVisible] = useState(false);
-    const [gameInfo, setGameInfo] = useState<any>({});
-    const handler = (game: GameListRep) => {
+    // const [gameInfo, setGameInfo] = useState<any>({});
+    const gameInfo = useRef<PrizeTypes | null>(null);
+    const handler = (game: PrizeTypes) => {
         setVisible(true);
         console.log(`🚀🚀🚀🚀🚀-> in HomePrize.tsx on 39`, game);
-        setGameInfo(game);
+        // setGameInfo(game);
+
+        gameInfo.current = game;
     };
 
     const router = useRouter();
@@ -57,10 +62,10 @@ const HomePrize: FC<Props> = () => {
         }
 
         const params: any = {
-            id: gameInfo.id + "",
+            id: gameInfo.current?.id + "",
             mode: groupType!,
         };
-        getGameUrl(gameInfo, params);
+        getGameUrl(gameInfo.current!, params);
     };
 
     return (
@@ -79,7 +84,7 @@ const HomePrize: FC<Props> = () => {
                 modules={[Autoplay]}
                 className="mySwiper"
             >
-                {winImg.map((prize: any, index: number) => (
+                {data.map((prize, index: number) => (
                     <SwiperSlide key={index}>
                         <div
                             className={"w-[1.1rem] bg-[#1c1e22]"}
@@ -119,13 +124,13 @@ const HomePrize: FC<Props> = () => {
                 <Box className={"w-1/1 flex w-[4.02rem] flex-1"}>
                     <div className={styles.cardWrap} style={{ width: "1.1rem" }}>
                         <img
-                            src={gameInfo?.game_icon}
-                            alt={gameInfo?.game_name}
+                            src={gameInfo.current?.game_icon}
+                            alt={gameInfo.current?.game_name}
                             className={"h-[100%] w-[100%]"}
                         />
                     </div>
                     <div className={styles.cardWrapGmeInfo}>
-                        <p className={"h-[0.6rem]"}>{gameInfo?.game_name}</p>
+                        <p className={"h-[0.6rem]"}>{gameInfo.current?.game_name}</p>
 
                         <div className={"flex w-[2.2rem] justify-around"}>
                             {/*<Button*/}

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

@@ -3,6 +3,7 @@ import Header from "@/components/Header";
 
 import { getTranslations } from "next-intl/server";
 import { FC, PropsWithChildren, ReactNode } from "react";
+import DownloadSection from "./_home/DownloadSection";
 export const generateMetadata = async () => {
     const t = await getTranslations("titles");
     return {
@@ -32,6 +33,7 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
 
     return (
         <>
+            <DownloadSection />
             <Header></Header>
             <main id="maincontainer" className={"main-header"}>
                 {/*弹窗*/}

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

@@ -1,9 +1,9 @@
 "use client";
 import { DepositsTypes, RewardsType } from "@/api/depositsApi";
-import { getUserRechargeApi, getUserMoneyApi } from "@/api/user";
-import TipsModal, { ModalProps } from "@/components/TipsModal";
+import { getUserMoneyApi, getUserRechargeApi } from "@/api/user";
 import Box from "@/components/Box";
 import ButtonOwn from "@/components/ButtonOwn";
+import TipsModal, { ModalProps } from "@/components/TipsModal";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { neReg } from "@/utils";
 import { Button, Form, Input, Toast } from "antd-mobile";
@@ -95,36 +95,37 @@ const DepositData: FC<Props> = (props) => {
     const [formData, setFormData] = useState<any>({}); // 存放表单数据
     const onFinish = async (values: any) => {
         const params = { ...values, channel_id: activeType.id, amount: +values.amount };
-        const res: any = await getUserMoneyApi()
-        if (res?.data?.tips_reset_rollover) {
+        const res = await getUserMoneyApi();
+        console.log(`🚀🚀🚀🚀🚀-> in DepositData.tsx on 99`, res);
+        if (res.data?.tips_reset_rollover) {
             tipModelRef.current?.onOpen();
-            setFormData(params)
-            return
+            setFormData(params);
+            return;
         }
-        handleUserRecharge(false, params)
+        handleUserRecharge(false, params);
     };
 
     const handleUserRecharge = (is_reset_rollover: boolean, data?: any) => {
-        let params = data || formData 
-        getUserRechargeApi({ is_reset_rollover, ...params})
-        .then(async (res) => {
-            formInstanceRef.current?.resetFields();
-            Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
-            tipModelRef.current?.onClose();
-            setAmount(undefined);
+        let params = data || formData;
+        getUserRechargeApi({ is_reset_rollover, ...params })
+            .then(async (res) => {
+                formInstanceRef.current?.resetFields();
+                Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
+                tipModelRef.current?.onClose();
+                setAmount(undefined);
 
-            if (res.data.pay_url) {
-                window.open(res.data.pay_url);
-            }
-            const data = await getDepositApi();
-            setDepositState(data);
-            setActiveType(data[0]);
-            await actions();
-        })
-        .catch((error) => {
-            Toast.show({ content: t(`code${error.data.code}`), maskClickable: false });
-        });
-    }
+                if (res.data.pay_url) {
+                    window.open(res.data.pay_url);
+                }
+                const data = await getDepositApi();
+                setDepositState(data);
+                setActiveType(data[0]);
+                await actions();
+            })
+            .catch((error) => {
+                Toast.show({ content: t(`code${error.data.code}`), maskClickable: false });
+            });
+    };
 
     const onValuesChange = (changeValues: any) => {
         if (changeValues.amount) {
@@ -275,7 +276,9 @@ const DepositData: FC<Props> = (props) => {
             <TipsModal title={"Tips"} ref={tipModelRef}>
                 <div className={"flex items-center justify-between"}>
                     <h2 className={"text-[0.14rem]"}>Mantenha Bônus</h2>
-                    <Button color={"primary"} className={"mx-auto"}
+                    <Button
+                        color={"primary"}
+                        className={"mx-auto"}
                         style={{
                             "--background-color": "var(--primary-color)",
                             "--border-color": "var(--primary-color)",
@@ -285,11 +288,24 @@ const DepositData: FC<Props> = (props) => {
                         Depósito
                     </Button>
                 </div>
-                <p className={"text-left text-[0.12rem] font-medium text-[#666] mt-[0.05rem]"}>Recarga direta, mantendo a carteira principal e informações de carteira de bônus;</p>
-                <b className={"mt-[0.2rem] mb-[0.2rem]"} style={{width: '100%',height: 'auto', borderTop: '1px solid #e5e5e5', display: 'block'}}></b>
+                <p className={"mt-[0.05rem] text-left text-[0.12rem] font-medium text-[#666]"}>
+                    Recarga direta, mantendo a carteira principal e informações de carteira de
+                    bônus;
+                </p>
+                <b
+                    className={"mb-[0.2rem] mt-[0.2rem]"}
+                    style={{
+                        width: "100%",
+                        height: "auto",
+                        borderTop: "1px solid #e5e5e5",
+                        display: "block",
+                    }}
+                ></b>
                 <div className={"flex items-center justify-between"}>
                     <h2 className={"text-[0.14rem]"}>Esvaziem Bônus</h2>
-                    <Button color={"primary"} className={"mx-auto"}
+                    <Button
+                        color={"primary"}
+                        className={"mx-auto"}
                         style={{
                             "--background-color": "var(--primary-color)",
                             "--border-color": "var(--primary-color)",
@@ -299,7 +315,11 @@ const DepositData: FC<Props> = (props) => {
                         Depósito
                     </Button>
                 </div>
-                <p className={"text-left text-[0.12rem] font-medium text-[#666] mt-[0.05rem]"}>Após a recarga, o saldo principal é mantido e todo o bônus é esvaziado, a nova carteira principal e a carteira de bônus são re-gravadas a quantidade de códigos jogados;</p>
+                <p className={"mt-[0.05rem] text-left text-[0.12rem] font-medium text-[#666]"}>
+                    Após a recarga, o saldo principal é mantido e todo o bônus é esvaziado, a nova
+                    carteira principal e a carteira de bônus são re-gravadas a quantidade de códigos
+                    jogados;
+                </p>
             </TipsModal>
         </div>
     );

src/app/[locale]/(enter)/components/Form/index.tsx

@@ -2,6 +2,7 @@
 import { loginApi, registerApi, userInfoApi } from "@/api/login";
 import Box from "@/components/Box";
 import ButtonOwn from "@/components/ButtonOwn";
+import MobileField from "@/components/Fields/MobileField";
 import { Link, useRouter } from "@/i18n/routing";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { emailReg, neReg } from "@/utils";
@@ -28,30 +29,30 @@ interface MobileFieldProps {
     onChange?: (value: string) => void;
 }
 
-const MobileField: FC<MobileFieldProps> = (props) => {
-    const t = useTranslations("form");
-    const { value, onChange } = props;
-
-    const changeHandler = (value: string) => {
-        let newAmount = value.replace(/[^0-9]/g, "");
-        if (onChange) {
-            onChange(newAmount);
-        }
-    };
-    return (
-        <>
-            <Space align="center" className={"text-[#ccc]"}>
-                <Space align="center">+55</Space>
-                <Input
-                    placeholder={t("phone")}
-                    maxLength={11}
-                    value={value}
-                    onChange={(e) => changeHandler(e)}
-                />
-            </Space>
-        </>
-    );
-};
+// const MobileField: FC<MobileFieldProps> = (props) => {
+//     const t = useTranslations("form");
+//     const { value, onChange } = props;
+//
+//     const changeHandler = (value: string) => {
+//         let newAmount = value.replace(/[^0-9]/g, "");
+//         if (onChange) {
+//             onChange(newAmount);
+//         }
+//     };
+//     return (
+//         <>
+//             <Space align="center" className={"text-[#ccc]"}>
+//                 <Space align="center">+55</Space>
+//                 <Input
+//                     placeholder={t("phone")}
+//                     maxLength={11}
+//                     value={value}
+//                     onChange={(e) => changeHandler(e)}
+//                 />
+//             </Space>
+//         </>
+//     );
+// };
 
 const SexMobile: FC<MobileFieldProps> = (props) => {
     const { value, onChange } = props;
@@ -121,6 +122,12 @@ interface FormProps {
      */
     channel_code?: string;
 }
+interface FormInitStateTypes extends FormProps {
+    mobile?: {
+        preValue: string;
+        realValue: string;
+    };
+}
 type FormType = "login" | "register";
 interface Props {
     type?: FormType;
@@ -143,8 +150,9 @@ const FormComponent: FC<Props> = (props) => {
     const [checkBoxValue, setCheckBoxValue] = useState<boolean>(false);
     const router = useRouter();
     /// 初始值
-    const params = useRef<FormProps>({
+    const params = useRef<FormInitStateTypes>({
         user_phone: "",
+        mobile: { preValue: "55", realValue: "" },
         pwd: "",
         sex: 0,
         address: undefined,
@@ -154,11 +162,19 @@ const FormComponent: FC<Props> = (props) => {
         referrer_code: undefined,
     });
 
-    const onFinish = (values: FormProps) => {
+    const onFinish = (values: FormInitStateTypes) => {
+        const { mobile } = values;
+        const newValue = {
+            ...values,
+            user_phone: mobile?.realValue,
+            code_phone: mobile?.preValue,
+        };
+
+        delete newValue.mobile;
         if (isStrictMode) {
-            strictHandler(values);
+            strictHandler(newValue as FormProps);
         } else {
-            looseHandler(values);
+            looseHandler(newValue as FormProps);
         }
     };
 
@@ -265,6 +281,15 @@ const FormComponent: FC<Props> = (props) => {
             return Promise.resolve();
         }
     };
+
+    // 手机号验证规则
+    const checkMobile = (_: any, value: any) => {
+        if (value.realValue.length < 10) {
+            return Promise.reject(new Error(t("form.phoneMinReg")));
+        } else {
+            return Promise.resolve();
+        }
+    };
     return (
         <Box className={"custom-form"}>
             <Form
@@ -281,13 +306,7 @@ const FormComponent: FC<Props> = (props) => {
                     </ButtonOwn>
                 }
             >
-                <Form.Item
-                    name="user_phone"
-                    rules={[
-                        { required: true, message: t("form.phoneReg") },
-                        { min: 10, message: t("form.phoneMinReg") },
-                    ]}
-                >
+                <Form.Item name="mobile" rules={[{ required: true, validator: checkMobile }]}>
                     <MobileField />
                 </Form.Item>
 

src/app/[locale]/(enter)/register/page.tsx

@@ -11,6 +11,7 @@ import GoogleCom from "../components/GoogleCom";
 
 const Register: FC<Props> = async () => {
     const services = await getServicesApi();
+    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 14`, services);
     const defaultService = services?.find((item) => item.register_show === 1);
     const t = await getTranslations("LoginPage");
     return (

src/app/[locale]/(enter)/resetPhone/page.scss

@@ -4,7 +4,7 @@
     background-color: rgb(31, 31, 31);
     display: flex;
     flex-direction: column;
-  
+
   .main {
     background-color: #1f1f1f;
     padding: .72rem .18rem 0;
@@ -47,18 +47,18 @@
         box-sizing: border-box;
       }
     }
-    
-    input {
-      flex: 1;
-      background-color: #494949;
-      height: .48rem;
-      color: #868686;
-      font-size: .14rem;
-      outline: none;
-      &::placeholder {
-        color: #868686;
-      }
-    }
+
+    //input {
+    //  flex: 1;
+    //  background-color: #494949;
+    //  height: .48rem;
+    //  color: #868686;
+    //  font-size: .14rem;
+    //  outline: none;
+    //  &::placeholder {
+    //    color: #868686;
+    //  }
+    //}
 
     .tips {
       width: 100%;
@@ -71,4 +71,4 @@
       margin: .29rem 0 .19rem;
     }
   }
-}
+}

src/app/[locale]/(enter)/resetPhone/page.tsx

@@ -2,11 +2,13 @@
 import { getSendCodeApi } from "@/api/user";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
+import MobileField from "@/components/Fields/MobileField";
 import HeaderBack from "@/components/HeaderBack";
 import { useRouter } from "@/i18n/routing";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import { Form, Toast } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, useState } from "react";
+import { FC, useRef } from "react";
 import "./page.scss";
 
 interface Props {}
@@ -18,36 +20,39 @@ const ResetPhone: FC<Props> = () => {
 
     const userInfo = useUserInfoStore((state) => state.userInfo);
 
-    let [userPhone, setUserPhone] = useState(userInfo.user_phone);
-    const changeUserPhone = (e: { target: { value: any } }) => {
-        const value = e.target.value.replace(/[^0-9]/g, "");
-        setUserPhone(value);
-    };
-    let [msgError, setMsgError] = useState("");
-    const blurVerifyPhone = (e: { target: { value: any } }) => {
-        const { value } = e.target;
-        if (value == "") {
-            setMsgError(t("enterCorrectphone"));
-            return;
-        }
-        setMsgError("");
-    };
-    const checkUserPhoneRequest = async () => {
-        // if (!phoneRegex(userPhone)) return;
+    const params = useRef({
+        mobile: {
+            preValue: "55",
+            realValue: "",
+        },
+    });
+
+    const onFinish = (values: any) => {
+        const { mobile } = values;
         if (process.env.NODE_ENV === "development") {
-            router.push(`/verification?userPhone=${userPhone}`);
+            router.push(`/verification?userPhone=${mobile.preValue + mobile.realValue}`);
         } else {
-            getSendCodeApi({ user_phone: userPhone })
+            getSendCodeApi({ user_phone: mobile.preValue + mobile.realValue })
                 .then(({ code, data }) => {
                     if (data) {
-                        router.push(`/verification?userPhone=${userPhone}`);
+                        router.push(
+                            `/verification?userPhone=${mobile.preValue + mobile.realValue}`
+                        );
                     }
                 })
                 .catch((err) => {
-                    setMsgError(tCode(`code.${err.data.code}`));
+                    Toast.show(tCode(`code.${err.data.code}`));
                 });
         }
     };
+
+    const checkMobile = (_: any, value: any) => {
+        if (value.realValue.length < 10) {
+            return Promise.reject(new Error(tCode("form.phoneMinReg")));
+        } else {
+            return Promise.resolve();
+        }
+    };
     return (
         <div className="resetPhone-box">
             <HeaderBack />
@@ -56,26 +61,22 @@ const ResetPhone: FC<Props> = () => {
                     <h2>{t("h2")}</h2>
                     <div>{t("h3")}</div>
                 </div>
-                <div className="phoneInput">
-                    <span className="after">{t("areaCode")}</span>
-                    <input
-                        type="tel"
-                        value={userPhone}
-                        onChange={changeUserPhone}
-                        onBlur={blurVerifyPhone}
-                        placeholder={t("Celular")}
-                        maxLength={11}
-                    />
-                </div>
-                {msgError && <div className="tips"> {msgError} </div>}
-                <div className="btnContent">
-                    <ButtonOwn
-                        active={userPhone && userPhone.length > 10}
-                        callbackFun={checkUserPhoneRequest}
-                    >
-                        {t("Continuar")}
-                    </ButtonOwn>
-                </div>
+            </div>
+            <div className={"custom-form"}>
+                <Form
+                    style={{
+                        "--border-bottom": "none",
+                        "--border-top": "none",
+                        "--border-inner": "none",
+                    }}
+                    initialValues={params.current}
+                    onFinish={onFinish}
+                    footer={<ButtonOwn active>{t("Continuar")}</ButtonOwn>}
+                >
+                    <Form.Item name="mobile" rules={[{ required: true, validator: checkMobile }]}>
+                        <MobileField />
+                    </Form.Item>
+                </Form>
             </div>
             <DomainFooter />
         </div>

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

@@ -23,7 +23,8 @@ const Page = () => {
                     href={"#"}
                     className={
                         "flex h-[0.4rem] w-[100%] items-center justify-center " +
-                        " rounded-[0.2778rem] bg-gradient-to-b from-[#ff9323] to-[#ff6a01] font-bold"
+                        " rounded-[0.2778rem] bg-gradient-to-b from-[#ff9323] to-[#ff6a01]" +
+                        " font-bold text-[#fff]"
                     }
                     download={"#"}
                 >

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

@@ -7,6 +7,7 @@ import { clearWallet } from "@/app/[locale]/(navbar)/withdraw/actions";
 import Box from "@/components/Box";
 import ButtonOwn from "@/components/ButtonOwn";
 import Empty from "@/components/Empty";
+import MobileField from "@/components/Fields/MobileField";
 import TipsModal, { ModalProps } from "@/components/TipsModal";
 import useGame from "@/hooks/useGame";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
@@ -37,13 +38,14 @@ type FieldValueType = {
     account_no: string;
     channel_id: (typeof ChannelEnum)[keyof typeof ChannelEnum];
     type: number;
+    code_phone?: string;
 };
 interface MobileFieldProps {
     value?: FieldValueType;
     onChange?: (value: FieldValueType) => void;
     actions: Array<ChannelType & { text: string; key: number }>;
 }
-const MobileField: FC<MobileFieldProps> = (props) => {
+const PixField: FC<MobileFieldProps> = (props) => {
     const {
         actions,
         value = { account_no: "", channel_id: actions[0].id, type: actions[0].type },
@@ -76,10 +78,14 @@ const MobileField: FC<MobileFieldProps> = (props) => {
         }
     };
     const onRealValueChange = (value: string) => {
+        console.log(`🚀🚀🚀🚀🚀-> in WithdrawWidget.tsx on 80`, value);
         // console.log('prefix', prefix)
-        let account_no = value
+        let account_no = value;
         if (prefix.type === 1) {
-            account_no = value.replace(/[^0-9]/g, '').replace(/[\-]/g, '').slice(0,11)
+            account_no = value
+                .replace(/[^0-9]/g, "")
+                .replace(/[\-]/g, "")
+                .slice(0, 11);
             // console.log('account_no', value.replace(/\D/g, ''))
             // account_no = account_no.slice(0,3)
         }
@@ -88,6 +94,17 @@ const MobileField: FC<MobileFieldProps> = (props) => {
             // console.log('value', props.value)
         }
     };
+
+    const mobileChange = (values: any) => {
+        if (onChange) {
+            onChange({
+                account_no: values.realValue,
+                channel_id: prefix.id,
+                type: prefix.type,
+                code_phone: values.preValue,
+            });
+        }
+    };
     return (
         <>
             <div className="flex">
@@ -95,12 +112,20 @@ const MobileField: FC<MobileFieldProps> = (props) => {
                     <span className={"mr-[0.1rem]"}>{prefix.text}</span>
                     <span className="iconfont icon-xialaxuanze"></span>
                 </div>
-                <Input
-                    name="secretKey"
-                    value={value.account_no}
-                    placeholder={placeholder}
-                    onChange={onRealValueChange}
-                />
+
+                {prefix.type === ChannelEnum.Phone ? (
+                    <MobileField
+                        value={{ preValue: "55", realValue: value.account_no }}
+                        onChange={mobileChange}
+                    />
+                ) : (
+                    <Input
+                        name="secretKey"
+                        value={value.account_no}
+                        placeholder={placeholder}
+                        onChange={onRealValueChange}
+                    />
+                )}
             </div>
             <ActionSheet
                 extra=""
@@ -148,6 +173,7 @@ const WithdrawWidget: FC<Props> = (props) => {
     const initParams = {
         channel: "",
         amount: "",
+
         passport: userInfo.passport,
         user_name: userInfo.user_name,
     };
@@ -329,7 +355,7 @@ const WithdrawWidget: FC<Props> = (props) => {
                                 label=""
                                 rules={[{ validator: ChannelValidator }]}
                             >
-                                <MobileField actions={walletAction || []} />
+                                <PixField actions={walletAction || []} />
                             </Form.Item>
                         )}
 

src/components/Fields/MobileField.tsx

@@ -0,0 +1,66 @@
+import { FC, useState } from "react";
+
+/**
+ * @description 手机号码选择框
+ */
+import { Input, Space } from "antd-mobile";
+import { useTranslations } from "next-intl";
+
+interface MobileValue {
+    preValue: string | number;
+    realValue: string;
+}
+const columns = [["86", "01", "02", "03"]];
+
+interface MobileFieldProps {
+    value?: MobileValue;
+    onChange?: (value: MobileValue) => void;
+}
+
+const MobileField: FC<MobileFieldProps> = ({
+    value = { preValue: "86", realValue: "" },
+    onChange,
+}) => {
+    const [visible, setVisible] = useState(false);
+    const t = useTranslations("form");
+    const triggerValue = (changedValue: Partial<MobileValue>) => {
+        onChange?.({ ...value, ...changedValue });
+    };
+
+    const onRealValueChange = (value: string) => {
+        triggerValue({ realValue: value.replace(/[^0-9]/g, "") });
+    };
+    console.log(`🚀🚀🚀🚀🚀-> in MobileField.tsx on 32`, value);
+
+    // const onPreValueChange = (value: PickerValue[]) => {
+    //     const v = value[0];
+    //     if (v === null) return;
+    //     triggerValue({ preValue: v });
+    // };
+    return (
+        <>
+            <Space align="center">
+                <Space align="center" onClick={() => setVisible(true)}>
+                    <div className={"text-[#999]"}>+{value.preValue}</div>
+                </Space>
+                <Input
+                    value={value.realValue}
+                    placeholder={t("phone")}
+                    maxLength={11}
+                    onChange={onRealValueChange}
+                />
+            </Space>
+            {/*<Picker*/}
+            {/*    columns={columns}*/}
+            {/*    visible={visible}*/}
+            {/*    onClose={() => {*/}
+            {/*        setVisible(false);*/}
+            {/*    }}*/}
+            {/*    value={[value.preValue]}*/}
+            {/*    onConfirm={onPreValueChange}*/}
+            {/*/>*/}
+        </>
+    );
+};
+
+export default MobileField;

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1735206395045') format('woff2'),
-       url('iconfont.woff?t=1735206395045') format('woff'),
-       url('iconfont.ttf?t=1735206395045') format('truetype');
+  src: url('iconfont.woff2?t=1736823626295') format('woff2'),
+       url('iconfont.woff?t=1736823626295') format('woff'),
+       url('iconfont.ttf?t=1736823626295') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-android:before {
+  content: "\e677";
+}
+
 .icon-qianbao3:before {
   content: "\e61f";
 }