feat:样式修改

src/constants/index.ts

@@ -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

@@ -16,7 +16,7 @@ const AvatarDropdown = () => {
   }
 
   const currentUser = {
-    name: getAuth().name || '未知用户',
+    name: getAuth()?.name || '未知用户',
     avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
   }
 

src/pages/lxMall/commodity/index.tsx

@@ -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

 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

@@ -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 = () => {
+    if (search) {
       onResetFilter()
+      handleClearSearch()
+    } else {
+      onResetFilter()
+    }
   }
 
   const handlePageChange = (page) => {

src/pages/lxMall/commodityDetail/components/BrowseRecords/index.less

 .browse_records {
   width: 140px;
+  height: 500px;
   border: 1px solid rgba(245, 245, 245, 1);
 
   .browse_records_title {
@@ -72,8 +73,8 @@
         left: 16px;
       }
     }
-  }
 
+    :global {
       .ant-carousel .slick-slide {
         text-align: center;
         height: 460px;
@@ -97,4 +98,8 @@
       .ant-carousel .slick-dots-bottom {
         bottom: 6px;
       }
+    }
+  }
+
+
 }
\ No newline at end of file

src/pages/lxMall/commodityDetail/components/BrowseRecords/index.tsx

 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

 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

 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

@@ -118,6 +118,7 @@
     margin-top: 20px;
     text-align: right;
 
+    :global {
       .ant-pagination-item {
 
         &:hover,
@@ -145,4 +146,5 @@
         }
       }
     }
+  }
 }
\ No newline at end of file

src/pages/lxMall/commodityDetail/components/ProductDescription/components/Comment/index.tsx

@@ -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

 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

 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

 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

 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

@@ -21,6 +21,7 @@
       bottom: 0;
     }
 
+    :global {
       .ant-anchor {
         display: flex;
         align-items: center;
@@ -30,7 +31,6 @@
           display: none;
         }
 
-
         .ant-anchor-link {
           padding: 0;
           height: 40px;
@@ -66,4 +66,6 @@
         }
       }
     }
+
+  }
 }
\ No newline at end of file

src/pages/lxMall/commodityDetail/components/ProductDescription/index.tsx

@@ -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

@@ -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>
-      <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_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={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

@@ -24,7 +24,9 @@
         cursor: pointer;
 
         &>img {
+          display: block;
           height: 40px;
+          margin: 0 auto;
         }
       }
     }

src/pages/lxMall/components/Filter/components/Brand/index.tsx

@@ -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

 .filter_style {
   padding: 15px 20px 8px 20px;
-}
 
-.ant-checkbox-group-item {
+  :global {
+
+    .ant-checkbox-group-item {
       display: block;
       margin-bottom: 12px;
+    }
 
-
-}
-
-.ant-checkbox-checked .ant-checkbox-inner {
+    .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

-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

+  .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

@@ -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

@@ -57,3 +57,10 @@
     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

 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

 .filter_style {
   padding: 15px 20px 8px 20px;
-}
 
-.ant-checkbox-group-item {
+
+  :global {
+
+    .ant-checkbox-group-item {
       display: block;
       margin-bottom: 12px;
 
 
-}
+    }
 
-.ant-checkbox-wrapper {
+    .ant-checkbox-wrapper {
       font-size: 12px;
-}
+    }
 
-.ant-checkbox-checked::after {
+    .ant-checkbox-checked::after {
       border: 1px solid var(--mall_main_color);
-}
+    }
 
-.ant-checkbox-input {
+    .ant-checkbox-input {
 
       &:active,
       &:hover,
@@ -26,9 +28,9 @@
           border-color: var(--mall_main_color);
         }
       }
-}
+    }
 
-.ant-checkbox-group-item {
+    .ant-checkbox-group-item {
 
       &:hover,
       &:active {
@@ -36,9 +38,11 @@
           border-color: var(--mall_main_color);
         }
       }
-}
+    }
 
-.ant-checkbox-checked .ant-checkbox-inner {
+    .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

 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

 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: 'area',
+        type: FILTER_TYPE.province,
+        title: getProvinceText(selectCity[0]),
+        key: selectCity[0]
+      })
+      onFilter({
+        type: FILTER_TYPE.city,
         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

@@ -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

@@ -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