TestRestructureWechatLymarketDist/src/pages/classList/index.tsx

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

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

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

    //获取列表
    const [categoryList, setCategoryList] = useState<{list:any[], total:number}>({
        list:[],
        total:0
    })
    const {fetchData, state} = GetProductListApi()
    const getSubjectList = async () => {
        let res = await fetchData(getFilterData(searchField))
        setCategoryList({...categoryList, list:res.data.list, total: res.data.total})
    }

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

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

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

    //获取筛选条件
    const getFiltr = (e) => {
        pageNum.current.page = 1
        setCategoryList(() => ({list:[], total:0}))
        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:{}}) => {
        let data:ListProps[] = []
        for(let 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
        setCategoryList(() => ({list:[], total:0}))
        setSearchField((val) => ({...val, code_or_name:e, size:10}))
    }, [])

    //排序
    type sortParam = 'none'|'top'|'bottom'
    const sortComprehensiveRef = useRef<any>(null)
    const [sortStatus, setSortStatus] = useState<{comprehensive:sortParam}>({
        comprehensive: 'none'
    })
    const changeSort = () => {
        setCategoryList(() => ({list:[], total:0}))
        const {status, value} = sortComprehensiveRef.current.changeSort()
        setSortStatus((e) => ({...e, comprehensive: status, collection: 'none'}))
        setSearchField((e) => ({...e, abstract_sort_key: value, size:10, page:1}))
        pageNum.current = {size: 10, page: 1}
    }

    return (
        <View className={styles.main}>
            <View className={styles.search}>
                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
            </View>
            <View className={styles.filter}>
                <View className={styles.filter_all}>
                    <View className={styles.text_one} onClick={() => changeSort()}>
                        <Text>综合</Text>
                        <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{desc: '1', asc: '-1'}}/>
                    </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={categoryList.list}/>
                </InfiniteScroll>
            </View>
            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
        </View>
    )
}