Commit aea99fa1 authored by GuanHua's avatar GuanHua

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

parent 7286c296
...@@ -45,6 +45,14 @@ const router = [ ...@@ -45,6 +45,14 @@ const router = [
hide: true, hide: true,
component: '@/pages/appIntroduce', component: '@/pages/appIntroduce',
}, },
{
// app介绍页
path: '/app/download',
name: 'appDownload',
key: 'appDownload',
hide: true,
component: '@/pages/lxMall/appDownload',
},
{ {
// 移动端资讯详情 // 移动端资讯详情
path: '/information/mobile/detail', path: '/information/mobile/detail',
......
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
.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;
}
}
.detailContainer { .detailContainer {
padding: 24px 12px; padding: 24px 12px;
// padding-top: 64px; padding-top: 64px;
} }
.title { .title {
......
...@@ -36,55 +36,32 @@ const MobileDetail = (props) => { ...@@ -36,55 +36,32 @@ const MobileDetail = (props) => {
} }
}, []) }, [])
// const judgeExistApp = () => { const judgeExistApp = () => {
// if (navigator.userAgent.match(/android/i)) { const ifrSrc = 'lingxi://';
// // alert('android') if (navigator.userAgent.match(/android/i)) {
// // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为 const ifr = document.createElement('iframe');
// // 否则打开a标签的href链接 ifr.src = ifrSrc;
// let isInstalled; ifr.style.display = 'none';
// //下面是安卓端APP接口调用的地址,自己根据情况去修改 document.body.appendChild(ifr);
// // const ifrSrc = 'mqq://';
// const ifrSrc = 'com.baidu.tieba://';
// const ifr = document.createElement('iframe');
// ifr.src = ifrSrc;
// ifr.style.display = 'none';
// document.body.appendChild(ifr);
// setTimeout(function() { setTimeout(function() {
// document.body.removeChild(ifr); document.body.removeChild(ifr);
// window.location.href = "https://www.baidu.com" window.location.href = "/app/download"
// }, 1000); }, 1000);
// } }
// //ios判断 //ios判断
// if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
// //Animation://com.yz.animation const ifr = document.createElement( 'iframe' );
// let isInstalled; ifr.src = ifrSrc;
// //var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}'; ifr.style.display = 'none';
// //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 );
// }
// } document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
window.location.href = "/app/download"
}, 1000 );
}
}
return ( return (
<> <>
...@@ -92,11 +69,11 @@ const MobileDetail = (props) => { ...@@ -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" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
{/* <div className={styles.downloadCard}> <div className={styles.downloadCard}>
<ImageBox width={40} height={40} className={styles.downloadAppIcon} imgUrl={appInfo.logoUrl} /> <ImageBox width={40} height={40} className={styles.downloadAppIcon} imgUrl={appInfo.logoUrl} />
<span className={styles.downloadAppName}>{appInfo.name}</span> <span className={styles.downloadAppName}>{appInfo.name}</span>
<div className={styles.downloadBtn} onClick={() => judgeExistApp()}>打开</div> <div className={styles.downloadBtn} onClick={() => judgeExistApp()}>打开</div>
</div> */} </div>
{ {
newsDetail && ( newsDetail && (
<div className={styles.detailContainer}> <div className={styles.detailContainer}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment