疾病缓存

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<number, any[]>
+}
+
+const prefix = 'SORT'
+const SecondLevel: FC<Props> = ({category, loading, onChange, illness}) => {
+  const globalData = Taro.getApp().globalData
+  const [secondId, setSecondId] = useState<undefined | number>(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 (<Empty name='暂无二级分类'/>)
+  } else {
+    return (
+      <View className='flex' style={{height: `${globalData.pageHeight}px`}}>
+        <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
+          {
+            category.resource_category?.map(d => <View
+              id={`${prefix}-${d.id}`}
+              key={d.id}
+              onClick={() => setSecondId(d.id)}
+              className={secondId === d.id && styles.select}>
+              {d.name}
+            </View>)
+          }
+        </ScrollView>
+        <ScrollView
+          enhanced
+          showScrollbar={false}
+          scrollY
+          className={styles.tree}
+          scrollWithAnimation>
+          <Spin enable={loading} block/>
+          {
+            (secondId && illness.get(secondId)?.length) ?
+              <>
+                {
+                  illness.get(secondId)?.map(d => <View
+                    className={styles.list}
+                    onClick={() => jump(d.id)}>
+                    {d.name}
+                  </View>)
+                }
+                <View className='text-center font-24 text-dark mt-3'>暂无更多</View>
+              </>
+              : <Empty name='暂无数据'/>
+          }
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+export default SecondLevel

src/pages/preview/illness/sort/sort.tsx

@@ -1,20 +1,19 @@
-import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
+import {Swiper, SwiperItem, View} from "@tarojs/components";
-import {FC, useEffect, useMemo, useState} from "react";
+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<Category[]>([])
-  const [firstId, setFirstId] = useState<number | undefined>(undefined)  // 一级分类
+  const [firstId, setFirstId] = useState<number | undefined>(undefined)  // 一级选中
-  const [secondId, setSecondId] = useState<number | undefined>(undefined) // 二级分类
+  const [illness, setIllness] = useState<Map<number, any[]>>(new Map)
-  const [list, setList] = useState<any[]>([])
   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<TabList>(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 => {
+      illnessApi.list(secondId, 1, 1000).then(res => {
-        setList(res.list)
+        const data = new Map(illness)
-      }).catch(() => {
+        if (data.has(secondId)) {
-        setList([])
+          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 (<Empty name='暂无二级分类'/>)
-    } else {
-      return (
-        <View className='flex' style={{height: `${globalData.pageHeight}px`}}>
-          <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
-            {
-              category.resource_category?.map(d => <View
-                id={`${prefix}-${d.id}`}
-                key={d.id}
-                onClick={() => setSecondId(d.id)}
-                className={secondId === d.id && styles.select}>
-                {d.name}
-              </View>)
-            }
-          </ScrollView>
-          <ScrollView
-            enhanced
-            showScrollbar={false}
-            scrollY
-            className={styles.tree}
-            scrollWithAnimation>
-            <Spin enable={loading} block/>
-            {
-              list.length ?
-                <>
-                  {list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)}
-                  <View className='text-center font-24 text-dark mt-3'>暂无更多</View>
-                </>
-                : <Empty name='暂无数据'/>
-            }
-          </ScrollView>
-        </View>
-      )
-    }
-  }
 
   return (
     <View>
       <NavigationBar leftNode={<Tabs
         tabList={getTabList}
         current={firstId}
-        style={{paddingBottom: '5px'}}
         onChange={(data) => firstIdChange(data.tab?.value as number)}
       />}/>
       <Spin enable={enable} overlay/>
@@ -127,7 +96,7 @@ const Sort: FC = () => {
             current={data.findIndex(d => d.id === firstId)}>
             {
               data.map(d => <SwiperItem key={d.id}>
-                {SecondLevel(d)}
+                <SecondLevel category={d} illness={illness} loading={loading} onChange={changeSecond}/>
               </SwiperItem>)
             }
           </Swiper>