xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(优化首页完成):

Browse Source
This commit is contained in:
czm 2022-11-23 15:55:02 +08:00
parent 03df61b555
commit 053ced7858
7 changed files with 142 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/material.ts
View File

@ -1,65 +1,74 @@
import { useRequest } from "@/use/useHttp"
import { useRequest } from '@/use/useHttp'
/**
* 获取面料分类列表
* @returns
*/
*/
export const GetCategoryList = () => {
return useRequest({
url: `/v1/mall/category/list`,
method: "get",
method: 'get',
})
}
/**
* 获取面料种类列表
* @returns
*/
*/
export const GetProductKindListApi = () => {
return useRequest({
url: `/v1/mall/product/kind/list`,
method: "get",
url: `/v2/mall/product/kind/list`,
method: 'get',
})
}
/**
* 获取面料列表
* @returns
*/
*/
export const GetProductListApi = () => {
return useRequest({
url: `/v1/mall/product/list`,
method: "get",
method: 'get',
})
}
/**
* 获取面料种类子分类
*/
export const GetClassList = () => {
return useRequest({
url: `/v2/mall/product/kind/sub/list`,
method: 'get',
})
}
/**
* 获取面料详情
* @returns
*/
*/
export const GetProductDetailApi = () => {
return useRequest({
url: `/v1/mall/product`,
method: "get",
method: 'get',
})
}
/**
* 根据LAB匹配色卡基础资料
* @returns
*/
*/
export const GetLabProductApi = () => {
return useRequest({
url: `/v1/mall/product/color/absorb/match`,
method: "get",
method: 'get',
})
}
/**
* 收藏面料
* @returns
*/
*/
// export const GetProductDetailApi = () => {
// return useRequest({
// url: `/v1/mall/product`,

4
src/common/constant.js
View File

@ -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` // 杰

32
src/components/sideBar/index.tsx
View File

@ -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(
)
})}
</ScrollView>
<View className={styles.sideBar_con}>
<View className={styles.sideBar_con} style={{ paddingTop: classList.length > 0 ? '90rpx' : '20rpx' }}>
{classList.length > 0 && (
<View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
<ProductClass open={openClass} onOpenClick={(val) => setOpenClass(val)} />
<ProductClass list={classList} open={openClass} onOpenClick={(val) => setOpenClass(val)} onSelect={getSelectClass} defaultSelectId={classId} />
</View>
)}
<InfiniteScroll
statusMore={statusMore}
hasMore={hasMore}

21
src/pages/index/components/productClass/index.module.scss
View File

@ -14,8 +14,7 @@
display: flex;
box-sizing: border-box;
.product_class_item {
min-width: 170px;
height: 56px;
padding: 10px 20px;
background: #f5f5f5;
border-radius: 29px;
display: flex;
@ -24,6 +23,8 @@
font-size: 24px;
color: rgba(0, 0, 0, 0.8);
box-sizing: border-box;
max-width: 260px;
// @include common_ellipsis;
&:nth-last-child(n + 1) {
margin-right: 16px;
}
@ -76,17 +77,23 @@
flex-wrap: wrap;
box-sizing: border-box;
.product_class_item {
min-width: 167px;
height: 56px;
background: #ecf2ff;
border: 1px solid #3c78f4;
padding: 10px 20px;
background: #f5f5f5;
border-radius: 29px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(0, 0, 0, 0.8);
margin: 0 8px 20px 8px;
box-sizing: border-box;
max-width: 260px;
// @include common_ellipsis(1);
}
.product_class_item_selected {
border: 1px solid #3c78f4;
color: #3c78f4;
margin: 0 6px 20px 6px;
background: #ecf2ff;
}
}
}

72
src/pages/index/components/productClass/index.tsx
View File

@ -6,67 +6,67 @@ import { useEffect, useMemo, useState } from 'react'
type Param = {
open: boolean
onOpenClick?: (val: boolean) => void
onSelect?: (val: number) => void
onSelect?: (id: number) => void
list?: { name: string; id: number }[]
defaultSelectId: number
}
type ParamProduct = Omit<Param, 'open'> & {
defaultSelectIded: number
}
type ParamProduct = Omit<Param, 'open'>
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 ? (
<ProductClassBlock defaultSelectIded={defaultSelectIded} onSelect={onSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
<ProductClassBlock list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
) : (
<ProductClassLine defaultSelectIded={defaultSelectIded} onSelect={onSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
<ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
)}
</>
)
}
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 (
<View className={styles.product_class_main_line}>
<ScrollView scrollX scrollWithAnimation={true} className={styles.product_class_scroll} scrollIntoView={`tabs_${selectInfo.tabId}`}>
<View className={styles.product_class_list}>
{list.map((item, index) => (
{list?.map((item, index) => (
<View
id={`tabs_${item.id}`}
className={classnames(styles.product_class_item, item.id == selectInfo.selected ? styles.product_class_item_selected : '')}
onClick={() => clickEvent({ item, index })}>
{item.name + item.id}
{item.name}
</View>
))}
</View>
@ -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 (
<View className={styles.product_class_main_block}>
<View className={styles.product_class_block_con}>
<ScrollView scrollY className={styles.product_class_scroll}>
<View className={styles.product_class_list}>
{list.map((item, index) => (
<View className={styles.product_class_item} onClick={() => clickEvent(item)}>
{list?.map((item) => (
<View
className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
onClick={() => clickEvent(item)}>
{item.name}
</View>
))}

1
src/pages/index/index.module.scss
View File

@ -32,7 +32,6 @@
.products {
flex: 1;
height: 0;
margin-top: 20px;
.product_right_con {
position: relative;
.product_class {

16
src/pages/index/index.tsx
View File

@ -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 (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
@ -104,6 +117,7 @@ export default () => {
sideBarOnClick={getProductKindId}
heightItem={150}
refresherTriggered={refresherTriggeredStatus}
selectClass={getSelectClassId}
selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list} />
</SideBar>