133 lines
4.8 KiB
TypeScript
133 lines
4.8 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import Taro, { Events, useDidShow, usePullDownRefresh } from '@tarojs/taro'
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import ProductClass from './components/productClass'
|
|
import Banner from '@/components/banner'
|
|
import Search from '@/components/search'
|
|
import SideBar from '@/components/sideBar'
|
|
import Product from '@/components/product'
|
|
import MoveBtn from '@/components/moveBtn'
|
|
import ShopCart from '@/components/shopCart'
|
|
import { goLink } from '@/common/common'
|
|
import { GetProductKindListApi, GetProductListApi } from '@/api/material'
|
|
import useLogin from '@/use/useLogin'
|
|
import { dataLoadingStatus } from '@/common/util'
|
|
|
|
const Index = () => {
|
|
useLogin()
|
|
|
|
// 获取面料列表
|
|
const product_kind_id_ref = useRef(0)
|
|
const [productData, setProductData] = useState<{ list: any; total: number }>({ list: [], total: 0 })
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
|
|
const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
|
|
const { fetchData: productFetchData, state: productState } = GetProductListApi()
|
|
|
|
// 点击面料类型
|
|
const getProductKindId = useCallback((e) => {
|
|
pageNum.current.page = 1
|
|
setProductData({ list: [], total: 0 })
|
|
setFiltrate(list => ({ ...list, size: 5, product_kind_id: e.id }))
|
|
product_kind_id_ref.current = e.id
|
|
}, [])
|
|
|
|
// 上拉加载数据
|
|
const getScrolltolower = useCallback(() => {
|
|
if (productData.list.length >= productData.total) {
|
|
setHasMore(false)
|
|
}
|
|
else {
|
|
pageNum.current.page++
|
|
const newSize = pageNum.current.size * pageNum.current.page
|
|
setFiltrate(e => ({ ...e, size: newSize }))
|
|
}
|
|
}, [productData])
|
|
|
|
const [showShopCart, setShowShopCart] = useState(false)
|
|
|
|
// 列表下拉刷新
|
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
|
const getRefresherRefresh = async() => {
|
|
pageNum.current.page = 1
|
|
setFiltrate({ ...filtrate, size: 5 })
|
|
setHasMore(true)
|
|
setRefresherTriggeredStatus(true)
|
|
}
|
|
|
|
// 数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
|
|
}, [productData, productState.loading])
|
|
|
|
// 获取二级分类
|
|
const product_kind_id_next_ref = useRef(0)
|
|
const getSelectClassId = useCallback((id) => {
|
|
pageNum.current.page = 1
|
|
setProductData({ list: [], total: 0 })
|
|
const kind_id = id == -1 ? product_kind_id_ref.current : id
|
|
product_kind_id_next_ref.current = id
|
|
setFiltrate(list => ({ ...list, size: 5, product_kind_id: kind_id }))
|
|
}, [])
|
|
// 获取面料种类
|
|
const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
|
|
const { fetchData } = GetProductKindListApi()
|
|
const categoryList = async() => {
|
|
const res = await fetchData()
|
|
if (res.data?.list) {
|
|
setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
|
|
setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
|
|
product_kind_id_ref.current = res.data.list[0].id
|
|
}
|
|
}
|
|
// 获取数据方法
|
|
const getProductList = async() => {
|
|
const { data, total } = await productFetchData(filtrate)
|
|
setProductData({ ...productData, list: data.list, total })
|
|
setRefresherTriggeredStatus(() => false)
|
|
}
|
|
// 监听查询条件
|
|
useEffect(() => {
|
|
if (filtrate.product_kind_id) { getProductList() }
|
|
}, [filtrate])
|
|
useEffect(() => {
|
|
categoryList()
|
|
}, [])
|
|
return (
|
|
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
|
|
<View className={styles.main}>
|
|
<View className={styles.header}>
|
|
<View className={styles.search}>
|
|
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
|
|
<Search disabled style={{ width: '263rpx' }} borderRadius="16rpx" placeholder="请输入搜索布料" />
|
|
</View>
|
|
</View>
|
|
<Banner />
|
|
</View>
|
|
<View className={styles.products}>
|
|
<SideBar
|
|
list={kindData.list}
|
|
height="100%"
|
|
defaultValue={kindData.defaultId}
|
|
hasMore={hasMore}
|
|
statusMore={statusMore}
|
|
selfOnScrolltolower={getScrolltolower}
|
|
sideBarOnClick={getProductKindId}
|
|
heightItem={82}
|
|
refresherTriggered={refresherTriggeredStatus}
|
|
selectClass={getSelectClassId}
|
|
selfOnRefresherRefresh={() => getRefresherRefresh()}
|
|
>
|
|
<Product productList={productData.list} />
|
|
</SideBar>
|
|
</View>
|
|
<View className="common_safe_area_y"></View>
|
|
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} />
|
|
</View>
|
|
</MoveBtn>
|
|
)
|
|
}
|
|
|
|
export default Index
|