feat:属性筛选和装修的参数添加

config/proxy.ts

@@ -2,6 +2,6 @@ export default {
   '/api': {
     'target': 'http://10.0.0.25:8100/',
     'changeOrigin': true,
-    'pathRewrite': { '^/api' : '' },
+    'pathRewrite': { '^/api': '' },
   }
 }
\ No newline at end of file

src/constants/index.ts

@@ -138,7 +138,11 @@ export enum FILTER_TYPE {
   /**
    * 信用从高到低
    */
-  creditSort = 'creditSort'
+  creditSort = 'creditSort',
+  /**
+   * 属性筛选
+   */
+  attribute = 'attribute'
 }
 
 // 商城类型

src/pages/editor/settingsPanel/propsSettings/components/AdvertSetting/index.tsx

@@ -8,6 +8,7 @@ import { isEmpty } from '@formily/antd/esm/shared'
 import { PublicApi } from '@/services/api'
 import { clearSelectedStatus, changeProps } from 'lingxi-editor-core';
 import { ArrowUpOutlined, DeleteOutlined, PlusOutlined, ArrowDownOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
+import { addTempalteIdToList } from '../../../../utils'
 import styles from './index.less'
 
 interface advertItemType {
@@ -241,10 +242,9 @@ const AdvertSetting: React.FC<AdvertSettingPropsType> = forwardRef((props, ref)
       let param: any = {
         templateId: templateid,
         type: getAdvertType(type),
-        adverts: advertList
+        adverts: addTempalteIdToList(advertList, templateid)
       }
       let postFn;
-      console.log(param)
       if (templateType === 'channel') {
         postFn = PublicApi.postTemplateChannelSaveAdvert
       } else {

src/pages/editor/utils/index.ts

@@ -158,3 +158,14 @@ export const getAdvertType = (type) => {
       return 2
   }
 }
+
+/**
+ * 往数组添加模板id字段
+ * @param list 
+ */
+export const addTempalteIdToList = (list, templateId) => {
+  return list.map(item => {
+    item.templateId = templateId
+    return item
+  })
+}
\ No newline at end of file

src/pages/lxMall/commodity/index.tsx

@@ -125,7 +125,6 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
     getFn(param).then(res => {
       setLoading(false)
       if (res.code === 1000) {
-        console.log(res.data.data)
         setCommodityList(res.data.data)
         setTotalCount(res.data.totalCount)
       }

src/pages/lxMall/commodityDetail/index.tsx

@@ -563,7 +563,7 @@ const CommodityDetail = (props) => {
                     <div className={styles.prompt_goods_price_item}>
                       <div className={cx(styles.label, styles.price)}>价格(CNY)</div>
                       {
-                        (commodityDetail?.isMemberPrice && parameter) && <div className={cx(styles.label, styles.mprice)}>会员价格(CNY)</div>
+                        (commodityDetail?.isMemberPrice && (parameter || parameter === 0)) && <div className={cx(styles.label, styles.mprice)}>会员价格(CNY)</div>
                       }
                       <div className={cx(styles.label, styles.count)}>数量({commodityDetail?.unitName})</div>
                     </div>
@@ -573,7 +573,7 @@ const CommodityDetail = (props) => {
                           <div className={cx(styles.prompt_goods_price_list_item, (commodityPriceInfo.length > 1 && Number(buyCount) >= item.min && Number(buyCount) <= item.max) ? styles.active : "")} key={`prompt_goods_price_list_item_${index}`}>
                             <div className={styles.price}>{priceFormat(item.price)}</div>
                             {
-                              (commodityDetail?.isMemberPrice && parameter) && <div className={styles.member_price}>{priceFormat(item.price * parameter)}</div>
+                              (commodityDetail?.isMemberPrice && (parameter || parameter === 0)) && <div className={styles.member_price}>{priceFormat(item.price * parameter)}</div>
                             }
                             <div className={styles.count}>{item.range === '0-0' ? '不限' : item.range}</div>
                           </div>

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

@@ -117,8 +117,8 @@ const Category: React.FC<CategoryPropsType> = (props) => {
                     <div className={styles.category_type_right_wrap}>
                       <div className={styles.category_advert}>
                         {
-                          (item.brandBOList && item.brandBOList.length > 0) && item.brandBOList.map(brandItem => (
-                            <div key={`category_advert_item_${brandItem.category_advert_item}`} className={styles.category_advert_item}>
+                          (item.brandBOList && item.brandBOList.length > 0) && item.brandBOList.map((brandItem, brandIndex) => (
+                            <div key={`category_advert_item_${brandIndex}`} className={styles.category_advert_item}>
                               <Link to={getBrandLink(brandItem)}>  <img src={brandItem.brandLogo} /></Link>
                             </div>
                           ))

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

@@ -23,10 +23,13 @@
         overflow: hidden;
         cursor: pointer;
 
-        &>img {
-          display: block;
+        &>.img {
+          width: 80px;
           height: 40px;
-          margin: 0 auto;
+          display: block;
+          background-repeat: no-repeat;
+          background-size: 100% auto;
+          background-position: center center;
         }
       }
     }

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

@@ -4,6 +4,7 @@ import { PublicApi } from '@/services/api'
 import { GetSearchShopEnterpriseGetBrandResponse } from '@/services'
 import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
 import styles from './index.less'
+import url from '*.svg'
 
 interface BrandPropsType {
   FilterStore?: any;
@@ -57,7 +58,7 @@ const Brand: React.FC<BrandPropsType> = (props) => {
             brandList.map(item => (
               <li className={styles.filter_brand_list_item} title={item.name} key={item.id} onClick={() => handleSelectBrand(item)}>
                 <div className={styles.brand_img}>
-                  <img src={item.logoUrl} />
+                  <div className={styles.img} style={{ backgroundImage: `url(${item.logoUrl})` }}></div>
                 </div>
               </li>
             ))

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

 import React, { useEffect, useState, Fragment } from 'react'
 import { Tree, Checkbox } from 'antd'
 import FilterBox from '../FilterBox'
+import { observer } from 'mobx-react'
 import { LAYOUT_TYPE, FILTER_TYPE } from '@/constants'
 import { PublicApi } from '@/services/api'
 import isEmpty from 'lodash/isEmpty'
@@ -23,11 +24,12 @@ const Category: React.FC<CategoryPropsType> = (props) => {
   const [categoryList, setCategoryList] = useState<any>([])
   const [lastCategoryId, setLastCategoryId] = useState<number>()
   const [attributeList, setAttributeList] = useState<any>([])
-  const [selectAttrbuteList, setSelectAttrbuteList] = useState<any>([])
+  // const [selectAttrbuteList, setSelectAttrbuteList] = useState<any>([])
 
   useEffect(() => {
     if (isEmpty(filterList)) {
       setSelectedKeys([])
+      setLastCategoryId(null)
     } else {
       let initKeys = []
       for (let item of filterList) {
@@ -89,12 +91,16 @@ const Category: React.FC<CategoryPropsType> = (props) => {
           getAttributeFn = PublicApi.getSearchShopStoreGetCustomerAttributeByCategoryId
           break;
       }
+      if (getAttributeFn) {
         getAttributeFn(param).then(res => {
           if (res.code === 1000) {
             setAttributeList(initAttributeList(res.data))
           }
         })
       }
+    } else {
+      setAttributeList([])
+    }
   }, [lastCategoryId])
 
   const initAttributeList = (attrbuteList) => {
@@ -133,10 +139,10 @@ const Category: React.FC<CategoryPropsType> = (props) => {
             title: secondCategoryItem.title,
             key: secondCategoryItem.id,
             children: secondCategoryItem.children.map(thirdCategoryItem => {
-              if (!lastCategoryId && flag) {
-                flag = false
-                setLastCategoryId(thirdCategoryItem.id)
-              }
+              // if (!lastCategoryId && flag) {
+              //   flag = false
+              //   setLastCategoryId(thirdCategoryItem.id)
+              // }
               return {
                 title: <span className={styles.sub_category_title}>{thirdCategoryItem.title}</span>,
                 name: thirdCategoryItem.title,
@@ -162,7 +168,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
       }
     }
     onFilter({
-      type: 'category',
+      type: FILTER_TYPE.category,
       key: selectedKeys,
       title: typeof title === 'string' ? title : name
     })
@@ -172,38 +178,70 @@ const Category: React.FC<CategoryPropsType> = (props) => {
     setExpandedKeys(expandedKeys)
   }
 
-  const styleOptions = [
-    { label: '荔枝纹', value: '1' },
-    { label: '网纹', value: '2' },
-    { label: '自然摔纹', value: '3' },
-  ];
-
-  // "customerAttributeList": [{
-  //   "customerAttributeId": 1,
-  //   "customerAttributeValueList": [{
-  //     "id": 3
-  //   }, {
-  //     "id": 4
-  //   }]
-  // }, {
-  //   "customerAttributeId": 2,
-  //   "customerAttributeValueList": [{
-  //     "id": 5
-  //   }, {
-  //     "id": 6
-  //   }]
-  // }]
+  const getDetailById = (attrId, attrValId, state = 2) => {
+    let detail = {}
+    for (let item of attributeList) {
+      if (item.id === attrId) {
+        if (state === 1) {
+          detail = item
+        } else {
+          for (let childItem of item.attributeValueList) {
+            if (childItem.value === attrValId) {
+              detail = childItem
+            }
+          }
+        }
+
+      }
+    }
+    return detail
+  }
+
+
 
   const handleChange = (attrId, checkedList) => {
+    let tempSelect = []
+    let attrInfo: any = getDetailById(attrId, attrId, 1)
     let tempItem = {
       customerAttributeId: attrId,
+      customerAttributeName: attrInfo.name,
       customerAttributeValueList: checkedList.map(item => {
+        let detail: any = getDetailById(attrId, item)
         return {
-          id: item
+          id: detail.value,
+          name: detail.label
+        }
+      })
     }
+
+    if (tempSelect.some(item => item.customerAttributeId === attrId)) {
+      tempSelect = tempSelect.map(childItem => {
+        if (childItem.customerAttributeId === attrId) {
+          return tempItem
+        } else {
+          return childItem
+        }
+      })
+    } else {
+      tempSelect.push(tempItem)
+    }
+    if (tempSelect.length > 0) {
+      console.log(tempSelect, "tempSelect")
+      onFilter({
+        type: FILTER_TYPE.attribute,
+        key: JSON.stringify(tempSelect),
+        title: `${tempSelect.map(tsItem => {
+          return `${tsItem.customerAttributeName}：${tsItem.customerAttributeValueList.map(cabItem => cabItem.name)}`
+        }).join('；')}`
       })
+      // for (let item of tempSelect) {
+      //   onFilter({
+      //     type: `attribute-${item.customerAttributeId}`,
+      //     key: item.customerAttributeValueList.map(caItem => caItem.id),
+      //     title: `${item.customerAttributeName}: ${item.customerAttributeValueList.map(caItem => caItem.name)}`
+      //   })
+      // }
     }
-    console.log(tempItem, "tempItem")
   }
 
   return (
@@ -222,9 +260,9 @@ const Category: React.FC<CategoryPropsType> = (props) => {
         </div>
       </FilterBox>
       {
-        showAttr && attributeList.length > 0 && attributeList.map((attrItem) => (
+        showAttr && attributeList.length > 0 && attributeList.map((attrItem, attrIndex) => (
           <FilterBox
-            key={attrItem.id}
+            key={`filter_box_${attrItem.id}_${attrIndex}`}
             title={attrItem.name}
           >
             <div className={styles.filter_style}>
@@ -237,4 +275,4 @@ const Category: React.FC<CategoryPropsType> = (props) => {
   )
 }
 
-export default Category
+export default observer(Category)

src/pages/lxMall/layouts/LXMallLayout.tsx

@@ -51,7 +51,6 @@ const LXMallLayout: React.FC<LXMallLayoutPropsType> = (props) => {
   const getWebMallInfo = () => {
     const shopInfo = GlobalConfig.web.shopInfo
     let webMallInfo = shopInfo.filter(item => item.environment === 1 && item.type === 1)[0]
-    console.log(webMallInfo, "webMallInfo")
     setMallInfo(webMallInfo)
   }
 

src/store/filter/index.ts

@@ -155,6 +155,9 @@ class FilterStore {
         case FILTER_TYPE.priceSortLowToHigh:
           tempFilterParam.orderType = 4
           break
+        case FILTER_TYPE.attribute:
+          tempFilterParam.customerAttributeList = filterItem.key
+          break
         default:
           break
       }