440 lines
11 KiB
JavaScript
Executable File
440 lines
11 KiB
JavaScript
Executable File
import React, { useRef, useEffect, useState } from 'react'
|
||
import { View, Text, ScrollView } from '@tarojs/components'
|
||
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
|
||
import { useSelector, useDispatch } from 'react-redux'
|
||
import { useImmer } from 'use-immer'
|
||
import { AtDrawer, AtTabs } from 'taro-ui'
|
||
import {
|
||
SpFilterBarNew,
|
||
SpTagBar,
|
||
SpGoodsItem,
|
||
SpSearchBar,
|
||
SpPage,
|
||
SpScrollView,
|
||
SpDrawer,
|
||
SpSelect
|
||
} from '@/components'
|
||
import { fetchUserFavs } from '@/store/slices/user'
|
||
import doc from '@/doc'
|
||
import api from '@/api'
|
||
import {
|
||
pickBy,
|
||
classNames,
|
||
isWeixin,
|
||
getDistributorId,
|
||
styleNames,
|
||
entryLaunch,
|
||
VERSION_STANDARD
|
||
} from '@/utils'
|
||
import S from '@/spx'
|
||
|
||
import './list.scss'
|
||
|
||
const initialState = {
|
||
leftList: [],
|
||
rightList: [],
|
||
brandList: [],
|
||
brandSelect: [],
|
||
filterList: [
|
||
{ title: '综合' },
|
||
{ title: '销量' },
|
||
{ title: '价格', icon: 'icon-shengxu-01' },
|
||
{ title: '价格', icon: 'icon-jiangxu-01' }
|
||
],
|
||
curFilterIdx: 0,
|
||
tagList: [],
|
||
curTagIdx: 0,
|
||
keywords: '',
|
||
show: false,
|
||
fixTop: 0,
|
||
routerParams: null,
|
||
card_id: null, // 兑换券
|
||
total: undefined,
|
||
}
|
||
|
||
function ItemList () {
|
||
const $instance = getCurrentInstance()
|
||
const [state, setState] = useImmer(initialState)
|
||
const {
|
||
keywords,
|
||
leftList,
|
||
rightList,
|
||
brandList,
|
||
brandSelect,
|
||
curFilterIdx,
|
||
filterList,
|
||
tagList,
|
||
curTagIdx,
|
||
show,
|
||
fixTop,
|
||
routerParams,
|
||
total
|
||
} = state
|
||
const [isShowSearch, setIsShowSearch] = useState(false)
|
||
const { cat_id, main_cat_id, tag_id, card_id, user_card_id } = routerParams || {}
|
||
const { shopInfo } = useSelector((state) => state.shop)
|
||
const dispatch = useDispatch()
|
||
|
||
const goodsRef = useRef()
|
||
// console.log('$instance.router.params', $instance.router?.params)
|
||
useEffect(() => {
|
||
if (S.getAuthToken()) {
|
||
dispatch(fetchUserFavs())
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
// card_id, user_card_id: 兑换券参数
|
||
entryLaunch.getRouteParams($instance.router.params).then((params) => {
|
||
const { cat_id, main_cat_id, tag_id, card_id, user_card_id } = params
|
||
|
||
setState((draft) => {
|
||
draft.routerParams = {
|
||
cat_id,
|
||
main_cat_id,
|
||
tag_id,
|
||
card_id,
|
||
user_card_id
|
||
}
|
||
})
|
||
})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (routerParams) {
|
||
goodsRef.current.reset()
|
||
}
|
||
}, [routerParams])
|
||
|
||
useEffect(() => {
|
||
if (shopInfo && card_id) {
|
||
goodsRef.current.reset()
|
||
}
|
||
}, [shopInfo])
|
||
|
||
useDidShow(() => {
|
||
// setTimeout(() => {
|
||
// if (isWeixin) {
|
||
// Taro.createSelectorQuery()
|
||
// .select('#item-list-head')
|
||
// .boundingClientRect((res) => {
|
||
// console.log('boundingClientRect:', res) //
|
||
// if (res) {
|
||
// setState((draft) => {
|
||
// draft.fixTop = res.bottom
|
||
// console.log('fixTop1:', res.bottom) //
|
||
// })
|
||
// }
|
||
// })
|
||
// .exec()
|
||
// } else {
|
||
// Taro.createSelectorQuery()
|
||
// .select('#item-list-head')
|
||
// .boundingClientRect((res) => {
|
||
// console.log('boundingClientRect:', res) //
|
||
// if (res) {
|
||
// setState((draft) => {
|
||
// draft.fixTop = res.bottom
|
||
// console.log('fixTop2:', res.bottom) //
|
||
// })
|
||
// }
|
||
// })
|
||
// .exec()
|
||
// // setState((draft) => {
|
||
// // draft.fixTop = document.getElementById('item-list-head').clientHeight
|
||
// // console.log('fixTop2:', document.getElementById('item-list-head').clientHeight) //
|
||
// // })
|
||
// }
|
||
// }, 1000)
|
||
})
|
||
|
||
const fetch = async ({ pageIndex, pageSize }) => {
|
||
// card_id: 兑换券id
|
||
// const { cat_id, main_cat_id, tag_id, card_id } = $instance.router.params
|
||
console.log(shopInfo)
|
||
let params = {
|
||
page: pageIndex,
|
||
pageSize,
|
||
brand_id: brandSelect,
|
||
keywords: keywords,
|
||
approve_status: 'onsale,only_show',
|
||
item_type: 'normal',
|
||
is_point: 'false',
|
||
tag_id,
|
||
card_id
|
||
}
|
||
|
||
if (curFilterIdx == 1) {
|
||
// 销量
|
||
params['goodsSort'] = 1
|
||
} else if (curFilterIdx == 2) {
|
||
// 价格升序
|
||
params['goodsSort'] = 3
|
||
} else if (curFilterIdx == 3) {
|
||
// 价格降序
|
||
params['goodsSort'] = 2
|
||
}
|
||
|
||
if (curTagIdx) {
|
||
params['tag_id'] = curTagIdx
|
||
}
|
||
|
||
if (cat_id) {
|
||
params['category'] = cat_id
|
||
}
|
||
|
||
if (main_cat_id) {
|
||
params['main_category'] = main_cat_id
|
||
}
|
||
|
||
if (VERSION_STANDARD) {
|
||
// 有兑换券的时候，店铺ID传当前选中的店铺
|
||
params.distributor_id = card_id ? shopInfo?.distributor_id : getDistributorId()
|
||
}
|
||
|
||
const {
|
||
list,
|
||
total_count,
|
||
item_params_list = [],
|
||
select_tags_list = [],
|
||
brand_list
|
||
} = await api.item.search(params)
|
||
console.time('list render')
|
||
const n_list = pickBy(list, doc.goods.ITEM_LIST_GOODS)
|
||
const resLeftList = n_list.filter((item, index) => {
|
||
if (index % 2 == 0) {
|
||
return item
|
||
}
|
||
})
|
||
const resRightList = n_list.filter((item, index) => {
|
||
if (index % 2 == 1) {
|
||
return item
|
||
}
|
||
})
|
||
console.timeEnd('list render')
|
||
|
||
setState((v) => {
|
||
v.total = total_count
|
||
v.leftList[pageIndex - 1] = resLeftList
|
||
v.rightList[pageIndex - 1] = resRightList
|
||
v.brandList = pickBy(brand_list?.list, doc.goods.WGT_GOODS_BRAND)
|
||
if (v.tagList.length < 1) {
|
||
if (select_tags_list.length > 0) {
|
||
v.tagList = [
|
||
{
|
||
tag_name: '全部',
|
||
tag_id: 0
|
||
}
|
||
].concat(select_tags_list)
|
||
v.fixTop = fixTop + 34
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
return { total: total_count }
|
||
}
|
||
|
||
const handleOnFocus = () => {
|
||
setIsShowSearch(true)
|
||
}
|
||
|
||
const handleOnChange = (val) => {
|
||
setState((v) => {
|
||
v.keywords = val
|
||
})
|
||
}
|
||
|
||
const handleOnClear = async () => {
|
||
await setState((draft) => {
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.keywords = ''
|
||
})
|
||
setIsShowSearch(false)
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const handleSearchOff = async () => {
|
||
setIsShowSearch(false)
|
||
await setState((v) => {
|
||
v.keywords = ''
|
||
})
|
||
}
|
||
|
||
const handleConfirm = async (val) => {
|
||
setIsShowSearch(false)
|
||
await setState((draft) => {
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.keywords = val
|
||
})
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const onChangeTag = async (index, item) => {
|
||
await setState((draft) => {
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.curTagIdx = item.tag_id
|
||
})
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const handleFilterChange = async (e) => {
|
||
await setState((draft) => {
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.curFilterIdx = e.current || 0
|
||
})
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const onChangeBrand = (val) => {
|
||
setState((draft) => {
|
||
draft.brandSelect = val
|
||
})
|
||
}
|
||
|
||
const onConfirmBrand = async () => {
|
||
await setState((draft) => {
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.show = false
|
||
})
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const onResetBrand = async () => {
|
||
await setState((draft) => {
|
||
draft.brandSelect = []
|
||
draft.leftList = []
|
||
draft.rightList = []
|
||
draft.show = false
|
||
})
|
||
goodsRef.current.reset()
|
||
}
|
||
|
||
const handleClickStore = (item) => {
|
||
const url = `/subpages/store/index?id=${item.distributor_info.distributor_id}`
|
||
Taro.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
return (
|
||
<SpPage
|
||
scrollToTopBtn
|
||
showNavCartIcon
|
||
className={classNames('page-item-list has-navbar', {
|
||
'has-tagbar': tagList.length > 0
|
||
})}
|
||
>
|
||
<View className='search-wrap'>
|
||
{/* 兑换券选择店铺 */}
|
||
{VERSION_STANDARD && card_id && (
|
||
<View
|
||
className='store-picker'
|
||
onClick={() => {
|
||
Taro.navigateTo({
|
||
url: '/subpages/store/list'
|
||
})
|
||
}}
|
||
>
|
||
<View className='shop-name'>{shopInfo.store_name || '暂无店铺信息'}</View>
|
||
<Text className='iconfont icon-qianwang-01'></Text>
|
||
</View>
|
||
)}
|
||
<SpSearchBar
|
||
keyword={keywords}
|
||
placeholder='搜索商品'
|
||
onFocus={handleOnFocus}
|
||
onChange={handleOnChange}
|
||
onClear={handleOnClear}
|
||
onCancel={handleSearchOff}
|
||
onConfirm={handleConfirm}
|
||
/>
|
||
</View>
|
||
<View className='item-list-head'>
|
||
{tagList.length > 0 && (
|
||
<SpTagBar className='tag-list' list={tagList} value={curTagIdx} onChange={onChangeTag}>
|
||
{/* <View
|
||
className="filter-btn"
|
||
onClick={() => {
|
||
setState(v => {
|
||
v.show = true;
|
||
});
|
||
}}
|
||
>
|
||
筛选<Text className="iconfont icon-filter"></Text>
|
||
</View> */}
|
||
</SpTagBar>
|
||
)}
|
||
|
||
<SpFilterBarNew
|
||
num={total}
|
||
onChange={handleFilterChange}
|
||
/>
|
||
</View>
|
||
<SpScrollView className='item-list-scroll' auto={false} ref={goodsRef} fetch={fetch}>
|
||
<View className='goods-list'>
|
||
<View className='left-container'>
|
||
{leftList.map((list, idx) => {
|
||
return list.map((item, sidx) => (
|
||
<View className='goods-item-wrap' key={`goods-item-l__${idx}_${sidx}`}>
|
||
<SpGoodsItem
|
||
showFav
|
||
onStoreClick={handleClickStore}
|
||
info={{
|
||
...item,
|
||
card_id,
|
||
user_card_id
|
||
}}
|
||
/>
|
||
</View>
|
||
))
|
||
})}
|
||
</View>
|
||
<View className='right-container'>
|
||
{rightList.map((list, idx) => {
|
||
return list.map((item, sidx) => (
|
||
<View className='goods-item-wrap' key={`goods-item-r__${idx}_${sidx}`}>
|
||
<SpGoodsItem
|
||
showFav
|
||
onStoreClick={handleClickStore}
|
||
info={{
|
||
...item,
|
||
card_id,
|
||
user_card_id
|
||
}}
|
||
/>
|
||
</View>
|
||
))
|
||
})}
|
||
</View>
|
||
</View>
|
||
</SpScrollView>
|
||
|
||
{/* <SpDrawer
|
||
show={show}
|
||
onClose={() => {
|
||
setState(v => {
|
||
v.show = false;
|
||
});
|
||
}}
|
||
onConfirm={onConfirmBrand}
|
||
onReset={onResetBrand}
|
||
>
|
||
<View className="brand-title">品牌</View>
|
||
<SpSelect
|
||
multiple
|
||
info={brandList}
|
||
value={brandSelect}
|
||
onChange={onChangeBrand}
|
||
/>
|
||
</SpDrawer> */}
|
||
</SpPage>
|
||
)
|
||
}
|
||
|
||
export default ItemList
|