128 lines
4.7 KiB
TypeScript
128 lines
4.7 KiB
TypeScript
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";
|
|
|
|
export default () => {
|
|
const [showPopup, setShowPopup] = useState(false)
|
|
|
|
const router = useRouter()
|
|
//搜索参数
|
|
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 () => {
|
|
let 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 [hasMore, setHasMore] = useState(true)
|
|
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:{}}) => {
|
|
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
|
|
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={true} 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>
|
|
)
|
|
} |