feat: 添加移动端资讯详情下载app的功能

config/router.ts

@@ -45,6 +45,14 @@ const router = [
         hide: true,
         component: '@/pages/appIntroduce',
       },
+       {
+        // app介绍页
+        path: '/app/download',
+        name: 'appDownload',
+        key: 'appDownload',
+        hide: true,
+        component: '@/pages/lxMall/appDownload',
+      },
       {
         // 移动端资讯详情
         path: '/information/mobile/detail',

src/pages/lxMall/appDownload/index.tsx

+import React, { useEffect, useState } from 'react'
+import { Button } from 'antd'
+import { Helmet } from 'umi'
+import { GlobalConfig } from '@/global/config'
+import { PublicApi } from '@/services/api'
+import styles from './styles.less'
+
+const AppDownload = () => {
+
+  const shopInfo = GlobalConfig.web.shopInfo.filter((item) => item.type === 1 && item.environment === 4)
+
+  const appInfo: any = shopInfo ? shopInfo[0] : {}
+
+  const [appLink, setAppLink] = useState<{ ios: string, android: string}>()
+
+  const [maskVisble, setMaskVisible] = useState<boolean>(false)
+
+  const getDownLoadUrl = () => {
+    PublicApi.getManageAppDownloadLinkFind({ status: "1" }).then((res) => {
+      if (res.code === 1000 && res.data) {
+        const temp: any = {}
+        res.data.forEach((item) => {
+          switch(item.title) {
+            case 1:
+              temp.ios = item.link
+              break
+            case 2:
+              temp.android = item.link
+              break
+            default:
+              break
+          }
+        })
+        setAppLink(temp)
+      }
+    })
+  }
+
+  useEffect(() => {
+    getDownLoadUrl()
+  }, [])
+
+  const judegeIsWeiXin = (): boolean => {
+    const ua = navigator.userAgent.toLowerCase();
+    if (String(ua.match(/MicroMessenger/i)) === "micromessenger") {
+      return true
+    }
+    return false
+  }
+
+  const handleDownload = () => {
+    // 如果是在微信
+    if (judegeIsWeiXin()) {
+      console.log("isweixin")
+      setMaskVisible(true)
+    } else {
+      if (navigator.userAgent.match(/android/i)) {
+        if (appLink.android) {
+          window.location.href = appLink.android
+        }
+
+      }
+      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
+        if (appLink.ios) {
+          window.location.href = appLink.ios
+        }
+      }
+    }
+  }
+
+  return (
+    <>
+      <Helmet>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+        <title>{appInfo.name}</title>
+      </Helmet>
+      <div className={styles.downloadContaiern}>
+        <div className={styles.logoWrap}>
+          <img className={styles.appLogo} src={appInfo.logoUrl} />
+        </div>
+        <div className={styles.appName}>{appInfo.name}</div>
+        <div className={styles.descrip}>商业数字化有瓴犀</div>
+        <Button className={styles.downloadBtn} type="primary" onClick={() => handleDownload()}>点击下载手机客户端</Button>
+      </div>
+      {
+        maskVisble && (
+          <div className={styles.mask}>
+            <div className={styles.maskBody}>
+              <span>点击右上角选择浏览器打开</span>
+            </div>
+          </div>
+        )
+      }
+    </>
+  )
+}
+
+export default AppDownload

src/pages/lxMall/appDownload/styles.less

+.downloadContaiern {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+
+  .logoWrap {
+    padding-top: 170px;
+    padding-bottom: 16px;
+
+    .appLogo {
+      width: 88px;
+      height: 88px;
+      border-radius: 8px;
+    }
+  }
+
+  .appName {
+    font-size: 18px;
+    font-size: 500;
+  }
+
+  .descrip {
+    margin-top: 8px;
+    font-size: 12px;
+  }
+
+  .downloadBtn {
+    height: 36px;
+    margin-top: 36px;
+  }
+}
+
+.mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .6);
+  z-index: 9;
+
+  .maskBody {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #FFF;
+    padding-top: 120px;
+  }
+}

src/pages/lxMall/information/mobileDetail.less

 .detailContainer {
   padding: 24px 12px;
-  // padding-top: 64px;
+  padding-top: 64px;
 }
 
 .title {

src/pages/lxMall/information/mobileDetail.tsx

@@ -36,55 +36,32 @@ const MobileDetail = (props) => {
     }
   }, [])
 
-  // const judgeExistApp = () => {
-  //   if (navigator.userAgent.match(/android/i)) {
-  //     // alert('android')
-  //     // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
-  //     // 否则打开a标签的href链接
-  //     let isInstalled;
-  //     //下面是安卓端APP接口调用的地址，自己根据情况去修改
-  //     // const ifrSrc =  'mqq://';
-  //     const ifrSrc = 'com.baidu.tieba://';
-  //     const ifr = document.createElement('iframe');
-  //     ifr.src = ifrSrc;
-  //     ifr.style.display = 'none';
-  //     document.body.appendChild(ifr);
+  const judgeExistApp = () => {
+    const ifrSrc = 'lingxi://';
+    if (navigator.userAgent.match(/android/i)) {
+      const ifr = document.createElement('iframe');
+      ifr.src = ifrSrc;
+      ifr.style.display = 'none';
+      document.body.appendChild(ifr);
 
-  //     setTimeout(function() {
-  //       document.body.removeChild(ifr);
-  //       window.location.href = "https://www.baidu.com"
-  //     }, 1000);
-  //   }
-  //   //ios判断
-  //   if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))  {
-  //     //Animation://com.yz.animation
-  //     let isInstalled;
-  //     //var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';
-  //     //var jsongz =JSON.parse(gz);
-
-  //     //下面是IOS调用的地址，自己根据情况去修改
-  //     const ifrSrc =  'weixin://';
-  //     const ifr = document.createElement( 'iframe' );
-  //     ifr.src = ifrSrc;
-  //     ifr.style.display =  'none' ;
-  //     ifr.onload = function() {
-  //       // alert('Is installed.');
-  //       isInstalled =  true ;
-  //       alert(isInstalled);
-  //       document.getElementById( 'openApp1' ).click();
-  //     };
-  //     ifr.onerror = function() {
-  //       // alert('May be not installed.');
-  //       isInstalled =  false ;
-  //       alert(isInstalled);
-  //     }
-  //     document.body.appendChild(ifr);
-  //     setTimeout(function() {
-  //       document.body.removeChild(ifr);
-  //     }, 1000 );
-  //   }
+      setTimeout(function() {
+        document.body.removeChild(ifr);
+        window.location.href = "/app/download"
+      }, 1000);
+    }
+    //ios判断
+    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))  {
+      const ifr = document.createElement( 'iframe' );
+      ifr.src = ifrSrc;
+      ifr.style.display = 'none';
 
-  // }
+      document.body.appendChild(ifr);
+      setTimeout(function() {
+        document.body.removeChild(ifr);
+        window.location.href = "/app/download"
+      }, 1000 );
+    }
+  }
 
   return (
     <>
@@ -92,11 +69,11 @@ const MobileDetail = (props) => {
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
         <title>{title}</title>
       </Helmet>
-      {/* <div className={styles.downloadCard}>
+      <div className={styles.downloadCard}>
         <ImageBox width={40} height={40} className={styles.downloadAppIcon} imgUrl={appInfo.logoUrl}  />
         <span  className={styles.downloadAppName}>{appInfo.name}</span>
         <div  className={styles.downloadBtn} onClick={() => judgeExistApp()}>打开</div>
-      </div> */}
+      </div>
       {
         newsDetail && (
           <div className={styles.detailContainer}>