183 lines
7.1 KiB
TypeScript
183 lines
7.1 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 {InfiniteLoading} from '@nutui/nutui-react-taro'
|
|
import {getCmsNavigation} from "@/api/cms/cmsNavigation";
|
|
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
|
|
|
/**
|
|
* 文章终极列表
|
|
* @constructor
|
|
*/
|
|
const List = () => {
|
|
const {params} = useRouter();
|
|
const [navigation, setNavigation] = useState<CmsNavigation>()
|
|
const [page, setPage] = useState(1)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [list, setList] = useState<CmsArticle[]>([])
|
|
|
|
const reload = async (currentPage = page) => {
|
|
// 获取栏目ID
|
|
const categoryId = Number(params.id);
|
|
console.log('honor/list 请求数据 - 页码:', currentPage, '分类ID:', categoryId);
|
|
|
|
// 当前栏目信息（只在第一页时获取）
|
|
if (currentPage === 1) {
|
|
const navs = await getCmsNavigation(categoryId);
|
|
if (navs) {
|
|
setNavigation(navs);
|
|
Taro.setNavigationBarTitle({title: `${navs.title}`})
|
|
}
|
|
}
|
|
|
|
// 终极新闻列表
|
|
const articles = await pageCmsArticle({categoryId, page: currentPage});
|
|
console.log('honor/list 获取到数据:', articles);
|
|
|
|
// 新闻列表
|
|
if (articles) {
|
|
if (articles?.list && articles?.list.length > 0) {
|
|
if (currentPage === 1) {
|
|
// 第一页，直接设置
|
|
setList(articles.list);
|
|
} else {
|
|
// 后续页面，追加到现有列表
|
|
setList(prevList => {
|
|
const newList = [...prevList, ...articles.list];
|
|
console.log('honor/list 合并后的列表长度:', newList.length);
|
|
return newList;
|
|
});
|
|
}
|
|
setHasMore(true);
|
|
} else {
|
|
console.log('honor/list 没有更多数据了');
|
|
setHasMore(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
const reloadMore = async () => {
|
|
const nextPage = page + 1;
|
|
console.log('honor/list 加载更多 - 下一页:', nextPage);
|
|
Taro.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
setPage(nextPage);
|
|
reload(nextPage).then().finally(() => {
|
|
Taro.hideLoading();
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
console.log('honor/list 初始化加载');
|
|
// 重置状态
|
|
setPage(1);
|
|
setList([]);
|
|
setHasMore(true);
|
|
// 加载第一页数据
|
|
reload(1).then();
|
|
}, [])
|
|
|
|
return (
|
|
<InfiniteLoading
|
|
className={'bg-red-200'}
|
|
style={{height: '100vh'}}
|
|
hasMore={hasMore}
|
|
onLoadMore={reloadMore}
|
|
loadingText={
|
|
<>
|
|
加载中
|
|
</>
|
|
}
|
|
loadMoreText={
|
|
<>
|
|
没有更多了
|
|
</>
|
|
}>
|
|
<div style={{padding: navigation?.span + 'px'}}>
|
|
<Image
|
|
src={navigation?.style || ''}
|
|
style={{width: '100%', height: 'auto'}}
|
|
mode="widthFix"
|
|
/>
|
|
</div>
|
|
<div className={'p-3'}>
|
|
<div
|
|
className={'relative'}
|
|
style={{
|
|
background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
|
|
backgroundSize: '120%',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center',
|
|
borderRadius: '40px',
|
|
width: '100%',
|
|
height: '65px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{/* 标题 */}
|
|
<div
|
|
className={'z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
|
|
>
|
|
{navigation?.categoryName}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={'rounded-lg py-3 px-2'}>
|
|
<div className={'grid grid-cols-1 gap-3'}>
|
|
{
|
|
// 终极文章列表
|
|
list.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={'flex items-center cursor-pointer'}
|
|
style={{
|
|
border: '3px solid #F2FE03',
|
|
backgroundColor: '#C01717',
|
|
color: '#F2FE03',
|
|
borderRadius: '16px',
|
|
}}
|
|
onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
|
|
>
|
|
{
|
|
// 图片容器
|
|
item.image ? (
|
|
<div className={'w-full m-3 flex justify-center'}
|
|
style={{
|
|
width: '108px',
|
|
height: '160px',
|
|
}}>
|
|
<Image className={'object-cover'} src={item.image}/>
|
|
</div>
|
|
) :
|
|
<div className={'px-2'}></div>
|
|
}
|
|
{/* 标题 */}
|
|
<div className={'flex flex-col items-start my-3 text-sm leading-tight'} style={{
|
|
color: '#F2FE03'
|
|
}}>
|
|
<p className={'font-bold py-1'}>{item.title}</p>
|
|
<p className={'text-xs line-clamp-6'} style={{
|
|
overflow: 'hidden',
|
|
width: item.image ? '240px' : '100%',
|
|
}}>
|
|
{item.comments || '暂无'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</InfiniteLoading>
|
|
)
|
|
}
|
|
export default List
|