Skip to content

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

feat:样式修改

parent a7dcfc6d
Hide whitespace changes
Inline Side-by-side
Showing with 604 additions and 449 deletions
src/constants/index.ts
View file @ 0d50e004
......@@ -47,10 +47,26 @@ export enum FILTER_TYPE {
*/
price = 'price',
/**
* 最低价格
*/
minPrice = 'minPrice',
/**
* 最高价格
*/
maxPrice = 'maxPrice',
/**
* 发货地
*/
useArea = 'useArea',
/**
* 发货地省份
*/
province = 'province',
/**
* 发货地市区
*/
city = 'city',
/**
* 商品类型
*/
commodityType = 'commodityType',
......
src/layouts/components/AvatarDropdown.tsx
View file @ 0d50e004
......@@ -16,18 +16,18 @@ const AvatarDropdown = () => {
}
const currentUser = {
name: getAuth().name || '未知用户',
name: getAuth()?.name || '未知用户',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
}
const menuHeaderDropdown = (
<Menu className={styles.menu} selectedKeys={[]}>
<Menu.Item key="center">
<UserOutlined />
<Menu.Item key="center">
<UserOutlined />
个人中心
</Menu.Item>
<Menu.Item key="settings">
<SettingOutlined />
<Menu.Item key="settings">
<SettingOutlined />
个人设置
</Menu.Item>
<Menu.Divider />
......@@ -45,7 +45,7 @@ const AvatarDropdown = () => {
<span className={styles.name}>{currentUser.name}</span>
</span>
</PersonDropdown>
)
)
}
export default AvatarDropdown
\ No newline at end of file
src/pages/lxMall/commodity/index.tsx
View file @ 0d50e004
......@@ -18,12 +18,6 @@ import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import styles from './index.less'
interface filterValueType {
key: string | string[];
title: string;
type: FILTER_TYPE;
}
interface CommodityPropsType {
location: any,
layoutType: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
......@@ -47,7 +41,7 @@ interface filterQuery {
const Commodity: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, onDeleteFilterItem, onResetFilter, onFilter } = FilterStore
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { layoutType } = props
const { query: { categoryId, categoryName } } = props.location
const [loading, setLoading] = useState<boolean>(true)
......@@ -56,7 +50,7 @@ const Commodity: 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 [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]
useEffect(() => {
......@@ -71,14 +65,12 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
type: FILTER_TYPE.category,
})
}
}, [props.location.query])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
}, [filterList])
useEffect(() => {
......@@ -108,23 +100,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
}
const handleFilterChange = (newFilterList: any) => {
let tempFilterParam: any = {}
for (let filterItem of newFilterList) {
switch (filterItem.type) {
case FILTER_TYPE.category:
tempFilterParam.categoryId = filterItem.key[0]
break
case FILTER_TYPE.brand:
tempFilterParam.brandId = filterItem.key
break
case FILTER_TYPE.commodityType:
tempFilterParam.priceType = filterItem.key
break
default:
break
}
}
setFilterParam(tempFilterParam)
onFilterParamChange(newFilterList)
}
const handleDeleteFilterItem = (item: any) => {
......
src/pages/lxMall/commodity/list.tsx
View file @ 0d50e004
import React from 'react'
import cx from 'classnames'
import { GetSearchCommodityShopGetCommodityListResponseDetail } from '@/services'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services'
import creditIcon from '@/assets/imgs/credit_icon.png'
import './list.less'
import styles from './list.less'
interface CommodityListPropsType {
showType: number;
commodityList: GetSearchCommodityShopGetCommodityListResponseDetail[]
commodityList: GetSearchShopEnterpriseGetCommodityListResponseDetail[]
layoutType: 'mall' | 'shop' | 'channel'
}
const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const { showType, commodityList = [], layoutType = 'mall' } = props
const renderPrice = (commodityItem: GetSearchCommodityShopGetCommodityListResponseDetail) => {
const renderPrice = (commodityItem: GetSearchShopEnterpriseGetCommodityListResponseDetail) => {
switch (commodityItem.priceType) {
// 现货价格
case 1:
return (
<div className="goods_price">
<div className={styles.goods_price}>
<span>￥</span>
<label>{commodityItem.min}</label>
</div>
......@@ -27,7 +27,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
// 价格需要询价
case 2:
return (
<div className="goods_price">
<div className={styles.goods_price}>
<label>在线询价</label>
</div>
)
......@@ -47,21 +47,21 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<>
{
commodityList.map((item, index) => (
<div key={item.id} className="commodity_list_item row">
<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">
<div className="goods_img">
<div className={styles.goods_img}>
<img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
</div>
<div className="info_box">
<div className={styles.info_box}>
{
renderPrice(item)
}
<div className="goods_name">{item.name}</div>
<div className="count">已售: {item.sold || 0}</div>
<div className="company_info">
<div className="goods_name">{item.memberName}</div>
<div className="credit">
<img className="credit_icon" src={creditIcon} />
<div className={styles.goods_name}>{item.name}</div>
<div className={styles.count}>已售: {item.sold || 0}</div>
<div className={styles.company_info}>
<div className={styles.goods_name}>{item.memberName}</div>
<div className={styles.credit}>
<img className={styles.credit_icon} src={creditIcon} />
<span>{item.creditScore || 0}</span>
</div>
</div>
......@@ -78,29 +78,29 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<>
{
commodityList.map((item, index) => (
<div key={item.id} className="commodity_list_item column">
<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">
<div className="goods_img">
<div className={styles.goods_img}>
<img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
</div>
<div className="info_box">
<div className="info_box_content">
<div className="name">{item.name}</div>
<div className="price"><span>￥</span>{item.min}</div>
<div className="count">已售: {item.sold || 0}</div>
<div className={styles.info_box}>
<div className={styles.info_box_content}>
<div className={styles.name}>{item.name}</div>
<div className={styles.price}><span>￥</span>{item.min}</div>
<div className={styles.count}>已售: {item.sold || 0}</div>
</div>
<ul className="tags_list">
<ul className={styles.tags_list}>
{
item.sellingPoint.map((pointItem, pointIndex) => (
<li className="tags_list_item" key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
<li className={styles.tags_list_item} key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
))
}
</ul>
<div className="credit">
<img className="credit_icon" src={creditIcon} />
<div className={styles.credit}>
<img className={styles.credit_icon} src={creditIcon} />
<span>{item.creditScore || 0}</span>
</div>
<div className="shopname">{item.memberName}</div>
<div className={styles.shopname}>{item.memberName}</div>
</div>
</a>
</div>
......@@ -114,7 +114,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
}
return (
<div className={cx("commodity_list", showType === 2 ? 'column' : 'row')}>
<div className={cx(styles.commodity_list, showType === 2 ? styles.column : styles.row)}>
{
renderItem()
}
......
src/pages/lxMall/commodity/search.tsx
View file @ 0d50e004
......@@ -41,7 +41,7 @@ interface filterQuery {
const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, onDeleteFilterItem, onResetFilter } = FilterStore
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilterParamChange } = FilterStore
const { layoutType } = props
const { query: { search = "" } } = props.location
const [loading, setLoading] = useState<boolean>(true)
......@@ -50,7 +50,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 [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]
useEffect(() => {
......@@ -88,17 +88,7 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
}
const handleFilterChange = (newFilterList: any) => {
let tempFilterParam: any = {}
for (let filterItem of newFilterList) {
switch (filterItem.type) {
case FILTER_TYPE.category:
tempFilterParam.categoryId = filterItem.key[0]
break
default:
break
}
}
setFilterParam(tempFilterParam)
onFilterParamChange(newFilterList)
}
const handleDeleteFilterItem = (item: any) => {
......@@ -109,7 +99,12 @@ const CommoditySearch: React.FC<CommodityPropsType> = (props) => {
* 重置筛选
*/
const handleResetFilter = () => {
onResetFilter()
if (search) {
onResetFilter()
handleClearSearch()
} else {
onResetFilter()
}
}
const handlePageChange = (page) => {
......
src/pages/lxMall/commodityDetail/components/BrowseRecords/index.less
View file @ 0d50e004
.browse_records {
width: 140px;
height: 500px;
border: 1px solid rgba(245, 245, 245, 1);
.browse_records_title {
......@@ -72,29 +73,33 @@
left: 16px;
}
}
}
.ant-carousel .slick-slide {
text-align: center;
height: 460px;
overflow: hidden;
}
:global {
.ant-carousel .slick-slide {
text-align: center;
height: 460px;
overflow: hidden;
}
.ant-carousel .slick-dots li {
width: 4px;
height: 4px;
background-color: #CCCCCC;
.ant-carousel .slick-dots li {
width: 4px;
height: 4px;
background-color: #CCCCCC;
&.slick-active {
background-color: #D32F2F;
&.slick-active {
background-color: #D32F2F;
}
}
.ant-carousel .slick-dots li.slick-active button {
background-color: #D32F2F;
}
.ant-carousel .slick-dots-bottom {
bottom: 6px;
}
}
}
.ant-carousel .slick-dots li.slick-active button {
background-color: #D32F2F;
}
.ant-carousel .slick-dots-bottom {
bottom: 6px;
}
}
\ No newline at end of file
src/pages/lxMall/commodityDetail/components/BrowseRecords/index.tsx
View file @ 0d50e004
import React, { useRef } from 'react'
import { Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import './index.less'
import cx from 'classnames'
import styles from './index.less'
interface BrowseRecordsPropsType {
......@@ -46,24 +47,24 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
const new_product_list = arrGroup(product_list, 3)
return (
<div className="browse_records">
<div className="browse_records_title">
<span className="browse_records_title_line"></span>
<span className="browse_records_title_text">买家还在看</span>
<span className="browse_records_title_line"></span>
<div className={styles.browse_records}>
<div className={styles.browse_records_title}>
<span className={styles.browse_records_title_line}></span>
<span className={styles.browse_records_title_text}>买家还在看</span>
<span className={styles.browse_records_title_line}></span>
</div>
<div className="carousel_wrap">
<div className={styles.carousel_wrap}>
<Carousel ref={actionRef}>
{
new_product_list.map((item, index) => (
<div key={`product_list_${index}`} className="browse_records_product_list">
<div key={`product_list_${index}`} className={styles.browse_records_product_list}>
{
item.map((childItem, childIndex) => (
<div key={`browse_records_product_list_item_${childIndex}`} className="browse_records_product_list_item">
<div className="product_img_box">
<div key={`browse_records_product_list_item_${childIndex}`} className={styles.browse_records_product_list_item}>
<div className={styles.product_img_box}>
<img src={childItem.imgUrl} />
</div>
<div className="product_price">￥{childItem.price}</div>
<div className={styles.product_price}>￥{childItem.price}</div>
</div>
))
}
......@@ -71,8 +72,8 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = () => {
))
}
</Carousel>
<LeftOutlined className="common_arrow_btn prev" onClick={() => actionRef.current.prev()} />
<RightOutlined className="common_arrow_btn next" onClick={() => actionRef.current.next()} />
<LeftOutlined className={cx(styles.common_arrow_btn, styles.prev)} onClick={() => actionRef.current.prev()} />
<RightOutlined className={cx(styles.common_arrow_btn, styles.next)} onClick={() => actionRef.current.next()} />
</div>
</div>
)
......
src/pages/lxMall/commodityDetail/components/Exhibition/index.tsx
View file @ 0d50e004
import React, { useState } from 'react'
import cx from 'classnames'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import './index.less'
import styles from './index.less'
interface ExhibitionPropsType {
......@@ -49,24 +49,24 @@ const Exhibition: React.FC<ExhibitionPropsType> = () => {
}
return (
<div className="exhibition">
<div className="exhibition_img_container">
<div className={styles.exhibition}>
<div className={styles.exhibition_img_container}>
<img src={previewImg.url} />
</div>
<div className="exhibition_toolbar">
<div className="exhibition_tool_item prev" onClick={() => handlePrev()}><LeftOutlined /></div>
<div className="exhibition_list_contaner">
<div className="exhibition_list" style={{ left: offSetLeft }}>
<div className={styles.exhibition_toolbar}>
<div className={cx(styles.exhibition_tool_item, styles.prev)} onClick={() => handlePrev()}><LeftOutlined /></div>
<div className={styles.exhibition_list_contaner}>
<div className={styles.exhibition_list} style={{ left: offSetLeft }}>
{
imgList.map((item, index) => (
<div key={index} className={cx("exhibition_list_item", previewImg.url === item.url ? 'active' : '')} onClick={() => setPreviewImg(item)}>
<div key={index} className={cx(styles.exhibition_list_item, previewImg.url === item.url ? styles.active : '')} onClick={() => setPreviewImg(item)}>
<img src={item.url} />
</div>
))
}
</div>
</div>
<div className="exhibition_tool_item next" onClick={() => handleNext()}><RightOutlined /></div>
<div className={cx(styles.exhibition_tool_item, styles.next)} onClick={() => handleNext()}><RightOutlined /></div>
</div>
</div>
)
......
src/pages/lxMall/commodityDetail/components/Interested/index.tsx
View file @ 0d50e004
import React from 'react'
import './index.less'
import styles from './index.less'
const Interested: React.FC = () => {
return (
<div className="interested">
<div className="interested_title">最近销售</div>
<div className="interested_product_list">
<div className={styles.interested}>
<div className={styles.interested_title}>最近销售</div>
<div className={styles.interested_product_list}>
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt">
<div className="interested_product_list_item">
<div className="interested_product_list_item_img_box">
<div className={styles.interested_product_list_item}>
<div className={styles.interested_product_list_item_img_box}>
<img src="https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg" />
</div>
<div className="interested_product_list_item_name">0.8-1.0mm黑色手折纹胎…</div>
<div className="interested_product_list_item_price"><span>￥</span> 79.00</div>
<div className={styles.interested_product_list_item_name}>0.8-1.0mm黑色手折纹胎…</div>
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
</div>
</a>
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt">
<div className="interested_product_list_item">
<div className="interested_product_list_item_img_box">
<div className={styles.interested_product_list_item}>
<div className={styles.interested_product_list_item_img_box}>
<img src="https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg" />
</div>
<div className="interested_product_list_item_name">0.8-1.0mm黑色手折纹胎…</div>
<div className="interested_product_list_item_price"><span>￥</span> 79.00</div>
<div className={styles.interested_product_list_item_name}>0.8-1.0mm黑色手折纹胎…</div>
<div className={styles.interested_product_list_item_price}><span>￥</span> 79.00</div>
</div>
</a>
</div>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Comment/index.less
View file @ 0d50e004
......@@ -118,31 +118,33 @@
margin-top: 20px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: #D32F2F;
&:hover,
&:active {
border-color: #D32F2F;
&>a {
color: #D32F2F;
&>a {
color: #D32F2F;
}
}
}
}
.ant-pagination-item-active {
background-color: #D32F2F;
border-color: #D32F2F;
.ant-pagination-item-active {
background-color: #D32F2F;
border-color: #D32F2F;
&:hover {
&>a {
color: #ffffff;
}
}
&:hover {
&>a {
color: #ffffff;
}
}
&>a {
color: #ffffff;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Comment/index.tsx
View file @ 0d50e004
......@@ -3,56 +3,56 @@ import cx from 'classnames'
import { Rate, Pagination } from 'antd'
import ImageViewList from '../ImageViewList'
import defaultAvatar from '@/assets/imgs/default_avatar.png'
import './index.less'
import styles from './index.less'
const Comment: React.FC = () => {
return (
<div id="comment" className="comment">
<div className="comment_title">交易评价</div>
<div className="favorable_comments">
<div className="favorable_comments_title">好评率</div>
<div id="comment" className={styles.comment}>
<div className={styles.comment_title}>交易评价</div>
<div className={styles.favorable_comments}>
<div className={styles.favorable_comments_title}>好评率</div>
<span>98</span>
<i>%</i>
</div>
<div className="common_count">
<div className={cx("common_count_item", "active")}>全部评价(200+)</div>
<div className="common_count_item">好评(100+)</div>
<div className="common_count_item">中评(99)</div>
<div className="common_count_item">差评(5)</div>
<div className={styles.common_count}>
<div className={cx(styles.common_count_item, styles.active)}>全部评价(200+)</div>
<div className={styles.common_count_item}>好评(100+)</div>
<div className={styles.common_count_item}>中评(99)</div>
<div className={styles.common_count_item}>差评(5)</div>
</div>
<div className="comment_list">
<div className="comment_list_item">
<div className="comment_list_item_left">
<div className="user_avatar">
<div className={styles.comment_list}>
<div className={styles.comment_list_item}>
<div className={styles.comment_list_item_left}>
<div className={styles.user_avatar}>
<img src={defaultAvatar} />
</div>
<div className="user_name">温州市****皮具有限公司</div>
<div className="user_type">VIP会员</div>
<div className={styles.user_name}>温州市****皮具有限公司</div>
<div className={styles.user_type}>VIP会员</div>
</div>
<div className="comment_list_item_right">
<Rate className="comment_rate" value={4} disabled />
<div className="comment_content">买的京东那个叫什么三购买的，不错。9块9。洗完澡以后穿着这个再大。听你走来走去也没事，跟家人一起的话穿着这个既文明药物。可以。保持礼貌。</div>
<div className="comment_date">2020-05-20 15:58</div>
<div className={styles.comment_list_item_right}>
<Rate className={styles.comment_rate} value={4} disabled />
<div className={styles.comment_content}>买的京东那个叫什么三购买的，不错。9块9。洗完澡以后穿着这个再大。听你走来走去也没事，跟家人一起的话穿着这个既文明药物。可以。保持礼貌。</div>
<div className={styles.comment_date}>2020-05-20 15:58</div>
</div>
</div>
<div className="comment_list_item">
<div className="comment_list_item_left">
<div className="user_avatar">
<div className={styles.comment_list_item}>
<div className={styles.comment_list_item_left}>
<div className={styles.user_avatar}>
<img src={defaultAvatar} />
</div>
<div className="user_name">温州市****皮具有限公司</div>
<div className="user_type">VIP会员</div>
<div className={styles.user_name}>温州市****皮具有限公司</div>
<div className={styles.user_type}>VIP会员</div>
</div>
<div className="comment_list_item_right">
<Rate className="comment_rate" value={4} disabled />
<div className="comment_content">买的京东那个叫什么三购买的，不错。9块9。洗完澡以后穿着这个再大。听你走来走去也没事，跟家人一起的话穿着这个既文明药物。可以。保持礼貌。</div>
<div className={styles.comment_list_item_right}>
<Rate className={styles.comment_rate} value={4} disabled />
<div className={styles.comment_content}>买的京东那个叫什么三购买的，不错。9块9。洗完澡以后穿着这个再大。听你走来走去也没事，跟家人一起的话穿着这个既文明药物。可以。保持礼貌。</div>
<ImageViewList />
<div className="comment_date">2020-05-20 15:58</div>
<div className={styles.comment_date}>2020-05-20 15:58</div>
</div>
</div>
</div>
<div className="pagination_wrap">
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper={false} showSizeChanger={false} defaultCurrent={1} total={50} />
</div>
</div>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/ImageViewList/index.tsx
View file @ 0d50e004
import React, { useState } from 'react'
import { VerticalRightOutlined, FullscreenOutlined, UndoOutlined, RedoOutlined } from '@ant-design/icons'
import cx from 'classnames'
import './index.less'
import styles from './index.less'
const ImageViewList = () => {
......@@ -56,13 +56,13 @@ const ImageViewList = () => {
}
return (
<div className="image_view_list">
<div className="thumb_img_list">
<div className={styles.image_view_list}>
<div className={styles.thumb_img_list}>
{
imgList.map((item, index) => (
<div
key={`thumb_img_list_item_${index}`}
className={cx("thumb_img_list_item", previewImage === index ? 'active' : '')}
className={cx(styles.thumb_img_list_item, previewImage === index ? styles.active : '')}
onClick={() => handlePreviewImg(index)}
>
<img src={item.url} />
......@@ -72,22 +72,22 @@ const ImageViewList = () => {
</div>
{
(previewImage === 0 || previewImage !== -1) && (
<div className="image_preview_box">
<div className="image_preview_toolbar">
<div className="image_preview_toolbar_item" onClick={() => handleActions('packUp')}>
<VerticalRightOutlined className="icon" rotate={90} />
<div className={styles.image_preview_box}>
<div className={styles.image_preview_toolbar}>
<div className={styles.image_preview_toolbar_item} onClick={() => handleActions('packUp')}>
<VerticalRightOutlined className={styles.icon} rotate={90} />
<span>收起</span>
</div>
<div className="image_preview_toolbar_item" onClick={() => handleActions('preview')}>
<FullscreenOutlined className="icon" />
<div className={styles.image_preview_toolbar_item} onClick={() => handleActions('preview')}>
<FullscreenOutlined className={styles.icon} />
<span>原图</span>
</div>
<div className="image_preview_toolbar_item" onClick={() => handleActions('turnLeft')}>
<UndoOutlined className="icon" />
<div className={styles.image_preview_toolbar_item} onClick={() => handleActions('turnLeft')}>
<UndoOutlined className={styles.icon} />
<span>左转</span>
</div>
<div className="image_preview_toolbar_item" onClick={() => handleActions('turnRight')}>
<RedoOutlined className="icon" />
<div className={styles.image_preview_toolbar_item} onClick={() => handleActions('turnRight')}>
<RedoOutlined className={styles.icon} />
<span>右转</span>
</div>
</div>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Introduction/index.tsx
View file @ 0d50e004
import React from 'react'
import { ScienceTemplate } from './template'
import './index.less'
import styles from './index.less'
const Introduction: React.FC = () => {
......@@ -92,13 +92,13 @@ const Introduction: React.FC = () => {
}
return (
<div id="introduction" className="introduction">
<div className="introduction_list">
<div id="introduction" className={styles.introduction}>
<div className={styles.introduction_list}>
{
data.map((item, index) => (
<div className="introduction_list_item" key={`introduction_list_item_${index}`}>
<div className="label">{item.label}</div>
<div className="breif">{item.value}</div>
<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>
))
}
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.tsx
View file @ 0d50e004
import React from 'react'
import './index.less'
import styles from './index.less'
const Recommand: React.FC = () => {
......@@ -47,18 +47,18 @@ const Recommand: React.FC = () => {
]
return (
<div className="recommand">
<div className="recommand_title">买家还在看</div>
<div className="recommand_list">
<div className={styles.recommand}>
<div className={styles.recommand_title}>买家还在看</div>
<div className={styles.recommand_list}>
{
product_list.map((item, index) => (
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt" key={`recommand_list_item_${index}`}>
<div className="recommand_list_item">
<div className="recommand_list_item_img">
<div className={styles.recommand_list_item}>
<div className={styles.recommand_list_item_img}>
<img src={item.imgUrl} />
</div>
<div className="recommand_list_item_name">{item.name}</div>
<div className="recommand_list_item_price">
<div className={styles.recommand_list_item_name}>{item.name}</div>
<div className={styles.recommand_list_item_price}>
<span>￥</span>
{item.price}
</div>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/TradeRecord/index.tsx
View file @ 0d50e004
import React from 'react'
import { Table } from 'antd'
import './index.less'
import styles from './index.less'
const TradeRecord: React.FC = () => {
......@@ -49,11 +49,11 @@ const TradeRecord: React.FC = () => {
]
return (
<div id="trade_record" className="trade_record">
<div className="trade_record_title">
<div id="trade_record" className={styles.trade_record}>
<div className={styles.trade_record_title}>
交易记录
</div>
<div className="trade_record_container">
<div className={styles.trade_record_container}>
<Table rowKey="id" columns={columns} dataSource={mockData} />
</div>
</div>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/index.less
View file @ 0d50e004
......@@ -21,49 +21,51 @@
bottom: 0;
}
.ant-anchor {
display: flex;
align-items: center;
padding: 0;
.ant-anchor-ink {
display: none;
}
:global {
.ant-anchor {
display: flex;
align-items: center;
padding: 0;
.ant-anchor-ink {
display: none;
}
.ant-anchor-link {
padding: 0;
height: 40px;
line-height: 40px;
padding: 0 24px;
.ant-anchor-link {
padding: 0;
height: 40px;
line-height: 40px;
padding: 0 24px;
&.active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
&.active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
a {
color: #D32F2F;
a {
color: #D32F2F;
}
}
}
&.ant-anchor-link-active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
&.ant-anchor-link-active {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
a {
color: #D32F2F;
a {
color: #D32F2F;
}
}
}
&:hover {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
&:hover {
background-color: #FFFFFF;
border-top: 2px solid #D32F2F;
a {
color: #D32F2F;
a {
color: #D32F2F;
}
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/commodityDetail/components/ProductDescription/index.tsx
View file @ 0d50e004
......@@ -5,7 +5,7 @@ import Introduction from './components/Introduction'
import TradeRecord from './components/TradeRecord'
import Recommand from './components/Recommand'
import cx from 'classnames'
import './index.less'
import styles from './index.less'
const { Link } = Anchor
......@@ -13,25 +13,21 @@ const ProductDescription: React.FC = () => {
const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction")
const handleAnchorChange = (currentActiveLink: string) => {
if (currentActiveLink) {
console.log(currentActiveLink, "currentActiveLink")
setCurrentAnchor(currentActiveLink)
} else {
console.log(currentActiveLink, "currentActiveLink")
}
}
return (
<div className="product_description" id="product_description">
<div className={styles.product_description} id="product_description">
<Anchor
className="product_description_anchor"
className={styles.product_description_anchor}
targetOffset={120}
onChange={handleAnchorChange}
>
<Link className={cx(currentAnchor === "#introduction" ? 'active' : '')} href="#introduction" title="产品简介" />
<Link href="#trade_record" title="交易记录(2)" />
<Link href="#comment" title="交易评价(96)" />
<BackTop className="buy_now_btn" visibilityHeight={800} >立即订购</BackTop>
<BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop>
</Anchor>
<Introduction />
<TradeRecord />
......
src/pages/lxMall/commodityDetail/components/ShopInfo/index.tsx
View file @ 0d50e004
......@@ -2,53 +2,53 @@ import React from 'react'
import { Rate } from 'antd'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import './index.less'
import styles from './index.less'
const ShopInfo: React.FC = () => {
return (
<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_name">温州市龙昌皮具有限公司</div>
<div className="shop_about">
<div className="shop_about_item">
<i className="icon"><img src={shop_icon} /></i>
<span className="red">2</span>
<div className={styles.shop_name}>温州市龙昌皮具有限公司</div>
<div className={styles.shop_about}>
<div className={styles.shop_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span>年</span>
</div>
<div className="shop_about_item">
<i className="icon"><img src={credit_icon} /></i>
<div className={styles.shop_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
</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={styles.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={styles.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>
)
}
......
src/pages/lxMall/components/Filter/components/Brand/index.less
View file @ 0d50e004
......@@ -24,7 +24,9 @@
cursor: pointer;
&>img {
display: block;
height: 40px;
margin: 0 auto;
}
}
}
......
src/pages/lxMall/components/Filter/components/Brand/index.tsx
View file @ 0d50e004
......@@ -3,7 +3,7 @@ import FilterBox from '../FilterBox'
import { PublicApi } from '@/services/api'
import { GetSearchShopEnterpriseGetBrandResponse } from '@/services'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import './index.less'
import styles from './index.less'
interface BrandPropsType {
FilterStore?: any;
......@@ -40,11 +40,11 @@ const Brand: React.FC<BrandPropsType> = (props) => {
useEffect(() => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
// PublicApi.getSearchShopEnterpriseGetBrand((res) => {
// if (res.code === 1000) {
// setBrandList(res.data)
// }
// })
PublicApi.getSearchShopEnterpriseGetBrand().then((res) => {
if (res.code === 1000) {
setBrandList(res.data)
}
})
break
case LAYOUT_TYPE.shop:
break
......@@ -66,18 +66,17 @@ const Brand: React.FC<BrandPropsType> = (props) => {
<FilterBox
title="品牌"
>
<div className="filter_brand">
<ul className="filter_brand_list">
<div className={styles.filter_brand}>
<ul className={styles.filter_brand_list}>
{
mock_brand_list.map(item => (
<li className="filter_brand_list_item" key={item.id} onClick={() => handleSelectBrand(item)}>
<div className="brand_img">
<img src={item.brandUrl} />
brandList.map(item => (
<li className={styles.filter_brand_list_item} key={item.id} onClick={() => handleSelectBrand(item)}>
<div className={styles.brand_img}>
<img src={item.logoUrl} />
</div>
</li>
))
}
</ul>
</div>
</FilterBox>
......
src/pages/lxMall/components/Filter/components/CommodityType/index.less
View file @ 0d50e004
.filter_style {
padding: 15px 20px 8px 20px;
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
:global {
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
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/CommodityType/index.tsx
View file @ 0d50e004
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { Checkbox } from 'antd'
import FilterBox from '../FilterBox'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import isEmpty from 'lodash/isEmpty'
import './index.less'
import styles from './index.less'
interface CommodityTypePropsType {
FilterStore?: any;
......@@ -22,6 +22,20 @@ const CommodityType: React.FC<CommodityTypePropsType> = (props) => {
{ label: '只看询价商品', value: 2 },
];
useEffect(() => {
if (isEmpty(filterList)) {
setSelectKeys([])
} else {
let initKeys = []
for (let item of filterList) {
if (item.type === FILTER_TYPE.commodityType) {
initKeys.push(item.key)
}
}
setSelectKeys(initKeys)
}
}, [filterList])
const handleChange = (checkValue) => {
let result = []
if (isEmpty(selectKeys)) {
......@@ -30,7 +44,6 @@ const CommodityType: React.FC<CommodityTypePropsType> = (props) => {
result = checkValue.filter(item => item !== selectKeys[0])
}
setSelectKeys(result)
console.log(result, "result")
onFilter({
type: FILTER_TYPE.commodityType,
key: result[0],
......@@ -52,7 +65,7 @@ const CommodityType: React.FC<CommodityTypePropsType> = (props) => {
<FilterBox
title="商品类型"
>
<div className="filter_style">
<div className={styles.filter_style}>
<CheckboxGroup options={styleOptions} value={selectKeys} onChange={handleChange} />
</div>
</FilterBox>
......
src/pages/lxMall/components/Filter/components/CommonlyUsed/index.less 0 → 100644
View file @ 0d50e004
.commonly_used_list {
display: flex;
padding: 5px 0 10px 0;
flex-wrap: wrap;
margin: 0;
&_item {
list-style: none;
padding: 10px 15px;
font-size: 12px;
cursor: pointer;
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/CommonlyUsed/index.tsx
View file @ 0d50e004
......@@ -2,7 +2,7 @@
import React from 'react'
import { CaretDownOutlined } from '@ant-design/icons'
import FilterBox from '../FilterBox'
import '../../index.less'
import styles from './index.less'
interface CommonlyUsedPropsType {
......@@ -14,10 +14,10 @@ const CommonlyUsed: React.FC<CommonlyUsedPropsType> = (props) => {
<FilterBox
title="我的常用筛选"
>
<ul className="commonly_used_list">
<li className="commonly_used_list_item">筛选组一</li>
<li className="commonly_used_list_item">筛选组二</li>
<li className="commonly_used_list_item">筛选组三</li>
<ul className={styles.commonly_used_list}>
<li className={styles.commonly_used_list_item}>筛选组一</li>
<li className={styles.commonly_used_list_item}>筛选组二</li>
<li className={styles.commonly_used_list_item}>筛选组三</li>
</ul>
</FilterBox>
)
......
src/pages/lxMall/components/Filter/components/Price/index.less
View file @ 0d50e004
......@@ -56,4 +56,11 @@
background-color: var(--mall_main_color);
border-radius: 0;
}
}
.price_text {
&>b {
margin-left: 5px;
color: #D32F2F;
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/Price/index.tsx
View file @ 0d50e004
import React, { useState } from 'react'
import { Slider } from 'antd'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import FilterBox from '../FilterBox'
import './index.less'
interface PricePropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
const Price: React.FC<PricePropsType> = (props) => {
const [priceRange, setPriceRange] = useState<any>([0, 1000])
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [priceRange, setPriceRange] = useState<any>([0, 900])
const handlePriceChange = (value) => {
setPriceRange(value)
}
const filterMinPrice = (min: number, state: boolean = true) => {
onFilter({
type: FILTER_TYPE.minPrice,
title: <span className="price_text">最低 ¥<b>{min}</b></span>,
key: state ? min : null
})
}
const filterMaxPrice = (max: number, state: boolean = true) => {
onFilter({
type: FILTER_TYPE.maxPrice,
title: <span className="price_text">最高 ¥<b>{max}</b></span>,
key: state ? max : null
})
}
const handleConfirmPriceRange = () => {
let min = priceRange[0]
let max = priceRange[1]
if (min === 900) {
filterMinPrice(min)
} else if (min === 0 && max !== 900) {
filterMinPrice(min, false)
filterMaxPrice(max)
} else if (min !== 0 && max === 900) {
filterMinPrice(min)
filterMaxPrice(max, false)
} else if ((min === 0 && max === 900) || (min !== 0 && max !== 900)) {
filterMinPrice(min)
filterMaxPrice(max)
}
}
return (
<FilterBox
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={priceRange} onChange={handlePriceChange} />
<div className="price_box">
<span className="price_box_brief">价格：</span>
<div className="price_range">
<span className="price">¥{priceRange[0]}</span>
<span className="split">-</span>
<span className="price">¥{priceRange[1]}</span>
<span className="price">{priceRange[0] === 900 ? '' : `¥${priceRange[1]}`}</span>
</div>
<div className="confirm_btn">确定</div>
<div className="confirm_btn" onClick={() => handleConfirmPriceRange()}>确定</div>
</div>
</div>
</FilterBox>
......
src/pages/lxMall/components/Filter/components/Style/index.less
View file @ 0d50e004
.filter_style {
padding: 15px 20px 8px 20px;
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
: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 {
.ant-checkbox-wrapper {
font-size: 12px;
}
&:active,
&:hover,
&:focus {
+.ant-checkbox-inner {
border-color: var(--mall_main_color);
.ant-checkbox-checked::after {
border: 1px solid var(--mall_main_color);
}
}
}
.ant-checkbox-group-item {
.ant-checkbox-input {
&:active,
&:hover,
&:focus {
+.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox-group-item {
&:hover,
&:active {
.ant-checkbox-inner {
&: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);
}
}
}
.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/Style/index.tsx
View file @ 0d50e004
import React from 'react'
import { Checkbox } from 'antd'
import FilterBox from '../FilterBox'
import './index.less'
import styles from './index.less'
const CheckboxGroup = Checkbox.Group
......@@ -26,7 +26,7 @@ const Style: React.FC<StylePropsType> = (props) => {
<FilterBox
title="风格"
>
<div className="filter_style">
<div className={styles.filter_style}>
<CheckboxGroup options={styleOptions} onChange={handleChange} />
</div>
</FilterBox>
......
src/pages/lxMall/components/Filter/components/UseArea/index.tsx
View file @ 0d50e004
import React, { useState, useEffect } from 'react'
import FilterBox from '../FilterBox'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetAreaResponse } from '@/services/SearchApi'
import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
import isEmpty from 'lodash/isEmpty'
import cx from 'classnames'
import './index.less'
import styles from './index.less'
interface UseAreaPropsType {
FilterStore?: any;
layoutType?: LAYOUT_TYPE.mall | LAYOUT_TYPE.shop | LAYOUT_TYPE.channel
}
interface useAreaType {
/**
* 省份名称
*/
label: string
/**
* 省份编码
*/
value: string
/**
* 城市集合 ,CityResponse
*/
children: {
/**
* 城市名称
*/
label?: string
/**
* 城市编码
*/
value?: string
}[]
}
const UseArea: React.FC<UseAreaPropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall } = props
const { onFilter, filterList } = props.FilterStore
const [areaList, setAreaList] = useState<useAreaType[]>([])
const [selectCity, setSelectCity] = useState<string[]>([])
const mockData = [
{
label: '北京',
value: 'bj',
children: [
{
label: '东城区',
value: 'dcq',
},
]
},
{
label: '天津',
value: 'tj',
},
{
label: '江苏',
value: 'js',
children: [
{
label: '南京',
value: 'nj',
},
{
label: '苏州',
value: 'szj',
},
{
label: '无锡',
value: 'wx',
},
{
label: '常州',
value: 'cz',
},
{
label: '镇江',
value: 'zj',
},
{
label: '扬州',
value: 'yz',
},
{
label: '盐城',
value: 'yc',
},
]
},
{
label: '上海',
value: 'sh',
},
{
label: '重庆',
value: 'chq',
},
{
label: '河北',
value: 'hb',
children: [
{
label: '石家庄市',
value: 'sjz',
},
]
},
]
useEffect(() => {
if (isEmpty(filterList)) {
setSelectCity([])
} else {
let initKeys = []
for (let item of filterList) {
if (item.type === FILTER_TYPE.province) {
initKeys.push(item.key)
} else if (item.type === FILTER_TYPE.city) {
initKeys.push(item.key)
}
}
setSelectCity(initKeys)
}
}, [filterList])
useEffect(() => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
// PublicApi.getSearchShopEnterpriseGetBrand((res) => {
// if (res.code === 1000) {
// setBrandList(res.data)
// }
// })
PublicApi.getSearchShopEnterpriseGetArea().then((res) => {
if (res.code === 1000) {
setAreaList(initAreaData(res.data))
}
})
break
case LAYOUT_TYPE.shop:
break
......@@ -103,46 +76,94 @@ const UseArea: React.FC<UseAreaPropsType> = (props) => {
}
}, [layoutType])
const handleSelect = (item: any, type: number) => {
if (type === 1) {
useEffect(() => {
console.log(selectCity, "selectCity")
}, [selectCity])
const initAreaData = (data: GetSearchShopEnterpriseGetAreaResponse) => {
if (!!data) {
return data.map(item => {
return {
label: item.provinceName,
value: item.provinceCode,
children: !!item.cityList ? item.cityList.map(childItem => {
return {
label: childItem.cityName,
value: childItem.cityCode,
}
}) : []
}
})
}
return []
}
const handleSelect = (item: any, type: FILTER_TYPE) => {
if (type === FILTER_TYPE.province) {
setSelectCity([item.value])
onFilter({
type: FILTER_TYPE.province,
title: item.label,
key: item.value
})
if (selectCity.length > 1 && selectCity[0] !== item.value) {
onFilter({
type: FILTER_TYPE.city,
title: item.label,
key: null
})
}
} else {
setSelectCity([selectCity[0], item.value])
onFilter({
type: FILTER_TYPE.province,
title: getProvinceText(selectCity[0]),
key: selectCity[0]
})
onFilter({
type: FILTER_TYPE.city,
title: item.label,
key: item.value
})
}
}
onFilter({
type: 'area',
title: item.label,
key: item.value
})
const getProvinceText = (code: string) => {
let result = ""
for (let item of areaList) {
if (item.value === code) {
result = item.label
}
}
return result
}
return (
<FilterBox
title="适用地区"
>
<div className="filter_usearea">
<div className="filter_usearea_list">
<div className={styles.filter_usearea}>
<div className={styles.filter_usearea_list}>
{
mockData.map(item => (
<div key={item.value} className={cx("filter_usearea_list_item", selectCity.includes(item.value) ? "active" : '')}>
<span className="text" onClick={() => handleSelect(item, 1)}>{item.label}</span>
areaList.map(item => (
<div key={item.value} className={cx(styles.filter_usearea_list_item, selectCity.includes(item.value) ? styles.active : '')}>
<span className={styles.text} onClick={() => handleSelect(item, FILTER_TYPE.province)}>{item.label}</span>
{
(selectCity.includes(item.value) && !!item.children) && (
<div className="more_panel">
<div className="sub_area_list">
<div className={styles.more_panel}>
<div className={styles.sub_area_list}>
{
item.children.map(childItem => (
<div key={childItem.value} onClick={() => handleSelect(childItem, 2)} className={cx("sub_area_list_item", selectCity.includes(childItem.value) ? 'active' : '')}>
<div key={childItem.value} onClick={() => handleSelect(childItem, FILTER_TYPE.city)} className={cx(styles.sub_area_list_item, selectCity.includes(childItem.value) ? styles.active : '')}>
{childItem.label}
</div>
))
}
</div>
<div className="sub_area_list_hidden">
<div className={styles.sub_area_list_hidden}>
{
item.children && item.children.map(childItem => (
<div className="sub_area_list_item">
<div className={styles.sub_area_list_item} key={childItem.value}>
{childItem.label}
</div>
))
......
src/pages/lxMall/components/Filter/index.less
View file @ 0d50e004
......@@ -37,16 +37,5 @@
}
}
.commonly_used_list {
display: flex;
padding: 5px 0 10px 0;
flex-wrap: wrap;
margin: 0;
&_item {
list-style: none;
padding: 10px 15px;
font-size: 12px;
}
}
}
\ No newline at end of file
src/store/filter/index.ts
View file @ 0d50e004
......@@ -8,13 +8,34 @@ interface filterValueType {
type: FILTER_TYPE;
}
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;
}
class FilterStore {
/**
* 筛选条件列表
*/
@observable filterList = []
@observable filterUpdate: boolean = false
@observable filterParam: filterQuery | {} = {}
/**
* 筛选
* @param filterValue
*/
@action.bound
public onFilter = (filterValue: filterValueType) => {
let filteState = this.filterList.some(item => item.type === filterValue.type)
......@@ -42,13 +63,20 @@ class FilterStore {
this.filterUpdate = true
this.filterList = tempFilterList
}
/**
* 重置筛选项
*/
@action.bound
public onResetFilter = () => {
this.filterList = []
this.filterUpdate = true
}
/**
* 删除筛选选项
* @param key
* @param type
*/
@action.bound
public onDeleteFilterItem = (key: string, type: FILTER_TYPE) => {
let tempFilterList = [...this.filterList]
......@@ -62,6 +90,50 @@ class FilterStore {
this.filterUpdate = true
}
/**
* 筛选条件修改
* @param newFilterList
*/
@action.bound
public onFilterParamChange = (newFilterList: any) => {
let tempFilterParam: any = {}
for (let filterItem of newFilterList) {
switch (filterItem.type) {
case FILTER_TYPE.category:
tempFilterParam.categoryId = filterItem.key[0]
break
case FILTER_TYPE.brand:
tempFilterParam.brandId = filterItem.key
break
case FILTER_TYPE.commodityType:
tempFilterParam.priceType = filterItem.key
break
case FILTER_TYPE.minPrice:
tempFilterParam.Min = filterItem.key
break
case FILTER_TYPE.maxPrice:
tempFilterParam.Max = filterItem.key
break
case FILTER_TYPE.brand:
tempFilterParam.brandId = filterItem.key
break
case FILTER_TYPE.province:
tempFilterParam.provinceCode = filterItem.key
break
case FILTER_TYPE.city:
tempFilterParam.cityCode = filterItem.key
break
default:
break
}
}
if (JSON.stringify(this.filterParam) === JSON.stringify(tempFilterParam)) {
return
}
this.filterParam = tempFilterParam
}
}
export default FilterStore
\ No newline at end of file
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