🎈 perf(优化首页完成):

src/components/sideBar/index.tsx

@@ -6,6 +6,7 @@ import Taro, { useReady } from '@tarojs/taro'
 import InfiniteScroll, { StatusParam } from '../infiniteScroll'
 import LoadingCard from '../loadingCard'
 import ProductClass from '@/pages/index/components/productClass'
+import { GetClassList } from '@/api/material'
 
 type Params = {
   list?: any[]
@@ -19,6 +20,7 @@ type Params = {
   selfOnScrolltolower?: () => void
   hasMore?: true | false
   statusMore?: StatusParam
+  selectClass?: (val: number) => void
 }
 
 export default memo(
@@ -34,6 +36,7 @@ export default memo(
     selfOnScrolltolower,
     hasMore = true,
     statusMore = 0,
+    selectClass,
   }: Params) => {
     let num_half = useRef(0)
 
@@ -57,6 +60,8 @@ export default memo(
       setSelected(item.id)
       sideBarOnClick?.(item)
       computeSelectTab(index)
+      setClassId(-1)
+      selectClass?.(-1)
     }
 
     const computeSelectTab = (index) => {
@@ -86,7 +91,28 @@ export default memo(
       })
     })
 
+    //二级面料系列分类
     const [openClass, setOpenClass] = useState(false)
+    const [classList, setClassList] = useState([])
+    const [classId, setClassId] = useState(0)
+    const { fetchData } = GetClassList()
+    const getClassData = async (id) => {
+      let res = await fetchData({ id })
+      if (res.success) {
+        if (res.data?.list.length > 0) {
+          res.data.list = [{ id: -1, name: '全部' }, ...res.data.list]
+        }
+        setClassList(() => res.data?.list)
+      }
+    }
+    useEffect(() => {
+      if (selected) getClassData(selected)
+    }, [selected])
+
+    const getSelectClass = (id) => {
+      selectClass?.(id)
+      setClassId(id)
+    }
 
     return (
       <>
@@ -105,10 +131,12 @@ export default memo(
               )
             })}
           </ScrollView>
-          <View className={styles.sideBar_con}>
-            <View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
-              <ProductClass open={openClass} onOpenClick={(val) => setOpenClass(val)} />
-            </View>
+          <View className={styles.sideBar_con} style={{ paddingTop: classList.length > 0 ? '90rpx' : '20rpx' }}>
+            {classList.length > 0 && (
+              <View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
+                <ProductClass list={classList} open={openClass} onOpenClick={(val) => setOpenClass(val)} onSelect={getSelectClass} defaultSelectId={classId} />
+              </View>
+            )}
             <InfiniteScroll
               statusMore={statusMore}
               hasMore={hasMore}