From a004bceaf9b21d71588be14b3798e33dfb31cfcb Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Mon, 11 Sep 2023 15:53:05 +0800 Subject: [PATCH] =?UTF-8?q?=E7=96=BE=E7=97=85=E7=BC=93=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../illness/sort/components/secondLevel.tsx | 76 ++++++++++++++++ src/pages/preview/illness/sort/sort.tsx | 89 ++++++------------- 2 files changed, 105 insertions(+), 60 deletions(-) create mode 100644 src/pages/preview/illness/sort/components/secondLevel.tsx diff --git a/src/pages/preview/illness/sort/components/secondLevel.tsx b/src/pages/preview/illness/sort/components/secondLevel.tsx new file mode 100644 index 0000000..dcc31ba --- /dev/null +++ b/src/pages/preview/illness/sort/components/secondLevel.tsx @@ -0,0 +1,76 @@ +import {FC, useEffect, useState} from "react"; +import {Category} from "@/api"; +import Taro from "@tarojs/taro"; +import Empty from "@/components/empty/empty"; +import {ScrollView, View} from "@tarojs/components"; +import styles from "../sort.module.scss"; +import Spin from "@/components/spinner"; + + +interface Props { + category: Category + loading: boolean + onChange: (id?: number) => void + illness: Map +} + +const prefix = 'SORT' +const SecondLevel: FC = ({category, loading, onChange, illness}) => { + const globalData = Taro.getApp().globalData + const [secondId, setSecondId] = useState(undefined) + + useEffect(() => { + if (!secondId) { + setSecondId(category.resource_category?.[0]?.id) + } + onChange(secondId || category.resource_category?.[0]?.id) + }, [secondId]) + + function jump(id: number) { + Taro.navigateTo({url: '/pages/preview/illness/list/list?id=' + id}) + } + + if (!category.resource_category?.length) { + return () + } else { + return ( + + + { + category.resource_category?.map(d => setSecondId(d.id)} + className={secondId === d.id && styles.select}> + {d.name} + ) + } + + + + { + (secondId && illness.get(secondId)?.length) ? + <> + { + illness.get(secondId)?.map(d => jump(d.id)}> + {d.name} + ) + } + 暂无更多 + + : + } + + + ) + } +} + +export default SecondLevel diff --git a/src/pages/preview/illness/sort/sort.tsx b/src/pages/preview/illness/sort/sort.tsx index 8b0ef59..7ed3168 100644 --- a/src/pages/preview/illness/sort/sort.tsx +++ b/src/pages/preview/illness/sort/sort.tsx @@ -1,20 +1,19 @@ -import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components"; -import {FC, useEffect, useMemo, useState} from "react"; +import {Swiper, SwiperItem, View} from "@tarojs/components"; +import {FC, useMemo, useState} from "react"; import {Category, HomeApi} from "@/api"; import Taro from "@tarojs/taro"; -import styles from './sort.module.scss' import Tabs, {TabList} from "@/components/tabs/tabs"; import {illnessApi} from "@/api/illness"; import Empty from "@/components/empty/empty"; import Spin from "@/components/spinner"; import NavigationBar from "@/components/navigationBar/navigationBar"; +import SecondLevel from "./components/secondLevel"; + -const prefix = 'SORT' const Sort: FC = () => { const [data, setData] = useState([]) - const [firstId, setFirstId] = useState(undefined) // 一级分类 - const [secondId, setSecondId] = useState(undefined) // 二级分类 - const [list, setList] = useState([]) + const [firstId, setFirstId] = useState(undefined) // 一级选中 + const [illness, setIllness] = useState>(new Map) const [enable, setEnable] = useState(true) const [loading, setLoading] = useState(false) const globalData = Taro.getApp().globalData @@ -25,7 +24,6 @@ const Sort: FC = () => { setData(res) if (res.length) { setFirstId(res[0].id) - setSecondId(res[0]?.resource_category?.[0].id) } } catch (e) { setLoading(false) @@ -33,9 +31,6 @@ const Sort: FC = () => { setEnable(false) } - function jump(id: number) { - Taro.navigateTo({url: '/pages/preview/illness/list/list?id=' + id}) - } const getTabList = useMemo((): TabList[] => { return data.map(d => ({ @@ -47,76 +42,50 @@ const Sort: FC = () => { function firstIdChange(id: number) { setFirstId(id) const resource_category = data.find(d => d.id === id)?.resource_category - setSecondId(resource_category?.[0]?.id) + changeSecond(resource_category?.[0]?.id) } Taro.useLoad(getData) - useEffect(() => { + function changeSecond(secondId?: number) { if (secondId) { setLoading(true) - illnessApi.list(secondId, 1, 100).then(res => { - setList(res.list) - }).catch(() => { - setList([]) + illnessApi.list(secondId, 1, 1000).then(res => { + const data = new Map(illness) + if (data.has(secondId)) { + const newIllness = data.get(secondId) + data.delete(secondId) + data.set(secondId, res.list.reduce((pre, cur) => { + const index = pre.findIndex(d => d.id === cur.id) + if (index === -1) { + pre.push(cur) + } else { + pre.splice(index, 1, cur) + } + return pre + }, newIllness || [])) + } else { + data.set(secondId, res.list) + } + setIllness(data) }) - } else { - setList([]) } setLoading(false) - }, [secondId]) + } function swiperChange(e) { const firstData = data[e.target.current] if (!firstData) return; setFirstId(firstData.id) - setSecondId(firstData?.resource_category?.[0]?.id) + changeSecond(firstData?.resource_category?.[0]?.id) } - const SecondLevel = (category: Category) => { - if (!category.resource_category?.length) { - return () - } else { - return ( - - - { - category.resource_category?.map(d => setSecondId(d.id)} - className={secondId === d.id && styles.select}> - {d.name} - ) - } - - - - { - list.length ? - <> - {list.map(d => jump(d.id)}>{d.name})} - 暂无更多 - - : - } - - - ) - } - } return ( firstIdChange(data.tab?.value as number)} />}/> @@ -127,7 +96,7 @@ const Sort: FC = () => { current={data.findIndex(d => d.id === firstId)}> { data.map(d => - {SecondLevel(d)} + ) }