|
@@ -1,41 +1,110 @@
|
|
|
-import React, { useEffect, useState } from 'react';
|
|
|
+import React, { useEffect, useMemo, useState } from 'react';
|
|
|
import { observer, inject } from 'mobx-react';
|
|
|
import { useDidHide, useDidShow } from '@tarojs/taro';
|
|
|
//==========components组件引用========================
|
|
|
import TopNavBar from '@src/components/TopNavBar';
|
|
|
import ScrollViewHoc from '@src/components/ScrollView';
|
|
|
-import Empty from '@src/components/Empty';
|
|
|
import { Store } from '@src/app';
|
|
|
+import useApi from '@src/Hook/useApi';
|
|
|
+import BannerBox from '@src/components/PupPetry/BannerBox'
|
|
|
+import { View } from '@tarojs/components';
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import BookHead from '@src/components/PupPetry/BookHead';
|
|
|
+import BookHotTabs from '@src/components/PupPetry/BookHotTabs';
|
|
|
+import BookboxColumnSmall from '@src/components/PupPetry/BookBox/BookboxColumnSmall';
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
store: Store;
|
|
|
}
|
|
|
-
|
|
|
const Index: React.FC<Props> = ({ store }) => {
|
|
|
- const [pageShow,setPageShow]=useState(false)//防止小程序切换页面组件不会被真实卸载,阻止不必要的操作
|
|
|
+ const { appInfoStore, bookStore, indexStore } = store
|
|
|
+ const { indexComponents } = useApi(appInfoStore)
|
|
|
+ const [pageShow, setPageShow] = useState(false)//防止小程序切换页面组件不会被真实卸载,阻止不必要的操作
|
|
|
+ // 首页配置信息
|
|
|
+ const indexConfig = useMemo(() => {
|
|
|
+ let obj = {}
|
|
|
+ appInfoStore.appComponent?.forEach((item, index) => {
|
|
|
+ return obj[item.componentType] = { ...item, eq: index }
|
|
|
+ })
|
|
|
+ return obj
|
|
|
+ }, [indexComponents])
|
|
|
+ // 页面显示请求数据
|
|
|
+ useEffect(() => {
|
|
|
+ if (pageShow && appInfoStore.token) {
|
|
|
+ indexCompontent()
|
|
|
+ }
|
|
|
+ }, [pageShow, appInfoStore.token, , bookStore.workDirection, appInfoStore.appComponent]); // Dependency array, runs effect only once on mount and unmount
|
|
|
+ // 分类改变重新请求分类列表
|
|
|
useEffect(() => {
|
|
|
- log("store.appInfoStore.appInfo", store.appInfoStore.appInfo);
|
|
|
- log("APP", app);
|
|
|
- return () => {
|
|
|
- log("componentWillUnmount");
|
|
|
- };
|
|
|
- }, [store.appInfoStore.appInfo,pageShow]); // Dependency array, runs effect only once on mount and unmount
|
|
|
+ getHotBooks(indexStore.indexCategoryId)
|
|
|
+ }, [indexStore.indexCategoryId])
|
|
|
|
|
|
// 使用 useDidShow 代替 onShow
|
|
|
useDidShow(() => {
|
|
|
+ // 分享消息配置
|
|
|
setPageShow(true)
|
|
|
- log("Page is shown or brought to foreground");
|
|
|
+ // log("Page is shown or brought to foreground");
|
|
|
});
|
|
|
-
|
|
|
// 使用 useDidHide 如果需要在页面隐藏时做一些处理
|
|
|
useDidHide(() => {
|
|
|
setPageShow(false)
|
|
|
- log("Page is hidden or sent to background");
|
|
|
+ // log("Page is hidden or sent to background");
|
|
|
});
|
|
|
+ // 处理首页展示的组件的请求
|
|
|
+ const indexCompontent = () => {
|
|
|
+ // 小程序的组件配置
|
|
|
+ Object.keys(indexConfig)?.forEach(key => {
|
|
|
+ switch (key) {
|
|
|
+ case "banners"://轮播
|
|
|
+ getBanners()
|
|
|
+ break;
|
|
|
+ case "hot_category"://热门分类
|
|
|
+ getHotCategory()
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取banners
|
|
|
+ const getBanners = () => {
|
|
|
+ indexComponents?.banners(bookStore.workDirection)
|
|
|
+ }
|
|
|
+ // 获取热门分类
|
|
|
+ const getHotCategory = () => {
|
|
|
+ indexComponents?.hot_category(bookStore.workDirection).then((res: any) => {
|
|
|
+ let data = res?.data?.data
|
|
|
+ if (data?.length > 0) {
|
|
|
+ getHotBooks(data[0].id)
|
|
|
+ }
|
|
|
+ console.log("data====>", data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 热门分类书籍
|
|
|
+ const getHotBooks = (categoryId) => {
|
|
|
+ if (categoryId) {
|
|
|
+ indexComponents?.hot_books(bookStore.workDirection, categoryId)
|
|
|
+ }
|
|
|
+ }
|
|
|
return (
|
|
|
<ScrollViewHoc>
|
|
|
- <Empty />
|
|
|
+ <View style={{ display: "flex", flexFlow: 'column' }}>
|
|
|
+ {/* 轮播 */}
|
|
|
+ {indexConfig['banners'] && <View style={{ order: indexConfig['banners'].eq }}>
|
|
|
+ <BannerBox data={indexStore?.indexBanners || []} />
|
|
|
+ </View>}
|
|
|
+ {/* 热门分类 */}
|
|
|
+ {indexConfig['hot_category'] && <View style={{ order: indexConfig['banners'].eq }}>
|
|
|
+ <BookHead title="热门分类" fitTitle="全部分类" imgUrl={require('../../icon/right.png')} fitOnBack={() => { Taro.switchTab({ url: '/pages/classify/index' }) }} />
|
|
|
+ <BookHotTabs hotValue={indexStore?.indexHotCategory || []} />
|
|
|
+ <View className='w row4'>
|
|
|
+ {
|
|
|
+ indexStore?.indexHotBooks?.map((item, index) => {
|
|
|
+ return <View key={index}><BookboxColumnSmall {...item} /></View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </View>}
|
|
|
+ </View>
|
|
|
</ScrollViewHoc>
|
|
|
);
|
|
|
};
|