静态页面

src/pages/index/buildingList/components/FilterForHouseType/index.jsx

-import { useState } from 'react'
+
+import { useState, useEffect } from 'react'
 import { Image } from '@tarojs/components'
 import './index.scss'
 
 export default function FilterForHouseType (props) {
 
-  const { change = () => {}, Cancel = () => { }, defaultValue = '-' } = props
-  const [CityAreaList] = useState([
-    {name: '不限', id: '-'},
-    {name: '一室', id: 1},
-    {name: '两室', id: 2},
-    {name: '三室', id: 3},
-    {name: '四室', id: 4},
-    {name: '五室以上', id: 5}
+  const { change = () => { }, Cancel = () => { }, defaultValue = [] } = props
+  const [CityAreaList, setCityAreaList] = useState([
+    { name: '不限', id: '-', Selected: true },
+    { name: '一室', id: 1, Selected: false },
+    { name: '两室', id: 2, Selected: false },
+    { name: '三室', id: 3, Selected: false },
+    { name: '四室', id: 4, Selected: false },
+    { name: '五室以上', id: 5, Selected: false }
   ])
-  const [CurrentId, setCurrentId] = useState(defaultValue)
 
-  const CutArea = (id) => {
+  useEffect(() => {
+    InitList(CityAreaList, defaultValue, (arr) => {
+      setCityAreaList(arr)
+    })
+  }, [])
+
+  const InitList = (list, defaultList, callback = () => { }) => {
+    let Arr = list.map((item) => { return { ...item, Selected: false } })
+    if (defaultList.length) {
+      defaultList.map((item) => {
+        Arr.map((subItem) => {
+          if (item === subItem.id) {
+            subItem.Selected = true
+          }
+        })
+      })
+    } else {
+      Arr[0].Selected = true
+    }
+    callback(Arr)
+  }
+
+  const CutArea = (item, index) => {
     return () => {
-      setCurrentId(id)
+      CutFilter(CityAreaList, item, index, (arr) => {
+        setCityAreaList(arr)
+      })
+    }
+  }
+
+  const CutFilter = (list, item, index, callback = () => { }) => {
+    let Arr = [...list]
+    if (item.id === '-') {
+      if (!item.Selected) {
+        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
+        Arr[index].Selected = !item.Selected
+      }
+    } else {
+      if (item.Selected) { // 取消单个勾选
+        let Bool = false
+        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
+        if (!Bool) Arr[0].Selected = true
+        Arr[index].Selected = !item.Selected
+      } else { // 单个勾选
+        Arr[index].Selected = !item.Selected
+        let Bool = false
+        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
+        if (!Bool) {
+          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
+          Arr[0].Selected = true
+        } else {
+          Arr[0].Selected = false
+        }
+      }
     }
+    callback(Arr)
   }
 
   const Sure = () => {
-    change({name: 'houseType', value: CurrentId})
+    let Arr = []
+    CityAreaList.map((item) => { if (item.Selected && item.id !== '-') Arr.push(item.id) })
+    change({ houseType: Arr })
   }
 
   return (
     <view className='components FilterForHouseType'>
       {
         CityAreaList.map((item, index) => (
-          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item.id)}>
+          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item, index)}>
             <view>
               <view>
                 <text>{item.name}</text>
-                {
-                  CurrentId === item.id &&
-                  <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
-                }
+                <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
               </view>
             </view>
           </view>

src/pages/index/buildingList/components/FilterForHouseType/index.scss

           right: -2px;
           bottom: 0;
           height: 36px;
+          opacity: 0;
+          &.active {
+            opacity: 1;
+          }
         }
       }
     }

src/pages/index/buildingList/components/FilterForMore/index.jsx

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ScrollView, Image } from '@tarojs/components'
 import './index.scss'
 
 export default function FilterForMore (props) {
 
-  const { change = () => { }, defaultValue = ['-', '-', '-'], Cancel = () => { }, BuildingTypeList = [] } = props
+  const { change = () => { }, AreaDefault = [], StatusDefault = [], BuildingTypeDefault = [], Cancel = () => { }, BuildingTypeList = [] } = props
+  const [Counts, setCounts] = useState(0)
+  const [AreaList, setAreaList] = useState([
+    { name: '不限', id: '-', Selected: true },
+    { name: '60㎡以下', id: '0-60', Selected: false },
+    { name: '60-90㎡', id: '60-90', Selected: false },
+    { name: '90-110㎡', id: '90-110', Selected: false },
+    { name: '110-200㎡', id: '110-200', Selected: false },
+    { name: '200㎡以上', id: '200-', Selected: false }
+  ])
+  const [BuildingTypes, setBuildingTypes] = useState(BuildingTypeList.map((item, index) => { return { ...item, Selected: index === 0 } }))
 
-  const [AreaList] = useState([
-    { name: '不限', id: '-' },
-    { name: '60㎡以下', id: '0-60' },
-    { name: '60-90㎡', id: '60-90' },
-    { name: '90-110㎡', id: '90-110' },
-    { name: '110-200㎡', id: '110-200' },
-    { name: '200㎡以上', id: '200-' }
+  const [StatusList, setStatusList] = useState([
+    { name: '不限', id: '-', Selected: true },
+    { name: '在售', id: '在售', Selected: false },
+    { name: '未开盘', id: '未开盘', Selected: false },
+    { name: '售罄', id: '售罄', Selected: false }
   ])
-  const [CurrentAreaId, setCurrentAreaId] = useState(defaultValue[0])
 
-  const [CurrentBuildingTypeId, setCurrentBuildingTypeId] = useState(defaultValue[1])
+  useEffect(() => {
+    if(Counts < 3) {
+      if(AreaList.length) {
+        InitList(AreaList, AreaDefault, (arr) => {
+          setAreaList(arr)
+          setCounts(Counts + 1)
+        })
+      }
+      if(BuildingTypes.length) {
+        InitList(BuildingTypes, BuildingTypeDefault, (arr) => {
+          setBuildingTypes(arr)
+          setCounts(Counts + 1)
+        })
+      }
+      if(StatusList.length) {
+        InitList(StatusList, StatusDefault, (arr) => {
+          setStatusList(arr)
+          setCounts(Counts + 1)
+        })
+      }
+    }
+  }, [AreaList, BuildingTypes, StatusList])
 
-  const [StatusList] = useState([
-    { name: '不限', id: '-' },
-    { name: '在售', id: '在售' },
-    { name: '未开盘', id: '未开盘' },
-    { name: '售罄', id: '售罄' }
-  ])
-  const [CurrentStatusId, setCurrentStatusId] = useState(defaultValue[2])
+  const InitList = (list, defaultValue, callback = () => {}) => {
+    let Arr = list.map((item) => { return { ...item, Selected: false } })
+      if (defaultValue.length) {
+        defaultValue.map((item) => {
+          Arr.map((subItem) => {
+            if (item === subItem.id) {
+              subItem.Selected = true
+            }
+          })
+        })
+      } else {
+        Arr[0].Selected = true
+      }
+      callback(Arr)
+  }
 
-  const CutArea = (id) => {
+  const CutArea = (item, index) => {
     return () => {
-      setCurrentAreaId(id)
+      CutFilter(AreaList, item, index, (arr) => {
+        setAreaList(arr)
+      })
     }
   }
 
-  const CutBuildingType = (id) => {
+  const CutBuildingType = (item, index) => {
     return () => {
-      setCurrentBuildingTypeId(id)
+      CutFilter(BuildingTypes, item, index, (arr) => {
+        setBuildingTypes(arr)
+      })
     }
   }
 
-  const CutStatus = (id) => {
+  const CutStatus = (item, index) => {
     return () => {
-      setCurrentStatusId(id)
+      CutFilter(StatusList, item, index, (arr) => {
+        setStatusList(arr)
+      })
+    }
+  }
+
+  const CutFilter = (list, item, index, callback = () => { }) => {
+    let Arr = [...list]
+    if (item.id === '-') {
+      if (!item.Selected) {
+        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
+        Arr[index].Selected = !item.Selected
+      }
+    } else {
+      if (item.Selected) { // 取消单个勾选
+        let Bool = false
+        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
+        if (!Bool) Arr[0].Selected = true
+        Arr[index].Selected = !item.Selected
+      } else { // 单个勾选
+        Arr[index].Selected = !item.Selected
+        let Bool = false
+        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
+        if (!Bool) {
+          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
+          Arr[0].Selected = true
+        } else {
+          Arr[0].Selected = false
+        }
+      }
     }
+    callback(Arr)
   }
 
   const Sure = () => {
-    change([
-      { name: 'buildingType', value: CurrentBuildingTypeId },
-      { name: 'area', value: CurrentAreaId },
-      { name: 'marketStatus', value: CurrentStatusId },
-    ])
+    let area = []
+    AreaList.map((item) => { if (item.Selected && item.id !== '-') area.push(item.id) })
+    let buildingType = []
+    BuildingTypes.map((item) => { if (item.Selected && item.id !== '-') buildingType.push(item.id) })
+    let marketStatus = []
+    StatusList.map((item) => { if (item.Selected && item.id !== '-') marketStatus.push(item.id) })
+    change({
+      area,
+      buildingType,
+      marketStatus
+    })
   }
 
   return (
           <text>面积</text>
           {
             AreaList.map((item, index) => (
-              <view className='ListItem' key={`AreaListItem${index}`} onClick={CutArea(item.id)}>
+              <view className='ListItem' key={`AreaListItem${index}`} onClick={CutArea(item, index)}>
                 <view>
                   <view>
                     <text>{item.name}</text>
-                    <Image mode='heightFix' className={CurrentAreaId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                   </view>
                 </view>
               </view>
           }
           <text>类型</text>
           {
-            BuildingTypeList.map((item, index) => (
-              <view className='ListItem' key={`BuildingTypeListItem${index}`} onClick={CutBuildingType(item.id)}>
+            BuildingTypes.map((item, index) => (
+              <view className='ListItem' key={`BuildingTypeListItem${index}`} onClick={CutBuildingType(item, index)}>
                 <view>
                   <view>
                     <text>{item.name}</text>
-                    <Image mode='heightFix' className={CurrentBuildingTypeId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                   </view>
                 </view>
               </view>
           <text>售卖状态</text>
           {
             StatusList.map((item, index) => (
-              <view className='ListItem' key={`StatusListItem${index}`} onClick={CutStatus(item.id)}>
+              <view className='ListItem' key={`StatusListItem${index}`} onClick={CutStatus(item, index)}>
                 <view>
                   <view>
                     <text>{item.name}</text>
-                    <Image mode='heightFix' className={CurrentStatusId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                   </view>
                 </view>
               </view>

src/pages/index/buildingList/index.jsx

   const [CurrentFilter, setCurrentFilter] = useState(null)
   const [FilterData, setFilterData] = useState({
     buildingArea: [],
-    area: '-',
+    area: [],
     price: '-',
     priceType: null,
-    houseType: '-',
-    buildingType: '-',
+    houseType: [],
+    buildingType: [],
     orderBy: '-',
-    marketStatus: '-',
+    marketStatus: [],
     name: '-'
   })
 
     setHasNextPage(false)
     let Data = {}
     for (let key in FilterData) {
-      if (FilterData[key] !== '-' && FilterData[key] !== null && key !== 'buildingArea') {
+      if (FilterData[key] !== '-' && FilterData[key] !== null && key !== 'buildingArea' && key !== 'area' && key !== 'buildingType' && key !== 'marketStatus' && key !== 'houseType') {
         Data[key] = FilterData[key]
       }
     }
     if(FilterData.buildingArea.length) {
       Data.buildingArea = FilterData.buildingArea.join(',')
     }
-    console.log(Data)
+    if(FilterData.area.length) {
+      Data.area = FilterData.area.join(',')
+    }
+    if(FilterData.buildingType.length) {
+      Data.buildingType = FilterData.buildingType.join(',')
+    }
+    if(FilterData.marketStatus.length) {
+      Data.marketStatus = FilterData.marketStatus.join(',')
+    }
+    if(FilterData.houseType.length) {
+      Data.houseType = FilterData.houseType.join(',')
+    }
     fetch({ url: API_ITEMS_LIST, method: 'get', payload: { cityId: city.curCity.id, pageNumber, pageSize, isRecentOpening, isCommerce, ...Data } }).then((res) => {
       setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
       setHasNextPage(res.current < res.pages)
   const FilterChange = (e) => {
     let Data = { ...FilterData }
     Data[e.name] = e.value
-    console.log(Data)
     setFilterData({...Data})
   }
 
   const FiltersChange = (e) => {
-    let Data = { ...FilterData }
-    e.map((item) => {
-      Data[item.name] = item.value
-    })
-    setFilterData({...Data})
+    setFilterData({...FilterData, ...e})
   }
 
   const PriceChange = (e) => {
           {/* 户型 */}
           {
             CurrentFilter === 3 &&
-            <FilterForHouseType change={FilterChange} defaultValue={FilterData.houseType}></FilterForHouseType>
+            <FilterForHouseType change={FiltersChange} defaultValue={FilterData.houseType}></FilterForHouseType>
           }
 
           {/* 更多 */}
           {
             CurrentFilter === 4 &&
-            <FilterForMore change={FiltersChange} defaultValue={[FilterData.area, FilterData.buildingType, FilterData.marketStatus]} BuildingTypeList={BuildingTypeList}></FilterForMore>
+            <FilterForMore change={FiltersChange} AreaDefault={FilterData.area} StatusDefault={FilterData.marketStatus} BuildingTypeDefault={FilterData.buildingType} BuildingTypeList={BuildingTypeList}></FilterForMore>
           }
 
           {/* 排序 */}