Sport 顶部 和 底部bet 自适应

src/contexts/themeContext.js

@@ -49,6 +49,7 @@ export const ThemeProvider = ({children}) => {
     const [searchData,setSearchData]=useState(null);
 
     const [showHeader, setShowHeader] = useState(false);
+    const [showMHeader, setShowMHeader] = useState(false);
 
     //GameSearch
 
@@ -190,6 +191,8 @@ export const ThemeProvider = ({children}) => {
                 showGameSearchPanel,
                 showHeader,
                 setShowHeader,
+                showMHeader,
+                setShowMHeader,
                 //lang
                 isShowLang,
                 setIsShowLang,

src/layout/Navbar/index.jsx

@@ -251,8 +251,8 @@ const PageHeader = () => {
     const barRef = useRef(null);
     const currRoute=useSelector(getRoute(pathname));
     const chain=useSelector(getRouteChain(pathname));
-    const {isMobile,showHeader,setShowHeader} = useThemeProvider();
-    const [showMHeader, setShowMHeader] = useState(false);
+    const {isMobile,showHeader,setShowHeader,showMHeader, setShowMHeader} = useThemeProvider();
+    // const [showMHeader, setShowMHeader] = useState(false);
     const isLogin=useSelector(isLogined);
     let lastscroll=0;
     const {open} = useSidebar();

src/widgets/WSport/index.jsx

@@ -15,10 +15,13 @@ import {useLocation, useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
 import {reqGameInfo} from "@features/api";
 import {getUrlParam} from "@utils/helpers";
+import {useWindowSize} from "react-use";
 const i18n=global.i18n;
 const objInfo={
     bt:null,
-    timer:null
+    timer:null,
+    isTopHeader:false,
+    isMobile:false,
 }
 const checkStartPath=(pathname)=>{
     // let path=pathname.startsWith(ROUTE_PATH.RACING)?"/horse-racing-55":"/";
@@ -37,7 +40,7 @@ const checkStartPath=(pathname)=>{
     return path;
 }
 const WSport=({resetSport})=>{
-    const {isMobile}=useThemeProvider();
+    const {isMobile,showMHeader}=useThemeProvider();
     const bbConf=useSelector(getBBConf);
     const {theme}=useThemeProvider();
     const user=useSelector(getUserInfo);
@@ -52,6 +55,19 @@ const WSport=({resetSport})=>{
     const btToken=useSelector(getUserBBToken);
     const userLang=useSelector(getUserLang);
     const userNick=useSelector(getUserNick);
+    const {width} = useWindowSize();
+    const [stickyTop,setStickyTop]=useState(-1);
+    const [betSlipOffsetBottom,setBetSlipOffsetBottom]=useState(-1);
+    //监听install
+    let installBanner = document.querySelector('#installBanner');
+    const handleResize = (entries) => {
+        for (let entry of entries) {
+            if (entry.target === installBanner) {
+                checkStickyTop();
+            }
+        }
+    };
+    const observer = new ResizeObserver(handleResize);
     const refreshToken=async ()=>{
         return new Promise((resolve, reject) => {
             dispatch(reqGameInfo()).then(({payload})=>{
@@ -79,8 +95,10 @@ const WSport=({resetSport})=>{
         // if (user!=null&&user.bb!=null&&user.bb.token!=null)token=user.bb.token;
         // token=null;
         let token=btToken;
-        let betSlipOffsetBottom=isMobile()?70:0;
-        let stickyTop=isMobile()?55:60;
+        // let betSlipOffsetBottom=isMobile()?70:0;
+        // let stickyTop=isMobile()?55:60;
+        let betSlipOffsetBottom=checkBetSlipOffsetBottom();
+        let stickyTop=checkStickyTop();
         var bt = new window.BTRenderer().initialize({
             brand_id: brand_id,
             token: token,
@@ -125,6 +143,31 @@ const WSport=({resetSport})=>{
             objInfo.timer=null;
         }
     }
+    const checkStickyTop=()=>{
+        let sTop=55;
+        if (objInfo.isMobile){
+            if (objInfo.isTopHeader)sTop=126;
+            let installBanner = document.querySelector('#installBanner');
+            if (installBanner!=null){
+                let extH=installBanner.clientHeight;
+                sTop+=extH;
+            }
+        }
+        else
+        {
+            sTop=60;
+        }
+        setStickyTop(sTop)
+        return sTop;
+    }
+    const checkBetSlipOffsetBottom=()=>{
+        let sBottom=0;
+        if (objInfo.isMobile){
+            sBottom=70;
+        }
+        setBetSlipOffsetBottom(sBottom);
+        return sBottom;
+    }
     useEffect(()=>{
         if (pathname.startsWith(ROUTE_PATH.SPORTS)){
             let sub=pathname.replace(ROUTE_PATH.SPORTS,"");
@@ -180,16 +223,43 @@ const WSport=({resetSport})=>{
     //     }
     // },[language])
     const resetBT=()=>{
+        objInfo.isTopHeader=showMHeader;
+        objInfo.isMobile=isMobile();
         clearBT();
         objInfo.bt=initBetby();
     }
     useEffect(()=>{
         resetBT();
+        if (installBanner)observer.observe(installBanner);
         return ()=>{
             clearBT();
             clearTimer();
+            if (installBanner)observer.unobserve(installBanner);
         }
     },[userID,userLang,userNick])
+
+    useEffect(()=>{
+        objInfo.isTopHeader=showMHeader;
+        objInfo.isMobile=isMobile();
+        checkStickyTop();
+        checkBetSlipOffsetBottom();
+    },[showMHeader,width])
+    useEffect(() => {
+        if (stickyTop===-1)return;
+        if (objInfo.bt){
+            objInfo.bt.updateOptions({
+                stickyTop: stickyTop,
+            })
+        }
+    }, [stickyTop]);
+    useEffect(()=>{
+        if (betSlipOffsetBottom===-1)return;
+        if (objInfo.bt){
+            objInfo.bt.updateOptions({
+                betSlipOffsetBottom: betSlipOffsetBottom,
+            })
+        }
+    },[betSlipOffsetBottom])
     //,theme,language
     return (
         <div id="betby" className={`${styles.container} ${isMobile()?styles.container_m:''}`}></div>