55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import {useEffect, useState} from "react";
|
|
import {Tabs, Loading} from '@nutui/nutui-react-taro'
|
|
import {pageCmsArticle} from "@/api/cms/cmsArticle";
|
|
import {CmsArticle} from "@/api/cms/cmsArticle/model";
|
|
import ArticleList from "./ArticleList";
|
|
|
|
const ArticleTabs = (props: any) => {
|
|
const [loading, setLoading] = useState<boolean>(true)
|
|
const [tab1value, setTab1value] = useState<string | number>('0')
|
|
const [list, setList] = useState<CmsArticle[]>([])
|
|
|
|
const reload = async (value) => {
|
|
const {data} = props
|
|
pageCmsArticle({categoryId: data[value].navigationId, page: 1, limit: 10}).then((res) => {
|
|
res && setList(res?.list || [])
|
|
})
|
|
.catch(err => {
|
|
console.log(err)
|
|
})
|
|
.finally(() => {
|
|
setTab1value(value)
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
reload(0).then()
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Loading className={'px-2'}>加载中</Loading>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Tabs
|
|
value={tab1value}
|
|
onChange={(value) => {
|
|
reload(value).then()
|
|
}}
|
|
>
|
|
{props.data?.map((item, index) => {
|
|
return (
|
|
<Tabs.TabPane title={item.categoryName} key={index}/>
|
|
)
|
|
})}
|
|
</Tabs>
|
|
<ArticleList data={list}/>
|
|
</>
|
|
)
|
|
}
|
|
export default ArticleTabs
|