Skip to content

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

feat:商品现货商品详情接口对接,企业商城商品列表价格排序

parent d09d5a4f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 360 additions and 141 deletions
config/channelRoutes/index.ts
View file @ d5172ef6
......@@ -21,8 +21,8 @@ const shopRoute = {
{
// 商品详情
path: `/channelmall/commodity/detail`,
name: 'commodityDetail',
key: 'commodityDetail',
name: 'channelCommodityDetail',
key: 'channelCommodityDetail',
hide: true,
component: '@/pages/lxMall/commodityDetail',
},
......@@ -34,7 +34,6 @@ const shopRoute = {
{
component: '@/pages/404',
},
],
}
......
config/mallRoutes/index.ts
View file @ d5172ef6
......@@ -18,6 +18,14 @@ const mallRoute = {
component: '@/pages/lxMall/commodity',
},
{
// 商品详情
path: `/commodity/detail`,
name: 'commodityDetail',
key: 'commodityDetail',
hide: true,
component: '@/pages/lxMall/commodityDetail',
},
{
// 商品搜索
path: `/commodity/search`,
name: 'mallCommoditySearch',
......
config/shopRoutes/index.ts
View file @ d5172ef6
......@@ -50,8 +50,8 @@ const shopRoute = {
{
// 商品详情
path: `/shop/commodity/detail`,
name: 'commodityDetail',
key: 'commodityDetail',
name: 'shopCommodityDetail',
key: 'shopCommodityDetail',
hide: true,
component: '@/pages/lxMall/commodityDetail',
},
......
src/constants/index.ts
View file @ d5172ef6
......@@ -118,7 +118,27 @@ export enum FILTER_TYPE {
/**
* 商品名称
*/
name = 'name'
name = 'name',
/**
* 价格排序
*/
priceSort = 'priceSort',
/**
* 价格从高到低
*/
priceSortHighToLow = 'priceSortHighToLow',
/**
* 价格从低到高
*/
priceSortLowToHigh = 'priceSortLowToHigh',
/**
* 销量从高到低
*/
soldSort = 'soldSort',
/**
* 信用从高到低
*/
creditSort = 'creditSort'
}
// 商城类型
......
src/pages/lxMall/commodity/index.less
View file @ d5172ef6
......@@ -61,6 +61,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......
src/pages/lxMall/commodity/index.tsx
View file @ d5172ef6
......@@ -42,7 +42,9 @@ interface filterQuery {
}
const Commodity: React.FC<CommodityPropsType> = (props) => {
const UserStore = useLocalStore(() => store.UserStore)
const FilterStore = useLocalStore(() => store.FilterStore)
const { userInfo } = UserStore
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { layoutType, shopId } = props
const { query: { categoryId, categoryName } } = props.location
......@@ -52,7 +54,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
const filterConfig = [FILTER_TYPE.commonlyUsed, FILTER_TYPE.categoryAndAttr, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType]
const [filterConfig, setFilterConfig] = useState([FILTER_TYPE.categoryAndAttr, FILTER_TYPE.brand, FILTER_TYPE.price, FILTER_TYPE.useArea, FILTER_TYPE.commodityType])
useEffect(() => {
console.log(layoutType, "layoutType")
......@@ -76,6 +78,11 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
}, [filterList])
useEffect(() => {
if (userInfo && layoutType === LAYOUT_TYPE.mall) {
let temp = JSON.parse(JSON.stringify(filterConfig))
temp.unshift(FILTER_TYPE.commonlyUsed)
setFilterConfig(temp)
}
return (() => {
onResetFilter()
})
......@@ -134,6 +141,82 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
setCurrent(page)
}
/**
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
console.log(JSON.stringify(filterList), "filterList")
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
case FILTER_TYPE.soldSort:
if (filterList.some(item => item.type === FILTER_TYPE.soldSort)) {
onFilter({
key: null,
title: '销量从高到低',
type: FILTER_TYPE.soldSort,
})
} else {
onFilter({
key: 'soldSort',
title: '销量从高到低',
type: FILTER_TYPE.soldSort,
})
}
break
case FILTER_TYPE.creditSort:
if (filterList.some(item => item.type === FILTER_TYPE.creditSort)) {
onFilter({
key: null,
title: '信用从高到低',
type: FILTER_TYPE.creditSort,
})
} else {
onFilter({
key: 'creditSort',
title: '信用从高到低',
type: FILTER_TYPE.creditSort,
})
}
break
default:
break
}
}
return (
<div className={styles.commodity}>
<div className={styles.mall_container}>
......@@ -145,23 +228,27 @@ const Commodity: 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.soldSort)}>
<span>销量</span>
<i className={styles.icon}>
<img src={arrowDownIcon} />
{
filterList.some(item => item.type === FILTER_TYPE.soldSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
</div>
<div className={styles.tool_bar_filter_item}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<i className={styles.icon}>
<img src={arrowDownIcon} />
{
filterList.some(item => item.type === FILTER_TYPE.creditSort) ? <img src={arrowDownActiveIcon} /> : <img src={arrowDownIcon} />
}
</i>
</div>
<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} />
<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>
......@@ -176,11 +263,21 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
</div>
</div>
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text}>保存为常用筛选</div>
<div className={styles.filter_bar_left_split}></div>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
{
filterList.length > 0 && (
<div className={styles.filter_bar_left}>
{
userInfo && (
<>
<div className={styles.filter_bar_left_text}>保存为常用筛选</div>
<div className={styles.filter_bar_left_split}></div>
</>
)
}
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
)
}
<div className={styles.filter_bar_list}>
{
filterList.map(item => (
......
src/pages/lxMall/commodity/list.tsx
View file @ d5172ef6
......@@ -14,7 +14,6 @@ interface CommodityListPropsType {
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType, commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
const renderPrice = (commodityItem: GetSearchShopEnterpriseGetCommodityListResponseDetail) => {
switch (commodityItem.priceType) {
// 现货价格
......@@ -49,7 +48,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<>
{
commodityList.map((item, index) => (
<div key={item.id} className={cx(styles.commodity_list_item, styles.row)}>
<div key={`commodity_list_item_${index}`} className={cx(styles.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}>
{
......@@ -82,7 +81,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<>
{
commodityList.map((item, index) => (
<div key={item.id} className={cx(styles.commodity_list_item, styles.column)}>
<div key={`commodity_list_item_column_${index}`} className={cx(styles.commodity_list_item, styles.column)}>
<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}>
{
......@@ -97,7 +96,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
</div>
<ul className={styles.tags_list}>
{
item.sellingPoint.map((pointItem, pointIndex) => (
item.sellingPoint && item.sellingPoint.map((pointItem, pointIndex) => (
<li className={styles.tags_list_item} key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
))
}
......
src/pages/lxMall/commodityDetail/components/Exhibition/index.less
View file @ d5172ef6
......@@ -2,11 +2,16 @@
width: 380px;
.exhibition_img_container {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
&>img {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100%;
display: block;
......
src/pages/lxMall/commodityDetail/components/Exhibition/index.tsx
View file @ d5172ef6
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import styles from './index.less'
interface ExhibitionPropsType {
interface imgItemType {
id: number;
commodityPic: string;
}
interface ExhibitionPropsType {
imgList: imgItemType[]
}
const imgList = [
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-5.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-3.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-2.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg"
},
{
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
}
]
const Exhibition: React.FC<ExhibitionPropsType> = () => {
// const imgList = [
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
// },
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-5.jpg"
// },
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-3.jpg"
// },
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-2.jpg"
// },
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg"
// },
// {
// url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg"
// }
// ]
const [previewImg, setPreviewImg] = useState<any>(imgList[0])
const Exhibition: React.FC<ExhibitionPropsType> = (props) => {
const { imgList = [] } = props
const [previewImg, setPreviewImg] = useState<any>()
const [offSetLeft, setOffSetLeft] = useState<number>(0)
useEffect(() => {
if (imgList.length > 0) {
setPreviewImg(imgList[0])
}
}, [imgList])
const handlePrev = () => {
if (offSetLeft < 0) {
setOffSetLeft(offSetLeft + 70)
......@@ -51,7 +63,7 @@ const Exhibition: React.FC<ExhibitionPropsType> = () => {
return (
<div className={styles.exhibition}>
<div className={styles.exhibition_img_container}>
<img src={previewImg.url} />
<img src={previewImg?.commodityPic} />
</div>
<div className={styles.exhibition_toolbar}>
<div className={cx(styles.exhibition_tool_item, styles.prev)} onClick={() => handlePrev()}><LeftOutlined /></div>
......@@ -59,8 +71,8 @@ const Exhibition: React.FC<ExhibitionPropsType> = () => {
<div className={styles.exhibition_list} style={{ left: offSetLeft }}>
{
imgList.map((item, index) => (
<div key={index} className={cx(styles.exhibition_list_item, previewImg.url === item.url ? styles.active : '')} onClick={() => setPreviewImg(item)}>
<img src={item.url} />
<div key={index} className={cx(styles.exhibition_list_item, previewImg?.id === item.id ? styles.active : '')} onClick={() => setPreviewImg(item)}>
<img src={item.commodityPic} />
</div>
))
}
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Introduction/index.tsx
View file @ d5172ef6
import React from 'react'
import { ScienceTemplate } from './template'
import { GetSearchShopStoreGetCommodityDetailResponse } from '@/services/SearchApi'
import styles from './index.less'
const Introduction: React.FC = () => {
interface IntroductionPropsType {
commodityDetail: GetSearchShopStoreGetCommodityDetailResponse
}
const Introduction: React.FC<IntroductionPropsType> = (props) => {
const { commodityDetail } = props
const data = [
{
......@@ -95,10 +101,10 @@ const Introduction: React.FC = () => {
<div id="introduction" className={styles.introduction}>
<div className={styles.introduction_list}>
{
data.map((item, index) => (
commodityDetail?.commodityAttributeList.map((item, index) => (
<div className={styles.introduction_list_item} key={`introduction_list_item_${index}`}>
<div className={styles.label}>{item.label}</div>
<div className={styles.breif}>{item.value}</div>
<div className={styles.label}>{item.customerAttribute.name}</div>
<div className={styles.breif}>{item.customerAttributeValueList.map((attrItem, attrIndex) => <span key={`introduction_list_item_item_${attrItem.id}`}>{attrItem.value}{attrIndex !== item.customerAttributeValueList.length - 1 ? '、' : ''}</span>)}</div>
</div>
))
}
......
src/pages/lxMall/commodityDetail/components/ProductDescription/index.tsx
View file @ d5172ef6
......@@ -4,12 +4,18 @@ import Comment from './components/Comment'
import Introduction from './components/Introduction'
import TradeRecord from './components/TradeRecord'
import Recommand from './components/Recommand'
import { GetSearchShopStoreGetCommodityDetailResponse } from '@/services/SearchApi'
import cx from 'classnames'
import styles from './index.less'
const { Link } = Anchor
const ProductDescription: React.FC = () => {
interface ProductDescriptionPropsType {
commodityDetail: GetSearchShopStoreGetCommodityDetailResponse
}
const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
const { commodityDetail } = props
const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction")
const handleAnchorChange = (currentActiveLink: string) => {
......@@ -29,7 +35,7 @@ const ProductDescription: React.FC = () => {
<Link href="#comment" title="交易评价(96)" />
<BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop>
</Anchor>
<Introduction />
<Introduction commodityDetail={commodityDetail} />
<TradeRecord />
<Comment />
<Recommand />
......
src/pages/lxMall/commodityDetail/index.less
View file @ d5172ef6
......@@ -57,19 +57,23 @@
}
&.count {
margin-top: 10px;
margin-top: 16px;
}
}
&_list {
display: flex;
flex: 1;
justify-content: space-between;
// justify-content: space-between;
padding-right: 90px;
&_item {
padding: 5px 6px;
&:not(:last-child) {
margin-right: 60px;
}
&.active {
background-color: #FAFAFA;
}
......@@ -91,7 +95,7 @@
color: #333333;
font-size: 12px;
line-height: 12px;
margin-top: 10px;
margin-top: 16px;
}
}
}
......@@ -135,7 +139,8 @@
&_item {
position: relative;
height: 32px;
width: 80px;
width: auto;
padding-right: 10px;
display: flex;
align-items: center;
border: 1px solid rgba(235, 236, 240, 1);
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ d5172ef6
This diff is collapsed.
src/pages/lxMall/components/AboutUs/index.less
View file @ d5172ef6
......@@ -56,6 +56,10 @@
width: 0;
// padding-right: 68px;
&_body {
min-height: 260px;
}
&_tabs {
display: flex;
......@@ -94,7 +98,7 @@
&_title {
font-size: 24px;
font-weight: 500;
margin-top: 48px;
padding-top: 48px;
margin-bottom: 20px;
}
......@@ -106,9 +110,14 @@
&_more {
margin-top: 25px;
&>a {
margin-right: 8px;
color: #333333;
}
&>span {
cursor: pointer;
margin-right: 8px;
}
}
}
......
src/pages/lxMall/components/AboutUs/index.tsx
View file @ d5172ef6
import React, { useState, Fragment } from 'react'
import cx from 'classnames'
import { Link } from 'umi'
import { ArrowRightOutlined } from '@ant-design/icons'
import { Carousel, Skeleton } from 'antd'
import { Carousel } from 'antd'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import styles from './index.less'
enum TAB_TYPE {
......@@ -9,8 +11,13 @@ enum TAB_TYPE {
honors = 2
}
interface AboutUsPropsType {
shopInfo: GetTemplateShopFindShopResponse,
shopUrlParam?: string
}
const AboutUs: React.FC = () => {
const AboutUs: React.FC<AboutUsPropsType> = (props) => {
const { shopInfo, shopUrlParam } = props
const [aboutTab, setAboutTab] = useState<number>(TAB_TYPE.introduction) //1:公司简介 2：资质荣誉
const handleChangeAboutTab = (tab: number) => {
......@@ -26,20 +33,15 @@ const AboutUs: React.FC = () => {
<div className={styles.channel_info_about_container}>
<div className={styles.channel_info_about_img}>
<Carousel className={styles.channel_info_about_img_list} pauseOnDotsHover>
<div className={styles.channel_info_about_img_item} >
<div className={styles.channel_info_about_img_item_body}>
<a href="">
<div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598330851861&di=8d38a489377d22a36d1578ebf61034a1&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F05%2F78%2F01300255392617133169789854855.jpg)` }}></div>
</a>
</div>
</div>
<div className={styles.channel_info_about_img_item} >
<div className={styles.channel_info_about_img_item_body}>
<a href="">
<div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598330851861&di=8d38a489377d22a36d1578ebf61034a1&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F05%2F78%2F01300255392617133169789854855.jpg)` }}></div>
</a>
</div>
</div>
{
shopInfo?.workshopPics && shopInfo?.workshopPics.map((url, index) => (
<div className={styles.channel_info_about_img_item} key={`channel_info_about_img_item_${index}`}>
<div className={styles.channel_info_about_img_item_body}>
<div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${url})` }}></div>
</div>
</div>
))
}
</Carousel>
</div>
<div className={styles.channel_info_about_info}>
......@@ -49,34 +51,29 @@ const AboutUs: React.FC = () => {
</div>
{
aboutTab === TAB_TYPE.introduction ? (
<Fragment>
<div className={styles.channel_info_about_info_body}>
<div className={styles.channel_info_about_info_title}>温州市龙昌皮具有限公司</div>
<p className={styles.channel_info_about_info_brief}>
公司位于温州，多年行业经验，专业经营各种成品真皮，包括全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮……二层皮胚，硅胶二层等,产品主要用于时尚女鞋、男鞋、箱包、皮带、服装、汽车内饰等高端皮具制品行业。
本着质量保证，品种多样，现货充足，款式新颖的经营特色和薄利多销的原则，为客户提供长期优质的服务！
{shopInfo?.describe}
</p>
<p className={styles.channel_info_about_info_brief}>
同时公司长期寻找各皮厂合作，要求皮厂有自已的生产线及高性价比特色产品，可作为普通供应商合作，也可作为其核心经销商战略合作。欢迎来人来样，当面洽谈。
</p>
</Fragment>
</div>
) : (
<Fragment>
<div className={styles.channel_info_about_info_body}>
<div className={styles.honors_list}>
{
list.map((_, index) => (
shopInfo?.honorPics && shopInfo?.honorPics.map((url, index) => (
<div key={`honors_list_item_${index}`} className={styles.honors_list_item}>
<Skeleton.Image style={{ width: 160, height: 107 }} />
<img style={{ width: 160, height: 107 }} src={url} />
</div>
))
}
</div>
</Fragment>
</div>
)
}
<div className={styles.channel_info_about_info_more}>
<span>查看更多</span>
<Link to={`/shop/about?shopId=${shopUrlParam}`}>查看更多</Link>
<ArrowRightOutlined />
</div>
</div>
......
src/pages/lxMall/components/Category/index.less
View file @ d5172ef6
......@@ -31,6 +31,14 @@
left: 0;
z-index: 5;
&.shop {
border-top: 1px solid var(--mall_main_color);
.category_type_content {
top: -2px !important;
}
}
&:hover {
display: block;
}
......
src/pages/lxMall/components/Category/index.tsx
View file @ d5172ef6
......@@ -2,57 +2,62 @@ import React, { useEffect } from 'react'
import { MenuOutlined, RightOutlined } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
import { Link } from 'umi'
import cx from 'classnames'
import { LAYOUT_TYPE } from '@/constants'
import isEmpty from 'lodash/isEmpty'
import './index.less'
import styles from './index.less'
interface CategoryPropsType {
CategoryStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
SiteStore?: any;
layoutType?: LAYOUT_TYPE;
type?: LAYOUT_TYPE
}
const Category: React.FC<CategoryPropsType> = (props) => {
const { type } = props
const { mallTemplateId } = props.SiteStore
const { fetchCategoryList, categoryList } = props.CategoryStore
useEffect(() => {
if (isEmpty(categoryList)) {
// fetchCategoryList()
fetchCategoryList({ templateId: mallTemplateId })
}
}, [])
return (
<div className="category">
<div className="category_type">
<MenuOutlined className="icon" />
<div className={styles.category}>
<div className={styles.category_type}>
<MenuOutlined className={styles.icon} />
<span>全部商品分类</span>
</div>
<div className="category_content">
<div className="category_type_panel">
<ul className="category_nav_list">
<div className={cx(styles.category_content, type === LAYOUT_TYPE.shop ? styles.shop : '')}>
<div className={styles.category_type_panel}>
<ul className={styles.category_nav_list}>
{
categoryList.map(item => (
<li className="category_nav_list_item" key={item.id}>
<div className="main_category">{item.title}</div>
<div className="sub_category">
<li className={styles.category_nav_list_item} key={item.id}>
<div className={styles.main_category}>{item.title}</div>
<div className={styles.sub_category}>
{
item.children.map((childCategory, childIndex) => childIndex < 3 && (
<Link to={`/commodity`} key={childCategory.id}>{childCategory.title}</Link>
))
}
</div>
<RightOutlined className="right_icon" />
<div className="category_type_content">
<div className="category_type_list">
<div className="title">{item.title}</div>
<RightOutlined className={styles.right_icon} />
<div className={styles.category_type_content}>
<div className={styles.category_type_list}>
<div className={styles.title}>{item.title}</div>
{
item.children.map(childCategory => (
<div className="second_category_type" key={childCategory.id}>
<div className="title">
<div className={styles.second_category_type} key={childCategory.id}>
<div className={styles.title}>
<Link to={`/commodity`}>
{childCategory.title} <RightOutlined />
</Link>
</div>
<ul className="third_category_type_list">
<ul className={styles.third_category_type_list}>
{
childCategory.children.map(thirdChildItem => (
<li key={thirdChildItem.id}><Link to={`/commodity`}>{thirdChildItem.title}</Link></li>
......@@ -63,20 +68,15 @@ const Category: React.FC<CategoryPropsType> = (props) => {
))
}
</div>
<div className="category_type_right_wrap">
<div className="category_advert">
<div className="category_advert_item">
<img src="https://img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
</div>
<div className="category_advert_item">
<img src="https://img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
</div>
<div className="category_advert_item">
<img src="https://img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
</div>
<div className="category_advert_item">
<img src="https://img.alicdn.com/i2/2/TB1pwpNhfBNTKJjy1zdXXaScpXa?abtest=&pos=13&abbucket=&acm=09042.1003.1.1200415&scm=1007.13029.131809.100200300000000_200x200q100.jpg_.webp" />
</div>
<div className={styles.category_type_right_wrap}>
<div className={styles.category_advert}>
{
(item.brandBOList && item.brandBOList.length > 0) && item.brandBOList.map(brandItem => (
<div key={`category_advert_item_${brandItem.category_advert_item}`} className={styles.category_advert_item}>
<img src={brandItem.brandLogo} />
</div>
))
}
</div>
</div>
</div>
......@@ -91,4 +91,4 @@ const Category: React.FC<CategoryPropsType> = (props) => {
)
}
export default inject('CategoryStore')(observer(Category))
export default inject('CategoryStore', 'SiteStore')(observer(Category))
src/pages/lxMall/components/Filter/components/Brand/index.tsx
View file @ d5172ef6
......@@ -55,7 +55,7 @@ const Brand: React.FC<BrandPropsType> = (props) => {
<ul className={styles.filter_brand_list}>
{
brandList.map(item => (
<li className={styles.filter_brand_list_item} key={item.id} onClick={() => handleSelectBrand(item)}>
<li className={styles.filter_brand_list_item} title={item.name} key={item.id} onClick={() => handleSelectBrand(item)}>
<div className={styles.brand_img}>
<img src={item.logoUrl} />
</div>
......
src/pages/lxMall/components/Header/index.less
View file @ d5172ef6
......@@ -14,8 +14,10 @@
align-items: center;
.logo {
width: 145px;
height: 50px;
display: inline-block;
padding: 0 95px 0 17px;
margin: 0 95px 0 17px;
&>img {
width: 145px;
......
src/pages/lxMall/components/MainNav/index.tsx
View file @ d5172ef6
......@@ -8,18 +8,17 @@ import styles from './index.less'
interface MainNavPropsType {
menuData: any;
pathname: string;
type: "shop" | "mall" | "channel",
type: LAYOUT_TYPE,
shopId?: string
}
const MainNav: React.FC<MainNavPropsType> = (props) => {
const { menuData, pathname, type, shopId = "" } = props
console.log(type, "type")
return (
<div className={cx(styles.main_nav, type === "shop" ? styles.shop : "")}>
<div className={cx(styles.main_nav, type === LAYOUT_TYPE.shop ? styles.shop : "")}>
<div className={styles.main_nav_container}>
<Category />
<Category type={type} />
<ul className={styles.nav}>
{
menuData && menuData.map(item => !item.hide && (
......
src/pages/lxMall/components/TopBar/index.tsx
View file @ d5172ef6
......@@ -33,7 +33,7 @@ const TopBar: React.FC<TopBarPropsType> = (props) => {
) : (
<>
<li className={styles.topbar_menu_item}>
<a href="/user/login">请登录</a>
<a href={`/user/login?redirect=${window.location}`}>请登录</a>
</li>
<li className={styles.topbar_menu_item}>
<a href="/user/register">注册</a>
......
src/pages/lxMall/index/index.tsx
View file @ d5172ef6
......@@ -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: 3, meberId: 6 }))}`} />
<FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop?shopId=${btoa(JSON.stringify({ shopId: 3, memberId: 6 }))}`} />
</FloorLine.Horizontal>
</FloorLine.Vertical>
</FloorLine.Horizontal>
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ d5172ef6
......@@ -11,6 +11,7 @@ import MainNav from '../components/MainNav'
import SideNav from '../components/SideNav'
import Footer from '../components/Footer'
import styles from './index.less'
import { LAYOUT_TYPE } from '@/constants';
interface LXMallLayoutPropsType {
route: ProLayoutProps['route'] & {
......@@ -50,7 +51,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
<TopBar />
<div className={styles.content}>
<ShopHeader shopId={query.shopId} shopUrlParam={shopId} />
<MainNav menuData={menuData} pathname={location.pathname} type="shop" shopId={shopId} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={shopId} />
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
......
src/pages/lxMall/pointsMall/list.tsx
View file @ d5172ef6
......@@ -15,12 +15,23 @@ interface CommodityListPropsType {
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType, commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
const getCommodityDetailUrl = () => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
return "/"
case LAYOUT_TYPE.channel:
return "/channelmall"
case LAYOUT_TYPE.shop:
return "/shop"
}
}
return (
<div className={cx(styles.point_commodity_list, styles.row)}>
{
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">
<a href={`${getCommodityDetailUrl()}/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 }} />
......
src/pages/lxMall/shop/index.tsx
View file @ d5172ef6
......@@ -9,6 +9,7 @@ import { inject, observer } from 'mobx-react'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplatePlatformFindAllFirstCategoryResponse } from '@/services'
import { GetTemplateShopFindShopResponse } from '@/services/TemplateApi'
import styles from './index.less'
interface ChannelIndexPropsType {
......@@ -16,22 +17,34 @@ interface ChannelIndexPropsType {
location: any
memberId: number;
shopId: number;
shopUrlParam: string
}
const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
const { shopTemplateId } = props.SiteStore
const { shopId, memberId } = props
const { shopId, memberId, shopUrlParam } = props
const [categoryList, setCategoryList] = useState<GetTemplatePlatformFindAllFirstCategoryResponse>([])
const [firstAdvertList, setFirstAdvertList] = useState([])
const [secondAdvertList, setSecondAdvertList] = useState([])
const [shopInfo, setShopInfo] = useState<GetTemplateShopFindShopResponse>()
const [categoryComponents, setCategoryComponents] = useState<React.ReactNode>()
useEffect(() => {
fetchShopInfo()
getCategoryComponents()
findFirstAdvertsByType()
findSecondAdvertsByType()
}, [])
const fetchShopInfo = () => {
//@ts-ignore
PublicApi.getTemplateShopFindShop({ memberId }).then(res => {
if (res.code === 1000) {
setShopInfo(res.data)
}
})
}
const findFirstAdvertsByType = () => {
let params = {
templateId: shopTemplateId,
......@@ -123,7 +136,7 @@ const ShopIndex: React.FC<ChannelIndexPropsType> = (props) => {
</div>
<FloorAnchor anchorList={categoryList} type="shop" />
<CommonTitle title="关于我们" type="primary" />
<AboutUs />
<AboutUs shopInfo={shopInfo} shopUrlParam={shopUrlParam} />
<CommonTitle title="热销商品" type="primary" />
{
categoryComponents ? categoryComponents : <FloorSkeleton type={LAYOUT_TYPE.shop} />
......
src/pages/user/components/LoginWrap.tsx
View file @ d5172ef6
......@@ -10,6 +10,7 @@ import { PublicApi } from '@/services/api';
import { setAuth, setRouters } from '@/utils/auth';
const LoginWrap: React.FC = () => {
const { redirect } = history.location.query
const [validFrame, setValidFrame] = useState(false)
const [validButton, setValidButton] = useState(false)
......@@ -20,7 +21,12 @@ const LoginWrap: React.FC = () => {
setAuth(data)
setRouters(data.urls)
// 此处需使用href跳转， 否则无法触发app.ts中的路由初始化校验
window.location.href = '/memberCenter/home'
if (redirect) {
window.location.href = redirect
} else {
window.location.href = '/memberCenter/home'
}
}
})
}
......
src/store/category/index.ts
View file @ d5172ef6
......@@ -53,10 +53,10 @@ class CategoryStore {
* 企业商城商品分类列表
*/
@action.bound
public async fetchCategoryList() {
let res = await PublicApi.getSearchShopEnterpriseGetCategoryTree()
public async fetchCategoryList(param) {
let res = await PublicApi.getTemplatePlatformFindAllCategoryTree(param)
runInAction(() => {
this.enterpriseCategoryList = res.data || []
this.categoryList = res.data || []
})
}
......
src/store/filter/index.ts
View file @ d5172ef6
......@@ -123,6 +123,18 @@ class FilterStore {
case FILTER_TYPE.city:
tempFilterParam.cityCode = filterItem.key
break
case FILTER_TYPE.soldSort:
tempFilterParam.orderType = 1
break
case FILTER_TYPE.creditSort:
tempFilterParam.orderType = 2
break
case FILTER_TYPE.priceSortHighToLow:
tempFilterParam.orderType = 3
break
case FILTER_TYPE.priceSortLowToHigh:
tempFilterParam.orderType = 4
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