pref: 演示过渡页添加 宣传页

src/pages/bootpage/template/demonstration/components/Bottom/index.js

@@ -25,7 +25,7 @@ const BottomItem = props => {
   const toPage = (url, col) => {
     if (!url.includes('https')) return;
     if (!url.includes('user/noscret') || projectConfig[col['平台名称']]) {
-      return handToPage(url);
+      return handToPage(url, col['平台名称']);
     }
     message.warning('该账号没有权限，请联系管理人员');
   };

src/pages/bootpage/template/demonstration/components/Left/index.js

@@ -17,7 +17,7 @@ const LeftItem = props => {
     if (row?.['产品地址']) {
       if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误，请联系管理人员');
 
-      handToProduct(row['产品地址'], row['产品名称']);
+      handToProduct(row['产品地址'], row['产品名称'], row['产品类型']);
     } else {
       return message.warning('未配置产品地址，请联系管理人员');
     }

src/pages/bootpage/template/demonstration/components/Right/index.js

@@ -16,7 +16,7 @@ const RightItem = props => {
     if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误，请联系管理人员');
 
     if (row['产品地址'] && row['产品地址'].includes('https')) {
-      handToProduct(row['产品地址'], row['产品名称']);
+      handToProduct(row['产品地址'], row['产品名称'], row['产品名称']);
     }
   };
   const renderRow = (row, index) => {

src/pages/bootpage/template/demonstration/index.js

@@ -53,6 +53,8 @@ const Demonstration = props => {
     boxHeight: 910,
   });
   const [linkUrl, setLinkUrl] = useState('');
+  const [pageData, setPageData] = useState({}); // 宣传页配置
+  const [transitionImg, setTransitionImg] = useState(''); // 宣传页过渡图
   const [projectData, setProjectData] = useState([]);
   const [configData, setConfigData] = useState([]);
   const [productData, setProductData] = useState([]);
@@ -94,6 +96,15 @@ const Demonstration = props => {
       }
     }, 100);
   };
+  const startLoading = name => {
+    console.log('🚀 ~ name:', name, pageData[name]);
+    if (pageData?.[name]) {
+      setTransitionImg(pageData[name]);
+    } else {
+      setJumpLoading(true);
+      jumpProgressStart();
+    }
+  };
   const jumpProgressEnd = () => {
     setProgressValue2(100);
     timer2.current && clearInterval(timer2.current);
@@ -110,11 +121,10 @@ const Demonstration = props => {
       timer2.current = null;
     }, time * 1000);
   };
-  const handToProduct = (url, name) => {
-    console.log('🚀 ~ url, name:', url, name, productConfig);
+  const handToProduct = (url, name, type) => {
+    console.log('🚀 ~ url, name:', url, name, type, productConfig);
     if (!productConfig?.[name]) return message.warning('该账号没有权限，请联系管理员');
-    setJumpLoading(true);
-    jumpProgressStart();
+    startLoading(type);
 
     setLinkUrl(url);
     let time = 15;
@@ -166,11 +176,10 @@ const Demonstration = props => {
     }
   };
 
-  const handToPage = url => {
+  const handToPage = (url, name) => {
     if (!url) return message.warning('该环境未配置，请联系管理员');
     if (!url.includes('https')) return;
-    setJumpLoading(true);
-    jumpProgressStart();
+    startLoading(name);
     setLinkUrl(url);
     startTiming(4);
   };
@@ -334,6 +343,52 @@ const Demonstration = props => {
       setProductConfig(obj);
     });
   };
+  const imgLoad = data =>
+    new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = data.url;
+      img.onload = () => {
+        resolve(data);
+      };
+      img.onerror = () => {
+        resolve(null);
+      };
+    });
+  const getConfig = () => {
+    const params = {
+      ignoreSite: true,
+      accountName: '宣传页',
+      isAll: true,
+    };
+    appService.getAccountPageList(params).then(res => {
+      const dataStr1 = res?.data?.jsonData || '';
+      const data1 = dataStr1 ? JSON.parse(dataStr1) : [];
+      const obj = {};
+      const reqArr = [];
+      data1.forEach(d => {
+        const key = d['名称'];
+        if (key) {
+          const url = `/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${d['图片']}`;
+          reqArr.push(
+            imgLoad({
+              name: key,
+              url,
+            }),
+          );
+        }
+      });
+      Promise.all(reqArr).then(result => {
+        if (result.length > 0) {
+          result.forEach(r => {
+            if (r) {
+              obj[r.name] = r.url;
+            }
+          });
+          setPageData(obj);
+        }
+      });
+    });
+  };
   const getData = () => {
     setLoading(true);
     const req1 = appService.getAccountPageList({
@@ -399,8 +454,12 @@ const Demonstration = props => {
 
       setNewProductData(newList);
       setLoading(false);
+      getConfig();
     });
   };
+  const onEndPage = () => {
+    setTransitionImg('');
+  };
   const onendLoading = () => {
     jumpProgressEnd();
   };
@@ -498,7 +557,15 @@ const Demonstration = props => {
           </div>
         </div>
       ) : null} */}
-      {jumpLoading ? (
+      {transitionImg ? (
+        <div className={styles.demonstrationLoadPage} key="jumpLoading">
+          <div className={styles.demonstrationLoadPageImg}>
+            <img src={transitionImg} alt="" />
+            <div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage} />
+          </div>
+        </div>
+      ) : null}
+      {jumpLoading && !transitionImg ? (
         <div className={styles.demonstrationLoad} key="jumpLoading">
           <div style={{ width: '285px' }}>
             <LoadPage percent={progressValue2 / 100} text="页面加载中~" />

src/pages/bootpage/template/demonstration/index.less

@@ -83,6 +83,42 @@
 
   }
 
+  .demonstrationLoadPage {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1090;
+    overflow-y: auto;
+  }
+
+  .demonstrationLoadPageImg {
+    height: auto;
+    width: 100%;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
+
+    .demonstrationLoadPageBtn {
+      position: absolute;
+      bottom: 15px;
+      left: calc(50% - 188px);
+      width: 376px;
+      height: 90px;
+      background: url('@{imgSrc}/jumpBtn.png') no-repeat center center;
+      background-size: 100% 100%;
+      z-index: 1095;
+      cursor: pointer;
+      transition: all 0.2s;
+
+    }
+    .demonstrationLoadPageBtn:hover {
+      transform: scale(1.1);
+    }
+  }
 
   .demonstrationLoad {
     width: 100%;
@@ -417,3 +453,4 @@
   -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
   animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
+