提交 a321116c 作者: ZhangLingKun

功能:底栏功能完善

上级 23b03964
流水线 #7678 已通过 于阶段
in 5 分 3 秒
import React from 'react'; import React from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import { FooterWrap } from '@/components/layout/footer/styled'; import { FooterWrap } from '@/components/layout/footer/styled';
import QrcodePopover from '@/components/qrcodePopover';
const FooterView = () => { const FooterView = () => {
// 跳转外部网址
const handleLink = (url: string) => {
window.open(url);
};
// 关于列表 // 关于列表
const aboutList = [ const aboutList = [
{ {
...@@ -21,6 +26,22 @@ const FooterView = () => { ...@@ -21,6 +26,22 @@ const FooterView = () => {
alt: '官方社群', alt: '官方社群',
}, },
]; ];
// 集团列表
const groupList = [
{ name: '浙江科比特', url: 'https://www.mmcuav.cn/' },
{
name: '更多产业布局',
url: 'https://www.mmcuav.cn/about-mmc/industrial-layout/',
},
];
// 科比特航空
const mmcList = [
{ name: '产品中心', url: 'https://www.mmcuav.cn/product-center/' },
{ name: '解决方案', url: 'https://www.mmcuav.cn/solution/' },
// { name: '服务平台', url: 'https://www.mmcuav.cn/service-platform/' },
// { name: '技术支持', url: 'https://www.mmcuav.cn/support/' },
{ name: '关于我们', url: 'https://www.mmcuav.cn/about-mmc/' },
];
return ( return (
<FooterWrap> <FooterWrap>
<div className="footer-wrap"> <div className="footer-wrap">
...@@ -33,36 +54,48 @@ const FooterView = () => { ...@@ -33,36 +54,48 @@ const FooterView = () => {
</div> </div>
<div className="start-item"> <div className="start-item">
<div className="item-title">集团公司</div> <div className="item-title">集团公司</div>
<Button type={'link'} className="item-link"> {groupList.map((i, j) => (
浙江科比特 <Button
</Button> type={'link'}
<Button type={'link'} className="item-link"> className="item-link"
深圳科比特 key={j}
</Button> onClick={() => handleLink(i?.url)}
<Button type={'link'} className="item-link"> >
更多集团公司 {i?.name}
</Button> </Button>
))}
</div> </div>
<div className="start-item"> <div className="start-item">
<div className="item-title">合作伙伴</div> <div className="item-title">科比特航空</div>
<Button type={'link'} className="item-link"> {mmcList.map((i, j) => (
浙江科比特 <Button
</Button> type={'link'}
<Button type={'link'} className="item-link"> className="item-link"
深圳科比特 key={j}
</Button> onClick={() => handleLink(i?.url)}
<Button type={'link'} className="item-link"> >
更多合作伙伴 {i?.name}
</Button> </Button>
))}
</div> </div>
<div className="start-item"> <div className="start-item">
<div className="item-title">商家入驻</div> <div className="item-title">加入云享飞</div>
<Button type={'link'} className="item-link"> <QrcodePopover
合作咨询 path={'page-identity/identity-list/index'}
</Button> placement={'bottomLeft'}
<Button type={'link'} className="item-link"> >
加盟政策 <Button type={'link'} className="item-link">
</Button> 合作咨询
</Button>
</QrcodePopover>
<QrcodePopover
path={'page-identity/identity-list/index'}
placement={'bottomLeft'}
>
<Button type={'link'} className="item-link">
加盟政策
</Button>
</QrcodePopover>
</div> </div>
<div className="start-item"> <div className="start-item">
<div className="item-title">关于我们</div> <div className="item-title">关于我们</div>
...@@ -77,15 +110,21 @@ const FooterView = () => { ...@@ -77,15 +110,21 @@ const FooterView = () => {
</div> </div>
</div> </div>
<div className="footer-end"> <div className="footer-end">
<Button type={'link'} className="end-item"> <QrcodePopover path={'page-mine/help-center/index'}>
常见问题 <Button type={'link'} className="end-item">
</Button> 常见问题
<Button type={'link'} className="end-item"> </Button>
意见反馈 </QrcodePopover>
</Button> <QrcodePopover path={'page-mine/help-center/index'}>
<Button type={'link'} className="end-item"> <Button type={'link'} className="end-item">
加盟入驻 意见反馈
</Button> </Button>
</QrcodePopover>
<QrcodePopover path={'page-mine/sharefly-about/index'}>
<Button type={'link'} className="end-item">
免责声明
</Button>
</QrcodePopover>
<Button <Button
type={'link'} type={'link'}
className="end-item" className="end-item"
......
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, message, Popover } from 'antd'; import { Button, message, Popover } from 'antd';
import { PopoverProps } from 'antd/es/popover';
import { CommonAPI } from '@/api'; import { CommonAPI } from '@/api';
const QrcodePopover: React.FC<{ const QrcodePopover: React.FC<{
...@@ -7,10 +8,12 @@ const QrcodePopover: React.FC<{ ...@@ -7,10 +8,12 @@ const QrcodePopover: React.FC<{
text?: string; text?: string;
path?: string; path?: string;
scene?: string; scene?: string;
}> = ({ children, text, path, scene }) => { placement?: PopoverProps['placement'];
}> = ({ children, text, path, scene, placement }) => {
QrcodePopover.defaultProps = { QrcodePopover.defaultProps = {
path: 'pages/welcome/index', path: 'pages/welcome/index',
scene: 'type=share', scene: 'type=share',
placement: 'bottomRight',
}; };
// 登录二维码的地址 // 登录二维码的地址
const [qrCodeData, setQrCodeData] = useState<string>(); const [qrCodeData, setQrCodeData] = useState<string>();
...@@ -58,7 +61,7 @@ const QrcodePopover: React.FC<{ ...@@ -58,7 +61,7 @@ const QrcodePopover: React.FC<{
<Popover <Popover
content={content} content={content}
trigger={'click'} trigger={'click'}
placement="bottomRight" placement={placement || 'bottomRight'}
onOpenChange={handleOpenChange} onOpenChange={handleOpenChange}
> >
{children && children} {children && children}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论