维护弹窗 2024-08-27 03:00:00 -2024-08-27 07:00:00

src/App.js

@@ -3,7 +3,7 @@
 import ReactGA from 'react-ga4';
 
 // utils
-import {lazy, Suspense} from 'react';
+import {lazy, Suspense, useState} from 'react';
 
 // styles
 import ThemeStyles from '@styles/theme';
@@ -33,7 +33,7 @@ import useAuthRoute from '@hooks/useAuthRoute';
 // utils
 import {StyleSheetManager} from 'styled-components';
 import {ThemeProvider as MuiThemeProvider, createTheme} from '@mui/material/styles';
-import {getUrlParam, localStorageGet, localStorageSet, preventDefault} from '@utils/helpers';
+import {getBrazilTimeStamp, getUrlParam, localStorageGet, localStorageSet, preventDefault} from '@utils/helpers';
 import rtlPlugin from 'stylis-plugin-rtl';
 import {CacheProvider} from '@emotion/react';
 import createCache from '@emotion/cache';
@@ -78,6 +78,7 @@ import {ROUTE_PATH} from "@constants/routes";
 import {onChangeUser, onChangeUserID} from "@features/actions/mainAction";
 import {isInAppBrowser, isShowInstallBox, openUrlUseChrome} from "@utils/UAUtils";
 import WInstallBox from "@widgets/WInstallBox";
+import WMaintainBox from "@widgets/WMaintainBox";
 const objInfo={
     gameID:0
 }
@@ -105,6 +106,7 @@ const App = () => {
     const openPay=useSelector(getOpenPay);
     const guest=useSelector(getIsGuest);
     const popBindPhone=useSelector(getPopBindPhone);
+    const [isMaintain, setIsMaintain] = useState(false);
     const muiTheme = createTheme({
         direction: direction,
     });
@@ -206,6 +208,8 @@ const App = () => {
     }
     const appInitData=()=>{
         // scroll to top on route change
+        //检查是否维护
+        if (checkMaintain())return;
         checkInviteCode();
         checkOpenInChrome();
         loadFont();
@@ -276,6 +280,24 @@ const App = () => {
         global.showBindPrompt();
         global.ispopBindPhone=1;
     }
+    //检查维护
+    const checkMaintain=()=>{
+        // let sdate=new Date(2024, 7, 27, 3, 0, 0);
+        // let edate=new Date(2024, 7, 27, 7, 0, 0);
+        // let stime=sdate.getTime();
+        // let etime=edate.getTime();
+        //巴西时间
+        let stime=getBrazilTimeStamp("2024-08-27 03:00:00");
+        // let stime=getBrazilTimeStamp("2024-08-26 16:34:00");
+        let etime=getBrazilTimeStamp("2024-08-27 07:00:00");
+        let now=Date.now();
+        let isopen=false;
+        if (now>=stime&&now<=etime){
+            isopen=true;
+            setIsMaintain(isopen);
+        }
+        return isopen;
+    }
     //app Effect
     //初始化
     useEffect(() => {
@@ -316,6 +338,8 @@ const App = () => {
                 }
             }
         }
+        //检查是否维护
+        checkMaintain();
     },[preLocation])
     //监听gameID
     useEffect(()=>{
@@ -345,6 +369,9 @@ const App = () => {
     //app Effect
 
     const renderLayout=()=>{
+        if (isMaintain)return (
+            <WMaintainBox open={true}></WMaintainBox>
+        );
         return (
             <>
                 {
@@ -354,6 +381,8 @@ const App = () => {
         )
     }
     const renderPreload=()=>{
+        //维护
+        if (isMaintain)return (<></>);
         return (
             <>
                 {

src/locales/languages/en_US.json

@@ -638,6 +638,10 @@
   "firstPay": {
     "only_need": "Only need"
   },
+  "maintain": {
+    "content": "Para fornecer um serviço melhor, faremos a manutenção do sistema das 3:00 às 7:00 em 27 de agosto. O site não estará acessível durante esse período. Por favor, seja paciente.",
+    "confirm": "Confirm"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "There is no RedPack",

src/locales/languages/es_MX.json

@@ -627,6 +627,10 @@
   "firstPay": {
     "only_need": "Solo necesito"
   },
+  "maintain": {
+    "content": "Para brindar un mejor servicio, realizaremos el mantenimiento del sistema de 3 a 7 en punto el 27 de agosto. No se podrá acceder al sitio web en ese momento, espere pacientemente.",
+    "confirm": "Confirmar"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "No hay RedPack",

src/locales/languages/pt_BR.json

@@ -627,6 +627,10 @@
   "firstPay": {
     "only_need": "Só precisa"
   },
+  "maintain": {
+    "content": "Para prestar um melhor serviço, realizaremos a manutenção do sistema das 15h às 19h do dia 27 de agosto. O site não estará acessível nesse horário, aguarde pacientemente.",
+    "confirm": "Confirmar"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Não há RedPack",

src/locales/languages/ru_RU.json

@@ -627,6 +627,10 @@
   "firstPay": {
     "only_need": "Нужно только"
   },
+  "maintain": {
+    "content": "Чтобы обеспечить лучшее обслуживание, мы проведем техническое обслуживание системы с 3 до 7 часов 27 августа. В это время мы не сможем получить доступ к веб-сайту, пожалуйста, подождите терпеливо.",
+    "confirm": "Подтверждать"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Нет RedPack",

src/locales/languages/zh_TW.json

@@ -627,6 +627,10 @@
   "firstPay": {
     "only_need": "只需要"
   },
+  "maintain": {
+    "content": "為了更好地服務，我們將在8.27日，3點到7點進行系統維護，屆時不能訪問網站，請耐心等待。",
+    "confirm": "確認"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "沒有紅包",

src/utils/helpers.js

@@ -442,3 +442,14 @@ export const checkIsStandalone = () =>{
     } catch (e) {}
     return navigator.standalone || window.matchMedia("(display-mode: standalone)").matches || window.matchMedia("(display-mode: fullscreen)").matches && (isAndroid() || isIOS()) || window.matchMedia("(display-mode: minimal-ui)").matches || window.matchMedia("(display-mode: window-controls-overlay)").matches
 }
+export const getBrazilTimeStamp = (dateString) => {
+
+    const dateTimeString = `${dateString}-03:00`;
+
+    // 将字符串转换为Date对象
+    const date = new Date(dateTimeString);
+
+    // 获取时间戳
+    const timestamp = date.getTime();
+    return timestamp;
+};

src/widgets/WMaintainBox/index.jsx

@@ -0,0 +1,55 @@
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+import Grow from "@mui/material/Grow";
+import styles from "./styles.module.scss";
+import {APP_THEME} from "@constants/app";
+import logo_dark from "@assets/logo/logo.png";
+import logo_light from "@assets/logo/logo_w.png";
+import React from "react";
+import {useThemeProvider} from "@contexts/themeContext";
+const i18n=global.i18n;
+
+
+const WMaintainBox = ({ open=false,content="" }) => {
+    const {theme,isMobile} = useThemeProvider();
+    const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
+    // if (content==="")content=i18n.t('maintain.content');
+    if (content==="")content='Para fornecer um serviço melhor, faremos a manutenção do sistema das 3:00 às 7:00 em 27 de agosto. O site não estará acessível durante esse período. Por favor, seja paciente.';
+    const renderLogo=()=>{
+        return (
+            <div className={styles.l_logo}>
+                <img className={styles.logo_img} src={logourl}/>
+            </div>
+        )
+    }
+    const renderContent=()=>{
+        return (
+            <div className={styles.content}>{content}</div>
+        )
+    }
+    const renderBtn=()=>{
+        return (
+            <button className={"button-green"}>
+                {i18n.t('maintain.confirm')}
+            </button>
+        )
+    }
+    return (
+        <Modal open={open} onClose={() => {
+
+        }} closeAfterTransition>
+            <Fade in={open} timeout={500}>
+                <div className="popup-container">
+                <Grow in={open} timeout={500}>
+                        <div className={`popup card card-padded ${styles.container}`}>
+                            {renderLogo()}
+                            {renderContent()}
+                            {renderBtn()}
+                        </div>
+                    </Grow>
+                </div>
+            </Fade>
+        </Modal>
+    )
+}
+export default WMaintainBox;

src/widgets/WMaintainBox/styles.module.scss

@@ -0,0 +1,32 @@
+.container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 1.5rem;
+  padding: 2rem 1.25rem;
+  & .content{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    width: 100%;
+    text-align: center;
+    word-wrap: break-word;
+    word-break: break-all;
+    text-align: center;
+    color: var(--header);
+  }
+  & .l_logo{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 1rem;
+    & .logo_img{
+      width: 70%;
+      height: auto;
+    }
+  }
+}