55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import {useEffect, useState} from 'react'
|
|
import Taro from '@tarojs/taro'
|
|
import {Image} from '@nutui/nutui-react-taro'
|
|
import {getSiteInfo} from "@/api/layout";
|
|
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
|
|
|
const Page = () => {
|
|
|
|
const [navItems, setNavItems] = useState<CmsNavigation[]>([])
|
|
|
|
const reload = () => {
|
|
getSiteInfo().then(res => {
|
|
setNavItems(res.topNavs || []);
|
|
})
|
|
};
|
|
|
|
useEffect(() => {
|
|
reload();
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div className={'py-2 my-3 mx-2'}>
|
|
<div className={'bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-2'}>
|
|
{
|
|
navItems?.map((item, index) => (
|
|
<div
|
|
key={item.navigationId || index}
|
|
className={'flex flex-col justify-start items-center'}
|
|
onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
|
|
>
|
|
<Image
|
|
className={'shadow-xl rounded-lg'}
|
|
style={{
|
|
borderRadius: '8px',
|
|
width: '90px',
|
|
height: '90px',
|
|
objectFit: 'cover'
|
|
}}
|
|
src={item.icon}
|
|
mode="aspectFill"
|
|
/>
|
|
<div className={'mt-2 text-gray-700'} style={{fontSize: '14px'}}>
|
|
{item?.title}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
export default Page
|