feat:添加新增收货地址,发票信息和列表左侧筛选页面

config/routes/index.ts

@@ -40,14 +40,15 @@ const memberCenterRoute = {
     {
       path: '/memberCenter/noAuth',
       auth: false,
+      hideInMenu: true,
       component: '@/pages/403',
     },
     // 能力中心的404页
-    {
-      path: '/*',
-      auth: false,
-      component: '@/pages/404',
-    },
+    // {
+    //   path: '/*',
+    //   auth: false,
+    //   component: '@/pages/404',
+    // },
   ],
 }
 

src/app.tsx

@@ -64,6 +64,7 @@ export function patchRoutes({ routes }: IRoutes) {
  */
 export function render(oldRender: Function) {
   const authInfo = getAuth()
+
   if (authInfo) {
     PublicApi.getMemberLoginReget().then(res => {
       const { data } = res

src/pages/lxMall/commodity/index.tsx

 import React, { useState } from 'react'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
-import Filter from '../components/Filter'
+import Filter, { FilterType } from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
@@ -34,6 +34,8 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [filterList, setFilterList] = useState([])
 
+  const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
+
   const handleFilter = (filterValue: filterValueType) => {
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
@@ -67,11 +69,11 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
     <div className="commodity">
       <div className="mall_container">
         <div className="commodity_container">
-          <Filter onFilter={handleFilter} />
+          <Filter onFilter={handleFilter} filterConfig={filterConfig} />
           <div className="commodity_main">
-            {/* <div className="banner">
+            <div className="banner">
               <img src={bannerImg} />
-            </div> */}
+            </div>
             <div className="tool_bar">
               <div className="tool_bar_left">
                 <div className="tool_bar_filter_item">

src/pages/lxMall/components/Filter/components/ActiveStores/index.less

+.active_stores {
+  width: 240px;
+  background: #ffffff;
+  margin-top: 20px;
+  border: 1px solid rgba(238, 238, 238, 1);
+
+  &_title {
+    font-weight: 500;
+    padding: 15px;
+  }
+
+  .active_stores_list {
+    padding: 0 15px;
+
+    &_item {
+      display: flex;
+      margin-bottom: 20px;
+      align-items: center;
+
+      .active_stores_rank {
+        width: 22px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+        color: #666666;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      .active_stores_logo {
+        width: 32px;
+        height: 32px;
+        overflow: hidden;
+        margin-right: 10px;
+
+        &>img {
+          width: 100%;
+          height: 100%;
+
+        }
+      }
+
+      .active_stores_name {
+        color: #333333;
+        font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &>a {
+          color: #333333;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

+/*
+ * 活跃店铺
+ * @Author: ghua 
+ * @Date: 2020-08-20 16:23:39 
+ * @Last Modified by: ghua
+ * @Last Modified time: 2020-08-20 16:38:49
+ */
+
+import React from 'react'
+import styles from './index.less'
+
+interface ActiveStoresPropsType {
+
+}
+
+const ActiveStores: React.FC<ActiveStoresPropsType> = (props) => {
+
+  return (
+    <div className={styles.active_stores}>
+      <div className={styles.active_stores_title}>
+        <label>活跃店铺</label>
+      </div>
+      <div className={styles.active_stores_list}>
+
+        <div className={styles.active_stores_list_item}>
+          <div className={styles.active_stores_rank}>01</div>
+          <div className={styles.active_stores_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.active_stores_name}> <a href="/">无锡市群明钢业有限公司</a></div>
+        </div>
+
+        <div className={styles.active_stores_list_item}>
+          <div className={styles.active_stores_rank}>02</div>
+          <div className={styles.active_stores_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.active_stores_list_item}>
+          <div className={styles.active_stores_rank}>03</div>
+          <div className={styles.active_stores_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.active_stores_list_item}>
+          <div className={styles.active_stores_rank}>04</div>
+          <div className={styles.active_stores_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.active_stores_list_item}>
+          <div className={styles.active_stores_rank}>05</div>
+          <div className={styles.active_stores_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ActiveStores

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

@@ -6,7 +6,7 @@ import styles from './index.less'
 
 interface CategoryPropsType {
   onFilter?: Function;
-  CategoryStore: any;
+  CategoryStore?: any;
 }
 
 const Category: React.FC<CategoryPropsType> = (props) => {

src/pages/lxMall/components/Filter/components/NewJoin/index.less

+.new_join {
+  width: 240px;
+  margin-top: 20px;
+  background: #ffffff;
+  border: 1px solid rgba(238, 238, 238, 1);
+
+  &_title {
+    font-weight: 500;
+    padding: 15px;
+  }
+
+  .new_join_list {
+    padding: 0 15px;
+
+    &_item {
+      display: flex;
+      margin-bottom: 20px;
+      align-items: center;
+
+      .new_join_rank {
+        width: 22px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+        color: #666666;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      .new_join_logo {
+        width: 32px;
+        height: 32px;
+        overflow: hidden;
+        margin-right: 10px;
+
+        &>img {
+          width: 100%;
+          height: 100%;
+
+        }
+      }
+
+      .new_join_name {
+        color: #333333;
+        font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &>a {
+          color: #333333;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

+/*
+ * 最新加入
+ * @Author: ghua 
+ * @Date: 2020-08-20 16:23:39 
+ * @Last Modified by: ghua
+ * @Last Modified time: 2020-08-20 16:49:11
+ */
+
+import React from 'react'
+import styles from './index.less'
+
+interface NewJoinPropsType {
+
+}
+
+const NewJoin: React.FC<NewJoinPropsType> = (props) => {
+
+  return (
+    <div className={styles.new_join}>
+      <div className={styles.new_join_title}>
+        <label>最新加入</label>
+      </div>
+      <div className={styles.new_join_list}>
+
+        <div className={styles.new_join_list_item}>
+          <div className={styles.new_join_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.new_join_name}> <a href="/">无锡市群明钢业有限公司</a></div>
+        </div>
+
+        <div className={styles.new_join_list_item}>
+          <div className={styles.new_join_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.new_join_list_item}>
+          <div className={styles.new_join_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.new_join_list_item}>
+          <div className={styles.new_join_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
+        </div>
+        <div className={styles.new_join_list_item}>
+          <div className={styles.new_join_logo}>
+            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
+          </div>
+          <div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NewJoin

src/pages/lxMall/components/Filter/components/Points/index.less

+.filter_price {
+  padding: 15px 15px 20px 15px;
+
+  .price_box {
+    display: flex;
+    font-size: 14px;
+    color: #333333;
+    align-items: center;
+    margin-top: 20px;
+
+    .price_box_brief {
+      color: #999999;
+      font-size: 12px;
+    }
+
+    .price_range {
+      flex: 1;
+
+      &>.split {
+        margin: 0 4px;
+      }
+    }
+
+    .confirm_btn {
+      background-color: #eeeeee;
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .8;
+      }
+    }
+  }
+
+  .ant-slider-track {
+    background-color: var(--mall_main_color);
+  }
+
+  .ant-slider {
+    &:hover {
+      .ant-slider-track {
+        background-color: var(--mall_main_color);
+      }
+    }
+
+    // background-color: var(--mall_main_color);
+  }
+
+  .ant-slider-handle {
+    width: 4px;
+    height: 16px;
+    border: none;
+    background-color: var(--mall_main_color);
+    border-radius: 0;
+  }
+}
\ No newline at end of file

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

+import React, { useState } from 'react'
+import { Slider } from 'antd'
+import FilterBox from '../FilterBox'
+import './index.less'
+
+interface PointsPropsType {
+
+}
+
+const Points: React.FC<PointsPropsType> = (props) => {
+  const [priceRange, setPriceRange] = useState<any>([0, 1000])
+
+  const handlePriceChange = (value) => {
+    setPriceRange(value)
+  }
+
+  return (
+    <FilterBox
+      title="所需积分范围"
+    >
+      <div className="filter_price">
+        <Slider range step={1} min={0} max={1000} 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>
+          </div>
+          <div className="confirm_btn">确定</div>
+        </div>
+      </div>
+    </FilterBox>
+  )
+}
+
+export default Points

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

 import React from 'react'
+import isEmpty from 'lodash/isEmpty'
 import CommonlyUsed from './components/CommonlyUsed'
 import Category from './components/Category'
 import Style from './components/Style'
@@ -6,28 +7,116 @@ import Brand from './components/Brand'
 import Price from './components/Price'
 import UseArea from './components/UseArea'
 import CommodityType from './components/CommodityType'
+import ActiveStores from './components/ActiveStores'
+import NewJoin from './components/NewJoin'
+import Points from './components/Points'
 import './index.less'
 
 interface FilterPropsType {
   onFilter?: Function;
+  filterConfig?: string[]
+}
+
+export enum FilterType {
+  /**
+   * 常用筛选
+   */
+  commonlyUsed = 'commonlyUsed',
+  /**
+   * 分类
+   */
+  category = 'category',
+  /**
+   * 风格
+   */
+  style = 'style',
+  /**
+   * 品牌
+   */
+  brand = 'brand',
+  /**
+   * 价格
+   */
+  price = 'price',
+  /**
+   * 发货地
+   */
+  useArea = 'useArea',
+  /**
+   * 商品类型
+   */
+  commodityType = 'commodityType',
+  /**
+   * 活跃店铺
+   */
+  activeStores = 'activeStores',
+  /**
+   * 最新加入
+   */
+  newJoin = 'newJoin',
+  /**
+   * 所需积分
+   */
+  points = 'points'
 }
 
 const Filter: React.FC<FilterPropsType> = (props) => {
-  const { onFilter } = props
+  const { onFilter, filterConfig = [] } = props
 
   const handleFilter = (filterValue: any) => {
     onFilter(filterValue)
   }
 
+  const renderFilter = () => {
+    if (!isEmpty(filterConfig)) {
+      let result = []
+      for (let type of filterConfig) {
+        switch (type) {
+          case FilterType.commonlyUsed:
+            result.push(<CommonlyUsed />)
+            break
+          case FilterType.category:
+            result.push(<Category onFilter={handleFilter} />)
+            break
+          case FilterType.style:
+            result.push(<Style onFilter={handleFilter} />)
+            break
+          case FilterType.brand:
+            result.push(<Brand onFilter={handleFilter} />)
+            break
+          case FilterType.price:
+            result.push(<Price />)
+            break
+          case FilterType.useArea:
+            result.push(<UseArea onFilter={handleFilter} />)
+            break
+          case FilterType.commodityType:
+            result.push(<CommodityType />)
+            break
+          case FilterType.activeStores:
+            result.push(<ActiveStores />)
+            break
+          case FilterType.newJoin:
+            result.push(<NewJoin />)
+            break
+          case FilterType.points:
+            result.push(<Points />)
+            break
+          default:
+            break
+        }
+      }
+      return result
+    } else {
+      return null
+    }
+  }
+
   return (
     <div className="filter">
-      <CommonlyUsed />
-      <Category onFilter={handleFilter} />
-      <Style onFilter={handleFilter} />
-      <Brand onFilter={handleFilter} />
-      <Price />
-      <UseArea onFilter={handleFilter} />
-      <CommodityType />
+      {
+        renderFilter()
+      }
     </div>
   )
 }

src/pages/lxMall/information/index.less

@@ -60,6 +60,10 @@
       display: flex;
       margin-top: 30px;
 
+      &.no_mar_top {
+        margin-top: 0;
+      }
+
       .information_left {
         width: 813px;
 

src/pages/lxMall/information/index.tsx

@@ -107,8 +107,6 @@ const MockList = [
   },
 ]
 
-
-
 const Information: React.FC<InformationPropsType> = (props) => {
 
   return (

src/pages/lxMall/information/search.tsx

@@ -112,7 +112,7 @@ const InformationSearch: React.FC<InformationPropsType> = (props) => {
     <div className={styles.information}>
       <div className={styles.information_container}>
         <BreadCrumbs />
-        <div className={styles.information_wrap}>
+        <div className={cx(styles.information_wrap, styles.no_mar_top)}>
           <div className={styles.information_left}>
             <div className={styles.information_title}>
               <span>资讯搜索：</span>

src/pages/lxMall/order/address/index.tsx

 import React, { useState } from 'react'
 import { Radio } from 'antd'
 import { DownOutlined } from '@ant-design/icons'
+import AddAddress from '../components/addAddress'
 import styles from './index.less'
 
 const Address: React.FC = () => {
   const [selectKey, setSelectKey] = useState<number>()
   const [expand, setExpand] = useState<boolean>(false)
+  const [addressFormVisible, setAddressFormVisible] = useState<boolean>(false)
 
   const mock_data = [
     {
@@ -60,7 +62,7 @@ const Address: React.FC = () => {
     <div className={styles.address}>
       <div className={styles.common_title}>
         <span>收货地址</span>
-        <div className={styles.common_title_btn}>新增收货地址</div>
+        <div className={styles.common_title_btn} onClick={() => setAddressFormVisible(true)}>新增收货地址</div>
       </div>
       <Radio.Group className={styles.address_raido_group} value={selectKey} onChange={handleSelect}>
         <div className={styles.address_list}>
@@ -95,6 +97,12 @@ const Address: React.FC = () => {
           <DownOutlined rotate={expand ? 180 : 0} />
         </div>
       </div>
+      <AddAddress
+        title="新增收货地址"
+        visible={addressFormVisible}
+        onCancel={() => setAddressFormVisible(false)}
+      />
+
     </div>
   )
 }

src/pages/lxMall/order/components/addAddress/index.less

+@import '../common.less';
\ No newline at end of file

src/pages/lxMall/order/components/addInvoice/index.less

+@import '../common.less';
\ No newline at end of file

src/pages/lxMall/order/components/addInvoice/index.tsx

+import React, { useState, useEffect } from 'react'
+import { Modal } from 'antd'
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+  createFormActions,
+  FormEffectHooks,
+  FormPath,
+} from '@formily/antd'
+import { Input, Switch, Select, FormMegaLayout, Radio } from '@formily/antd-components'
+import styles from './index.less'
+
+//列表带来的参数
+export interface ListProps {
+  title?: React.ReactNode
+}
+export interface ListType {
+  checked: boolean //可选
+}
+
+interface AddAddressPropsType {
+  visible?: boolean;
+  onOk?: any;
+  onCancel?: any;
+  title?: string;
+}
+
+const actions = createFormActions()
+const { onFieldValueChange$ } = FormEffectHooks
+
+const AddInvoice: React.FC<AddAddressPropsType> = (props) => {
+  const { visible = false, title, onOk, onCancel } = props
+  const [state, setState] = useState({ editable: true })
+
+  /**
+ * @description: Form保存
+ * @param {type} 
+ * @return: 
+ */
+  const formSubmit = (values) => {
+    console.log(values)
+  }
+
+  const handleOk = () => {
+    actions.submit()
+  }
+
+  return visible && (
+    <Modal
+      title={title}
+      visible={visible}
+      onOk={handleOk}
+      width={600}
+      centered
+      className={styles.common_add_modal}
+      onCancel={onCancel}
+      maskClosable={false}
+    >
+      <SchemaForm editable={state.editable}
+        actions={actions} // 要传递
+        initialValues={{
+          Radio2: '1',
+          fapiao: '1'
+        }}
+        components={{
+          Input, Select, TextArea: Input.TextArea, Switch,
+          Radio,
+          RadioGroup: Radio.Group
+        }}
+        onSubmit={(values) => formSubmit(values)}
+      >
+        <FormMegaLayout labelCol={4} labelAlign="left">
+          <Field
+            required
+            title="开具类型"
+            name="Radio2"
+            x-component="RadioGroup"
+            enum={[
+              { label: '企业(默认)', value: '1' },
+              { label: '个人', value: '2' },
+            ]}
+          />
+          <Field
+            required
+            title="发票种类"
+            name="fapiao"
+            x-component="RadioGroup"
+            enum={[
+              { label: '增值税普通发票(默认)', value: '1' },
+              { label: '增值税专用发票', value: '2' },
+            ]}
+          />
+          <Field
+            x-rules={{
+              required: true,
+              message: '请输入发票抬头',
+            }}
+            title="发票抬头"
+            name="receiverName"
+            maxLength={40}
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入发票抬头'
+            }}
+          />
+          <Field
+            x-rules={{
+              required: true,
+              message: '请输入纳税号',
+            }}
+            title="纳税号"
+            name="receiverName2"
+            maxLength={40}
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入纳税号'
+            }}
+          />
+          <Field
+            title="开户行"
+            name="receiverName3"
+            maxLength={40}
+            x-component="Input"
+          />
+          <Field
+            title="账号"
+            name="receiverName4"
+            maxLength={40}
+            x-component="Input"
+          />
+          <Field
+            title="地址"
+            name="receiverName5"
+            maxLength={40}
+            x-component="Input"
+          />
+          <Field
+            title="电话号码"
+            name="receiverName6"
+            maxLength={40}
+            x-component="Input"
+          />
+          <Field
+            title="是否默认"
+            name="isDefault"
+            x-component="Switch"
+            x-component-props={{
+              placeholder: ''
+            }}
+          />
+        </FormMegaLayout>
+      </SchemaForm>
+    </Modal>
+  )
+}
+
+export default AddInvoice

src/pages/lxMall/order/components/common.less

+.common_add_modal {
+  position: relative;
+
+  :global {
+    .ant-form-item-label>label.ant-form-item-required::before {
+      order: 10;
+      margin-left: -6px;
+    }
+
+    .ant-radio-checked .ant-radio-inner {
+      border-color: var(--mall_main_color);
+    }
+
+    .ant-radio-inner::after {
+      background-color: var(--mall_main_color);
+    }
+
+    .ant-radio-checked::after {
+      border-color: var(--mall_main_color);
+    }
+
+    .ant-radio-group {
+      display: flex;
+    }
+
+    .ant-input {
+
+      &:hover,
+      &:focus {
+        box-shadow: 0 0 0 2px var(--mall_main_color_opacity_2);
+        border: 1px solid var(--mall_main_color);
+      }
+    }
+
+    .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+      border-color: var(--mall_main_color);
+      border-right-width: 1px !important;
+    }
+
+    .ant-select-focused.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      border-color: var(--mall_main_color);
+      border-right-width: 1px !important;
+      outline: 0;
+      box-shadow: 0 0 0 2px var(--mall_main_color_opacity_2);
+    }
+
+    .ant-modal-footer {
+
+      .ant-btn {
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: var(--mall_main_color);
+          border-color: var(--mall_main_color);
+        }
+      }
+
+      .ant-btn-primary {
+        background-color: var(--mall_main_color);
+        border-color: var(--mall_main_color);
+
+        &:hover {
+          color: #ffffff;
+          opacity: .9;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/lxMall/order/invoice/index.tsx

 import React, { useState } from 'react'
 import { Checkbox, Radio } from 'antd'
+import AddInvoice from '../components/addInvoice'
 import cx from 'classnames'
 import styles from './index.less'
 
 const Invoice: React.FC = () => {
   const [selectKey, setSelectKey] = useState<number>()
+  const [invoiceFormVisible, setInvoiceFormVisible] = useState<boolean>(false)
 
   const MockData = [
     {
@@ -38,7 +40,7 @@ const Invoice: React.FC = () => {
     <div className={styles.invoice}>
       <div className={styles.common_title}>
         <span>发票信息</span>
-        <div className={styles.common_title_btn}>新增发票信息</div>
+        <div className={styles.common_title_btn} onClick={() => setInvoiceFormVisible(true)}>新增发票信息</div>
       </div>
       <div className={styles.checkbox}>
         <Checkbox>需要发票</Checkbox>
@@ -75,6 +77,11 @@ const Invoice: React.FC = () => {
 
         </div>
       </Radio.Group>
+      <AddInvoice
+        title="新增发票信息"
+        visible={invoiceFormVisible}
+        onCancel={() => setInvoiceFormVisible(false)}
+      />
     </div>
   )
 }

src/pages/lxMall/pointsMall/index.tsx

 import React, { useState } from 'react'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
-import Filter from '../components/Filter'
+import Filter, { FilterType } from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
@@ -34,6 +34,8 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [filterList, setFilterList] = useState([])
 
+  const filterConfig = [FilterType.category, FilterType.points]
+
   const handleFilter = (filterValue: filterValueType) => {
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
@@ -67,7 +69,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
     <div className="commodity">
       <div className="mall_container">
         <div className="commodity_container">
-          <Filter onFilter={handleFilter} />
+          <Filter onFilter={handleFilter} filterConfig={filterConfig} />
           <div className="commodity_main">
             <div className="banner">
               <img src={bannerImg} />

src/pages/lxMall/purchaseOnline/index.tsx

 import React, { useState } from 'react'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
-import Filter from '../components/Filter'
+import Filter, { FilterType } from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
@@ -34,6 +34,8 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [filterList, setFilterList] = useState([])
 
+  const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.useArea]
+
   const handleFilter = (filterValue: filterValueType) => {
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
@@ -67,7 +69,7 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
     <div className="purchaseOnline">
       <div className="mall_container">
         <div className="commodity_container">
-          <Filter onFilter={handleFilter} />
+          <Filter onFilter={handleFilter} filterConfig={filterConfig} />
           <div className="commodity_main">
             <div className="banner">
               <img src={bannerImg} />

src/pages/lxMall/shopList/index.tsx

 import React, { useState } from 'react'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
-import Filter from '../components/Filter'
+import Filter, { FilterType } from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
@@ -34,6 +34,8 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [filterList, setFilterList] = useState([])
 
+  const filterConfig = [FilterType.category, FilterType.useArea, FilterType.activeStores, FilterType.newJoin]
+
   const handleFilter = (filterValue: filterValueType) => {
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
@@ -67,7 +69,7 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
     <div className="commodity">
       <div className="mall_container">
         <div className="commodity_container">
-          <Filter onFilter={handleFilter} />
+          <Filter onFilter={handleFilter} filterConfig={filterConfig} />
           <div className="commodity_main">
             <div className="tool_bar">
               <div className="tool_bar_left">

src/theme/science/styles/colors.less

@@ -2,6 +2,7 @@
 // 企业商城科技模板
 .theme-mall-science {
   --mall_main_color: #D32F2F;
+  --mall_main_color_opacity_2: rgba(211, 47, 47, .2);
   --mall_sub_color: rgba(211, 47, 47, 0.1);
 
   --category_content_bg: #FFFFFF;