Skip to content

J
jinfa-platform
Commit 45ce04ac authored by GuanHua's avatar GuanHua
Browse files
Options

feat:店铺列表接口对接

parent d0aa99b4
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 69 deletions
src/pages/lxMall/components/Filter/components/NewJoin/index.tsx
View file @ 45ce04ac
......@@ -3,10 +3,11 @@
* @Author: ghua
* @Date: 2020-08-20 16:23:39
* @Last Modified by: ghua
* @Last Modified time: 2020-08-20 16:49:11
* @Last Modified time: 2020-09-23 18:00:55
*/
import React from 'react'
import React, { useState, useEffect } from 'react'
import { PublicApi } from '@/services/api'
import styles from './index.less'
interface NewJoinPropsType {
......@@ -15,6 +16,20 @@ interface NewJoinPropsType {
const NewJoin: React.FC<NewJoinPropsType> = (props) => {
const [newJoinShopList, setNewJoinShopList] = useState([])
useEffect(() => {
fetchNewJoinShopList()
}, [])
const fetchNewJoinShopList = () => {
PublicApi.getTemplateShopFindNewAddShop().then(res => {
if (res.code === 1000) {
setNewJoinShopList(res.data)
}
})
}
return (
<div className={styles.new_join}>
<div className={styles.new_join_title}>
......
src/pages/lxMall/components/SearchNoResult/index.tsx
View file @ 45ce04ac
......@@ -2,11 +2,12 @@ import React from 'react'
import styles from './index.less'
interface NoResultPropsType {
search?: string
search?: string,
type?: number, // 1:商品， 2:店铺
}
const SearchNoResult: React.FC<NoResultPropsType> = (props) => {
const { search } = props
const { search, type = 1 } = props
return (
<div className={styles.no_result}>
<div className={styles.no_result_tip}>
......@@ -17,11 +18,11 @@ const SearchNoResult: React.FC<NoResultPropsType> = (props) => {
<>
抱歉，没有找到与“
<span className={styles.no_result_tip_search}>{search}</span>
”相关的商品
”相关的{type === 1 ? '商品' : '店铺'}
</>
) : (
<>
抱歉，没有找到相关的商品
抱歉，没有找到相关的{type === 1 ? '商品' : '店铺'}
</>
)
}
......
src/pages/lxMall/shopList/index.tsx
View file @ 45ce04ac
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import { FILTER_TYPE, LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
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'
import isEmpty from 'lodash/isEmpty'
import styles from './index.less'
import { PublicApi } from '@/services/api'
import { GetTemplateShopFindShopListResponseDetail } from '@/services/TemplateApi'
interface filterValueType {
key: string;
......@@ -25,10 +29,49 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(10)
const [loading, setLoading] = useState<boolean>(true)
const [shopList, setShopList] = useState<GetTemplateShopFindShopListResponseDetail[]>([])
const [totalCount, setTotalCount] = useState<number>(0)
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea, FILTER_TYPE.activeStores, FILTER_TYPE.newJoin]
useEffect(() => {
fetchShopList(1)
}, [filterParam])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
}, [filterList])
const fetchShopList = (currentParam?: number) => {
let param: any = {
current: currentParam ? currentParam : current,
pageSize
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
setLoading(true)
PublicApi.getTemplateShopFindShopList(param).then(res => {
setLoading(false)
if (res.code === 1000) {
setShopList(res.data.data)
setTotalCount(res.data.totalCount)
}
})
}
const handleFilterChange = (newFilterList: any) => {
onFilterParamChange(newFilterList)
}
/**
* 重置筛选
*/
......@@ -84,6 +127,10 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
}
}
const handlePageChange = (page) => {
setCurrent(page)
fetchShopList(page)
}
return (
<div className={styles.commodity}>
......@@ -104,7 +151,7 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span>共</span>
<label>43</label>
<label>{totalCount}</label>
<span>个店铺</span>
</div>
</div>
......@@ -129,11 +176,13 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
)
}
{
!!search ? <NoResult search={search} /> : (
(shopList.length === 0 || !shopList) ? !loading && <SearchNoResult search="" type={2} /> : (
<>
<CommodityList showType={showType} />
<Spin spinning={loading}>
<CommodityList showType={showType} shopList={shopList} />
</Spin>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
</>
)
......
src/pages/lxMall/shopList/list.tsx
View file @ 45ce04ac
......@@ -4,90 +4,100 @@ import { Link } from 'umi'
import { Rate } from 'antd'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import shop_logo from '@/assets/imgs/shop_logo.png'
import './list.less'
import { priceFormat } from '@/utils/numberFomat'
import styles from './list.less'
interface CommodityListPropsType {
showType: number
showType: number,
shopList: any
}
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType } = props
const { shopList } = props
let dataList = []
for (let i = 0; i < 10; i++) {
dataList.push(i)
const renderCommodityPrice = (unitPrice) => {
let price = 0
if (unitPrice) {
let priceArr = []
Object.keys(unitPrice).forEach(key => {
priceArr.push(unitPrice[key])
})
price = priceArr[0] || 0
}
return <div className={styles.shop_list_goods_item_price}>
<span className={styles.unit}>￥</span>
<span>{priceFormat(price)}</span>
</div>
}
const renderArea = (shopAreaList) => {
if (shopAreaList) {
return shopAreaList.map(item => `${item.province}/${item.city}`).join(" ")
} else {
return '所有地区'
}
}
return (
<div className={cx("shop_list")}>
<div className={cx(styles.shop_list)}>
{
dataList.map((item, index) => (
<div key={item} className="shop_list_item row">
<div className="shop_list_left">
<div className="shop_list_info">
<div className="shop_list_info_imgbox">
<div className="shop_list_info_imgbox_img" style={{ backgroundImage: `url(${shop_logo})` }}></div>
shopList.map((item, index) => (
<div key={`${item.id}_${index}`} className={cx(styles.shop_list_item, styles.row)}>
<div className={styles.shop_list_left}>
<div className={styles.shop_list_info}>
<div className={styles.shop_list_info_imgbox}>
<div className={styles.shop_list_info_imgbox_img} style={{ backgroundImage: `url(${item.logo})` }}></div>
</div>
<div className="shop_list_info_box">
<div className="shop_list_info_name">
<span>温州市龙昌皮业有限公司</span>
<div className={styles.shop_list_info_box}>
<div className={styles.shop_list_info_name}>
<span>{item.memberName}</span>
<span className="shop_list_info_city">广东/广州</span>
<span className={styles.shop_list_info_city}>{renderArea(item.memberShopAreas)}</span>
</div>
<div className="shop_list_info_about">
<div className="shop_list_info_about_item">
<i className="icon"><img src={credit_icon} /></i>
<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>
</div>
<div className="shop_list_info_about_item">
<i className="icon"><img src={shop_icon} /></i>
<span className="red">2</span>
<div className={styles.shop_list_info_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span>年</span>
</div>
</div>
</div>
</div>
<div className="shop_satisfaction">
<div className={styles.shop_satisfaction}>
<label>满意度：</label>
<Rate className="shop_satisfaction_rate" disabled defaultValue={2} />
<Rate className={styles.shop_satisfaction_rate} disabled defaultValue={2} />
</div>
<div className="shop_list_line">
<div className={styles.shop_list_line}>
<label>主营</label>
<span className="shop_list_line_brief">全粒面牛皮｜修面皮｜漆色皮｜打腊皮｜水腊皮｜疯马皮｜珠光变色｜水腊皮｜疯马皮｜珠光变色｜珠光变色</span>
<span className={styles.shop_list_line_brief}>{item.customerCategoryName}</span>
</div>
<div className="shop_list_line">
<div className={styles.shop_list_line}>
<label>以上信息已通过会员认证｜</label>
<Link to="/shop?id=12" className="shop_list_line_link">资质证书 &gt;</Link>
<Link to="/shop?id=12" className="shop_list_line_link">公司信息 &gt;</Link>
<Link to={`/shop/about?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`} className={styles.shop_list_line_link}>资质证书 &gt;</Link>
<Link to={`/shop/about?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`} className={styles.shop_list_line_link}>公司信息 &gt;</Link>
</div>
</div>
<div className="shop_list_goods">
<Link to={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
<div className="shop_list_goods_item">
<div className="shop_list_goods_item_imgbox">
<div className="shop_list_goods_item_imgbox_img" style={{ backgroundImage: `url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg)` }}></div>
</div>
<div className="shop_list_goods_item_price">
<span className="unit">￥</span>
<span>79.00</span>
</div>
</div>
</Link>
<Link to={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
<div className="shop_list_goods_item">
<div className="shop_list_goods_item_imgbox">
<div className="shop_list_goods_item_imgbox_img" style={{ backgroundImage: `url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg)` }}></div>
</div>
<div className="shop_list_goods_item_price">
<span className="unit">￥</span>
<span>79.00</span>
</div>
</div>
</Link>
<div className={styles.shop_list_goods}>
{
item.commodityList && item.commodityList.map((commodityItem, commodityIndex) => commodityIndex < 2 && (
<Link to={`/shop/commodity/detail?id=${commodityItem.id}&shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`} key={commodityItem.id} target="_blank">
<div className={styles.shop_list_goods_item}>
<div className={styles.shop_list_goods_item_imgbox}>
<div className={styles.shop_list_goods_item_imgbox_img} style={{ backgroundImage: `url(${commodityItem.mainPic})` }}></div>
</div>
{
renderCommodityPrice(commodityItem.unitPrice)
}
</div>
</Link>
))
}
</div>
</div>
))
}
</div>
......
src/pages/lxMall/shopList/noResult.tsx
View file @ 45ce04ac
......@@ -12,7 +12,7 @@ const NoResult: React.FC<NoResultPropsType> = (props) => {
<div className={styles.no_result_tip}>
<div className={styles.no_result_tip_img}></div>
<div className={styles.no_result_tip_text}>
暂无求购信息
暂无店铺信息
</div>
</div>
</div>
......
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