diff --git a/src/components/index.ts b/src/components/index.ts index 472a489..262fea6 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export * from "./empty"; export * from "./footer"; export * from "./bar-footer"; +export * from "./keep-alive"; diff --git a/src/components/keep-alive/index.tsx b/src/components/keep-alive/index.tsx new file mode 100644 index 0000000..94a10f4 --- /dev/null +++ b/src/components/keep-alive/index.tsx @@ -0,0 +1,29 @@ +import { useUpdate } from "ahooks"; +import { useEffect, useRef } from "react"; +import { useLocation, useOutlet } from "react-router-dom"; + +function KeepAlive() { + const componentList = useRef(new Map()); + const outLet = useOutlet(); + const { pathname } = useLocation(); + const forceUpdate = useUpdate(); + + useEffect(() => { + if (!componentList.current.has(pathname)) { + componentList.current.set(pathname, outLet); + } + forceUpdate(); + }, [pathname]); + + return ( +
+ {Array.from(componentList.current).map(([key, component]) => ( +
+ {component} +
+ ))} +
+ ); +} + +export default KeepAlive; diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index f43f2ca..5771f68 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -4,17 +4,25 @@ import { DropdownRef } from "antd-mobile/es/components/dropdown"; import { user } from "../../api/index"; import styles from "./index.module.scss"; import { useSelector } from "react-redux"; +import { + setTab, + getTab, + getCategory, + setCategory, + setCategoryName, + getCategoryName, +} from "../../utils/index"; import { Footer, TabBarFooter, Empty } from "../../components"; import { CoursesModel } from "./compenents/courses-model"; const IndexPage = () => { const ref = useRef(null); const [loading, setLoading] = useState(false); - const [tabKey, setTabKey] = useState("0"); + const [tabKey, setTabKey] = useState(getTab()); const [coursesList, setCoursesList] = useState([]); const [categories, setCategories] = useState([]); - const [categoryId, setCategoryId] = useState(0); - const [categoryText, setCategoryText] = useState("所有分类"); + const [categoryId, setCategoryId] = useState(Number(getCategory())); + const [categoryText, setCategoryText] = useState(getCategoryName()); const [learnCourseRecords, setLearnCourseRecords] = useState({}); const [learnCourseHourCount, setLearnCourseHourCount] = useState({}); const systemConfig = useSelector((state: any) => state.systemConfig.value); @@ -180,6 +188,7 @@ const IndexPage = () => { activeKey={tabKey} onChange={(key: any) => { setTabKey(key); + setTab(key); }} style={{ "--fixed-active-line-width": "20px", @@ -210,7 +219,9 @@ const IndexPage = () => { className={styles["category-tit"]} onClick={() => { setCategoryId(item.key); + setCategory(item.key); setCategoryText(item.title); + setCategoryName(item.title); ref.current?.close(); }} > diff --git a/src/utils/index.ts b/src/utils/index.ts index 30782b9..b22dd46 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -69,3 +69,38 @@ export function durationFormat(dateStr: number) { return hour + minute + second; } + +export function getTab() { + return window.localStorage.getItem("playedu-h5-tabKey") || "0"; +} + +export function setTab(token: string) { + window.localStorage.setItem("playedu-h5-tabKey", token); +} + +export function clearTab() { + window.localStorage.removeItem("playedu-h5-tabKey"); +} + +export function getCategory() { + return window.localStorage.getItem("playedu-h5-category") || 0; +} + +export function setCategory(token: string) { + window.localStorage.setItem("playedu-h5-category", token); +} + +export function clearCategory() { + window.localStorage.removeItem("playedu-h5-category"); +} +export function getCategoryName(): string { + return window.localStorage.getItem("playedu-h5-categoryName") || "所有分类"; +} + +export function setCategoryName(token: string) { + window.localStorage.setItem("playedu-h5-categoryName", token); +} + +export function clearCategoryName() { + window.localStorage.removeItem("playedu-h5-categoryName"); +}