90 lines
4.1 KiB
TypeScript
90 lines
4.1 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import type { MouseEvent } from 'react'
|
|
import { PRIMARY_NAV } from '@/data/nav'
|
|
import { getCMSConfig, useCMS, useCMSTexts } from '@/services/cms'
|
|
|
|
export default function Footer() {
|
|
const { data: config } = useCMS(getCMSConfig, null)
|
|
const { data: texts } = useCMSTexts()
|
|
const hotline = String(config?.hotline || '').trim()
|
|
const phoneLink = hotline.replace(/[^\d+]/g, '')
|
|
const companyName = texts['footer.company'] || '成都阿美巴企业管理咨询有限公司'
|
|
const address = String(config?.contact_address || '四川省成都市双流区正兴街道湖畔路北段366号1栋3楼1号').trim()
|
|
// Desktop falls back to AMap's web search. On phones use the operating system's
|
|
// map-navigation scheme so the user's installed/default map app handles the route.
|
|
const amapLink = `https://uri.amap.com/search?keyword=${encodeURIComponent(address)}&city=${encodeURIComponent('成都')}&view=map&src=ameiba`
|
|
const openNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
|
|
const ua = window.navigator.userAgent
|
|
const destination = encodeURIComponent(address)
|
|
if (/Android/i.test(ua)) {
|
|
event.preventDefault()
|
|
window.location.href = `geo:0,0?q=${destination}`
|
|
} else if (/iPhone|iPad|iPod/i.test(ua)) {
|
|
event.preventDefault()
|
|
window.location.href = `maps://?q=${destination}`
|
|
}
|
|
}
|
|
return (
|
|
<footer className="site-footer">
|
|
<div className="container footer-grid">
|
|
<div>
|
|
<div className="footer-brand">{companyName}</div>
|
|
<p className="footer-desc">
|
|
{texts['footer.description'] || config?.slogan || '帮助企业看清位置、找到方向、持续进化。'}
|
|
</p>
|
|
<a className="footer-address" href={amapLink} onClick={openNavigation} aria-label={`导航至${address}`}>
|
|
<span>{texts['footer.address_title'] || '公司地址'}</span>
|
|
<strong>{address}</strong>
|
|
<em>{texts['footer.navigate_label'] || '打开地图导航'} →</em>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h4>{texts['footer.navigation_title'] || '网站导航'}</h4>
|
|
<ul>
|
|
{PRIMARY_NAV.map(n => (
|
|
<li key={n.key}>
|
|
<Link to={n.path}>{n.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>{texts['footer.action_title'] || '行动入口'}</h4>
|
|
<ul>
|
|
<li>
|
|
<Link to="/self-check">看看你的企业（轻量对照）</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/contact">咨询获取方案</Link>
|
|
</li>
|
|
</ul>
|
|
{(hotline || config?.contact_email) && <p className="footer-desc" style={{marginTop:16}}>
|
|
{hotline && <a className="footer-contact-link" href={`tel:${phoneLink}`} aria-label={`拨打电话 ${hotline}`}>{hotline}</a>}
|
|
{hotline && config?.contact_email && ' · '}
|
|
{config?.contact_email && <a className="footer-contact-link" href={`mailto:${config.contact_email}`}>{config.contact_email}</a>}
|
|
</p>}
|
|
</div>
|
|
<div className="footer-qr">
|
|
<h4>{texts['footer.qr_title'] || '关注我们'}</h4>
|
|
<div className="footer-qr-list">
|
|
<figure>
|
|
<img src="/images/xcx.jpg" alt={texts['footer.xcx_qr_label'] || '微信小程序二维码'} />
|
|
<figcaption>{texts['footer.xcx_qr_label'] || '微信小程序'}</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="/images/fwh.jpg" alt={texts['footer.fwh_qr_label'] || '微信服务号二维码'} />
|
|
<figcaption>{texts['footer.fwh_qr_label'] || '微信服务号'}</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container footer-bottom">
|
|
<p>{texts['footer.copyright'] || '© 2026 成都阿美巴企业管理咨询有限公司 | aiameiba.com · ameiba.cn'}</p>
|
|
<p className="footer-links">
|
|
<Link to="/contact">联系我们</Link> · <Link to="/self-check">看看你的企业</Link>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|