const { message, Spin } = antd;
function App() {
const lang = localStorage.getItem('aili_lang') ? localStorage.getItem('aili_lang') == 'zh' : true;
const mapContainerRef = React.useRef(null);
const mapRef = React.useRef(null);
const [yuyan, $yuyan] = React.useState(localStorage.getItem('aili_lang')||'zh');
const [center, setCenter] = React.useState({ longitude: 116.404, latitude: 39.915 });
const [slideList, $slideList] = React.useState([]);
// footer
const [linkes, $linkes] = React.useState([]);
const [inquiry, $inquiry] = React.useState({});
const [products, $products] = React.useState([]);
const [load, $load] = React.useState(false);
const [isLargeScreen, $isLargeScreen] = React.useState(window.innerWidth > 1024);
const t = (key) => {
const langData = i18n[lang ? 'zh' : 'en'];
return langData[key] || key;
};
React.useEffect(() => {
ALanimation();
// window.GetMenuInfo(new URLSearchParams({ siteId: lang ? 1 : 2, menuAlias: lang ? 'goumaizixun' : 'goumaizixunen' }));
getSlideList()
getFooter()
var form = document.getElementById('messageForm');
if (!form) { return; }
var feedback = document.getElementById('msgFeedback');
form.addEventListener('submit', function (e) {
e.preventDefault();
var name = (document.getElementById('msgName').value || '').trim();
var phone = (document.getElementById('msgPhone').value || '').trim();
var email = (document.getElementById('msgEmail').value || '').trim();
var content = (document.getElementById('msgContent').value || '').trim();
if (!name || !phone || !content) {
message.error(t('请填写姓名、联系电话和留言内容'))
return;
}
if (!/^[一-龥a-zA-Z·\s]{2,20}$/.test(name)) {
message.error(t('姓名格式不正确（2–20 个中文或英文字符）'))
return;
}
if (!/^1[3-9]\d{9}$/.test(phone)) {
message.error(t('请输入正确的 11 位手机号码'))
return;
}
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
message.error(t('邮箱格式不正确，请检查后重试'))
return;
}
if (content.length > 500) {
message.error(t('留言内容过长（最多 500 字）'))
return;
}
$load(true);
getJSON(`${API_BASE}/api/v1/Systen.WebApi/FeedbackApi/AddFeedback`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
RealName: name,
Tel: phone,
Email: email,
Content: content,
MenuAlias: 'message'
})
}).then(res => {
$load(false);
if (res.StatusCode == 1) {
message.success(res.Message || 'ok')
form.reset();
}
})
});
const handleResize = () => {
$isLargeScreen(window.innerWidth > 1024);
};
window.addEventListener('resize', handleResize);
// 清理事件监听
return () => window.removeEventListener('resize', handleResize);
}, []);
React.useEffect(() => {
if (slideList.length) {
const swiper = new Swiper('.swiper', {
loop: true, // 循环模式
autoplay: {
delay: 3000, // 3秒切换一次
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
}, [slideList])
// 初始化地图
React.useEffect(() => {
// 确保高德地图 API 已加载
if (typeof AMap === 'undefined') {
console.warn('高德地图 API 未加载');
return;
}
// 确保容器存在
if (!mapContainerRef.current) return;
// 如果地图已存在，先销毁
if (mapRef.current) {
mapRef.current.destroy();
mapRef.current = null;
}
// 公司坐标（默认重庆高新区金凤镇）
const lng = 106.29;
const lat = 29.51;
// 创建地图实例
const map = new AMap.Map(mapContainerRef.current, {
zoom: 16,
center: [lng, lat],
viewMode: '2D',
mapStyle: 'amap://styles/whitesmoke',
});
mapRef.current = map;
// 添加控件
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
map.addControl(new AMap.ToolBar({ position: 'RT' }));
map.addControl(new AMap.Scale());
});
// 添加标记
const marker = new AMap.Marker({
position: [lng, lat],
title: '艾丽公司',
animation: 'AMAP_ANIMATION_DROP',
});
map.add(marker);
// 信息窗口
const infoWindow = new AMap.InfoWindow({
content: '植恩生物技术股份有限公司
重庆市高新区金凤镇新州大道5号1-5幢
',
offset: new AMap.Pixel(0, -30),
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
// 自动打开信息窗口
setTimeout(() => {
infoWindow.open(map, marker.getPosition());
}, 500);
// 如果有地址，尝试解析
if (inquiry.Address && inquiry.Address !== '重庆市高新区金凤镇新州大道5号1-5幢') {
geocodeAddress(inquiry.Address, map, marker);
}
// 清理函数
return () => {
if (mapRef.current) {
mapRef.current.destroy();
mapRef.current = null;
}
};
}, [inquiry.Address]);
// 地址解析函数
const geocodeAddress = (address, map, marker) => {
if (typeof AMap === 'undefined') return;
const geocoder = new AMap.Geocoder({
city: '500000',
radius: 1000,
});
geocoder.getLocation(address, function(status, result) {
if (status === 'complete' && result.geocodes && result.geocodes.length > 0) {
const location = result.geocodes[0].location;
const lng = location.getLng();
const lat = location.getLat();
if (map) {
map.setCenter([lng, lat]);
}
if (marker) {
marker.setPosition([lng, lat]);
}
}
});
};
const getSlideList = async () => {
const obj = new URLSearchParams({ siteId: lang ? 1 : 2, count: 999, slideAlias: 'goumaizixun' });
const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/SlideListApi/GetSlideList?${obj}`);
if (res.StatusCode == 1) {
$slideList(res.Result || []);
}
}
const getFooter = () => {
getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: lang ? 'product' : 'producten', contentType: 'hot' }
)}`).then(res => $products(res?.Result?.DataList || []));
getJSON(`${API_BASE}/api/v1/Systen.WebApi/MenuApi/GetMenuList?${new URLSearchParams({ siteAlias: lang ? 'cn' : 'en', menuGroupName: 'foot' }
)}`).then(res => $linkes(res?.Result || []));
getJSON(`${API_BASE}/api/v1/Systen.WebApi/WebSiteApi/GetSiteByAlias?${new URLSearchParams({ alias: lang ? 'cn' : 'en' }
)}`).then(res => {
const inquiry = res?.Result || {};
if (!inquiry.Address) inquiry.Address = '重庆市高新区金凤镇新州大道5号1-5幢';
$inquiry(inquiry);
});
}
return (
{/* 导航栏 */}
{/* Hero Banner */}
{slideList.map(v => (
))}
{/*
{t('企业微信')}
{t('固定电话')}
023-68889003
{t('移动电话')}
023-68889003
{t('在线咨询')}
*/}
{/* 线上官方购买渠道 */}
{t('线上购买请认准各大平台旗舰店，谨防假冒伪劣产品')}
{/* 联系我们 */}
{/* 在线留言 */}
{/* Footer */}
