Skip to content

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

feat:企业商城和店铺的积分商城商品接口对接

parent 3fcdf329
Hide whitespace changes
Inline Side-by-side
Showing with 642 additions and 314 deletions
config/shopRoutes/index.ts
View file @ f2c18992
......@@ -19,6 +19,14 @@ const shopRoute = {
component: '@/pages/lxMall/commodity',
},
{
// 商品搜索
path: `/shop/commodity/search`,
name: 'shopCommoditySearch',
key: 'shopCommoditySearch',
hide: true,
component: '@/pages/lxMall/commodity/search',
},
{
// 积分商城
path: `/shop/pointsMall`,
name: 'shopPointsMall',
......
src/constants/index.ts
View file @ f2c18992
......@@ -9,9 +9,30 @@ export const MALL_TYPE = {
}
export enum LAYOUT_TYPE {
/**
* 企业商城
*/
mall = 'mall',
/**
* 店铺（店铺商城）
*/
shop = 'shop',
channel = 'channel'
/**
* 渠道商城
*/
channel = 'channel',
/**
* 企业商城-积分商城
*/
scoreMall = 'scoreMall',
/**
* 店铺-积分兑换
*/
shopScoreMall = 'shopScoreMall',
/**
* 渠道商城-积分兑换
*/
channelScoreMall = 'channelScoreMall',
}
// 本地环境跳过权限校验
......@@ -35,6 +56,10 @@ export enum FILTER_TYPE {
*/
category = 'category',
/**
* 分类和属性
*/
categoryAndAttr = 'categoryAndAttr',
/**
* 风格
*/
style = 'style',
......@@ -83,6 +108,14 @@ export enum FILTER_TYPE {
*/
points = 'points',
/**
* 最低积分
*/
minPoints = 'minPoints',
/**
* 最高积分
*/
maxPoints = 'maxPoints',
/**
* 商品名称
*/
name = 'name'
......
src/pages/lxMall/commodity/index.tsx
View file @ f2c18992
......@@ -12,7 +12,7 @@ import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services'
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'
......@@ -20,7 +20,9 @@ import styles from './index.less'
interface CommodityPropsType {
location: any,
layoutType: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType: LAYOUT_TYPE,
memberId: number;
shopId: number;
}
interface filterQuery {
......@@ -36,24 +38,24 @@ interface filterQuery {
Min?: number;
Max?: number;
priceType?: number;
storeId?: number;
}
const Commodity: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { layoutType } = props
const { layoutType, shopId } = props
const { query: { categoryId, categoryName } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(20)
const [pageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
// const [filterParam, setFilterParam] = useState<filterQuery | {}>({})
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.style, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
console.log(layoutType, "layoutType")
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.categoryAndAttr, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
useEffect(() => {
console.log(layoutType, "layoutType")
fetchCommodityList()
}, [filterParam, current])
......@@ -89,8 +91,22 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
param = Object.assign(param, filterParam)
}
setLoading(true)
let getFn;
switch (layoutType) {
case LAYOUT_TYPE.mall:
getFn = PublicApi.getSearchShopEnterpriseGetCommodityList
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getFn = PublicApi.getSearchShopStoreGetCommodityList
break
case LAYOUT_TYPE.channel:
getFn = PublicApi.getSearchShopStoreGetCommodityList
break
}
//@ts-ignore
PublicApi.getSearchShopEnterpriseGetCommodityList(param).then(res => {
getFn(param).then(res => {
setLoading(false)
if (res.code === 1000) {
setCommodityList(res.data.data)
......@@ -122,7 +138,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} layoutType={layoutType} />
<Filter filterConfig={filterConfig} {...props} />
<div className={styles.commodity_main}>
<div className={styles.banner}>
<img src={bannerImg} />
......
src/pages/lxMall/commodity/list.tsx
View file @ f2c18992
import React from 'react'
import cx from 'classnames'
import { Skeleton } from 'antd'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services'
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 {
showType: number;
commodityList: GetSearchShopEnterpriseGetCommodityListResponseDetail[]
layoutType: 'mall' | 'shop' | 'channel'
layoutType: LAYOUT_TYPE
}
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType, commodityList = [], layoutType = 'mall' } = props
const { showType, commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
const renderPrice = (commodityItem: GetSearchShopEnterpriseGetCommodityListResponseDetail) => {
switch (commodityItem.priceType) {
......@@ -49,7 +50,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
commodityList.map((item, index) => (
<div key={item.id} className={cx(styles.commodity_list_item, styles.row)}>
<a href={`/${layoutType === 'channel' ? 'channelmall' : 'shop'}/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
<a href={`/${layoutType === LAYOUT_TYPE.channel ? 'channelmall' : 'shop'}/commodity/detail?id=${item.id}&type=${item.priceType}&shopId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`} target="_blank">
<div className={styles.goods_img}>
{
item.commodityPic ? <img src={item.commodityPic} /> : <Skeleton.Image style={{ width: 220, height: 220 }} />
......@@ -82,9 +83,11 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
commodityList.map((item, index) => (
<div key={item.id} className={cx(styles.commodity_list_item, styles.column)}>
<a href={`/shop/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
<a href={`/${layoutType === LAYOUT_TYPE.channel ? 'channelmall' : 'shop'}/commodity/detail?id=${item.id}&type=${item.priceType}&shopId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`} target="_blank">
<div className={styles.goods_img}>
<img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
{
item.commodityPic ? <img src={item.commodityPic} /> : <Skeleton.Image style={{ width: 120, height: 120 }} />
}
</div>
<div className={styles.info_box}>
<div className={styles.info_box_content}>
......
src/pages/lxMall/commodity/search.tsx
View file @ f2c18992
......@@ -13,14 +13,16 @@ 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 { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import styles from './index.less'
interface CommodityPropsType {
location: any,
layoutType: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel,
shopId: number,
shopUrlParam: string
}
interface filterQuery {
......@@ -36,13 +38,13 @@ interface filterQuery {
Min?: number;
Max?: number;
priceType?: number;
storeId?: number;
}
const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilterParamChange } = FilterStore
const { layoutType } = props
const { layoutType, shopId, shopUrlParam } = props
const { query: { search = "" } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
......@@ -50,8 +52,7 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
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 = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.style, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.category, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
useEffect(() => {
fetchCommodityList()
......@@ -77,8 +78,22 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
param = Object.assign(param, filterParam)
}
setLoading(true)
let getFn;
switch (layoutType) {
case LAYOUT_TYPE.mall:
getFn = PublicApi.getSearchShopEnterpriseGetCommodityList
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getFn = PublicApi.getSearchShopStoreGetCommodityList
break
case LAYOUT_TYPE.channel:
getFn = PublicApi.getSearchShopStoreGetCommodityList
break
}
//@ts-ignore
PublicApi.getSearchShopEnterpriseGetCommodityList(param).then(res => {
getFn(param).then(res => {
setLoading(false)
if (res.code === 1000) {
setCommodityList(res.data.data)
......@@ -115,14 +130,24 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
* 清除搜索
*/
const handleClearSearch = () => {
history.push('/commodity/search')
switch (layoutType) {
case LAYOUT_TYPE.mall:
history.push('/commodity/search')
break
case LAYOUT_TYPE.shop:
history.push(`/shop/commodity/search?shopId=${shopUrlParam}`)
break
case LAYOUT_TYPE.channel:
break
}
}
return (
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} layoutType={layoutType} />
<Filter filterConfig={filterConfig} {...props} />
<div className={styles.commodity_main}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ f2c18992
......@@ -164,14 +164,23 @@ const CommodityDetail = (props) => {
<Exhibition />
<div className={styles.product_info_container}>
<div className={styles.product_info}>
<div className={styles.product_info_name}>{commodityDetail?.name}</div>
<div className={styles.product_info_tags}>
<div className={styles.product_info_name}>
<span>{commodityDetail?.name}</span>
{
commodityDetail?.sellingPoint.map((item, index) => (
<div className={styles.product_info_tags_item} key={`product_info_tags_item_${index}`}>{item}</div>
))
commodityDetail?.sellingPoint && commodityDetail?.sellingPoint.length > 0 && (
<>
【{
commodityDetail?.sellingPoint.map((item, index) => (
<span key={`product_info_tags_item_${index}`}>{item}{index !== commodityDetail?.sellingPoint.length - 1 ? ' ' : ''}</span>
))
}】
</>
)
}
</div>
<div className={styles.product_info_tags}>
<div className={styles.product_info_tags_item} >{commodityDetail?.slogan}</div>
</div>
{
commodityDetail?.priceType === COMMODITY_TYPE.prompt && (
<div className={styles.prompt_goods_price}>
......@@ -202,7 +211,6 @@ const CommodityDetail = (props) => {
<div className={styles.count}>≥100</div>
</div>
</div>
</div>
)
}
......@@ -286,8 +294,8 @@ const CommodityDetail = (props) => {
<div className={styles.product_info_line_label}>{commodityDetail?.priceType === COMMODITY_TYPE.prompt ? '购买数量' : '兑换数量'}</div>
<div className={cx(styles.product_info_line_brief, styles.row)}>
<InputNumber value={buyCount} onChange={(value) => setBuyCount(value)} />
<span className={cx(styles.text, styles.mar_left_10)}>平方英尺</span>
<span className={cx(styles.text, styles.mar_left_10)}>(库存20,000平方英尺)</span>
<span className={cx(styles.text, styles.mar_left_10)}>{commodityDetail?.unitName}</span>
<span className={cx(styles.text, styles.mar_left_10)}>(库存20,000{commodityDetail?.unitName})</span>
</div>
</div>
)
......@@ -295,7 +303,7 @@ const CommodityDetail = (props) => {
{
commodityDetail?.priceType === COMMODITY_TYPE.prompt && (
<div className={styles.product_info_price}>
<div className={styles.product_info_price_text}>3<span>平方英尺</span></div>
<div className={styles.product_info_price_text}>{buyCount}<span>{commodityDetail?.unitName}</span></div>
<div className={styles.product_info_price_split}></div>
<div className={styles.product_info_price_text}>69.70<span>元</span></div>
</div>
......
src/pages/lxMall/components/Filter/components/Brand/index.tsx
View file @ f2c18992
......@@ -7,51 +7,36 @@ import styles from './index.less'
interface BrandPropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE,
shopId?: number
}
const Brand: React.FC<BrandPropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall } = props
const { layoutType = LAYOUT_TYPE.mall, shopId } = props
const { onFilter, filterList } = props.FilterStore
const [brandList, setBrandList] = useState<GetSearchShopEnterpriseGetBrandResponse>([])
let mock_brand_list = [
{
id: 1,
name: '1M',
brandUrl: 'https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp'
},
{
id: 2,
name: '2M',
brandUrl: 'https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp'
},
{
id: 3,
name: '3M',
brandUrl: 'https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp'
},
{
id: 4,
name: '4M',
brandUrl: 'https://img.alicdn.com/i2/2/TB1GJzSbQfb_uJjSsrbXXb6bVXa?abtest=&pos=1&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp'
},
]
useEffect(() => {
let getBrandFn
let param: any = {}
switch (layoutType) {
case LAYOUT_TYPE.mall:
PublicApi.getSearchShopEnterpriseGetBrand().then((res) => {
if (res.code === 1000) {
setBrandList(res.data)
}
})
getBrandFn = PublicApi.getSearchShopEnterpriseGetBrand
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getBrandFn = PublicApi.getSearchShopStoreGetBrand
break
case LAYOUT_TYPE.channel:
param.storeId = shopId
getBrandFn = PublicApi.getSearchShopStoreGetBrand
break
}
getBrandFn(param).then((res) => {
if (res.code === 1000) {
setBrandList(res.data)
}
})
}, [layoutType])
const handleSelectBrand = (brandInfo) => {
......
src/pages/lxMall/components/Filter/components/Category/index.less
View file @ f2c18992
......@@ -72,4 +72,53 @@
}
}
}
}
.filter_style {
padding: 15px 20px 8px 20px;
:global {
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox-wrapper {
font-size: 12px;
}
.ant-checkbox-checked::after {
border: 1px solid var(--mall_main_color);
}
.ant-checkbox-input {
&:active,
&:hover,
&:focus {
+.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox-group-item {
&:hover,
&:active {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/Category/index.tsx
View file @ f2c18992
import React, { useEffect, useState } from 'react'
import { Tree } from 'antd'
import React, { useEffect, useState, Fragment } from 'react'
import { Tree, Checkbox } from 'antd'
import FilterBox from '../FilterBox'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import { inject, observer } from 'mobx-react'
import { PublicApi } from '@/services/api'
import isEmpty from 'lodash/isEmpty'
import styles from './index.less'
const CheckboxGroup = Checkbox.Group
interface CategoryPropsType {
CategoryStore?: any;
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE
shopId?: number;
showAttr?: boolean
}
const Category: React.FC<CategoryPropsType> = (props) => {
const { CategoryStore: { enterpriseCategoryList, storeCategoryList, fetchEnterpriseCategoryList, fetchStoreCategoryList }, layoutType = LAYOUT_TYPE.mall } = props
const { layoutType = LAYOUT_TYPE.mall, shopId, showAttr = false } = props
const { onFilter, filterList } = props.FilterStore
const [selectedKeys, setSelectedKeys] = useState<string[]>([])
const [expandedKeys, setExpandedKeys] = useState<string[]>([])
const [treeData, setTreeData] = useState<any>([])
const [categoryList, setCategoryList] = useState<any>([])
const [lastCategoryId, setLastCategoryId] = useState<number>()
const [attributeList, setAttributeList] = useState<any>([])
useEffect(() => {
console.log(layoutType, "layoutType")
if (isEmpty(filterList)) {
setSelectedKeys([])
} else {
......@@ -34,36 +41,70 @@ const Category: React.FC<CategoryPropsType> = (props) => {
}, [filterList])
useEffect(() => {
let getCategoryListFn
let param: any = {}
switch (layoutType) {
case LAYOUT_TYPE.mall:
fetchEnterpriseCategoryList()
getCategoryListFn = PublicApi.getSearchShopEnterpriseGetCategoryTree
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getCategoryListFn = PublicApi.getSearchShopStoreGetCustomerCategoryTree
break
case LAYOUT_TYPE.channel:
fetchStoreCategoryList()
param.storeId = shopId
getCategoryListFn = PublicApi.getSearchShopStoreGetCustomerCategoryTree
break
case LAYOUT_TYPE.scoreMall:
getCategoryListFn = PublicApi.getSearchShopScoreGetCategoryTree
break
case LAYOUT_TYPE.shopScoreMall:
param.storeId = shopId
getCategoryListFn = PublicApi.getSearchShopScoreGetCategoryTree
break
default:
break
}
getCategoryListFn && getCategoryListFn(param).then((res) => {
if (res.code === 1000) {
setCategoryList(initTreeData(res.data))
}
})
}, [layoutType])
useEffect(() => {
if (!isEmpty(enterpriseCategoryList) || !isEmpty(storeCategoryList)) {
if (lastCategoryId) {
let param = {
categoryId: lastCategoryId
}
let getAttributeFn
switch (layoutType) {
case LAYOUT_TYPE.mall:
initTreeData(enterpriseCategoryList)
break
getAttributeFn = PublicApi.getSearchShopEnterpriseGetAttributeByCategoryId
break;
case LAYOUT_TYPE.shop:
break
getAttributeFn = PublicApi.getSearchShopStoreGetCustomerAttributeByCategoryId
break;
case LAYOUT_TYPE.channel:
initTreeData(storeCategoryList)
break
getAttributeFn = PublicApi.getSearchShopStoreGetCustomerAttributeByCategoryId
break;
}
getAttributeFn(param).then(res => {
if (res.code === 1000) {
}
})
}
}, [lastCategoryId])
}, [enterpriseCategoryList, storeCategoryList])
const initTreeData = (list: any) => {
if (!list) {
return []
}
let initExpandKeys = []
let flag = true
let result: any = list.map(item => {
initExpandKeys.push(item.id)
return {
......@@ -75,8 +116,13 @@ const Category: React.FC<CategoryPropsType> = (props) => {
title: secondCategoryItem.title,
key: secondCategoryItem.id,
children: secondCategoryItem.children.map(thirdCategoryItem => {
if (!lastCategoryId && flag) {
flag = false
setLastCategoryId(thirdCategoryItem.id)
}
return {
title: <span className={styles.sub_category_title}>{thirdCategoryItem.title}</span>,
isLastNode: true,
key: thirdCategoryItem.id,
children: []
}
......@@ -85,13 +131,19 @@ const Category: React.FC<CategoryPropsType> = (props) => {
})
}
})
setTreeData(result)
return result
}
const handleSelect = (selectedKeys, info) => {
const { title } = info.node
const { title, isLastNode } = info.node
console.log(info)
setSelectedKeys(selectedKeys)
console.log(selectedKeys, "selectedKeys")
if (isLastNode) {
if (lastCategoryId !== selectedKeys[0]) {
setLastCategoryId(selectedKeys[0])
}
}
onFilter({
type: 'category',
key: selectedKeys,
......@@ -103,21 +155,44 @@ const Category: React.FC<CategoryPropsType> = (props) => {
setExpandedKeys(expandedKeys)
}
const styleOptions = [
{ label: '荔枝纹', value: '1' },
{ label: '网纹', value: '2' },
{ label: '自然摔纹', value: '3' },
];
const handleChange = (e) => {
console.log(e)
}
return (
<FilterBox
title="分类"
>
<div className={styles.filter_category}>
<Tree
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onSelect={handleSelect}
treeData={treeData}
onExpand={handleExpand}
/>
</div>
</FilterBox>
<Fragment>
<FilterBox
title="分类"
>
<div className={styles.filter_category}>
<Tree
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onSelect={handleSelect}
treeData={categoryList}
onExpand={handleExpand}
/>
</div>
</FilterBox>
{
showAttr && attributeList.length > 0 && (
<FilterBox
title="风格"
>
<div className={styles.filter_style}>
<CheckboxGroup options={styleOptions} onChange={handleChange} />
</div>
</FilterBox>
)
}
</Fragment>
)
}
export default inject('CategoryStore')(observer(Category))
export default Category
src/pages/lxMall/components/Filter/components/CommodityType/index.tsx
View file @ f2c18992
......@@ -7,7 +7,7 @@ import styles from './index.less'
interface CommodityTypePropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE;
}
const CheckboxGroup = Checkbox.Group
......
src/pages/lxMall/components/Filter/components/Points/index.tsx
View file @ f2c18992
import React, { useState } from 'react'
import { Slider } from 'antd'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import FilterBox from '../FilterBox'
import './index.less'
interface PointsPropsType {
interface PricePropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE
}
const Points: React.FC<PointsPropsType> = (props) => {
const [priceRange, setPriceRange] = useState<any>([0, 1000])
const Points: React.FC<PricePropsType> = (props) => {
const { onFilter } = props.FilterStore
const [pointsRange, setPointsRange] = useState<any>([0, 900])
const handlePriceChange = (value) => {
setPriceRange(value)
setPointsRange(value)
}
const filterMinPoints = (min: number, state: boolean = true) => {
onFilter({
type: FILTER_TYPE.minPoints,
title: <span className="price_text">最低 <b>{min}</b></span>,
key: state ? min : null
})
}
const filterMaxPoints = (max: number, state: boolean = true) => {
onFilter({
type: FILTER_TYPE.maxPoints,
title: <span className="price_text">最高 <b>{max}</b></span>,
key: state ? max : null
})
}
const handleConfirmpointsRange = () => {
let min = pointsRange[0]
let max = pointsRange[1]
if (min === 900) {
filterMinPoints(min)
} else if (min === 0 && max !== 900) {
filterMinPoints(min, false)
filterMaxPoints(max)
} else if (min !== 0 && max === 900) {
filterMinPoints(min)
filterMaxPoints(max, false)
} else if ((min === 0 && max === 900) || (min !== 0 && max !== 900)) {
filterMinPoints(min)
filterMaxPoints(max)
}
}
return (
......@@ -19,15 +55,15 @@ const Points: React.FC<PointsPropsType> = (props) => {
title="所需积分范围"
>
<div className="filter_price">
<Slider range step={1} min={0} max={1000} value={priceRange} onChange={handlePriceChange} />
<Slider range step={1} min={0} max={900} value={pointsRange} onChange={handlePriceChange} />
<div className="price_box">
<span className="price_box_brief">积分：</span>
<div className="price_range">
<span className="price">{priceRange[0]}</span>
<span className="price">{pointsRange[0]}</span>
<span className="split">-</span>
<span className="price">{priceRange[1]}</span>
<span className="price">{pointsRange[0] === 900 ? '' : `${pointsRange[1]}`}</span>
</div>
<div className="confirm_btn">确定</div>
<div className="confirm_btn" onClick={() => handleConfirmpointsRange()}>确定</div>
</div>
</div>
</FilterBox>
......
src/pages/lxMall/components/Filter/components/Price/index.tsx
View file @ f2c18992
......@@ -6,12 +6,11 @@ import './index.less'
interface PricePropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE
}
const Price: React.FC<PricePropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const { onFilter } = props.FilterStore
const [priceRange, setPriceRange] = useState<any>([0, 900])
const handlePriceChange = (value) => {
......
src/pages/lxMall/components/Filter/components/UseArea/index.tsx
View file @ f2c18992
......@@ -9,7 +9,8 @@ import styles from './index.less'
interface UseAreaPropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE;
shopId?: number;
}
......@@ -38,7 +39,7 @@ interface useAreaType {
}
const UseArea: React.FC<UseAreaPropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall } = props
const { layoutType = LAYOUT_TYPE.mall, shopId } = props
const { onFilter, filterList } = props.FilterStore
const [areaList, setAreaList] = useState<useAreaType[]>([])
const [selectCity, setSelectCity] = useState<string[]>([])
......@@ -60,20 +61,27 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
}, [filterList])
useEffect(() => {
let getAreaFn
let param: any = {}
switch (layoutType) {
case LAYOUT_TYPE.mall:
PublicApi.getSearchShopEnterpriseGetArea().then((res) => {
if (res.code === 1000) {
setAreaList(initAreaData(res.data))
}
})
getAreaFn = PublicApi.getSearchShopEnterpriseGetArea
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getAreaFn = PublicApi.getSearchShopStoreGetArea
break
case LAYOUT_TYPE.channel:
param.storeId = shopId
getAreaFn = PublicApi.getSearchShopStoreGetArea
break
}
getAreaFn(param).then((res) => {
if (res.code === 1000) {
setAreaList(initAreaData(res.data))
}
})
}, [layoutType])
const initAreaData = (data: GetSearchShopEnterpriseGetAreaResponse) => {
......
src/pages/lxMall/components/Filter/index.tsx
View file @ f2c18992
......@@ -17,7 +17,7 @@ import './index.less'
interface FilterPropsType {
filterConfig?: string[],
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
layoutType?: LAYOUT_TYPE
}
const Filter: React.FC<FilterPropsType> = (props) => {
......@@ -31,8 +31,8 @@ const Filter: React.FC<FilterPropsType> = (props) => {
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.categoryAndAttr:
return <Category key={type} {...props} showAttr={true} />
case FILTER_TYPE.brand:
return <Brand key={type} {...props} />
case FILTER_TYPE.price:
......
src/pages/lxMall/components/Header/index.tsx
View file @ f2c18992
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { Input } from 'antd'
import { Link, history } from 'umi'
import { history } from 'umi'
import { FileTextOutlined } from '@ant-design/icons'
import logo from '@/theme/imgs/logo_w.png'
import isEmpty from 'lodash/isEmpty'
......
src/pages/lxMall/components/SearchNoResult/index.less
View file @ f2c18992
.no_result {
padding-top: 120px;
padding-left: 287px;
padding: 120px 0 120px 287px;
&_tip {
font-size: 14px;
......
src/pages/lxMall/components/ShopHeader/index.tsx
View file @ f2c18992
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { CaretDownOutlined } from '@ant-design/icons'
import { Rate } from 'antd'
import { Link, history } from 'umi'
import { Rate, Input } from 'antd'
import { history } from 'umi'
import isEmpty from 'lodash/isEmpty'
import logo from '@/theme/imgs/logo_w.png'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import shopLogo from '@/assets/imgs/shop_logo.png'
import './index.less'
import styles from './index.less'
interface ShopHeaderPropsType {
shopId: number;
shopUrlParam: string
}
const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
const { shopId, shopUrlParam } = props
const [searchValue, setSearchValue] = useState<string>("")
const { search } = history.location.query
useEffect(() => {
if (!!search) {
setSearchValue(search)
} else {
setSearchValue("")
}
}, [search])
const { query } = history.location
const handleSearchCommodity = () => {
if (!isEmpty(searchValue)) {
history.push(`/shop/commodity/search?shopId=${shopUrlParam}&search=${encodeURIComponent(searchValue)}`)
} else {
history.push(`/shop/commodity?shopId=${shopUrlParam}`)
}
}
return (
<div className="shop_header">
<div className="shop_header_container">
<div className="logo">
<div className={styles.shop_header}>
<div className={styles.shop_header_container}>
<div className={styles.logo}>
<img src={logo} />
</div>
<div className="shop_header_split"></div>
<div className="shop_header_info">
<div className="shop_header_info_logo">
<div className={styles.shop_header_split}></div>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src={shopLogo} />
</div>
<div className="shop_header_info_content">
<div className="shop_header_info_content_name">
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>广州白马灯具有限公司</span>
<CaretDownOutlined className="shop_header_info_content_icon" />
<CaretDownOutlined className={styles.shop_header_info_content_icon} />
</div>
<div className="shop_header_info_content_about">
<div className="shop_header_info_content_about_item">
<i className="icon"><img src={shop_icon} /></i>
<span className="red">2</span>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span>年</span>
</div>
<div className="shop_header_info_content_about_item">
<i className="icon"><img src={credit_icon} /></i>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
</div>
</div>
</div>
<div className="shop_info">
<div className="shop_info_title">
<div className="shop_info_title_split"></div>
<div className="shop_info_title_text">会员认证</div>
<div className="shop_info_title_split"></div>
<div className={styles.shop_info}>
<div className={styles.shop_info_title}>
<div className={styles.shop_info_title_split}></div>
<div className={styles.shop_info_title_text}>会员认证</div>
<div className={styles.shop_info_title_split}></div>
</div>
<div className="shop_info_list">
<div className="shop_info_list_item">
<div className="label">满意度：</div>
<div className="breif"><Rate className="star" count={4} disabled defaultValue={4} /></div>
<div className={styles.shop_info_list}>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>满意度：</div>
<div className={styles.breif}><Rate className="star" count={4} disabled defaultValue={4} /></div>
</div>
<div className="shop_info_list_item">
<div className="label">注册资本：</div>
<div className="breif">5000万元</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>注册资本：</div>
<div className={styles.breif}>5000万元</div>
</div>
<div className="shop_info_list_item">
<div className="label">成立日期：</div>
<div className="breif">2014-09-09</div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>成立日期：</div>
<div className={styles.breif}>2014-09-09</div>
</div>
<div className="shop_info_list_item">
<div className="label">营业执照：</div>
<div className="breif"><span className="certified">[已认证]</span></div>
<div className={styles.shop_info_list_item}>
<div className={styles.label}>营业执照：</div>
<div className={styles.breif}><span className="certified">[已认证]</span></div>
</div>
</div>
<div className="dashed_split"></div>
<div className="shop_info_btn_group">
<div className="shop_info_btn">进入店铺</div>
<div className="shop_info_btn">收藏本店</div>
<div className={styles.dashed_split}></div>
<div className={styles.shop_info_btn_group}>
<div className={styles.shop_info_btn}>进入店铺</div>
<div className={styles.shop_info_btn}>收藏本店</div>
</div>
<div className="apply_member_btn">申请成为本店会员</div>
<div className={styles.apply_member_btn}>申请成为本店会员</div>
</div>
</div>
<div className="mall_search">
<div className="mall_search_box">
<input className="mall_search_input" placeholder="请输入关键词" />
<div className="search_btn">搜本店</div>
<div className={styles.mall_search}>
<div className={styles.mall_search_box}>
<Input className={styles.mall_search_input} value={searchValue} placeholder="请输入关键词" onChange={e => setSearchValue(e.target.value)} onPressEnter={() => handleSearchCommodity()} />
<div className={styles.search_btn} onClick={() => handleSearchCommodity()}>搜本店</div>
</div>
</div>
</div>
......
src/pages/lxMall/index/index.tsx
View file @ f2c18992
......@@ -9,7 +9,7 @@ import { Advert, FloorLine } from 'lingxi-design-ui'
import FloorSkeleton from '../components/FloorSkeleton'
import { GetTemplatePlatformFindAllFirstCategoryResponse } from '@/services'
import { LAYOUT_TYPE } from '@/constants'
import './index.less'
import styles from './index.less'
interface MallIndexPropsType {
SiteStore?: any
......@@ -106,7 +106,7 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
</FloorLine.FloorHeader>
<FloorLine.Horizontal>
<FloorLine.Goods goodsList={categoryDetail.goodsBOList} />
<FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop?shopId=${btoa(JSON.stringify({ shopId: 2, meberId: 6 }))}`} />
<FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop?shopId=${btoa(JSON.stringify({ shopId: 3, meberId: 6 }))}`} />
</FloorLine.Horizontal>
</FloorLine.Vertical>
</FloorLine.Horizontal>
......@@ -119,8 +119,8 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
return (
<div className="mall_index">
<a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: 2, memberId: 6 }))}`}>店铺链接测试</a>
<div className={styles.mall_index}>
{/* <a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: 3, memberId: 6 }))}`}>店铺链接测试</a> */}
{
useMemo(() => <Advert type="banner" advertList={firstAdvertList} hasQuickNav={true} ><QuickNav /></Advert>, [firstAdvertList])
}
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ f2c18992
......@@ -49,7 +49,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
<div className={styles.lxmall_page}>
<TopBar />
<div className={styles.content}>
<ShopHeader />
<ShopHeader shopId={query.shopId} shopUrlParam={shopId} />
<MainNav menuData={menuData} pathname={location.pathname} type="shop" shopId={shopId} />
{
children && React.Children.map(children, (child: any) => {
......@@ -57,7 +57,8 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
{
layoutType: 'shop',
shopId: query.shopId,
memberId: query.memberId
memberId: query.memberId,
shopUrlParam: shopId
},
);
})
......
src/pages/lxMall/pointsMall/index.less
View file @ f2c18992
......@@ -4,7 +4,10 @@
.commodity_container {
display: flex;
margin-top: 20px;
padding-top: 20px;
width: 1200px;
margin: 0 auto;
.commodity_main {
flex: 1;
......@@ -155,34 +158,36 @@
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;
}
}
}
}
}
}
}
.no_result {
padding-top: 120px;
padding-left: 287px;
padding: 120px 0 120px 287px;
&_tip {
font-size: 14px;
......
src/pages/lxMall/pointsMall/index.tsx
View file @ f2c18992
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 } from '@/constants'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
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/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 './index.less'
import styles from './index.less'
interface filterValueType {
key: string;
title: string;
type: FILTER_TYPE;
interface CommodityPropsType {
location: any,
layoutType: LAYOUT_TYPE,
memberId: number;
shopId: number;
}
interface CommodityPropsType {
location: any
interface filterQuery {
current: number;
pageSize: number;
name?: string;
categoryId?: number;
customerCategoryId?: number;
provinceCode?: number;
cityCode?: number;
brandId?: number;
customerAttributeList?: any;
Min?: number;
Max?: number;
priceType?: number;
storeId?: number;
}
const PointsMall: React.FC<CommodityPropsType> = (props) => {
const { query: { search = "" } } = props.location
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { layoutType, memberId, shopId } = 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] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.points]
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
useEffect(() => {
console.log(layoutType, "layoutType")
fetchCommodityList()
}, [filterParam, current])
useEffect(() => {
if (categoryId && categoryName) {
onFilter({
key: [categoryId],
title: decodeURIComponent(atob(categoryName)),
type: FILTER_TYPE.category,
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
}, [props.location.query])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
}, [filterList])
useEffect(() => {
return (() => {
onResetFilter()
})
}, [])
const fetchCommodityList = () => {
let param: filterQuery = {
current,
pageSize
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
setLoading(true)
let getFn = PublicApi.getSearchShopScoreGetCommodityList
if (layoutType === LAYOUT_TYPE.shop) {
param.storeId = shopId
}
//@ts-ignore
getFn(param).then(res => {
setLoading(false)
if (res.code === 1000) {
setCommodityList(res.data.data)
setTotalCount(res.data.totalCount)
}
})
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
const handleFilterChange = (newFilterList: any) => {
onFilterParamChange(newFilterList)
}
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
onResetFilter()
}
const handlePageChange = (page) => {
setCurrent(page)
}
const renderPointLayoutType = (): LAYOUT_TYPE => {
let result: LAYOUT_TYPE
switch (layoutType) {
case LAYOUT_TYPE.mall:
result = LAYOUT_TYPE.scoreMall
break
case LAYOUT_TYPE.shop:
result = LAYOUT_TYPE.shopScoreMall
break
case LAYOUT_TYPE.channel:
result = LAYOUT_TYPE.channelScoreMall
break
}
return result
}
return (
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} {...props} layoutType={renderPointLayoutType()} />
<div className={styles.commodity_main}>
<div className={styles.banner}>
<img src={bannerImg} />
</div>
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item}>
<span>积分</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={styles.icon} />
<CaretDownOutlined className={styles.icon} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span>共</span>
<label>1,234</label>
<label>{totalCount}</label>
<span>个商品</span>
</div>
</div>
</div>
<div className="filter_bar">
<div className="filter_bar_left">
<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.length === 0 || !commodityList) ? !loading && <SearchNoResult search="" /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
<Spin spinning={loading}>
<CommodityList showType={showType} commodityList={commodityList} layoutType={layoutType} />
</Spin>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
</>
)
......@@ -119,4 +206,4 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
)
}
export default PointsMall
export default observer(PointsMall)
src/pages/lxMall/pointsMall/list.tsx
View file @ f2c18992
import React from 'react'
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 './list.less'
import styles from './list.less'
interface CommodityListPropsType {
showType: number
showType: number;
commodityList: GetSearchShopEnterpriseGetCommodityListResponseDetail[]
layoutType: LAYOUT_TYPE
}
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType } = props
let dataList = []
for (let i = 0; i < 20; i++) {
dataList.push(i)
}
const { showType, commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
return (
<div className={cx("point_commodity_list", showType === 2 ? 'column' : 'row')}>
<div className={cx(styles.point_commodity_list, styles.row)}>
{
dataList.map((item, index) => (
<div key={item} className="point_commodity_list_item row">
<a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
<div className="goods_img">
<img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
commodityList.map((item, index) => (
<div key={item.id} className={cx(styles.point_commodity_list_item, styles.row)}>
<a href={`/${layoutType === LAYOUT_TYPE.channel ? 'channelmall' : 'shop'}/commodity/detail?id=${item.id}&type=${item.priceType}&shopId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`} target="_blank">
<div className={styles.goods_img}>
{
item.commodityPic ? <img src={item.commodityPic} /> : <Skeleton.Image style={{ width: 220, height: 220 }} />
}
</div>
<div className="info_box">
<div className="goods_price">
2,000~3,000积分
<div className={styles.info_box}>
<div className={styles.goods_price}>
{item.min}~{item.max}积分
</div>
<div className="goods_name">Apple iPhone 11 Pro Max (A2220)暗夜绿色 移动联通电信4G手机 双卡双待特</div>
<div className="count">库存：20</div>
<div className={styles.goods_name}>{item.name}</div>
<div className={styles.count}>已售：{item.sold}</div>
</div>
</a>
</div>
))
}
</div>
......@@ -41,3 +42,4 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
}
export default CommodityList
src/pages/lxMall/pointsMall/noResult.tsx deleted 100644 → 0
View file @ 3fcdf329
import React from 'react'
import styles from './index.less'
interface NoResultPropsType {
search?: string
}
const NoResult: React.FC<NoResultPropsType> = (props) => {
const { search } = props
return (
<div className={styles.no_result}>
<div className={styles.no_result_tip}>
<div className={styles.no_result_tip_img}></div>
<div className={styles.no_result_tip_text}>
抱歉，没有找到与“
<span className={styles.no_result_tip_search}>{search}</span>
”相关的商品
</div>
</div>
<div className={styles.no_result_suggest}>
<ul className={styles.no_result_suggest_list}>
<li>建议您：</li>
<li>1、尝试其他关键字</li>
<li>2、适当减少筛选条件</li>
<li>3、调整价格区间</li>
</ul>
</div>
</div>
)
}
export default NoResult
src/pages/lxMall/shop/index.tsx
View file @ f2c18992
......@@ -65,6 +65,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
*/
const fetchFirstCategory = () => {
return new Promise((resolve) => {
//@ts-ignore
PublicApi.getTemplateShopFindAllFirstCategory({ memberId }).then(res => {
if (res.code === 1000) {
setCategoryList(res.data)
......
src/store/category/index.ts
View file @ f2c18992
......@@ -76,8 +76,8 @@ class CategoryStore {
* 店铺商城商品分类列表
*/
@action.bound
public async fetchStoreCategoryList() {
let res = await PublicApi.getSearchShopStoreGetCustomerCategoryTree()
public async fetchStoreCategoryList(param) {
let res = await PublicApi.getSearchShopStoreGetCustomerCategoryTree(param)
runInAction(() => {
this.storeCategoryList = res.data || []
......
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