Skip to content

J
jinfa-platform
Commit 2067b652 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:商品筛选

parent 3128934e
Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 226 deletions
src/constants/index.ts
View file @ 2067b652
......@@ -25,7 +25,7 @@ export const Environment_Status = {
3: "APP"
}
export enum FILTE_RTYPE {
export enum FILTER_TYPE {
/**
* 常用筛选
*/
......
src/pages/lxMall/commodity/index.less
View file @ 2067b652
......@@ -103,6 +103,11 @@
display: flex;
align-items: center;
&_reset {
font-size: 12px;
cursor: pointer;
}
.filter_bar_left {
display: flex;
align-items: center;
......
src/pages/lxMall/commodity/index.tsx
View file @ 2067b652
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import SearchNoResult from '../components/SearchNoResult'
import isEmpty from 'lodash/isEmpty'
import { Spin } from 'antd'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services'
......@@ -18,7 +21,7 @@ import styles from './index.less'
interface filterValueType {
key: string | string[];
title: string;
type: FilterType;
type: FILTER_TYPE;
}
interface CommodityPropsType {
......@@ -43,17 +46,18 @@ interface filterQuery {
}
const Commodity: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, onDeleteFilterItem, onResetFilter, onFilter } = FilterStore
const { layoutType } = props
const { query: { categoryId, categoryName } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
const [filterParam, setFilterParam] = useState<filterQuery | {}>({})
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.style, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
useEffect(() => {
fetchCommodityList()
......@@ -61,15 +65,28 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
useEffect(() => {
if (categoryId && categoryName) {
handleFilter({
onFilter({
key: [categoryId],
title: decodeURIComponent(atob(categoryName)),
type: FilterType.category,
type: FILTER_TYPE.category,
})
}
}, [props.location.query])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
}, [filterList])
useEffect(() => {
return (() => {
onResetFilter()
})
}, [])
const fetchCommodityList = () => {
let param: filterQuery = {
current,
......@@ -90,31 +107,19 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
})
}
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
if (filteState) {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
handleFilterChange(tempFilterList)
}
const handleFilterChange = (newFilterList: any) => {
let tempFilterParam: any = {}
for (let filterItem of newFilterList) {
switch (filterItem.type) {
case FilterType.category:
case FILTER_TYPE.category:
tempFilterParam.categoryId = filterItem.key[0]
break
case FILTER_TYPE.brand:
tempFilterParam.brandId = filterItem.key
break
case FILTER_TYPE.commodityType:
tempFilterParam.priceType = filterItem.key
break
default:
break
}
......@@ -122,19 +127,15 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
setFilterParam(tempFilterParam)
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
handleFilterChange(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
handleFilterChange([])
onResetFilter()
}
const handlePageChange = (page) => {
......@@ -145,7 +146,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter onFilter={handleFilter} filterConfig={filterConfig} layoutType={layoutType} />
<Filter filterConfig={filterConfig} layoutType={layoutType} />
<div className={styles.commodity_main}>
<div className={styles.banner}>
<img src={bannerImg} />
......@@ -193,14 +194,14 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
filterList.map(item => (
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item.key)} />
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
))
}
</div>
</div>
{
(commodityList.length === 0 || !commodityList) ? <SearchNoResult search="" /> : (
(commodityList.length === 0 || !commodityList) ? !loading && <SearchNoResult search="" /> : (
<>
<Spin spinning={loading}>
<CommodityList showType={showType} commodityList={commodityList} layoutType={layoutType} />
......@@ -218,4 +219,4 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
)
}
export default Commodity
export default observer(Commodity)
src/pages/lxMall/commodity/search.tsx
View file @ 2067b652
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
import { history } from 'umi'
import { Pagination } from 'antd'
......@@ -8,21 +9,18 @@ import CommodityList from './list'
import SearchNoResult from '../components/SearchNoResult'
import isEmpty from 'lodash/isEmpty'
import { Spin } from 'antd'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { useLocalStore, observer } from 'mobx-react'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import styles from './index.less'
interface filterValueType {
key: string;
title: string;
type: FilterType;
}
interface CommodityPropsType {
location: any,
layoutType: 'mall' | 'shop' | 'channel'
layoutType: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
interface filterQuery {
......@@ -42,23 +40,30 @@ interface filterQuery {
}
const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, onDeleteFilterItem, onResetFilter } = FilterStore
const { layoutType } = props
const { query: { search = "" } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
const [filterParam, setFilterParam] = useState<filterQuery | {}>({})
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.style, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
useEffect(() => {
fetchCommodityList()
}, [filterParam, current, search])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
}, [filterList])
const fetchCommodityList = () => {
let param: filterQuery = {
current,
......@@ -82,29 +87,11 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
})
}
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
if (filteState) {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
handleFilterChange(tempFilterList)
}
const handleFilterChange = (newFilterList: any) => {
let tempFilterParam: any = {}
for (let filterItem of newFilterList) {
switch (filterItem.type) {
case FilterType.category:
case FILTER_TYPE.category:
tempFilterParam.categoryId = filterItem.key[0]
break
default:
......@@ -114,24 +101,15 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
setFilterParam(tempFilterParam)
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
handleFilterChange(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
* 重置筛选
*/
const handleResetFilter = () => {
if (search) {
setFilterList([])
history.push('/commodity/search')
} else {
setFilterList([])
handleFilterChange([])
}
onResetFilter()
}
const handlePageChange = (page) => {
......@@ -149,7 +127,7 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<Filter filterConfig={filterConfig} layoutType={layoutType} />
<div className={styles.commodity_main}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
......@@ -202,7 +180,7 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
filterList.map(item => (
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item.key)} />
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
))
}
......@@ -230,4 +208,4 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
)
}
export default CommoditySearch
export default observer(CommoditySearch)
src/pages/lxMall/commodityDetail/index.tsx
View file @ 2067b652
......@@ -12,7 +12,7 @@ import ShopInfo from './components/ShopInfo'
import ProductDescription from './components/ProductDescription'
import InputNumber from '@/components/InputNumber'
import { PublicApi } from '@/services/api'
import { GetSearchCommodityShopGetCommodityDetailResponse } from '@/services'
import { GetSearchShopEnterpriseGetCommodityDetailResponse } from '@/services'
import jinhuodanIcon from '@/assets/imgs/jinhuodan.png'
import styles from './index.less'
......@@ -70,7 +70,7 @@ const typeList = [
const CommodityDetail = (props) => {
const { query: { id } } = props.location
const [addSuccessVisible, setAddSuccessVisible] = useState<boolean>(false)
const [commodityDetail, setCommodityDetail] = useState<GetSearchCommodityShopGetCommodityDetailResponse>()
const [commodityDetail, setCommodityDetail] = useState<GetSearchShopEnterpriseGetCommodityDetailResponse>()
const [buyCount, setBuyCount] = useState<number>(1)
......@@ -80,7 +80,7 @@ const CommodityDetail = (props) => {
const fetchDetail = () => {
PublicApi.getSearchCommodityShopGetCommodityDetail({ commodityId: id }).then(res => {
PublicApi.getSearchShopEnterpriseGetCommodityDetail({ commodityId: id }).then(res => {
if (res.code === 1000) {
setCommodityDetail(res.data)
initAttributeAndValueList(res.data.unitPriceAndPicList)
......
src/pages/lxMall/components/Filter/components/Brand/index.tsx
View file @ 2067b652
import React from 'react'
import React, { useEffect, useState } from 'react'
import FilterBox from '../FilterBox'
import { PublicApi } from '@/services/api'
import { GetSearchShopEnterpriseGetBrandResponse } from '@/services'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import './index.less'
interface BrandPropsType {
onFilter?: Function;
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
const Brand: React.FC<BrandPropsType> = (props) => {
const { onFilter } = props
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [brandList, setBrandList] = useState<GetSearchShopEnterpriseGetBrandResponse>([])
let mock_brand_list = [
{
id: 1,
......@@ -32,9 +37,26 @@ const Brand: React.FC<BrandPropsType> = (props) => {
},
]
useEffect(() => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
// PublicApi.getSearchShopEnterpriseGetBrand((res) => {
// if (res.code === 1000) {
// setBrandList(res.data)
// }
// })
break
case LAYOUT_TYPE.shop:
break
case LAYOUT_TYPE.channel:
break
}
}, [layoutType])
const handleSelectBrand = (brandInfo) => {
onFilter({
type: 'brand',
type: FILTER_TYPE.brand,
key: brandInfo.id,
title: brandInfo.name
})
......
src/pages/lxMall/components/Filter/components/Category/index.tsx
View file @ 2067b652
import React, { useEffect, useState } from 'react'
import { Tree } from 'antd'
import FilterBox from '../FilterBox'
import { LAYOUT_TYPE } from '@/constants'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import { inject, observer } from 'mobx-react'
import isEmpty from 'lodash/isEmpty'
import styles from './index.less'
interface CategoryPropsType {
onFilter?: Function;
CategoryStore?: any;
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
const Category: React.FC<CategoryPropsType> = (props) => {
const { onFilter, CategoryStore: { enterpriseCategoryList, storeCategoryList, fetchEnterpriseCategoryList, fetchStoreCategoryList }, layoutType = LAYOUT_TYPE.mall } = props
const { CategoryStore: { enterpriseCategoryList, storeCategoryList, fetchEnterpriseCategoryList, fetchStoreCategoryList }, layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [selectedKeys, setSelectedKeys] = useState<string[]>([])
const [expandedKeys, setExpandedKeys] = useState<string[]>([])
const [treeData, setTreeData] = useState<any>([])
useEffect(() => {
if (isEmpty(filterList)) {
setSelectedKeys([])
} else {
let initKeys = []
for (let item of filterList) {
if (item.type === FILTER_TYPE.category) {
initKeys.push(String(item.key))
}
}
setSelectedKeys(initKeys)
}
}, [filterList])
useEffect(() => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
fetchEnterpriseCategoryList()
......@@ -69,13 +85,13 @@ const Category: React.FC<CategoryPropsType> = (props) => {
})
}
})
// setExpandedKeys(initExpandKeys)
setTreeData(result)
}
const handleSelect = (selectedKeys, info) => {
const { title } = info.node
setSelectedKeys(selectedKeys)
console.log(selectedKeys, "selectedKeys")
onFilter({
type: 'category',
key: selectedKeys,
......@@ -94,6 +110,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
<div className={styles.filter_category}>
<Tree
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onSelect={handleSelect}
treeData={treeData}
onExpand={handleExpand}
......
src/pages/lxMall/components/Filter/components/CommodityType/index.tsx
View file @ 2067b652
import React from 'react'
import React, { useState } from 'react'
import { Checkbox } from 'antd'
import FilterBox from '../FilterBox'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import isEmpty from 'lodash/isEmpty'
import './index.less'
interface CommodityTypePropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
const CheckboxGroup = Checkbox.Group
const CommodityType: React.FC<CommodityTypePropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [selectKeys, setSelectKeys] = useState<number[]>([])
const styleOptions = [
{ label: '只看现价商品', value: '1' },
{ label: '只看询价商品', value: '2' },
{ label: '只看现价商品', value: 1 },
{ label: '只看询价商品', value: 2 },
];
const handleChange = () => {
const handleChange = (checkValue) => {
let result = []
if (isEmpty(selectKeys)) {
result = checkValue
} else {
result = checkValue.filter(item => item !== selectKeys[0])
}
setSelectKeys(result)
console.log(result, "result")
onFilter({
type: FILTER_TYPE.commodityType,
key: result[0],
title: getItemText(result[0])
})
}
const getItemText = (key: number) => {
let result = ""
for (let item of styleOptions) {
if (item.value === key) {
result = item.label
}
}
return result
}
return (
......@@ -25,7 +53,7 @@ const CommodityType: React.FC<CommodityTypePropsType> = (props) => {
title="商品类型"
>
<div className="filter_style">
<CheckboxGroup options={styleOptions} onChange={handleChange} />
<CheckboxGroup options={styleOptions} value={selectKeys} onChange={handleChange} />
</div>
</FilterBox>
)
......
src/pages/lxMall/components/Filter/components/UseArea/index.tsx
View file @ 2067b652
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import FilterBox from '../FilterBox'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import './index.less'
interface UseAreaPropsType {
onFilter?: Function;
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
const UseArea: React.FC<UseAreaPropsType> = (props) => {
const { onFilter } = props
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [selectCity, setSelectCity] = useState<string[]>([])
......@@ -82,6 +86,23 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
]
useEffect(() => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
// PublicApi.getSearchShopEnterpriseGetBrand((res) => {
// if (res.code === 1000) {
// setBrandList(res.data)
// }
// })
break
case LAYOUT_TYPE.shop:
break
case LAYOUT_TYPE.channel:
break
}
}, [layoutType])
const handleSelect = (item: any, type: number) => {
if (type === 1) {
setSelectCity([item.value])
......
src/pages/lxMall/components/Filter/index.tsx
View file @ 2067b652
import React from 'react'
import isEmpty from 'lodash/isEmpty'
import { inject, observer } from 'mobx-react'
import CommonlyUsed from './components/CommonlyUsed'
import Category from './components/Category'
import { FILTER_TYPE } from '@/constants'
import Style from './components/Style'
import Brand from './components/Brand'
import Price from './components/Price'
......@@ -14,89 +16,37 @@ import { LAYOUT_TYPE } from '@/constants'
import './index.less'
interface FilterPropsType {
onFilter?: Function;
filterConfig?: string[],
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
export enum FilterType {
/**
* 常用筛选
*/
commonlyUsed = 'commonlyUsed',
/**
* 分类
*/
category = 'category',
/**
* 风格
*/
style = 'style',
/**
* 品牌
*/
brand = 'brand',
/**
* 价格
*/
price = 'price',
/**
* 发货地
*/
useArea = 'useArea',
/**
* 商品类型
*/
commodityType = 'commodityType',
/**
* 活跃店铺
*/
activeStores = 'activeStores',
/**
* 最新加入
*/
newJoin = 'newJoin',
/**
* 所需积分
*/
points = 'points',
/**
* 商品名称
*/
name = 'name'
}
const Filter: React.FC<FilterPropsType> = (props) => {
const { onFilter, filterConfig = [], layoutType = LAYOUT_TYPE.mall } = props
const handleFilter = (filterValue: any) => {
onFilter(filterValue)
}
const { filterConfig = [] } = props
const renderFilter = () => {
if (!isEmpty(filterConfig)) {
return filterConfig.map(type => {
switch (type) {
case FilterType.commonlyUsed:
return <CommonlyUsed key={type} />
case FilterType.category:
return <Category onFilter={handleFilter} key={type} layoutType={layoutType} />
case FilterType.style:
return <Style onFilter={handleFilter} key={type} />
case FilterType.brand:
return <Brand onFilter={handleFilter} key={type} />
case FilterType.price:
return <Price key={type} />
case FilterType.useArea:
return <UseArea onFilter={handleFilter} key={type} />
case FilterType.commodityType:
return <CommodityType key={type} />
case FilterType.activeStores:
return <ActiveStores key={type} />
case FilterType.newJoin:
return <NewJoin key={type} />
case FilterType.points:
return <Points key={type} />
case FILTER_TYPE.commonlyUsed:
return <CommonlyUsed key={type} {...props} />
case FILTER_TYPE.category:
return <Category key={type} {...props} />
case FILTER_TYPE.style:
return <Style key={type} {...props} />
case FILTER_TYPE.brand:
return <Brand key={type} {...props} />
case FILTER_TYPE.price:
return <Price key={type} {...props} />
case FILTER_TYPE.useArea:
return <UseArea key={type} {...props} />
case FILTER_TYPE.commodityType:
return <CommodityType key={type} {...props} />
case FILTER_TYPE.activeStores:
return <ActiveStores key={type} {...props} />
case FILTER_TYPE.newJoin:
return <NewJoin key={type} {...props} />
case FILTER_TYPE.points:
return <Points key={type} {...props} />
default:
break
}
......@@ -115,4 +65,4 @@ const Filter: React.FC<FilterPropsType> = (props) => {
)
}
export default Filter
export default inject('FilterStore')(observer(Filter))
src/pages/lxMall/pointsMall/index.tsx
View file @ 2067b652
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -16,15 +17,6 @@ interface filterValueType {
type: FILTER_TYPE;
}
enum FILTER_TYPE {
category = 'category', // 分类
brand = 'brand', // 品牌
style = 'style', // 风格
price = 'price', // 价格
area = 'area', // 适用地区
commodityType = 'commodityType', // 商品类型
}
interface CommodityPropsType {
location: any
}
......@@ -34,7 +26,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.category, FilterType.points]
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.points]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
......@@ -69,7 +61,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<img src={bannerImg} />
......
src/pages/lxMall/purchaseOnline/index.tsx
View file @ 2067b652
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -16,15 +17,6 @@ interface filterValueType {
type: FILTER_TYPE;
}
enum FILTER_TYPE {
category = 'category', // 分类
brand = 'brand', // 品牌
style = 'style', // 风格
price = 'price', // 价格
area = 'area', // 适用地区
commodityType = 'commodityType', // 商品类型
}
interface PurchaseOnlinePropsType {
location: any
}
......@@ -34,7 +26,7 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.useArea]
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.useArea]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
......@@ -69,7 +61,7 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
<div className="purchaseOnline">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<img src={bannerImg} />
......
src/pages/lxMall/shopList/index.tsx
View file @ 2067b652
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter, { FilterType } from '../components/Filter'
import Filter from '../components/Filter'
import { FILTER_TYPE } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -16,15 +17,6 @@ interface filterValueType {
type: FILTER_TYPE;
}
enum FILTER_TYPE {
category = 'category', // 分类
brand = 'brand', // 品牌
style = 'style', // 风格
price = 'price', // 价格
area = 'area', // 适用地区
commodityType = 'commodityType', // 商品类型
}
interface ShopListPropsType {
location: any
}
......@@ -34,7 +26,7 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.category, FilterType.useArea, FilterType.activeStores, FilterType.newJoin]
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea, FILTER_TYPE.activeStores, FILTER_TYPE.newJoin]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
......@@ -69,7 +61,7 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="tool_bar">
<div className="tool_bar_left">
......
src/store/category/index.ts
View file @ 2067b652
import { action, computed, observable, runInAction } from 'mobx'
import { PublicApi } from '@/services/api'
import { GetSearchShopEnterpriseGetCategoryTreeResponse, GetSearchShopStoreGetCustomerCategoryTreeResponse } from '@/services'
const defaultCategory = [
{
......@@ -47,8 +46,8 @@ const defaultCategory = [
class CategoryStore {
@observable public categoryList: any = []; // 品类列表
@observable public enterpriseCategoryList: GetSearchShopEnterpriseGetCategoryTreeResponse = []
@observable public storeCategoryList: GetSearchShopStoreGetCustomerCategoryTreeResponse = []
@observable public enterpriseCategoryList: any = []
@observable public storeCategoryList: any = []
/**
* 企业商城商品分类列表
......
src/store/filter/index.ts
View file @ 2067b652
import { action, computed, observable, runInAction } from 'mobx'
import { FILTE_RTYPE } from '@/constants'
import isEmpty from 'lodash/isEmpty'
import { FILTER_TYPE } from '@/constants'
interface filterValueType {
key: string | string[];
title: string;
type: FILTE_RTYPE;
type: FILTER_TYPE;
}
class FilterStore {
......@@ -12,12 +13,55 @@ class FilterStore {
* 筛选条件列表
*/
@observable filterList = []
@observable filterUpdate: boolean = false
@action
public handleFilter = (filterValue: filterValueType) => {
@action.bound
public onFilter = (filterValue: filterValueType) => {
let filteState = this.filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...this.filterList]
if (filteState) {
if (!filterValue.key || filterValue.key.length === 0) {
tempFilterList = tempFilterList.filter(item => {
if (item.type === filterValue.type) {
return item.key === filterValue.key
}
return true
})
} else {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
}
} else {
tempFilterList = [...tempFilterList, filterValue]
}
this.filterUpdate = true
this.filterList = tempFilterList
}
@action.bound
public onResetFilter = () => {
this.filterList = []
this.filterUpdate = true
}
@action.bound
public onDeleteFilterItem = (key: string, type: FILTER_TYPE) => {
let tempFilterList = [...this.filterList]
tempFilterList = tempFilterList.filter(item => {
if (item.type === type) {
return String(item.key) !== String(key)
}
return true
})
this.filterList = tempFilterList
this.filterUpdate = true
}
}
export default FilterStore
\ No newline at end of file
export default FilterStore
\ No newline at end of file
src/store/index.tsx
View file @ 2067b652
import React from 'react';
import UserStore from './user'
import ThemeStore from './theme'
import ProductStroe from './product'
import SiteStore from './site'
import CategoryStore from './category'
import React from 'react';
import FilterStore from './filter'
import { Provider } from 'mobx-react'
import { ILoginModule } from '@/module/userModule';
import { IProductModule } from '@/module/productModule'
......@@ -36,7 +37,8 @@ export const store = {
ThemeStore: new ThemeStore,
ProductStore: new ProductStroe,
SiteStore: new SiteStore,
CategoryStore: new CategoryStore
CategoryStore: new CategoryStore,
FilterStore: new FilterStore,
}
const MobxProvider: React.FC = (props) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment