✨ feat(ID1000738):需求拆分：内部商城新增二级面料分类、排序

src/components/sideBar/index.module.scss

@@ -70,10 +70,34 @@
     .sideBar_con {
         flex: 1;
 
+        min-width: 0;
+        position: relative;
+        padding-top: 90px;
+        .product_class {
+          width: 100%;
+          position: absolute;
+          top: 0;
+          z-index: 999;
+        }
         .sideBar_con_scroll {
-            width: 100%;
-            height: 100%;
+          width: 100%;
+          height: 100%;
         }
     }
+.nosideBar_con{
+    flex: 1;
 
+    min-width: 0;
+    position: relative;
+    .product_class {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      z-index: 999;
+    }
+    .sideBar_con_scroll {
+      width: 100%;
+      height: 100%;
+    }
+}
 }

src/components/sideBar/index.tsx

@@ -7,6 +7,8 @@ import type { StatusParam } from '../infiniteScroll'
 import InfiniteScroll from '../infiniteScroll'
 import LoadingCard from '../loadingCard'
 import styles from './index.module.scss'
+import ProductClass from '@/pages/index/components/productClass'
+import { GetClassList } from '@/api/index'
 
 interface Params {
   list?: any[]
@@ -20,6 +22,7 @@ interface Params {
   selfOnScrolltolower?: () => void
   hasMore?: true | false
   statusMore?: StatusParam
+  selectClass?: (val: number) => void
 }
 const SideBar = ({
   list = [],
@@ -33,6 +36,7 @@ const SideBar = ({
   selfOnScrolltolower,
   hasMore = true,
   statusMore = 0,
+  selectClass,
 }: Params) => {
   const num_half = useRef(0)
 
@@ -76,21 +80,37 @@ const SideBar = ({
     })
   }, [])
 
+  // 二级面料系列分类
+  const [openClass, setOpenClass] = useState(false)
+  const [classList, setClassList] = useState([])
+  const [classId, setClassId] = useState(-1)
+  const { fetchData } = GetClassList()
+  const getClassData = async(id) => {
+    const 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)
+      console.log('res.data?.list=>', res.data?.list)
+    }
+  }
+  useEffect(() => {
+    if (selected) { getClassData(selected) }
+  }, [selected])
+
+  const getSelectClass = (id) => {
+    selectClass?.(id)
+    setClassId(() => id)
+  }
+
   const clickEvent = ({ item, index }: { item; index: number }) => {
     setSelected(item.id)
     sideBarOnClick?.(item)
     computeSelectTab(index)
+    setClassId(-1)
+    selectClass?.(-1)
   }
-
-  const [currentIndex, setcurrentIndex] = useState(0)
-  useMemo(() => {
-    Taro.nextTick(() => {
-      let index = 0
-      index = list.findIndex((item) => { return item.id == selected })
-      setcurrentIndex(currentIndex)
-    })
-  }, [selected])
-
   return (
     <>
       <View className={classnames(styles.sideBar_main, 'side_bar_select')}>
@@ -116,7 +136,12 @@ const SideBar = ({
             })
           }
         </ScrollView>
-        <View className={styles.sideBar_con}>
+        <View className={classnames(classList.length > 0 ? styles.sideBar_con : styles.nosideBar_con)}>
+          {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} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
             {children}
           </InfiniteScroll>