110 lines
4.3 KiB
TypeScript
110 lines
4.3 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});
|
|
|
|
// 当前栏目信息
|
|
if (navs) {
|
|
setNavigation(navs);
|
|
}
|
|
// 获取子级栏目
|
|
if (childCateogry) {
|
|
setChildCategory(childCateogry.list)
|
|
}
|
|
// 新闻列表
|
|
if (articles) {
|
|
setList(articles?.list || [])
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
reload()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div style={{padding: navigation?.span + 'px'}}>
|
|
<Image src={navigation?.style} width={'100%'}
|
|
height={'auto'}/>
|
|
</div>
|
|
<div className={'bg-white rounded-lg 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: `./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-3'}>
|
|
{
|
|
// 终极文章列表
|
|
list.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={'flex flex-col items-center cursor-pointer my-1'}
|
|
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 className={'text-xs text-center text-gray-800 leading-tight px-1'}>
|
|
{item.title}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
export default Index
|