no message

src/components/AntSwitch/index.jsx

@@ -0,0 +1,49 @@
+import {styled} from "@mui/material/styles";
+import Switch from "@mui/material/Switch";
+
+const AntSwitch = styled(Switch)(({ theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    display: 'flex',
+    '&:active': {
+        '& .MuiSwitch-thumb': {
+            width: 15,
+        },
+        '& .MuiSwitch-switchBase.Mui-checked': {
+            transform: 'translateX(9px)',
+        },
+    },
+    '& .MuiSwitch-switchBase': {
+        padding: 2,
+        color: 'rgba(153,164,176,.6)',
+        transform: 'translateX(-2px)',
+        '&.Mui-checked': {
+            transform: 'translateX(12px)',
+            color: 'var(--primary-color)',
+            '& + .MuiSwitch-track': {
+                opacity: 1,
+                backgroundColor: '#3bc11733',
+            },
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        transition: theme.transitions.create(['width'], {
+            duration: 200,
+        }),
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 16 / 2,
+        opacity: 1,
+        height: '70%',
+        width:'90%',
+        marginTop:'10%',
+        backgroundColor:'rgba(0,0,0,.25)',
+        boxSizing: 'border-box',
+    },
+}));
+export default AntSwitch;

src/components/RadioBtn/index.jsx

@@ -0,0 +1,16 @@
+import styles from "./styles.module.scss";
+import React from "react";
+
+const RadioBtn=({value,selected,onChange,children,className=''})=>{
+    return (
+        <button type={"button"} value={value} className={`${styles.radio_btn} ${selected?styles.active:''} ${className}`} onClick={()=>{
+            if(onChange)onChange(value);
+        }}>
+            <div className={styles.circle}>
+                <div className={styles.dot}/>
+            </div>
+            {children}
+        </button>
+    )
+}
+export default RadioBtn;

src/components/RadioBtn/styles.module.scss

@@ -0,0 +1,33 @@
+.radio_btn{
+  display: flex;
+  align-items: center;
+  color: var(--header);
+  gap: 0.5rem;
+  &.active{
+    & .circle{
+      border: solid .13rem var(--primary-color);
+      opacity: 1;
+      & .dot{
+        background-color: var(--primary-color);
+      }
+    }
+  }
+  & .circle{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 50%;
+    //border: solid .13rem var(--nav-item-hover);
+    border: solid .13rem var(--text);
+    opacity: 0.5;
+    & .dot{
+      width: 0.65rem;
+      height: 0.65rem;
+      border-radius: 50%;
+      //background-color: var(--nav-item-hover);
+      background-color:transparent;
+    }
+  }
+}

src/features/actions/hallClient.js

@@ -1,13 +1,29 @@
 import {APP_SERVER} from "@constants/app";
 import {connectServer, disconnectServer, onDisconnect, sendToServer} from "@features/socketSlice";
+import {reqGameInfo} from "@features/api";
+import {updatePayFinish} from "@features/paySlice";
 const roomName=APP_SERVER.ROOM_HALL;
 const serverUrl=APP_SERVER.SERVER_URL;
 //信息处理
 const __playground_message_types=(message,dispatch)=>{
 
+}
+const handlePayFinish=(message,dispatch)=>{
+    dispatch(reqGameInfo);
+    dispatch(updatePayFinish);
 }
 const roger=(message,dispatch)=>{
-    console.log(message);
+    // console.log(message);
+    if (message){
+        let {cmd}=message;
+        switch (cmd){
+            case "pay_finish":{
+                //充值完成 message={Golds:12.xx,PayNum:10}
+                handlePayFinish(message,dispatch)
+                break;
+            }
+        }
+    }
 }
 const chat=(message,dispatch)=>{
     console.log(message);

src/features/paySlice.js

@@ -9,6 +9,7 @@ import {
 } from "@features/api";
 import {getHttpMsg} from "@utils/helpers";
 import {toast} from "react-toastify";
+const i18n=global.i18n;
 const reducerRechargeConfig=(state,action,arg)=>{
     let payload=action.payload;
     if (payload!=null&&payload.code===200){
@@ -77,6 +78,7 @@ const reducerPaymentOrder=(state,action,arg)=>{
         let data=payload.data;
         data.createAt=Date.now();
         data.deadline=15*60;
+        data.status="pending";
         state.currPayOrder=data;
         if (arg.callback!=null)arg.callback();
     }
@@ -148,7 +150,13 @@ export const Pay=createSlice({
         withdrawInfo:null
     },
     reducers: {
-
+        updatePayFinish:((state, action) => {
+            if (state.currPayOrder!=null){
+                state.currPayOrder.status="success";
+            }
+            //充值完成 message={Golds:12.xx,PayNum:10}
+            toast.success(i18n.t("deposit.order_info.success"));
+        })
     },
     extraReducers: (builder) => {
         buildReqReducer(builder,reqRechargeConfig,reducerRechargeConfig,rechargeConfigStatus);
@@ -161,7 +169,7 @@ export const Pay=createSlice({
         buildReqReducer(builder,reqChangePayPass,reducerChangePayPass,changePayPassStatus);
     },
 })
-export const {} = Pay.actions;
+export const {updatePayFinish} = Pay.actions;
 export const getConfig=(state)=>{
     return state.pay.config;
 }

src/locales/languages/en_US.json

@@ -103,7 +103,7 @@
       "welcome": "Welcome to 24680.com",
       "tips": "Please Sign up or Log in first",
       "name": "Name:",
-      "id": "User ID:"
+      "id": "ID:"
     },
     "language": "Language",
     "theme": "Theme",
@@ -111,7 +111,7 @@
     "phone": "Phone",
     "email": "Email",
     "security": "Security",
-    "install_banner": "Install Banner"
+    "install_banner": "Show Install Notice"
   },
   "copy_success": "Copy successful",
   "user": {
@@ -141,7 +141,7 @@
     }
   },
   "deposit": {
-    "uid": "UID:",
+    "uid": "ID:",
     "banner":{
       "first_title": "New Arrival Offer",
       "recommend_title": "To recommend"
@@ -162,7 +162,14 @@
       "copyButton": "Copy pix code",
       "lookButton": "Already paid",
       "tips1": "Copy successfully,please open pix",
-      "tips2": "Thank you for your patronage"
+      "tips2": "Thank you for your patronage",
+      "okey": "Okey",
+      "success": "Successful recharge"
+    },
+    "promotions": {
+      "tips": "Participate in promotions",
+      "banner_tips": "Super bonus bonus, get an extra {0} bonus on deposit.",
+      "bonus_title": "Deposit bonus"
     }
   },
   "game": {

src/widgets/UserSettings/index.jsx

@@ -25,54 +25,9 @@ import {reqChangeInfo, reqLogout} from "@features/api";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
 import {APP_GENDER, APP_THEME} from "@constants/app";
-import Switch from "@mui/material/Switch";
-import { styled } from '@mui/material/styles';
+import AntSwitch from "@components/AntSwitch";
 const i18n=global.i18n;
-const AntSwitch = styled(Switch)(({ theme }) => ({
-    width: 28,
-    height: 16,
-    padding: 0,
-    display: 'flex',
-    '&:active': {
-        '& .MuiSwitch-thumb': {
-            width: 15,
-        },
-        '& .MuiSwitch-switchBase.Mui-checked': {
-            transform: 'translateX(9px)',
-        },
-    },
-    '& .MuiSwitch-switchBase': {
-        padding: 2,
-        color: 'rgba(153,164,176,.6)',
-        transform: 'translateX(-2px)',
-        '&.Mui-checked': {
-            transform: 'translateX(12px)',
-            color: 'var(--primary-color)',
-            '& + .MuiSwitch-track': {
-                opacity: 1,
-                backgroundColor: '#3bc11733',
-            },
-        },
-    },
-    '& .MuiSwitch-thumb': {
-        boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-        transition: theme.transitions.create(['width'], {
-            duration: 200,
-        }),
-    },
-    '& .MuiSwitch-track': {
-        borderRadius: 16 / 2,
-        opacity: 1,
-        height: '70%',
-        width:'90%',
-        marginTop:'10%',
-        backgroundColor:'rgba(0,0,0,.25)',
-        boxSizing: 'border-box',
-    },
-}));
+
 const UserSettings=()=>{
     const isLogin=useSelector(isLogined);
     const user=useSelector(getUserInfo);
@@ -169,12 +124,12 @@ const UserSettings=()=>{
                                 <div className={styles.name}>{user.NickName}</div>
                                 {gender}
                             </div>
-                            <CopyToClipboard text={user.UserID} onCopy={()=>{
+                            <CopyToClipboard text={user.GameID} onCopy={()=>{
                                 toast.success(i18n.t("copy_success"));
                             }}>
                                 <div className={styles.info_item}>
                                     <div className={styles.text}>{i18n.t("settings.user_info.id")}</div>
-                                    <div className={styles.text}>{user.UserID}</div>
+                                    <div className={styles.text}>{user.GameID}</div>
                                     <button>
                                         <SvgIcon className={styles.icon_copy} herf={"icon_Copy"}/>
                                     </button>

src/widgets/WDeposit/BR/BRDeposit.jsx

@@ -11,7 +11,15 @@ import SmallLoading from "@components/SmallLoading";
 import {reqPaymentOrder} from "@features/api";
 import {useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
+import RadioBtn from "@components/RadioBtn";
+import img_bonus from "@assets/pay/topup_bonus.png";
+import styled from 'styled-components/macro';
+import {stringFormat} from "@utils/helpers";
 const i18n=global.i18n;
+const PPBanner=styled.div`
+    background: url(${img_bonus});
+    background-size: 100% 100%;
+`
 const BRDeposit=()=>{
     const dispatch = useDispatch();
     const navigate=useNavigate();
@@ -21,6 +29,7 @@ const BRDeposit=()=>{
     const orderStatus=useSelector(getPaymentOrderStatus);
     const [selectedID,setSelectedID]=useState("0");
     const isLogin=useSelector(isLogined);
+    const [selectedPromotion,setSelectedPromotion]=useState(false);
     const getSelectedConfig=()=>{
         let selected=null;
         if (config){
@@ -97,6 +106,13 @@ const BRDeposit=()=>{
         if (item){
             price=Number(item.money);
             give=Number(item.give);
+            if (selectedPromotion){
+                let activity=item.activity;
+                if (activity){
+                    price=Number(activity.money);
+                    give=Number(activity.give);
+                }
+            }
         }
         let total=price+give;
         return (
@@ -124,6 +140,13 @@ const BRDeposit=()=>{
                     list.map((item,index)=>{
                         let price=Number(item.money);
                         let give=Number(item.give);
+                        if (selectedPromotion){
+                            let activity=item.activity;
+                            if (activity){
+                                price=Number(activity.money);
+                                give=Number(activity.give);
+                            }
+                        }
                         let extra="+"+Math.floor(give*100/price)+'%';
                         return (
                             <button key={index} className={`${styles.list_btn} ${selectedID===item.id?styles.active:''}`}
@@ -169,21 +192,74 @@ const BRDeposit=()=>{
                     gear=JSON.parse(payItem.gear);
                     gear=gear[0];
                 }
+                let money=payItem.money;
+                let id=gear.id;
+                let gift_id=payItem.gift_id;
+                if (selectedPromotion){
+                    let activity=payItem.activity;
+                    if (activity!=null){
+                        money=activity.money;
+                        // id=activity.id;
+                        gift_id=activity.gift_id;
+                    }
+                }
                 onGetPaymentOder({
-                    price:payItem.money,
+                    price:money,
                     goodsName:"chip",
-                    payType:gear.id,
-                    GiftsID:payItem.gift_id
+                    payType:id,
+                    GiftsID:gift_id
                 })
             }}>
                 {orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):i18n.t("deposit.pay_btn")}
             </button>
         )
     }
+    const renderPromotions=()=>{
+        let payItem=getSelectedConfig();
+        let percent=0;
+        let bonus=0;
+        if (payItem){
+            let activity=payItem.activity;
+            if (activity){
+                let price=Number(activity.money);
+                bonus=Number(activity.give);
+                percent=Math.floor(bonus*100/price);
+            }
+        }
+        return (
+            <div className={styles.promotion}>
+                {
+                    selectedPromotion?(
+                        <PPBanner className={styles.banner}>
+                            <div className={styles.info_con}>
+                                <div className={styles.percent_tips}>{stringFormat(i18n.t("deposit.promotions.banner_tips"),[percent+"%"])}</div>
+                                <div className={styles.big_percent}>{percent+"%"}</div>
+                            </div>
+                            <div className={styles.info_bonus}>
+                                <div>{i18n.t("deposit.promotions.bonus_title")}</div>
+                                <div className={styles.bonus_value_con}>
+                                    <div>{percent+"%"}</div>
+                                    <div className={styles.bonus_value}>{global.DOLLAR+" +"+bonus}</div>
+                                </div>
+                            </div>
+                        </PPBanner>
+                    ):(<></>)
+                }
+                <div className={styles.select_item}>
+                    <RadioBtn className={styles.text} selected={selectedPromotion} value={"promotion"} onChange={(value)=>{
+                        setSelectedPromotion(!selectedPromotion);
+                    }}>
+                        {i18n.t("deposit.promotions.tips")}
+                    </RadioBtn>
+                </div>
+            </div>
+        )
+    }
     return (
         <Spring type="slideUp" className={styles.container}>
             {renderFirst()}
             {renderDeposits()}
+            {renderPromotions()}
             {renderDepositBtn()}
         </Spring>
     )

src/widgets/WDeposit/BR/styles.module.scss

@@ -192,3 +192,67 @@
     }
   }
 }
+.promotion{
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  & .banner{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    aspect-ratio: 2.5;
+    & .info_con{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 76%;
+      padding: 1rem;
+      font-weight: 700;
+      color: var(--text);
+      & .percent_tips{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60%;
+        height: 100%;
+        font-size: 0.9rem;
+      }
+      & .big_percent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40%;
+        height: 100%;
+        font-size: 2rem;
+        font-weight: 800;
+        color: var(--header);
+      }
+    }
+    & .info_bonus{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0rem 1rem;
+      height: 24%;
+      color: var(--header);
+      & .bonus_value_con{
+        display: flex;
+        gap: 1.5rem;
+        & .bonus_value{
+          font-weight: 600;
+        }
+      }
+    }
+  }
+  & .select_item{
+    background-color: var(--pay-btn-bg);
+    padding: 0.8rem;
+    border-radius: var(--border-radius);
+    & .text{
+      font-size: 0.9rem;
+      color: var(--text);
+    }
+  }
+}

src/widgets/WDeposit/DepositHeader.jsx

@@ -28,7 +28,7 @@ const DepositHeader=({...props})=>{
                         {
                            !isLogin?(<></>):(
                                <div className={styles.user}>
-                                   <div className={styles.uid}>{i18n.t("deposit.uid")+""+user.UserID}</div>
+                                   <div className={styles.uid}>{i18n.t("deposit.uid")+""+user.GameID}</div>
                                    <div className={styles.gold_con}>
                                        <img className={styles.icon_golds} src={USD}/>
                                        <div className={styles.golds}>{global.DOLLAR+""+numFormatter(user.Score)}</div>

src/widgets/WPaymentOrder/BR/BRPayOrder.jsx

@@ -11,6 +11,7 @@ import SvgIcon from "@components/SvgIcon";
 import {CopyToClipboard} from "react-copy-to-clipboard";
 import {toast} from "react-toastify";
 import QRCode from 'qrcode.react';
+import {ReactComponent as SuccessIcon} from "@assets/singlesvg/succss.svg";
 const i18n=global.i18n;
 const BRPayOrder=({close})=>{
     const navigate=useNavigate();
@@ -124,9 +125,9 @@ const BRPayOrder=({close})=>{
                             {i18n.t("deposit.order_info.copyButton")}
                         </button>
                     </CopyToClipboard>
-                    <button className={styles.btn_already}>
-                        {i18n.t("deposit.order_info.lookButton")}
-                    </button>
+                    {/*<button className={styles.btn_already}>*/}
+                    {/*    {i18n.t("deposit.order_info.lookButton")}*/}
+                    {/*</button>*/}
                 </div>
             </div>
         )
@@ -139,16 +140,43 @@ const BRPayOrder=({close})=>{
             </div>
         )
     }
+    const renderSuccess=()=>{
+        return (
+            <div className={styles.success}>
+                <SuccessIcon className={styles.logo}/>
+                <div className={styles.tips}>{i18n.t("deposit.order_info.tips2")}</div>
+                <div className={styles.btns_con}>
+                    <button className={"button-green"} onClick={()=>{
+                        close();
+                    }}>{i18n.t("deposit.order_info.okey")}</button>
+                </div>
+            </div>
+        )
+    }
+    const renderView=()=>{
+        let view=(<></>);
+        if (orderInfo==null)return view;
+        if (orderInfo.status==="success"){
+            view=(
+                <Spring type="slideUp" className={styles.container}>
+                    {renderSuccess()}
+                </Spring>
+            )
+        }
+        else
+        {
+            view=(
+                <Spring type="slideUp" className={styles.container}>
+                    {renderTitle()}
+                    {renderOrderInfo()}
+                </Spring>
+            )
+        }
+        return view;
+    }
     return (
         <>
-            {
-                orderInfo!=null?(
-                    <Spring type="slideUp" className={styles.container}>
-                        {renderTitle()}
-                        {renderOrderInfo()}
-                    </Spring>
-                ):(<></>)
-            }
+            {renderView()}
         </>
     )
 }

src/widgets/WPaymentOrder/BR/styles.module.scss

@@ -112,3 +112,29 @@
 .line{
   border-top: 1px solid var(--card-line);
 }
+.success{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 3.8rem;
+  width: 100%;
+  gap: 3rem;
+  font-size: 0.9rem;
+  color: var(--header);
+  text-align: center;
+  & .tips{
+    font-size: 1rem;
+  }
+  & .logo{
+    //width: 3rem;
+    //height: 3rem;
+  }
+  & .btns_con{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 1.5rem;
+    margin-top: 2rem;
+    width: 50%;
+  }
+}

src/widgets/WPaymentOrder/index.jsx

@@ -3,7 +3,7 @@ import BRPayOrder from "@widgets/WPaymentOrder/BR/BRPayOrder";
 const WPaymentOrder=({close})=>{
     return (
         <div className={styles.container}>
-            <BRPayOrder></BRPayOrder>
+            <BRPayOrder close={close}></BRPayOrder>
         </div>
     )
 }