|
@@ -7,6 +7,7 @@ import { Config } from "@/models/appPageConifg";
|
|
|
import { useAjax } from "@/Hook/useAjax";
|
|
|
import useApi from "@/Hook/useApi";
|
|
|
import { Empty } from "antd";
|
|
|
+import usePrevious from "@/Hook/usePrevious";
|
|
|
// 热门书
|
|
|
export function HotCategory(props: {
|
|
|
data: {
|
|
@@ -20,6 +21,7 @@ export function HotCategory(props: {
|
|
|
}) {
|
|
|
const { token } = useToken()
|
|
|
const [tag, setTag] = useState<any>(null)
|
|
|
+ const prevTag = usePrevious(tag);
|
|
|
let { initialState } = useModel("@@initialState")
|
|
|
let { state } = useModel("appPageConifg")
|
|
|
const { data: { configs, componentName, showRightButton } } = props
|
|
@@ -34,41 +36,43 @@ export function HotCategory(props: {
|
|
|
}, [initialState?.selectApp, initialState?.currentUser?.distributorId, state.index])
|
|
|
let apiobj = useApi(initialState?.selectApp?.appCategory || 1)
|
|
|
let getList = useAjax((params) => apiobj.getBookPageList(params))
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- if (!tag) {
|
|
|
- setTag(configs?.[0]?.categoryId)
|
|
|
- }
|
|
|
- if (tag) {
|
|
|
+ if (tag && tag !== prevTag && configs && configs.length > 0 && configs?.[0]?.categoryId) {
|
|
|
+ console.log("tag变化", tag)
|
|
|
getList.run({ ...publicData, categoryId: tag, pageNum: 1, pageSize: 8 }).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
setBookData(res?.data?.records)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- if (configs) {
|
|
|
+ }, [tag, prevTag, configs, publicData])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (configs && configs?.length > 0) {
|
|
|
+ if (!tag && configs?.[0]?.categoryId) {
|
|
|
+ console.log("tag不存在", configs)
|
|
|
+ setTag(configs?.[0]?.categoryId)
|
|
|
+ }
|
|
|
let isExist = configs?.find(i => i.categoryId == tag)
|
|
|
if (!isExist) {
|
|
|
+ console.log("tag变更")
|
|
|
setTag(configs?.[0]?.categoryId)
|
|
|
- getList.run({ ...publicData, categoryId: configs?.[0]?.categoryId, pageNum: 1, pageSize: 8 }).then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- setBookData(res?.data?.records)
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
if (configs.length === 0) {
|
|
|
setTag(null)
|
|
|
setBookData([])
|
|
|
}
|
|
|
}
|
|
|
- }, [tag, configs, publicData])
|
|
|
+ }, [tag, configs])
|
|
|
return <div className={`${styles.hot_category}`}>
|
|
|
<Header title={componentName || "热门分类"} btnText={"全部分类"} showBtn={showRightButton} />
|
|
|
<div className={styles.tags}>
|
|
|
{
|
|
|
- configs?.map(item => {
|
|
|
- return <div
|
|
|
+ configs?.map((item, index) => {
|
|
|
+ return item?.categoryId && <div
|
|
|
className={`${styles.tag} ${tag === item.categoryId ? styles.tag_ac : ""}`}
|
|
|
- key={item.categoryId}
|
|
|
+ key={item.categoryId || index}
|
|
|
onClick={() => {
|
|
|
setTag(item.categoryId || "")
|
|
|
}}
|
|
@@ -80,21 +84,21 @@ export function HotCategory(props: {
|
|
|
</div>
|
|
|
<div className={styles.list}>
|
|
|
{
|
|
|
- configs?.find(i => i.categoryId == tag)?.bookIds ? configs?.find(i => i.categoryId == tag)?.bookInfos?.map((item: any) => {
|
|
|
- return <div key={item.id} className={styles.box}>
|
|
|
+ configs?.find(i => i.categoryId == tag)?.bookIds ? configs?.find(i => i.categoryId == tag)?.bookInfos?.map((item: any, index:any) => {
|
|
|
+ return <div key={item.id || index} className={styles.box}>
|
|
|
<img src={item?.picUrl} onError={(e: any) => {
|
|
|
e.target.src = localStorage.getItem("nocover")
|
|
|
}} />
|
|
|
<span>{item?.bookName}</span>
|
|
|
</div>
|
|
|
- }) : bookData?.length > 0 ? bookData?.map((item: any) => {
|
|
|
- return <div key={item} className={styles.box}>
|
|
|
+ }) : bookData?.length > 0 ? bookData?.map((item: any, index) => {
|
|
|
+ return <div key={item || index} className={styles.box}>
|
|
|
<img src={item?.longBookInfo?.picUrl || item?.shortBookInfoVO?.picUrl} onError={(e: any) => {
|
|
|
e.target.src = localStorage.getItem("nocover")
|
|
|
}} />
|
|
|
<span>{item?.longBookInfo?.bookName || item?.shortBookInfoVO?.bookName}</span>
|
|
|
</div>
|
|
|
- }) : <div style={{justifyContent:'center',display:'flex',width:'100%'}}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置"/></div>
|
|
|
+ }) : <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置" /></div>
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|