110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import {useEffect, useState} from "react";
|
|
import {pageCmsArticle} from "@/api/cms/cmsArticle";
|
|
import {CmsArticle} from "@/api/cms/cmsArticle/model";
|
|
import Taro from '@tarojs/taro'
|
|
import {useRouter} from '@tarojs/taro'
|
|
import {Image} from '@nutui/nutui-react-taro'
|
|
import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
|
|
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
|
|
|
/**
|
|
* 文章终极列表
|
|
* @constructor
|
|
*/
|
|
const Index = () => {
|
|
const {params} = useRouter();
|
|
const [navigation, setNavigation] = useState<CmsNavigation>()
|
|
const [childCategory, setChildCategory] = useState<CmsNavigation[]>([])
|
|
const [list, setList] = useState<CmsArticle[]>([])
|
|
|
|
const reload = async () => {
|
|
// 获取栏目ID
|
|
const categoryId = Number(params.id);
|
|
// 当前栏目信息
|
|
const navs = await getCmsNavigation(categoryId);
|
|
// 二级栏目
|
|
const childCateogry = await pageCmsNavigation({parentId: categoryId});
|
|
// 终极新闻列表
|
|
const articles = await pageCmsArticle({categoryId,limit: 50});
|
|
|
|
// 当前栏目信息
|
|
if (navs) {
|
|
setNavigation(navs);
|
|
Taro.setNavigationBarTitle({title: `${navs.title}`})
|
|
}
|
|
// 获取子级栏目
|
|
if (childCateogry) {
|
|
setChildCategory(childCateogry.list)
|
|
}
|
|
// 新闻列表
|
|
if (articles) {
|
|
setList(articles?.list || [])
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
reload().then()
|
|
}, [])
|
|
|
|
return (
|
|
<div className={'bg-red-200 h-full'}>
|
|
<div style={{padding: navigation?.span + 'px'}}>
|
|
<Image
|
|
src={navigation?.style}
|
|
style={{width: '100%', height: 'auto'}}
|
|
mode="widthFix"
|
|
/>
|
|
</div>
|
|
<div className={'py-3 px-3'}>
|
|
<div className={'grid grid-cols-2 gap-3'}>
|
|
{
|
|
// 子级栏目
|
|
childCategory.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={'flex flex-col justify-center items-center cursor-pointer'}
|
|
onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
|
|
>
|
|
{/* 图片容器 */}
|
|
<div className={'w-full mb-2 flex justify-center'}>
|
|
<img
|
|
className={'object-cover rounded-lg'}
|
|
src={item.icon}
|
|
alt={item.title || ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
<div className={'grid grid-cols-2 gap-3'}>
|
|
{
|
|
// 终极文章列表
|
|
list.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={'flex flex-col items-center cursor-pointer'}
|
|
onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
|
|
>
|
|
{/* 图片容器 */}
|
|
<div className={'w-full mb-2 flex justify-center'}>
|
|
<img
|
|
className={'object-cover rounded-lg'}
|
|
src={item.image}
|
|
alt={item.title || ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Index
|