109 lines
4.1 KiB
TypeScript
109 lines
4.1 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
|
|
import styles from "./index.module.scss"
|
|
import classnames from "classnames";
|
|
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
|
|
import Popup from '@/components/popup'
|
|
import { debounce } from '@/common/util'
|
|
import { alert } from '@/common/common'
|
|
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
|
|
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
|
import Tag from './components/Tag';
|
|
import Sort from './components/Sort';
|
|
import Search from '@/components/search'
|
|
import ItemLiist from "./components/ItemList"
|
|
import InfiniteScroll from '@/components/infiniteScroll'
|
|
import { ClientListApi } from '@/api/order'
|
|
|
|
export default () => {
|
|
|
|
const [searchField, setSearchField] = useState<{ page: number; size: number; order_no: string }>({
|
|
page: 1,
|
|
size: 10,
|
|
order_no: '',
|
|
})
|
|
|
|
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
|
|
const { fetchData: listFetchData, state: orderState } = ClientListApi()
|
|
const getOrderList = async () => {
|
|
let res = await listFetchData({
|
|
...getFilterData(searchField)
|
|
})
|
|
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
|
|
setRefresherTriggeredStatus(() => false)
|
|
}
|
|
|
|
//监听筛选条件变化
|
|
useEffect(() => {
|
|
getOrderList()
|
|
}, [searchField])
|
|
|
|
|
|
//输入了搜索关键字
|
|
const getSearchData = useCallback((e) => {
|
|
// pageNum.current.page = 1
|
|
// setOrderData(() => ({ list: [], total: 0 }))
|
|
// setSearchField((val) => ({ ...val, order_no: e, size: 10 }))
|
|
}, [])
|
|
|
|
//数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
|
|
}, [orderData, orderState])
|
|
|
|
//上拉加载数据
|
|
const pageNum = useRef({ size: searchField.size, page: searchField.page })
|
|
const getScrolltolower = useCallback(() => {
|
|
if (orderData.list.length < orderData.total) {
|
|
pageNum.current.page++
|
|
const size = pageNum.current.size * pageNum.current.page
|
|
setSearchField({ ...searchField, size })
|
|
}
|
|
}, [orderData])
|
|
|
|
//列表下拉刷新
|
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
|
const getRefresherRefresh = async () => {
|
|
pageNum.current.size = 1
|
|
setRefresherTriggeredStatus(true)
|
|
setSearchField((val) => ({ ...val, size: 10 }))
|
|
}
|
|
|
|
//选择排序
|
|
const handSort = useCallback((val) => {
|
|
console.log(val, 456456)
|
|
}, [])
|
|
|
|
return (
|
|
<View className={styles.mainBox}>
|
|
<View className={styles.topBox}>
|
|
<View className={styles.search_input}>
|
|
<Search placeholder='搜索客户名称、电话、业务员' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
|
|
</View>
|
|
<View className={styles.menuBox}>
|
|
<Sort handSort={handSort}></Sort>
|
|
<Tag></Tag>
|
|
<Tag></Tag>
|
|
</View>
|
|
</View>
|
|
<View className={styles.totalFont}>共 36 个客户</View>
|
|
<View className={styles.order_list}>
|
|
<InfiniteScroll
|
|
statusMore={statusMore}
|
|
selfonScrollToLower={getScrolltolower}
|
|
refresherEnabled={true}
|
|
refresherTriggered={refresherTriggeredStatus}
|
|
selfOnRefresherRefresh={getRefresherRefresh}>
|
|
{orderData?.list?.map((item, index) => {
|
|
return (
|
|
<ItemLiist obj={item}></ItemLiist>
|
|
)
|
|
})}
|
|
</InfiniteScroll>
|
|
</View>
|
|
<View className={styles.bottom_box}>
|
|
<View className={styles.bottom_btn}>新建用户</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
} |