订单列表页面完成

src/pages/classList/index.tsx

@@ -4,42 +4,103 @@ import Search from '@/components/search'
 import Product from '@/components/product'
 import InfiniteScroll from '@/components/infiniteScroll'
 import styles  from './index.module.scss'
-import { useEffect, useState } from "react";
-import Filter from "./components/filter";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Filter from "@/components/filter";
 import SortBtn from "@/components/sortBtn";
-import SelectData from "../searchList/components/selectData";
-import {GetSubjectList} from '@/api/subjectMaterial'
+import SelectData, {ListProps} from "../searchList/components/selectData";
+import {GetProductListApi} from '@/api/material'
+import { useRouter } from "@tarojs/taro";
+import { getFilterData } from "@/common/util";
+import LoadingCard from "@/components/loadingCard";
 
 export default () => {
     const [showPopup, setShowPopup] = useState(false)
-    const [selectList, setSelectList] = useState([
-        {title: '系列', value:1},
-        {title: '系列', value:2},
-        {title: '系列', value:3},
-        {title: '系列', value:4},
-        {title: '系列', value:6},
-        {title: '系列', value:7},
-        {title: '系列', value:8},
-        {title: '系列', value:9},
-        {title: '系列', value:10},
-    ])
 
+    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 [hasMore, setHasMore] = useState(true)
+    const getScrolltolower = () => {
+        if(categoryList.list.length < categoryList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearchField({...searchField, size })
+        }
+    }
+
+    //监听获得的数据变化
+    useEffect(() => {
+        (categoryList.list.length < categoryList.total)?setHasMore(true):setHasMore(false)
+    }, [categoryList])
+
+    //获取筛选条件
+    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:{}}) => {
+        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}))
     }, [])
 
-    //获取专题
-    const [list, setList] = useState<any>([])
-    const {fetchData} = GetSubjectList()
-    const getSubjectList = async () => {
-        let res = await fetchData()
-        console.log('res::', res)
-    }
+
 
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
+                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
@@ -57,11 +118,13 @@ export default () => {
                 </View>
             </View>
             <View className={styles.list}>
-                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
-                    <Product desStatus={false}/>
-                </InfiniteScroll>
+                {(categoryList.list.length == 0&&state.loading)&&<LoadingCard/>}
+                {(categoryList.list.length == 0 && !state.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
+                {(categoryList.list.length > 0)&&<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} hasMore={hasMore}>
+                    <Product desStatus={false} productList={categoryList.list}/>
+                </InfiniteScroll>}
             </View>
-            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
+            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
         </View>
     )
 }