zhejiushizhuce 2 سال پیش
والد
کامیت
d22f7d5b92
3فایلهای تغییر یافته به همراه165 افزوده شده و 12 حذف شده
  1. 131 6
      src/layout/Navbar/index.jsx
  2. 25 5
      src/layout/Navbar/styles.module.scss
  3. 9 1
      src/widgets/WCashWheel/WRetainPop/WRetainPop.jsx

+ 131 - 6
src/layout/Navbar/index.jsx

@@ -26,7 +26,7 @@ import ResizeObserver from "resize-observer-polyfill";
 import {useSelector} from "react-redux";
 import {allTopNavs, getRoute, getRouteChain, getUserInfo, isLogin, isLogined} from "@features/mainSlice";
 import LazyImage from "@components/LazyImage";
-import {numFormatter} from "@utils/helpers";
+import {numFormatter, sleep} from "@utils/helpers";
 import {ROUTE_PATH} from "@constants/routes";
 const i18n=global.i18n;
 
@@ -273,6 +273,9 @@ const PageHeader = () => {
             show=true;
             setShowMHeader(show);
         }
+        if (scrollTop<20){
+            setShowMHeader(true);
+        }
     }
     const changeHeaderHeight=()=>{
         document.documentElement.style.setProperty('--header-active', getHeaderHeight());
@@ -286,15 +289,132 @@ const PageHeader = () => {
             changeHeaderHeight();
         }
     });
+    const getProgressierInstallBanner=(params,callback)=>{
+        let banner=new window.NewProgressierInstallBanner(
+            params,
+            callback
+        )
+        banner.remove = async ()=>{
+            if (banner.deny && !banner.data.preview) {
+                banner.deny()
+            }
+            banner.element.classList.remove("in");
+            // await progressier.utils.wait(1e3);
+            banner.element.remove()
+        }
+        banner.make=()=>{
+            document.querySelectorAll("." + banner.className).forEach(function(e) {
+                e.remove()
+            });
+            banner.element = window.progressier.utils.node("div", banner.className, {
+                parent: document.querySelector("#installBanner")
+            });
+            banner.element.classList.add(styles.install_banner);
+        }
+        return banner;
+    }
+    const reProgressierInstallBanner=()=>{
+        let ProgressierInstallBanner=window.ProgressierInstallBanner;
+        window.NewProgressierInstallBanner=ProgressierInstallBanner;
+        window.ProgressierInstallBanner=function (e, t) {
+            this.remove = async function() {
+
+            };
+            this.render = async function() {
+
+            };
+            this.make = function() {
+
+            };
+            this.init = async function() {
+
+            }
+        }
+    }
+    const checkWaitForData=async ()=>{
+        let l=window.progressier.banners;
+        for (let i = 0; i < 5; i++) {
+            if (l.data.installBannerPitch!=null) break;
+            await l.parent.data.waitForData();
+        }
+    }
+    const startListening=async ()=>{
+        let l=window.progressier.banners;
+        await l.parent.data.waitForData();
+        l.data = l.parent.data.params;
+        if (!l.reinstallTimer) {
+            l.reinstallTimer = setInterval(function() {
+                if (!l.showInstall()) {
+                    return
+                }
+                if (l.showed) {
+                    return
+                }
+                l.showed = true;
+                // new window.NewProgressierInstallBanner({
+                //         icon: l.icon(),
+                //         color: l.data.buttonColor,
+                //         btnColor: l.data.buttonTextColor,
+                //         text: l.data.installBannerPitch
+                //     },function() {
+                //         l.deny(l.installCookie)
+                //     }
+                // ).init();
+                let InstallBanner=getProgressierInstallBanner(
+                    {
+                        icon: l.icon(),
+                        color: l.data.buttonColor,
+                        btnColor: l.data.buttonTextColor,
+                        text: l.data.installBannerPitch
+                    },()=>{
+                        l.deny(l.installCookie)
+                    }
+                ).init();
+
+                clearInterval(l.reinstallTimer)
+            }, l.interval)
+        }
+    }
+    const checkProgressier=async ()=>{
+        if (window.progressier){
+            reProgressierInstallBanner();
+            // let l=window.progressier.banners;
+            // await l.parent.data.waitForData();
+            // await checkWaitForData();
+            // let data=l.data;
+            // if (data){
+            //     if (window.NewProgressierInstallBanner){
+            //         let InstallBanner=getProgressierInstallBanner(
+            //             {
+            //                 icon: l.icon(),
+            //                 color: l.data.buttonColor,
+            //                 btnColor: l.data.buttonTextColor,
+            //                 text: l.data.installBannerPitch
+            //             }
+            //         ).init();
+            //     }
+            // }
+            startListening();
+        }
+    }
+    const stopListener=()=>{
+        if (window.progressier==null)return;
+        let l=window.progressier.banners;
+        if(l){
+            if (l.reinstallTimer!=null){
+                clearInterval(l.reinstallTimer);
+                l.reinstallTimer=null;
+            }
+        }
+    }
     useEffect(() => {
         // 这里的代码会在组件挂载时执行
         // console.log('Component mounted');
         window.addEventListener('scroll', handleScroll);
-        // console.log("ProgressierInstallBannerProgressierInstallBanner");
-        // console.log(window.ProgressierInstallBanner)
         if (barRef.current) {
             resizeObserver.observe(barRef.current);
         }
+        checkProgressier();
         return () => {
             // 可选的清除函数,当组件卸载时执行
             // console.log('Component unmounted');
@@ -302,6 +422,7 @@ const PageHeader = () => {
             if (barRef.current) {
                 resizeObserver.unobserve(barRef.current);
             }
+            stopListener();
         };
     }, []);
     // }, [pathname]);
@@ -355,13 +476,17 @@ const PageHeader = () => {
             </animated.div>
         );
     }
+    const renderMobileInstall=()=>{
+        return (
+            <div id={'installBanner'} className={styles.header_install}></div>
+        )
+    }
     const renderMobile=()=>{
         return (
             <>
+                {renderMobileInstall()}
                 <MobileNav />
-                {
-                    renderHeaderRoom()
-                }
+                {renderHeaderRoom()}
             </>
         )
     }

+ 25 - 5
src/layout/Navbar/styles.module.scss

@@ -10,10 +10,13 @@
   height: 4rem;
   &.mobile{
     background:transparent;
-    height: 8.5rem;
+    //height: 8.5rem;
+    height: auto;
+    //overflow-x: auto;
   }
   &.hide_header{
-    height:3.75rem;
+    //height:3.75rem;
+    //height: auto;
   }
 }
 .header{
@@ -28,7 +31,9 @@
     padding-left:270px;
   }
   &_mobile{
-    position:fixed;
+    //position:fixed;
+    //position: absolute;
+    position: relative;
     height:3.75rem;
     padding: 0px 10px;
     z-index: 2;
@@ -36,17 +41,32 @@
 }
 .header_room{
   display: flex;
-  position: fixed;
+  //position: fixed;
+  //position: absolute;
+  position: relative;
   height: 4.75rem !important;
   background-color:var(--widget);
   z-index:1;
   padding: 0.75rem;
   //margin-top: -1px;
-  top: 3.75rem;
+  //top: 3.75rem;
+  //margin-top: 3.75rem;
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
 }
+.header_install{
+  display: flex;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  //height: auto;
+  & .install_banner{
+    position: relative !important;
+    transition: none !important;
+    top: 0 !important;
+  }
+}
 .btn_sign_in{
   //padding: 12px 5px !important;
   width: 7rem !important;

+ 9 - 1
src/widgets/WCashWheel/WRetainPop/WRetainPop.jsx

@@ -3,13 +3,17 @@ import React from "react";
 import styles from "./styles.module.scss"
 import cash_2 from "@assets/wheel/cash_2.png";
 import CountUp from "react-countup";
-import {formatCash, stringFormat} from "@utils/helpers";
+import {formatCash, localStorageSet, stringFormat} from "@utils/helpers";
 import {useSelector} from "react-redux";
 import {getTurnplate} from "@features/turnplateSlice";
+import {LOCAL_WHEEL_RETAIN} from "@constants/localkey";
 const i18n=global.i18n;
 const WRetainPop=({open,onClose,openShare,closeP})=>{
     let turnplate=useSelector(getTurnplate);
     if (turnplate==null)turnplate={total_amount:10000,collect_amount:0}
+    const clearRetain=()=>{
+        localStorageSet(LOCAL_WHEEL_RETAIN,Date.now())
+    }
     const renderMain=()=>{
         let collect=turnplate.collect_amount;
         let total=turnplate.total_amount;
@@ -67,11 +71,13 @@ const WRetainPop=({open,onClose,openShare,closeP})=>{
             <div className={styles.btn_con}>
                 <button className={styles.share_btn} onClick={(e)=>{
                     if (e)e.stopPropagation();
+                    clearRetain();
                     if(onClose)onClose();
                     if (openShare)openShare()
                 }}>{i18n.t("turnplate.retain_pop.btn_share")}</button>
                 <button onClick={(e)=>{
                     if (e)e.stopPropagation();
+                    clearRetain();
                     if (onClose)onClose();
                     if(closeP)closeP();
                 }} className={styles.giveup_btn}>{stringFormat(i18n.t("turnplate.retain_pop.btn_giveup"),[formatCash(collect)])}</button>
@@ -81,7 +87,9 @@ const WRetainPop=({open,onClose,openShare,closeP})=>{
     return (
         <Popup open={open} onClose={(e)=>{
             if (e)e.stopPropagation();
+            clearRetain();
             if (onClose)onClose();
+            if(closeP)closeP();
         }}>
             <div className={styles.container}>
                 <div className={styles.title}>{i18n.t("turnplate.retain_pop.title")}</div>