feat:常用筛选接口对接

src/pages/lxMall/commodity/index.less

@@ -197,4 +197,40 @@
       }
     }
   }
+}
+
+.modal_confirm {
+  position: relative;
+
+  :global {
+    .ant-modal-body {
+      .ant-input {
+
+        &:hover,
+        &:active,
+        &:focus {
+          border: 1px solid var(--mall_main_color);
+          box-shadow: 0 0 0 2px var(--mall_main_color_opacity_2);
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      .ant-btn {
+        &:hover {
+          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;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/lxMall/commodity/index.tsx

-import React, { useState, useEffect } from 'react'
-import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import Filter from '../components/Filter'
 import { FILTER_TYPE } from '@/constants'
 import cx from 'classnames'
-import { Pagination } from 'antd'
+import { Pagination, Modal, Input, message } from 'antd'
 import CommodityList from './list'
 import SearchNoResult from '../components/SearchNoResult'
 import isEmpty from 'lodash/isEmpty'
@@ -45,7 +45,11 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
   const UserStore = useLocalStore(() => store.UserStore)
   const FilterStore = useLocalStore(() => store.FilterStore)
   const { userInfo } = UserStore
-  const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
+  const inputRef = useRef()
+  const [modalVisible, setModalVisible] = useState<boolean>(false)
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+  const [commonlyUsedName, setCommonlyUsedName] = useState<string>("")
+  const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange, saveCommonlyUsedFilter } = FilterStore
   const { layoutType, shopId } = props
   const { query: { categoryId, categoryName } } = props.location
   const [loading, setLoading] = useState<boolean>(true)
@@ -145,7 +149,6 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
    * 排序
    */
   const handleSort = (type: FILTER_TYPE) => {
-    console.log(JSON.stringify(filterList), "filterList")
     switch (type) {
       case FILTER_TYPE.priceSort:
         /**
@@ -217,6 +220,33 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
     }
   }
 
+  /**
+   * 保存常用筛选
+   */
+  const handleSaveFilter = () => {
+    setModalVisible(true)
+  }
+  const handleSaveConfirm = () => {
+    return new Promise((resolve, reject) => {
+
+      if (!commonlyUsedName) {
+        message.error('请输入常用筛选的名称')
+        reject()
+        return
+      }
+      setConfirmLoading(true)
+      saveCommonlyUsedFilter(commonlyUsedName).then(() => {
+        resolve()
+        setCommonlyUsedName("")
+        setConfirmLoading(false)
+        setModalVisible(false)
+      }).catch(() => {
+        reject()
+        setConfirmLoading(false)
+      })
+    })
+  }
+
   return (
     <div className={styles.commodity}>
       <div className={styles.mall_container}>
@@ -269,7 +299,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
                     {
                       userInfo && (
                         <>
-                          <div className={styles.filter_bar_left_text}>保存为常用筛选</div>
+                          <div className={styles.filter_bar_left_text} onClick={() => handleSaveFilter()}>保存为常用筛选</div>
                           <div className={styles.filter_bar_left_split}></div>
                         </>
                       )
@@ -280,8 +310,8 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
               }
               <div className={styles.filter_bar_list}>
                 {
-                  filterList.map(item => (
-                    <div className={styles.filter_bar_list_item} key={item.key}>
+                  filterList.map((item, index) => (
+                    <div className={styles.filter_bar_list_item} key={`filter_bar_list_item_${index}`}>
                       <span className={styles.filter_bar_list_item_text}>{item.title}</span>
                       <CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
                     </div>
@@ -304,6 +334,17 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
           </div>
         </div>
       </div>
+      <Modal
+        title="保存常用筛选项"
+        centered
+        className={styles.modal_confirm}
+        confirmLoading={confirmLoading}
+        visible={modalVisible}
+        onOk={() => handleSaveConfirm()}
+        onCancel={() => setModalVisible(false)}
+      >
+        <Input placeholder="请输入常用筛选的名称" value={commonlyUsedName} onChange={(e) => setCommonlyUsedName(e.target.value)} maxLength={6} />
+      </Modal>
     </div>
   )
 }

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

@@ -122,6 +122,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
               }
               return {
                 title: <span className={styles.sub_category_title}>{thirdCategoryItem.title}</span>,
+                name: thirdCategoryItem.title,
                 isLastNode: true,
                 key: thirdCategoryItem.id,
                 children: []
@@ -136,7 +137,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
   }
 
   const handleSelect = (selectedKeys, info) => {
-    const { title, isLastNode } = info.node
+    const { title, isLastNode, name } = info.node
     console.log(info)
     setSelectedKeys(selectedKeys)
     if (isLastNode) {
@@ -147,7 +148,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
     onFilter({
       type: 'category',
       key: selectedKeys,
-      title
+      title: typeof title === 'string' ? title : name
     })
   }
 

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

@@ -6,6 +6,7 @@
     .ant-checkbox-group-item {
       display: block;
       margin-bottom: 12px;
+      font-size: 12px;
     }
 
     .ant-checkbox-checked .ant-checkbox-inner {

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

   .commonly_used_list {
     display: flex;
-    padding: 5px 0 10px 0;
+    padding: 10px 0 10px 0;
+    margin: 0 -4px;
     flex-wrap: wrap;
     margin: 0;
 
     &_item {
       list-style: none;
-      padding: 10px 15px;
+      padding: 2px 4px;
       font-size: 12px;
       cursor: pointer;
+
+      font-size: 12px;
+      color: #333333;
+      border-radius: 4px;
+      margin: 0 3px 10px 3px;
+
+      &:hover {
+        background-color: #F5F5F5;
+
+        .commonly_used_list_item_icon {
+          visibility: visible;
+        }
+      }
+
+      &_icon {
+        visibility: hidden;
+        font-size: 12px;
+        margin-left: 4px;
+      }
     }
   }
\ No newline at end of file

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

 
 import React from 'react'
-import { CaretDownOutlined } from '@ant-design/icons'
+import { CloseOutlined } from '@ant-design/icons'
 import FilterBox from '../FilterBox'
+import { useLocalStore, observer } from 'mobx-react'
+import { store } from '@/store'
+import isEmpty from 'lodash/isEmpty'
 import styles from './index.less'
+import { message } from 'god'
 
 interface CommonlyUsedPropsType {
 
 }
 
 const CommonlyUsed: React.FC<CommonlyUsedPropsType> = (props) => {
+  const FilterStore = useLocalStore(() => store.FilterStore)
+  const { commonlyUseFilter, deleteCommonlyUsedFilterItem, useCommonlyFilter } = FilterStore
+  console.log(JSON.stringify(commonlyUseFilter), "commonlyUseFilter")
+
+  const handleDeleteItem = (id: number) => {
+    deleteCommonlyUsedFilterItem(id)
+  }
+
+  const handleFilter = (id: number) => {
+    useCommonlyFilter(id)
+  }
 
   return (
     <FilterBox
       title="我的常用筛选"
     >
       <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>
+        {
+          !isEmpty(commonlyUseFilter) && commonlyUseFilter.map((item, index) => (
+            <li key={`commonly_used_list_item-${index}`} className={styles.commonly_used_list_item} onClick={() => handleFilter(item.id)}>
+              {item.name}
+              <CloseOutlined className={styles.commonly_used_list_item_icon} onClick={() => handleDeleteItem(item.id)} />
+            </li>
+          ))
+        }
       </ul>
     </FilterBox>
   )
 }
 
-export default CommonlyUsed
+export default observer(CommonlyUsed)

src/store/filter/index.ts

 import { action, computed, observable, runInAction } from 'mobx'
 import isEmpty from 'lodash/isEmpty'
+import { PublicApi } from '@/services/api'
 import { FILTER_TYPE } from '@/constants'
 
 interface filterValueType {
@@ -24,6 +25,21 @@ interface filterQuery {
 
 }
 
+const styleOptions = [
+  { label: '只看现价商品', value: 1 },
+  { label: '只看询价商品', value: 2 },
+];
+
+const getItemText = (key: number) => {
+  let result = ""
+  for (let item of styleOptions) {
+    if (item.value === key) {
+      result = item.label
+    }
+  }
+  return result
+}
+
 class FilterStore {
   /**
    * 筛选条件列表
@@ -31,7 +47,8 @@ class FilterStore {
   @observable filterList = []
   @observable filterUpdate: boolean = false
   @observable filterParam: filterQuery | {} = {}
-
+  @observable commonlyUseFilter: any = this.getCommonlyUsedFilterList() || [] // 常用筛选项
+  @observable commonlyUseFilterId = null
   /**
    * 筛选
    * @param filterValue 
@@ -146,6 +163,166 @@ class FilterStore {
     this.filterParam = tempFilterParam
   }
 
+  /**
+   * 新增常用筛选
+   */
+  @action.bound
+  public async saveCommonlyUsedFilter(name: string) {
+    return new Promise((resolve, reject) => {
+      let tempFilterParam: any = {}
+      tempFilterParam.name = name
+      for (let filterItem of this.filterList) {
+        switch (filterItem.type) {
+          case FILTER_TYPE.category:
+            tempFilterParam.customerCategoryId = filterItem.key[0]
+            tempFilterParam.customerCategoryName = filterItem.title
+            break
+          case FILTER_TYPE.brand:
+            tempFilterParam.brandId = filterItem.key
+            tempFilterParam.brandName = filterItem.title
+            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
+            tempFilterParam.provinceName = filterItem.title
+            break
+          case FILTER_TYPE.city:
+            tempFilterParam.cityCode = filterItem.key
+            tempFilterParam.cityName = filterItem.title
+            break
+          default:
+            break
+        }
+      }
+      PublicApi.postProductShopOftenSelectSaveOrUpdateOftenSelect(tempFilterParam).then(res => {
+        if (res.code === 1000) {
+          this.getCommonlyUsedFilterList()
+          resolve()
+        } else {
+          reject()
+        }
+      })
+    })
+  }
+
+  /**
+   * 查询常用筛选列表
+   */
+  @action.bound
+  public async getCommonlyUsedFilterList() {
+    let param: any = {
+      current: 1,
+      pageSize: 50,
+    }
+    const res = await PublicApi.getProductShopOftenSelectGetOftenSelectList(param)
+    runInAction(() => {
+      if (res.code === 1000) {
+        this.commonlyUseFilter = res.data.data || []
+      }
+    })
+  }
+
+  /**
+   * 删除常用筛选项
+   */
+  @action.bound
+  public async deleteCommonlyUsedFilterItem(id: number) {
+    return new Promise((resolve, reject) => {
+      //@ts-ignore
+      PublicApi.postProductShopOftenSelectDeleteOftenSelect({ id }).then(res => {
+        if (res.code === 1000) {
+          this.getCommonlyUsedFilterList()
+          resolve()
+        } else {
+          reject()
+        }
+      })
+    })
+  }
+
+  /**
+ * 删除常用筛选项
+ */
+  @action.bound
+  public async useCommonlyFilter(id: number) {
+    if (this.commonlyUseFilterId === id) {
+      return
+    } else {
+      this.commonlyUseFilterId = id
+    }
+    //@ts-ignore
+    const res = await PublicApi.getProductShopOftenSelectGetOftenSelect({ id })
+    runInAction(() => {
+      if (res.code === 1000) {
+        const data = res.data
+        let tempFilter = []
+        if (data.customerCategoryId && data.customerCategoryName) {
+          tempFilter.push({
+            type: FILTER_TYPE.category,
+            title: data.customerCategoryName,
+            key: [data.customerCategoryId]
+          })
+        }
+        if (data.brandId && data.brandName) {
+          tempFilter.push({
+            type: FILTER_TYPE.brand,
+            title: data.brandName,
+            key: data.brandId
+          })
+        }
+        if (data.min || data.min === 0) {
+          tempFilter.push({
+            type: FILTER_TYPE.minPrice,
+            title: `最低 ¥ ${data.min} `,
+            key: data.min
+          })
+        }
+        if (data.max) {
+          tempFilter.push({
+            type: FILTER_TYPE.maxPrice,
+            title: `最高 ¥ ${data.max} `,
+            key: data.max
+          })
+        }
+
+        if (data.provinceCode && data.provinceName) {
+          tempFilter.push({
+            type: FILTER_TYPE.province,
+            title: data.provinceName,
+            key: data.provinceCode
+          })
+        }
+        if (data.cityCode && data.cityName) {
+          tempFilter.push({
+            type: FILTER_TYPE.city,
+            title: data.cityName,
+            key: data.cityCode
+          })
+        }
+        if (data.priceType) {
+          tempFilter.push({
+            type: FILTER_TYPE.commodityType,
+            title: getItemText(data.priceType),
+            key: data.priceType
+          })
+        }
+        this.filterList = tempFilter
+      }
+    })
+  }
+
+
 }
 
 export default FilterStore
\ No newline at end of file

src/utils/request.ts

@@ -105,11 +105,11 @@ class ApiRequest {
   createRequest<T>(url: string, options: IApiRequest = { ctlType: 'none' }): Promise<IRequestSuccess<T>> {
     return new Promise((resolve, reject) => {
       baseRequest<IRequestSuccess<T>>(url, options).then(res => {
+        message.destroy()
         // 登录验证
         if (res.code === 1101) {
           removeAuth()
           history.replace('/user/login')
-          message.destroy()
           message.error(res.message)
           return false
         }
@@ -120,7 +120,6 @@ class ApiRequest {
         } else {
           // 使用resolve将数据返回, 请求时需手动处理data为null的情况
           resolve(res)
-          message.destroy()
           message.error(res.message)
         }