98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import {View} from '@tarojs/components'
|
|
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 styles from './index.module.scss'
|
|
import { goLink } from '@/common/common'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
|
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
|
|
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
|
|
|
|
export default () => {
|
|
|
|
|
|
useEffect(() => {
|
|
categoryList()
|
|
}, [])
|
|
|
|
//获取面料种类
|
|
const [kindData, setKindData] = useState<any>({list:[], defaultId:0})
|
|
const {fetchData} = GetProductKindListApi()
|
|
const categoryList = async () => {
|
|
const res = await fetchData()
|
|
setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
|
|
filtrate.current.product_kind_id = res.data.list[0].id
|
|
getProductList()
|
|
}
|
|
|
|
//获取面料列表
|
|
const [productData, setProductData] = useState({list:[], total:0, hasMore:true})
|
|
const filtrate = useRef({product_kind_id:0, size: 5,page: 1})
|
|
const pageNum = useRef(1)
|
|
const {fetchData: productFetchData, state: productState} = GetProductListApi()
|
|
const getProductKindId = async (e) => {
|
|
filtrate.current.size = 5
|
|
pageNum.current = 1
|
|
filtrate.current.product_kind_id = e.id
|
|
getProductList()
|
|
}
|
|
const getProductList = async () => {
|
|
filtrate.current.size = filtrate.current.size * pageNum.current
|
|
const {data,total} = await productFetchData(filtrate.current)
|
|
setProductData({...productData,list:data.list,total})
|
|
}
|
|
|
|
//上拉加载数据
|
|
const getScrolltolower = () => {
|
|
if(productData.list.length >= productData.total) {
|
|
setProductData({...productData, hasMore: false})
|
|
} else {
|
|
pageNum.current++
|
|
getProductList()
|
|
}
|
|
}
|
|
|
|
|
|
const [showShopCart, setShowShopCart] = useState(false)
|
|
|
|
//列表下拉刷新
|
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
|
const getRefresherRefresh = async () => {
|
|
filtrate.current.size = 5
|
|
pageNum.current = 1
|
|
getProductList()
|
|
}
|
|
useEffect(() => {
|
|
setRefresherTriggeredStatus(productState.loading)
|
|
}, [productState.loading])
|
|
|
|
//页面下拉刷新
|
|
const res = useManualPullDownRefresh()
|
|
|
|
|
|
return (
|
|
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
|
|
<View className={styles.main}>
|
|
<Banner/>
|
|
<View className={styles.search}>
|
|
<View className={styles.search_collect}>我的收藏</View>
|
|
<View className={styles.search_input}>
|
|
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
|
|
</View>
|
|
</View>
|
|
<View className={styles.products}>
|
|
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={productData.hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
|
|
<Product productList={productData.list}/>
|
|
</SideBar>
|
|
</View>
|
|
<View className='common_safe_area_y'></View>
|
|
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)}/>
|
|
</View>
|
|
</MoveBtn>
|
|
)
|
|
}
|