🎈 perf(优化首页完成):

src/api/material.ts

@@ -1,65 +1,74 @@
-import { useRequest } from "@/use/useHttp"
+import { useRequest } from '@/use/useHttp'
 
 /**
  *  获取面料分类列表
- * @returns 
+ * @returns
-*/
+ */
 export const GetCategoryList = () => {
-    return useRequest({
+  return useRequest({
-        url: `/v1/mall/category/list`,
+    url: `/v1/mall/category/list`,
-        method: "get",
+    method: 'get',
-    })
+  })
 }
 
-
 /**
  *  获取面料种类列表
- * @returns 
+ * @returns
-*/
+ */
 export const GetProductKindListApi = () => {
-    return useRequest({
+  return useRequest({
-        url: `/v1/mall/product/kind/list`,
+    url: `/v2/mall/product/kind/list`,
-        method: "get",
+    method: 'get',
-    })
+  })
 }
 
 /**
  *  获取面料列表
- * @returns 
+ * @returns
-*/
+ */
 export const GetProductListApi = () => {
-    return useRequest({
+  return useRequest({
-        url: `/v1/mall/product/list`,
+    url: `/v1/mall/product/list`,
-        method: "get",
+    method: 'get',
-    })
+  })
+}
+
+/**
+ * 获取面料种类子分类
+ */
+export const GetClassList = () => {
+  return useRequest({
+    url: `/v2/mall/product/kind/sub/list`,
+    method: 'get',
+  })
 }
 
 /**
  *  获取面料详情
- * @returns 
+ * @returns
-*/
+ */
 export const GetProductDetailApi = () => {
-    return useRequest({
+  return useRequest({
-        url: `/v1/mall/product`,
+    url: `/v1/mall/product`,
-        method: "get",
+    method: 'get',
-    })
+  })
 }
 
 /**
  *  根据LAB匹配色卡基础资料
- * @returns 
+ * @returns
-*/
+ */
 export const GetLabProductApi = () => {
-    return useRequest({
+  return useRequest({
-        url: `/v1/mall/product/color/absorb/match`,
+    url: `/v1/mall/product/color/absorb/match`,
-        method: "get",
+    method: 'get',
-    })
+  })
 }
 
 /**
  *  收藏面料
- * @returns 
+ * @returns
-*/
+ */
 // export const GetProductDetailApi = () => {
 //     return useRequest({
 //         url: `/v1/mall/product`,

src/common/constant.js

@@ -1,4 +1,4 @@
-export const BASE_URL = CURRENT_BASE_URL
+// export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@@ -12,7 +12,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
-// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
+export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
 // export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷
 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 

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.sideBar_con} style={{ paddingTop: classList.length > 0 ? '90rpx' : '20rpx' }}>
-            <View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
+            {classList.length > 0 && (
-              <ProductClass open={openClass} onOpenClick={(val) => setOpenClass(val)} />
+              <View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
-            </View>
+                <ProductClass list={classList} open={openClass} onOpenClick={(val) => setOpenClass(val)} onSelect={getSelectClass} defaultSelectId={classId} />
+              </View>
+            )}
             <InfiniteScroll
               statusMore={statusMore}
               hasMore={hasMore}

src/pages/index/components/productClass/index.module.scss

@@ -14,8 +14,7 @@
       display: flex;
       box-sizing: border-box;
       .product_class_item {
-        min-width: 170px;
+        padding: 10px 20px;
-        height: 56px;
         background: #f5f5f5;
         border-radius: 29px;
         display: flex;
@@ -24,6 +23,8 @@
         font-size: 24px;
         color: rgba(0, 0, 0, 0.8);
         box-sizing: border-box;
+        max-width: 260px;
+        // @include common_ellipsis;
         &:nth-last-child(n + 1) {
           margin-right: 16px;
         }
@@ -76,17 +77,23 @@
       flex-wrap: wrap;
       box-sizing: border-box;
       .product_class_item {
-        min-width: 167px;
+        padding: 10px 20px;
-        height: 56px;
+        background: #f5f5f5;
-        background: #ecf2ff;
-        border: 1px solid #3c78f4;
         border-radius: 29px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24px;
+        color: rgba(0, 0, 0, 0.8);
+        margin: 0 8px 20px 8px;
+        box-sizing: border-box;
+        max-width: 260px;
+        // @include common_ellipsis(1);
+      }
+      .product_class_item_selected {
+        border: 1px solid #3c78f4;
         color: #3c78f4;
-        margin: 0 6px 20px 6px;
+        background: #ecf2ff;
       }
     }
   }

src/pages/index/components/productClass/index.tsx

@@ -6,67 +6,67 @@ import { useEffect, useMemo, useState } from 'react'
 type Param = {
   open: boolean
   onOpenClick?: (val: boolean) => void
-  onSelect?: (val: number) => void
+  onSelect?: (id: number) => void
+  list?: { name: string; id: number }[]
+  defaultSelectId: number
 }
 
-type ParamProduct = Omit<Param, 'open'> & {
+type ParamProduct = Omit<Param, 'open'>
-  defaultSelectIded: number
-}
 
 export default (option: Param) => {
-  const { open = false, onOpenClick, onSelect } = option
+  const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option
-  const [defaultSelectIded, setDefaultSelectIded] = useState(-1)
+  //   const [defaultSelectIded, setDefaultSelectIded] = useState(-1)
+  const getSelect = (id) => {
+    // setDefaultSelectIded(id)
+    onSelect?.(id)
+  }
   return (
     <>
       {open ? (
-        <ProductClassBlock defaultSelectIded={defaultSelectIded} onSelect={onSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
+        <ProductClassBlock list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
       ) : (
-        <ProductClassLine defaultSelectIded={defaultSelectIded} onSelect={onSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
+        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
       )}
     </>
   )
 }
 
 const ProductClassLine = (option: ParamProduct) => {
-  const { onOpenClick, defaultSelectIded = -1, onSelect } = option
+  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
   const [selectInfo, setSelectInfo] = useState({
     selected: -1, //当前选中的id
-    tabId: '', //需要滚动到的id
+    tabId: 0, //需要滚动到的id
   })
 
-  const list = useMemo(() => {
-    const data = new Array(10).fill('').map((item, index) => {
-      return { id: index, name: '二级分类' + index }
-    })
-    data.unshift({ id: -1, name: '全部' })
-    return data
-  }, [])
-
   useEffect(() => {
-    let data: { item: any; index: number } = {}
+    let data: { item: any; index: number } = { item: null, index: 0 }
-    list.filter((item, index) => {
+    list?.filter((item, index) => {
-      if (item.id == defaultSelectIded) {
+      if (item.id == defaultSelectId) {
         data = { item, index }
       }
     })
-    clickEvent(data)
+    if (data.item) {
-  }, [defaultSelectIded])
+      const num = data.index > 0 ? data.index - 1 : 0
+      setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: data.item.id }))
+    }
+  }, [defaultSelectId])
 
   const clickEvent = ({ item, index }: { item: any; index: number }) => {
     const num = index > 0 ? index - 1 : 0
-    setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
+    setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: item.id }))
+    onSelect?.(item.id)
   }
 
   return (
     <View className={styles.product_class_main_line}>
       <ScrollView scrollX scrollWithAnimation={true} className={styles.product_class_scroll} scrollIntoView={`tabs_${selectInfo.tabId}`}>
         <View className={styles.product_class_list}>
-          {list.map((item, index) => (
+          {list?.map((item, index) => (
             <View
               id={`tabs_${item.id}`}
               className={classnames(styles.product_class_item, item.id == selectInfo.selected ? styles.product_class_item_selected : '')}
               onClick={() => clickEvent({ item, index })}>
-              {item.name + item.id}
+              {item.name}
             </View>
           ))}
         </View>
@@ -79,26 +79,26 @@ const ProductClassLine = (option: ParamProduct) => {
 }
 
 const ProductClassBlock = (option: ParamProduct) => {
-  const { onOpenClick } = option
+  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
   const [selectInfo, setSelectInfo] = useState(-1)
-  const list = useMemo(() => {
+
-    const data = new Array(10).fill('').map((item, index) => {
+  useEffect(() => {
-      return { id: index, name: '二级分类' + index }
+    setSelectInfo(defaultSelectId)
-    })
+  }, [defaultSelectId])
-    data.unshift({ id: -1, name: '全部' })
-    return data
-  }, [])
 
   const clickEvent = (item) => {
     setSelectInfo(item.id)
+    onSelect?.(item.id)
   }
   return (
     <View className={styles.product_class_main_block}>
       <View className={styles.product_class_block_con}>
         <ScrollView scrollY className={styles.product_class_scroll}>
           <View className={styles.product_class_list}>
-            {list.map((item, index) => (
+            {list?.map((item) => (
-              <View className={styles.product_class_item} onClick={() => clickEvent(item)}>
+              <View
+                className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
+                onClick={() => clickEvent(item)}>
                 {item.name}
               </View>
             ))}

src/pages/index/index.module.scss

@@ -32,7 +32,6 @@
   .products {
     flex: 1;
     height: 0;
-    margin-top: 20px;
     .product_right_con {
       position: relative;
       .product_class {

src/pages/index/index.tsx

@@ -28,11 +28,13 @@ export default () => {
     if (res.data?.list) {
       setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
       setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
+      product_kind_id_ref.current = res.data.list[0].id
     }
   }
 
   //获取面料列表
-  const [productData, setProductData] = useState({ list: [], total: 0 })
+  const product_kind_id_ref = useRef(0)
+  const [productData, setProductData] = useState<{ list: any; total: number }>({ list: [], total: 0 })
   const [hasMore, setHasMore] = useState(true)
   const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
   const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
@@ -53,6 +55,7 @@ export default () => {
     pageNum.current.page = 1
     setProductData({ list: [], total: 0 })
     setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id }))
+    product_kind_id_ref.current = e.id
   }, [])
 
   //上拉加载数据
@@ -82,6 +85,16 @@ export default () => {
     return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
   }, [productData, productState.loading])
 
+  //获取二级分类
+  const product_kind_id_next_ref = useRef(0)
+  const getSelectClassId = useCallback((id) => {
+    pageNum.current.page = 1
+    setProductData({ list: [], total: 0 })
+    let kind_id = id == -1 ? product_kind_id_ref.current : id
+    product_kind_id_next_ref.current = id
+    setFiltrate((list) => ({ ...list, size: 5, product_kind_id: kind_id }))
+  }, [])
+
   return (
     <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
       <View className={styles.main}>
@@ -104,6 +117,7 @@ export default () => {
             sideBarOnClick={getProductKindId}
             heightItem={150}
             refresherTriggered={refresherTriggeredStatus}
+            selectClass={getSelectClassId}
             selfOnRefresherRefresh={() => getRefresherRefresh()}>
             <Product productList={productData.list} />
           </SideBar>