Skip to content

J
jinfa-platform
Commit 5d8e96dc authored by GuanHua's avatar GuanHua
Browse files
Options

feat:店铺列表接口对接

parent db3cc50b
Show whitespace changes
Inline Side-by-side
Showing with 85 additions and 51 deletions
src/constants/index.ts
View file @ 5d8e96dc
......@@ -170,7 +170,11 @@ export enum FILTER_TYPE {
/**
* 属性筛选
*/
attribute = 'attribute'
attribute = 'attribute',
/**
* 店铺地区筛选
*/
shopArea = 'shopArea'
}
// 商城类型
......
src/pages/lxMall/commodity/index.tsx
View file @ 5d8e96dc
......@@ -86,6 +86,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
}, [props.location.query])
useEffect(() => {
setCurrent(1)
fetchCommodityList(1)
}, [filterParam])
......
src/pages/lxMall/commodity/search.tsx
View file @ 5d8e96dc
......@@ -61,9 +61,9 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
// const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
useEffect(() => {
fetchCommodityList()
}, [filterParam, current, search])
setCurrent(1)
fetchCommodityList(1)
}, [filterParam, search])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
......@@ -82,9 +82,9 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
})
}, [layoutType])
const fetchCommodityList = () => {
const fetchCommodityList = (currentParam?: number) => {
let param: filterQuery = {
current,
current: currentParam ? currentParam : current,
pageSize
}
if (!!search) {
......@@ -146,6 +146,7 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
const handlePageChange = (page) => {
setCurrent(page)
fetchCommodityList(page)
}
/**
......
src/pages/lxMall/components/Filter/components/NewJoin/index.tsx
View file @ 5d8e96dc
......@@ -3,7 +3,7 @@
* @Author: ghua
* @Date: 2020-08-20 16:23:39
* @Last Modified by: ghua
* @Last Modified time: 2020-09-23 18:00:55
* @Last Modified time: 2020-09-23 19:49:12
*/
import React, { useState, useEffect } from 'react'
......@@ -36,38 +36,20 @@ const NewJoin: React.FC<NewJoinPropsType> = (props) => {
<label>最新加入</label>
</div>
<div className={styles.new_join_list}>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}> <a href="/">无锡市群明钢业有限公司</a></div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.new_join_list_item}>
{
newJoinShopList && newJoinShopList.map(item => (
<div className={styles.new_join_list_item} key={`new_join_list_item_${item.id}`}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
<img src={item.logo} />
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
<div className={styles.new_join_name}>
<a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`}>
{item.memberName}
</a>
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
))
}
</div>
</div>
)
......
src/pages/lxMall/components/Filter/components/UseArea/index.tsx
View file @ 5d8e96dc
......@@ -50,6 +50,7 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
setSelectCity([])
} else {
let initKeys = []
if (layoutType !== LAYOUT_TYPE.shopList) {
for (let item of filterList) {
if (item.type === FILTER_TYPE.province) {
initKeys.push(item.key)
......@@ -59,6 +60,7 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
}
setSelectCity(initKeys)
}
}
}, [filterList])
useEffect(() => {
......@@ -110,6 +112,13 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
const handleSelect = (item: any, type: FILTER_TYPE) => {
if (type === FILTER_TYPE.province) {
setSelectCity([item.value])
if (layoutType === LAYOUT_TYPE.shopList) {
onFilter({
type: FILTER_TYPE.shopArea,
title: item.label,
key: item.value
})
} else {
onFilter({
type: FILTER_TYPE.province,
title: item.label,
......@@ -122,8 +131,16 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
key: null
})
}
}
} else {
setSelectCity([selectCity[0], item.value])
if (layoutType === LAYOUT_TYPE.shopList) {
onFilter({
type: FILTER_TYPE.shopArea,
title: item.label,
key: item.value
})
} else {
onFilter({
type: FILTER_TYPE.province,
title: getProvinceText(selectCity[0]),
......@@ -136,6 +153,7 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
})
}
}
}
const getProvinceText = (code: string) => {
let result = ""
......
src/pages/lxMall/pointsMall/index.tsx
View file @ 5d8e96dc
......@@ -53,6 +53,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.points]
useEffect(() => {
setCurrent(1)
fetchCommodityList(1)
}, [filterParam])
......
src/pages/lxMall/shopList/index.tsx
View file @ 5d8e96dc
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import { CaretUpOutlined, CaretDownOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import { FILTER_TYPE, LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import { history } from 'umi'
import { Pagination, Spin } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import SearchNoResult from '../components/SearchNoResult'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
......@@ -14,12 +14,6 @@ import styles from './index.less'
import { PublicApi } from '@/services/api'
import { GetTemplateShopFindShopListResponseDetail } from '@/services/TemplateApi'
interface filterValueType {
key: string;
title: string;
type: FILTER_TYPE;
}
interface ShopListPropsType {
location: any
}
......@@ -38,8 +32,9 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea, FILTER_TYPE.activeStores, FILTER_TYPE.newJoin]
useEffect(() => {
setCurrent(1)
fetchShopList(1)
}, [filterParam])
}, [filterParam, search])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
......@@ -53,6 +48,10 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
current: currentParam ? currentParam : current,
pageSize
}
if (!!search) {
param.memberName = search
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
......@@ -76,7 +75,12 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
* 重置筛选
*/
const handleResetFilter = () => {
if (search) {
onResetFilter()
handleClearSearch()
} else {
onResetFilter()
}
}
const handleDeleteFilterItem = (item: any) => {
......@@ -132,6 +136,14 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
fetchShopList(page)
}
/**
* 清除搜索
*/
const handleClearSearch = () => {
history.push('/shops')
}
return (
<div className={styles.commodity}>
<div className={styles.mall_container}>
......@@ -156,14 +168,23 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
</div>
</div>
</div>
{
filterList && filterList.length > 0 && (
(filterList && filterList.length > 0 || search) && (
<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}>
{
search && (
<div className={styles.filter_bar_list_item}>
<span className={styles.filter_bar_list_item_text}>{search}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleClearSearch()} />
</div>
)
}
{
filterList.map(item => (
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
......
src/pages/lxMall/shopList/list.less
View file @ 5d8e96dc
......@@ -35,6 +35,10 @@
&_name {
display: flex;
&>a {
color: #333333;
}
}
&_city {
......
src/pages/lxMall/shopList/list.tsx
View file @ 5d8e96dc
......@@ -50,18 +50,17 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
</div>
<div className={styles.shop_list_info_box}>
<div className={styles.shop_list_info_name}>
<span>{item.memberName}</span>
<span className={styles.shop_list_info_city}>{renderArea(item.memberShopAreas)}</span>
<Link to={`/shop?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`}>{item.memberName}</Link>
<span className={styles.shop_list_info_city}>{item.memberShopAreas}</span>
</div>
<div className={styles.shop_list_info_about}>
<div className={styles.shop_list_info_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
<span>{item.integral}</span>
</div>
<div className={styles.shop_list_info_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span className={styles.red}>{item.registerYears}</span>
<span>年</span>
</div>
</div>
......@@ -69,7 +68,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
</div>
<div className={styles.shop_satisfaction}>
<label>满意度：</label>
<Rate className={styles.shop_satisfaction_rate} disabled defaultValue={2} />
<Rate className={styles.shop_satisfaction_rate} disabled defaultValue={item.satisfied || 0} />
</div>
<div className={styles.shop_list_line}>
<label>主营</label>
......
src/store/filter/index.ts
View file @ 5d8e96dc
......@@ -160,6 +160,9 @@ class FilterStore {
case FILTER_TYPE.attribute:
tempFilterParam.customerAttributeList = filterItem.key
break
case FILTER_TYPE.shopArea:
tempFilterParam.areaCode = filterItem.key
break
default:
break
}
......
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