TestEShopDist/src/pages/category/index.tsx

import { View } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import Search from '@/components/search'
import { goLink } from '@/common/common'
import SideBar from '@/components/sideBar'
import { GetProductKindListApi, GetProductListApi } from '@/api/material'
import { dataLoadingStatus } from '@/common/util'
import Product from '@/components/product'
import useLogin from '@/use/useLogin'

const PAGE_LIMIT = 10

// 分类
const Category = () => {
  useLogin()

  const product_kind_id_ref = useRef(0)
  const product_kind_id_next_ref = useRef(0)
  const [productData, setProductData] = useState<{ list: any; total: number }>({ list: [], total: 0 })
  const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: PAGE_LIMIT, page: 1 })
  const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
  const { fetchData: productFetchData, state: productState } = GetProductListApi()
  // 点击面料类型
  const getProductKindId = useCallback((e) => {
    pageNum.current.page = 1
    setProductData({ list: [], total: 0 })
    setFiltrate(list => ({ ...list, size: PAGE_LIMIT, product_kind_id: e.id }))
    product_kind_id_ref.current = e.id
  }, [])

  // 上拉加载数据
  const getScrolltolower = useCallback(() => {
    pageNum.current.page++
    const newSize = pageNum.current.size * pageNum.current.page
    setFiltrate(e => ({ ...e, size: newSize }))
  }, [productData])

  const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })

  // 列表下拉刷新
  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
  const getRefresherRefresh = async() => {
    pageNum.current.page = 1
    setFiltrate({ ...filtrate, size: PAGE_LIMIT })
    setRefresherTriggeredStatus(true)
  }

  // 数据加载状态
  const statusMore = useMemo(() => {
    return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
  }, [productData, productState.loading])

  // 获取二级分类

  const getSelectClassId = useCallback((id) => {
    pageNum.current.page = 1
    setProductData({ list: [], total: 0 })
    const kind_id = id == -1 ? product_kind_id_ref.current : id
    product_kind_id_next_ref.current = id
    setFiltrate(list => ({ ...list, size: PAGE_LIMIT, product_kind_id: kind_id }))
  }, [])

  const { fetchData } = GetProductKindListApi()

  const categoryList = async() => {
    const res = await fetchData()
    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 getProductList = async() => {
    const { data, total } = await productFetchData(filtrate)
    setProductData({ ...productData, list: data.list, total })
    setRefresherTriggeredStatus(() => false)
  }

  // 监听查询条件
  useEffect(() => {
    if (filtrate.product_kind_id) { getProductList() }
  }, [filtrate])

  useEffect(() => {
    categoryList()
  }, [])

  return <View className={styles.main}>
    <View className={styles.header}>
      <View className={styles.search}>
        <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
          <Search disabled style={{ width: '263rpx' }} borderRadius="16rpx" placeholder="请输入搜索布料" />
        </View>
      </View>
    </View>
    <View className={styles.products}>
      <SideBar
        list={kindData.list}
        height="100%"
        defaultValue={kindData.defaultId}
        statusMore={statusMore}
        selfOnScrolltolower={getScrolltolower}
        sideBarOnClick={getProductKindId}
        heightItem={82}
        refresherTriggered={refresherTriggeredStatus}
        selectClass={getSelectClassId}
        selfOnRefresherRefresh={() => getRefresherRefresh()}
      >
        <Product productList={productData.list} />
      </SideBar>
    </View>
  </View>
}
export default Category