Commit ec3c175c authored by 周宏民's avatar 周宏民

fix: 演示过渡页添加 隐藏 返回按钮事件

parent 642ef97c
Pipeline #90009 waiting for manual action with stages
...@@ -13,18 +13,8 @@ import { decode, encode } from 'js-base64'; ...@@ -13,18 +13,8 @@ import { decode, encode } from 'js-base64';
import styles from './index.less'; import styles from './index.less';
const IframeContainer = props => { const IframeContainer = props => {
const { linkUrl, onMessageBack, loading } = props; const { linkUrl, onMessageBack, loading } = props;
const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮,三维平台用
const onMessage = e => { const onMessage = e => {
console.log('onMessageBack ~ data:', e?.data);
if (e?.data.type === 'showBack') {
!showBackBtn && setShowBackBtn(true);
return;
}
if (e?.data.type === 'hideBack') {
showBackBtn && setShowBackBtn(false);
return;
}
onMessageBack && onMessageBack(e?.data); onMessageBack && onMessageBack(e?.data);
}; };
const onError = e => { const onError = e => {
......
...@@ -59,6 +59,7 @@ const Demonstration = props => { ...@@ -59,6 +59,7 @@ const Demonstration = props => {
const [newProductData, setNewProductData] = useState([]); const [newProductData, setNewProductData] = useState([]);
const [productConfig, setProductConfig] = useState({}); // 项目案例是否可免密跳转 const [productConfig, setProductConfig] = useState({}); // 项目案例是否可免密跳转
const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮,三维平台用
const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false); const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
// 退出 // 退出
const exit = () => { const exit = () => {
...@@ -133,19 +134,35 @@ const Demonstration = props => { ...@@ -133,19 +134,35 @@ const Demonstration = props => {
}; };
const onMessageBack = data => { const onMessageBack = data => {
if (!data?.type) return; if (!data?.type) return;
if (data?.type === 'runAfterFirstMounted' || data?.type === 'loginSuccess') { console.log('onMessageBack ~ data:', data);
switch (data?.type) {
// 页面加载完成
// 登录成功
case 'runAfterFirstMounted':
case 'loginSuccess':
jumpProgressEnd(); jumpProgressEnd();
setTimeout(() => { setTimeout(() => {
setJumpLoading(false); setJumpLoading(false);
}, 100); }, 100);
} else if (data?.type === 'loginError') { break;
case 'loginError':
message.warning('登录失败,请联系管理人员'); message.warning('登录失败,请联系管理人员');
handError(); handError();
} else if (data?.type === '无法连接') { break;
case '无法连接':
message.warning('该站点无法连接,请联系管理人员'); message.warning('该站点无法连接,请联系管理人员');
setTimeout(() => { setTimeout(() => {
handError(); handError();
}, 100); }, 100);
break;
case 'showBack':
!showBackBtn && setShowBackBtn(true);
break;
case 'hideBack':
showBackBtn && setShowBackBtn(false);
break;
default:
break;
} }
}; };
...@@ -391,18 +408,6 @@ const Demonstration = props => { ...@@ -391,18 +408,6 @@ const Demonstration = props => {
if (!linkUrl) return null; if (!linkUrl) return null;
return ( return (
<> <>
<div
className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
onClick={() => setLinkUrl('')}
>
<div className={styles.iframeBackLeft}>
<img src={arrowLeftImg} alt="返回" />
</div>
<div className={styles.iframeExitIcon}>
<img src={backImg} alt="返回" />
返回
</div>
</div>
<div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}> <div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}>
<Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} /> <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
</div> </div>
...@@ -566,6 +571,20 @@ const Demonstration = props => { ...@@ -566,6 +571,20 @@ const Demonstration = props => {
</> </>
) : null} ) : null}
</div> </div>
{linkUrl && showBackBtn ? (
<div
className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
onClick={() => setLinkUrl('')}
>
<div className={styles.iframeBackLeft}>
<img src={arrowLeftImg} alt="返回" />
</div>
<div className={styles.iframeExitIcon}>
<img src={backImg} alt="返回" />
返回
</div>
</div>
) : null}
{iframeItem} {iframeItem}
</div> </div>
); );
......
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