TestEShopDist/src/pages/subjectList/index.tsx

import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { ListProps } from '../searchList/components/selectData'
import SelectData from '../searchList/components/selectData'
import styles from './index.module.scss'
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import Filter from '@/components/filterV2'
import SortBtn from '@/components/sortBtn'
import { GetProductListApi } from '@/api/material'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import LoadingCard from '@/components/loadingCard'

export default () => {
  const [showPopup, setShowPopup] = useState(false)

  const router = useRouter()

  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: router.params.title || '专题页面',
    })
  }, [router])

  // 搜索参数
  const [searchField, setSearchField] = useState({
    code_or_name: '',
    product_subject_id: router.params.id,
    page: 1,
    size: 10,
    width: '',
    weight_density: '',
    product_kind_id: '',
    component: '',
  })

  // 获取专题
  const [subjectList, setSubjectList] = useState<{ list: any[]; total: number }>({
    list: [],
    total: 0,
  })
  const { fetchData, state } = GetProductListApi()
  const getSubjectList = async() => {
    const res = await fetchData(getFilterData(searchField))
    setSubjectList({ ...subjectList, list: res.data.list, total: res.data.total })
  }

  // 监听筛选数据变化
  useEffect(() => {
    getSubjectList()
  }, [searchField])

  // 上拉加载数据
  const pageNum = useRef({ size: searchField.size, page: searchField.page })
  const getScrolltolower = () => {
    if (subjectList.list.length < subjectList.total) {
      pageNum.current.page++
      const size = pageNum.current.size * pageNum.current.page
      setSearchField({ ...searchField, size })
    }
  }

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

  // 获取筛选条件
  const getFiltr = (e) => {
    pageNum.current.page = 1
    const { data } = e
    setSearchField({
      ...searchField,
      width: data?.width,
      weight_density: data?.weight,
      size: 10,
      component: data?.element,
      product_kind_id: data?.seriesId,
    })
    formatSelectList(e)
  }

  // 筛选条件格式化
  const [selectList, setSelectList] = useState<ListProps[]>()
  const formatSelectList = (val = { data: {}, field: {} }) => {
    const data: ListProps[] = []
    for (const key in val.data) {
      if (key !== 'seriesId' && val.data[key] != '') {
        data.push({ title: val.field[key], value: val.data[key] })
      }
    }
    setSelectList([...data])
  }

  // 输入了搜索关键字
  const getSearchData = useCallback((e) => {
    pageNum.current.page = 1
    setSubjectList(() => ({ list: [], total: 0 }))
    setSearchField(val => ({ ...val, code_or_name: e, size: 10 }))
  }, [])

  return (
    <View className={styles.main}>
      <View className={styles.search}>
        <Search placeIcon="out" showBtn btnStyle={{ color: '#007AFF' }} changeOnSearch={getSearchData} debounceTime={300} />
      </View>
      <View className={styles.filter}>
        <View className={styles.filter_all}>
          <View className={styles.text_one}>
            <Text>综合</Text>
            <SortBtn status="top" />
          </View>
          <View className={styles.text_two} onClick={() => setShowPopup(true)}>
            <Text>筛选</Text>
            <Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
          </View>
        </View>
        <View className={styles.filter_btns}>
          <SelectData list={selectList} />
        </View>
      </View>
      <View className={styles.list}>
        <InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
          <Product desStatus={false} productList={subjectList.list} />
        </InfiniteScroll>
      </View>
      <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr} />
    </View>
  )
}