Skip to content

J
jinfa-platform
Commit 033ae536 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:在线求购,店铺列表排序操作

parent e53f021a
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 194 deletions
src/constants/index.ts
View file @ 033ae536
......@@ -140,10 +140,30 @@ export enum FILTER_TYPE {
*/
soldSort = 'soldSort',
/**
* 信用从高到低
* 信用排序
*/
creditSort = 'creditSort',
/**
* 信用从高到低
*/
creditSortHighToLow = 'creditSortHighToLow',
/**
* 信用从低到高
*/
creditSortLowToHigh = 'creditSortLowToHigh',
/**
* 时间排序
*/
dateSort = 'dateSort',
/**
* 时间从高到低
*/
dateSortHighToLow = 'dateSortHighToLow',
/**
* 时间从低到高
*/
dateSortLowToHigh = 'dateSortLowToHigh',
/**
* 属性筛选
*/
attribute = 'attribute'
......@@ -349,8 +369,8 @@ export const DOC_TYPE_EXCHANGE_RECEIPT = 'S008'; // 换货入库
export const DOC_STATUS_UNREVIEWED = 1; // 未审核
export const DOC_STATUS_REVIEWED = 2; // 已审核
export const DOC_STATUS = {
[DOC_STATUS_UNREVIEWED]: '未审核',
[DOC_STATUS_REVIEWED]: '已审核',
[DOC_STATUS_UNREVIEWED]: '未审核',
[DOC_STATUS_REVIEWED]: '已审核',
};
// 订单类型
......
src/pages/lxMall/pointsMall/index.less
View file @ 033ae536
......@@ -62,6 +62,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......
src/pages/lxMall/pointsMall/index.tsx
View file @ 033ae536
......@@ -11,10 +11,9 @@ import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import styles from './index.less'
interface CommodityPropsType {
......@@ -54,21 +53,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.points]
useEffect(() => {
console.log(layoutType, "layoutType")
fetchCommodityList()
}, [filterParam, current])
fetchCommodityList(1)
}, [filterParam])
useEffect(() => {
if (categoryId && categoryName) {
onFilter({
key: [categoryId],
title: decodeURIComponent(atob(categoryName)),
type: FILTER_TYPE.category,
})
}
}, [props.location.query])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
......@@ -80,12 +69,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
})
}, [])
const fetchCommodityList = () => {
const fetchCommodityList = (currentParam?: number) => {
let param: filterQuery = {
current,
current: currentParam ? currentParam : current,
pageSize
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
......@@ -123,6 +111,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const handlePageChange = (page) => {
setCurrent(page)
fetchCommodityList(page)
}
const renderPointLayoutType = (): LAYOUT_TYPE => {
......@@ -141,6 +130,51 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
return result
}
/**
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.priceSort:
/**
* 判断当前筛选项是否含有价格排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.priceSortHighToLow)) {
onFilter({
key: null,
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
onFilter({
key: 'priceSortLowToHigh',
title: '价格从低到高',
type: FILTER_TYPE.priceSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.priceSortLowToHigh)) {
onFilter({
key: null,
title: '价格从低到高',
type: FILTER_TYPE.priceSortLowToHigh,
})
onFilter({
key: 'priceSortHighToLow',
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
} else {
onFilter({
key: 'priceSortHighToLow',
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className={styles.commodity}>
<div className={styles.mall_container}>
......@@ -152,11 +186,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
</div>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.priceSort)}>
<span>积分</span>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={styles.icon} />
<CaretDownOutlined className={styles.icon} />
<div className={styles.price_filter_box} >
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.priceSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
......
src/pages/lxMall/pointsMall/list.tsx
View file @ 033ae536
......@@ -3,7 +3,6 @@ import cx from 'classnames'
import { Skeleton } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import creditIcon from '@/assets/imgs/credit_icon.png'
import styles from './list.less'
interface CommodityListPropsType {
......@@ -17,10 +16,9 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const getCommodityDetailUrl = () => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
return ""
case LAYOUT_TYPE.channel:
return "/channelmall"
case LAYOUT_TYPE.mall:
case LAYOUT_TYPE.shop:
return "/shop"
default:
......
src/pages/lxMall/purchaseOnline/index.less
View file @ 033ae536
......@@ -3,6 +3,8 @@
background-color: #ffffff;
.commodity_container {
width: 1200px;
margin: 0 auto;
display: flex;
margin-top: 20px;
......@@ -59,6 +61,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......@@ -155,24 +161,26 @@
margin-top: 60px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&>a {
color: #ffffff;
&>a {
color: #ffffff;
}
}
}
}
......
src/pages/lxMall/purchaseOnline/index.tsx
View file @ 033ae536
......@@ -6,113 +6,174 @@ import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import './index.less'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import styles from './index.less'
interface filterValueType {
key: string;
title: string;
type: FILTER_TYPE;
}
interface PurchaseOnlinePropsType {
location: any
}
const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
// const [filterList, setFilterList] = useState([])
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea]
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)
/**
* 重置筛选
*/
const handleResetFilter = () => {
onResetFilter()
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.creditSort:
/**
* 判断当前筛选项是否含有信用排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow)) {
onFilter({
key: null,
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
onFilter({
key: 'creditSortLowToHigh',
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh)) {
onFilter({
key: null,
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
} else {
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
}
break
case FILTER_TYPE.dateSort:
/**
* 判断当前筛选项是否含有时间排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.dateSortHighToLow)) {
onFilter({
key: null,
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
onFilter({
key: 'dateSortLowToHigh',
title: '时间从低到高',
type: FILTER_TYPE.dateSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.dateSortLowToHigh)) {
onFilter({
key: null,
title: '时间从低到高',
type: FILTER_TYPE.dateSortLowToHigh,
})
onFilter({
key: 'dateSortHighToLow',
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
} else {
onFilter({
key: 'dateSortHighToLow',
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className="purchaseOnline">
<div className="mall_container">
<div className="commodity_container">
<div className={styles.purchaseOnline}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<div className={styles.commodity_main}>
{/* <div className="banner">
<img src={bannerImg} />
</div>
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
</div> */}
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.dateSort)}>
<span>时间</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.dateSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.dateSortHighToLow) ? styles.active : '')} />
</div>
</div>
<div className="tool_bar_filter_item">
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span>共</span>
<label>43</label>
<span>条求购信息</span>
</div>
</div>
</div>
{/* <div className="filter_bar">
<div className="filter_bar_left">
<div className="filter_bar_left_text">保存为常用筛选</div>
<div className="filter_bar_left_split"></div>
<div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
</div>
<div className="filter_bar_list">
{
filterList.map(item => (
<div className="filter_bar_list_item" key={item.key}>
<span className="filter_bar_list_item_text">{item.title}</span>
<CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
</div>
))
}
</div>
</div> */}
{
filterList && filterList.length > 0 && (
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
<div className={styles.filter_bar_list}>
{
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)} />
</div>
))
}
</div>
</div>
)
}
{
!!search ? <NoResult search={search} /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
......@@ -125,4 +186,4 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
)
}
export default PurchaseOnline
export default observer(PurchaseOnline)
src/pages/lxMall/purchaseOnline/list.less
View file @ 033ae536
......@@ -67,6 +67,10 @@
margin: 0 auto;
margin-top: 20px;
&>a {
color: #fff;
}
&:hover {
opacity: .9;
}
......
src/pages/lxMall/purchaseOnline/list.tsx
View file @ 033ae536
......@@ -20,39 +20,39 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
dataList.map((item, index) => (
<div key={item} className="purchase_list_item row">
<a href={`/memberCenter/tranactionAbility/enquiryOffer/addEnquiry`}>
<div className="purchase_list_item_title">头层自然摔牛皮，箱包鞋面料</div>
<div className="purchase_list_item_info_box">
<div className="purchase_list_item_info_line">
<label>品类：</label>
<span>硬度适中偏软</span>
</div>
<div className="purchase_list_item_info_line">
<label>发货地：</label>
<span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付地址：</label>
<span>广东省广州市海珠区新港东路1068号</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付日期：</label>
<span>2020-08-12</span>
</div>
<div className="purchase_list_item_info_line">
<label>截止时间：</label>
<span>2020-08-12 11:58:26</span>
</div>
<div className="purchase_list_item_info_line_split"></div>
<div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
<div className="purchase_list_item_info_line">
<img className="credit_icon" src={creditIcon} />
<span className="credit_text">1288</span>
</div>
<div className="quoted_price_btn">立即报价</div>
</div>
</a>
<div className="purchase_list_item_title">头层自然摔牛皮，箱包鞋面料</div>
<div className="purchase_list_item_info_box">
<div className="purchase_list_item_info_line">
<label>品类：</label>
<span>硬度适中偏软</span>
</div>
<div className="purchase_list_item_info_line">
<label>发货地：</label>
<span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付地址：</label>
<span>广东省广州市海珠区新港东路1068号</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付日期：</label>
<span>2020-08-12</span>
</div>
<div className="purchase_list_item_info_line">
<label>截止时间：</label>
<span>2020-08-12 11:58:26</span>
</div>
<div className="purchase_list_item_info_line_split"></div>
<div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
<div className="purchase_list_item_info_line">
<img className="credit_icon" src={creditIcon} />
<span className="credit_text">1288</span>
</div>
<div className="quoted_price_btn">
<a href={`/memberCenter/tranactionAbility/enquiryOffer/addEnquiry`}> 立即报价 </a>
</div>
</div>
</div>
))
......
src/pages/lxMall/shopList/index.less
View file @ 033ae536
......@@ -3,6 +3,8 @@
background-color: #ffffff;
.commodity_container {
width: 1200px;
margin: 0 auto;
display: flex;
margin-top: 20px;
......@@ -58,6 +60,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......@@ -99,6 +105,7 @@
margin-top: 7px;
display: flex;
align-items: center;
margin-bottom: 16px;
.filter_bar_left {
display: flex;
......@@ -154,24 +161,26 @@
margin-top: 60px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&>a {
color: #ffffff;
&>a {
color: #ffffff;
}
}
}
}
......
src/pages/lxMall/shopList/index.tsx
View file @ 033ae536
......@@ -6,10 +6,9 @@ import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import './index.less'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import styles from './index.less'
interface filterValueType {
key: string;
......@@ -22,58 +21,88 @@ interface ShopListPropsType {
}
const ShopList: React.FC<ShopListPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
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)
let tempFilterList = [...filterList]
if (filteState) {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
/**
* 重置筛选
*/
const handleResetFilter = () => {
onResetFilter()
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.creditSort:
/**
* 判断当前筛选项是否含有信用排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow)) {
onFilter({
key: null,
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
onFilter({
key: 'creditSortLowToHigh',
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh)) {
onFilter({
key: null,
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
} else {
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
<div className={styles.commodity_main}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<i className="icon">
<img src={arrowDownIcon} />
</i>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span>共</span>
<label>43</label>
<span>个店铺</span>
......@@ -81,10 +110,29 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
</div>
</div>
{
filterList && filterList.length > 0 && (
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
<div className={styles.filter_bar_list}>
{
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)} />
</div>
))
}
</div>
</div>
)
}
{
!!search ? <NoResult search={search} /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
......@@ -97,4 +145,4 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
)
}
export default ShopList
export default observer(ShopList)
src/store/filter/index.ts
View file @ 033ae536
......@@ -128,9 +128,11 @@ class FilterStore {
case FILTER_TYPE.commodityType:
tempFilterParam.priceType = filterItem.key
break
case FILTER_TYPE.minPoints:
case FILTER_TYPE.minPrice:
tempFilterParam.Min = filterItem.key
break
case FILTER_TYPE.maxPoints:
case FILTER_TYPE.maxPrice:
tempFilterParam.Max = filterItem.key
break
......@@ -165,7 +167,6 @@ class FilterStore {
if (JSON.stringify(this.filterParam) === JSON.stringify(tempFilterParam)) {
return
}
this.filterParam = tempFilterParam
}
......
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