From 053ced7858a23eea707308a9bd7734652edfb690 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Wed, 23 Nov 2022 15:55:02 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E4=BC=98=E5=8C=96=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E5=AE=8C=E6=88=90):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/material.ts | 77 +++++++++++-------- src/common/constant.js | 4 +- src/components/sideBar/index.tsx | 36 ++++++++- .../components/productClass/index.module.scss | 21 +++-- .../index/components/productClass/index.tsx | 72 ++++++++--------- src/pages/index/index.module.scss | 1 - src/pages/index/index.tsx | 16 +++- 7 files changed, 142 insertions(+), 85 deletions(-) diff --git a/src/api/material.ts b/src/api/material.ts index 11b6553..908215b 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -1,65 +1,74 @@ -import { useRequest } from "@/use/useHttp" +import { useRequest } from '@/use/useHttp' /** * 获取面料分类列表 - * @returns -*/ + * @returns + */ export const GetCategoryList = () => { - return useRequest({ - url: `/v1/mall/category/list`, - method: "get", - }) + return useRequest({ + url: `/v1/mall/category/list`, + method: 'get', + }) } - /** * 获取面料种类列表 - * @returns -*/ + * @returns + */ export const GetProductKindListApi = () => { - return useRequest({ - url: `/v1/mall/product/kind/list`, - method: "get", - }) + return useRequest({ + url: `/v2/mall/product/kind/list`, + method: 'get', + }) } /** * 获取面料列表 - * @returns -*/ + * @returns + */ export const GetProductListApi = () => { - return useRequest({ - url: `/v1/mall/product/list`, - method: "get", - }) + return useRequest({ + url: `/v1/mall/product/list`, + method: 'get', + }) +} + +/** + * 获取面料种类子分类 + */ +export const GetClassList = () => { + return useRequest({ + url: `/v2/mall/product/kind/sub/list`, + method: 'get', + }) } /** * 获取面料详情 - * @returns -*/ + * @returns + */ export const GetProductDetailApi = () => { - return useRequest({ - url: `/v1/mall/product`, - method: "get", - }) + return useRequest({ + url: `/v1/mall/product`, + method: 'get', + }) } /** * 根据LAB匹配色卡基础资料 - * @returns -*/ + * @returns + */ export const GetLabProductApi = () => { - return useRequest({ - url: `/v1/mall/product/color/absorb/match`, - method: "get", - }) + return useRequest({ + url: `/v1/mall/product/color/absorb/match`, + method: 'get', + }) } /** * 收藏面料 - * @returns -*/ + * @returns + */ // export const GetProductDetailApi = () => { // return useRequest({ // url: `/v1/mall/product`, diff --git a/src/common/constant.js b/src/common/constant.js index 08f3a2c..c2f3a40 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -1,4 +1,4 @@ -export const BASE_URL = CURRENT_BASE_URL +// export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket` // export const BASE_URL = `http://10.0.0.5:50001/lymarket` @@ -12,7 +12,7 @@ export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 -// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 +export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰 diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx index 08b150b..d8ec31a 100644 --- a/src/components/sideBar/index.tsx +++ b/src/components/sideBar/index.tsx @@ -6,6 +6,7 @@ import Taro, { useReady } from '@tarojs/taro' import InfiniteScroll, { StatusParam } from '../infiniteScroll' import LoadingCard from '../loadingCard' import ProductClass from '@/pages/index/components/productClass' +import { GetClassList } from '@/api/material' type Params = { list?: any[] @@ -19,6 +20,7 @@ type Params = { selfOnScrolltolower?: () => void hasMore?: true | false statusMore?: StatusParam + selectClass?: (val: number) => void } export default memo( @@ -34,6 +36,7 @@ export default memo( selfOnScrolltolower, hasMore = true, statusMore = 0, + selectClass, }: Params) => { let num_half = useRef(0) @@ -57,6 +60,8 @@ export default memo( setSelected(item.id) sideBarOnClick?.(item) computeSelectTab(index) + setClassId(-1) + selectClass?.(-1) } const computeSelectTab = (index) => { @@ -86,7 +91,28 @@ export default memo( }) }) + //二级面料系列分类 const [openClass, setOpenClass] = useState(false) + const [classList, setClassList] = useState([]) + const [classId, setClassId] = useState(0) + const { fetchData } = GetClassList() + const getClassData = async (id) => { + let res = await fetchData({ id }) + if (res.success) { + if (res.data?.list.length > 0) { + res.data.list = [{ id: -1, name: '全部' }, ...res.data.list] + } + setClassList(() => res.data?.list) + } + } + useEffect(() => { + if (selected) getClassData(selected) + }, [selected]) + + const getSelectClass = (id) => { + selectClass?.(id) + setClassId(id) + } return ( <> @@ -105,10 +131,12 @@ export default memo( ) })} - - - setOpenClass(val)} /> - + 0 ? '90rpx' : '20rpx' }}> + {classList.length > 0 && ( + + setOpenClass(val)} onSelect={getSelectClass} defaultSelectId={classId} /> + + )} void - onSelect?: (val: number) => void + onSelect?: (id: number) => void + list?: { name: string; id: number }[] + defaultSelectId: number } -type ParamProduct = Omit & { - defaultSelectIded: number -} +type ParamProduct = Omit export default (option: Param) => { - const { open = false, onOpenClick, onSelect } = option - const [defaultSelectIded, setDefaultSelectIded] = useState(-1) + const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option + // const [defaultSelectIded, setDefaultSelectIded] = useState(-1) + const getSelect = (id) => { + // setDefaultSelectIded(id) + onSelect?.(id) + } return ( <> {open ? ( - onOpenClick?.(val)}> + onOpenClick?.(val)}> ) : ( - onOpenClick?.(val)}> + onOpenClick?.(val)}> )} ) } const ProductClassLine = (option: ParamProduct) => { - const { onOpenClick, defaultSelectIded = -1, onSelect } = option + const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option const [selectInfo, setSelectInfo] = useState({ selected: -1, //当前选中的id - tabId: '', //需要滚动到的id + tabId: 0, //需要滚动到的id }) - const list = useMemo(() => { - const data = new Array(10).fill('').map((item, index) => { - return { id: index, name: '二级分类' + index } - }) - data.unshift({ id: -1, name: '全部' }) - return data - }, []) - useEffect(() => { - let data: { item: any; index: number } = {} - list.filter((item, index) => { - if (item.id == defaultSelectIded) { + let data: { item: any; index: number } = { item: null, index: 0 } + list?.filter((item, index) => { + if (item.id == defaultSelectId) { data = { item, index } } }) - clickEvent(data) - }, [defaultSelectIded]) + if (data.item) { + const num = data.index > 0 ? data.index - 1 : 0 + setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: data.item.id })) + } + }, [defaultSelectId]) const clickEvent = ({ item, index }: { item: any; index: number }) => { const num = index > 0 ? index - 1 : 0 - setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id })) + setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: item.id })) + onSelect?.(item.id) } return ( - {list.map((item, index) => ( + {list?.map((item, index) => ( clickEvent({ item, index })}> - {item.name + item.id} + {item.name} ))} @@ -79,26 +79,26 @@ const ProductClassLine = (option: ParamProduct) => { } const ProductClassBlock = (option: ParamProduct) => { - const { onOpenClick } = option + const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option const [selectInfo, setSelectInfo] = useState(-1) - const list = useMemo(() => { - const data = new Array(10).fill('').map((item, index) => { - return { id: index, name: '二级分类' + index } - }) - data.unshift({ id: -1, name: '全部' }) - return data - }, []) + + useEffect(() => { + setSelectInfo(defaultSelectId) + }, [defaultSelectId]) const clickEvent = (item) => { setSelectInfo(item.id) + onSelect?.(item.id) } return ( - {list.map((item, index) => ( - clickEvent(item)}> + {list?.map((item) => ( + clickEvent(item)}> {item.name} ))} diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss index 38e0ce0..59764b8 100644 --- a/src/pages/index/index.module.scss +++ b/src/pages/index/index.module.scss @@ -32,7 +32,6 @@ .products { flex: 1; height: 0; - margin-top: 20px; .product_right_con { position: relative; .product_class { diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 57e68c3..b4ba402 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -28,11 +28,13 @@ export default () => { 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 [productData, setProductData] = useState({ list: [], total: 0 }) + 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 }) @@ -53,6 +55,7 @@ export default () => { 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 }, []) //上拉加载数据 @@ -82,6 +85,16 @@ export default () => { 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 }) + let 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 })) + }, []) + return ( setShowShopCart(!showShopCart)}> @@ -104,6 +117,7 @@ export default () => { sideBarOnClick={getProductKindId} heightItem={150} refresherTriggered={refresherTriggeredStatus} + selectClass={getSelectClassId} selfOnRefresherRefresh={() => getRefresherRefresh()}>