浏览代码

静态页面

1002884655 3 年前
父节点
当前提交
34c42416a3

+ 69
- 18
src/pages/index/buildingList/components/FilterForHouseType/index.jsx 查看文件

@@ -1,42 +1,93 @@
1
-import { useState } from 'react'
1
+
2
+import { useState, useEffect } from 'react'
2 3
 import { Image } from '@tarojs/components'
3 4
 import './index.scss'
4 5
 
5 6
 export default function FilterForHouseType (props) {
6 7
 
7
-  const { change = () => {}, Cancel = () => { }, defaultValue = '-' } = props
8
-  const [CityAreaList] = useState([
9
-    {name: '不限', id: '-'},
10
-    {name: '一室', id: 1},
11
-    {name: '两室', id: 2},
12
-    {name: '三室', id: 3},
13
-    {name: '四室', id: 4},
14
-    {name: '五室以上', id: 5}
8
+  const { change = () => { }, Cancel = () => { }, defaultValue = [] } = props
9
+  const [CityAreaList, setCityAreaList] = useState([
10
+    { name: '不限', id: '-', Selected: true },
11
+    { name: '一室', id: 1, Selected: false },
12
+    { name: '两室', id: 2, Selected: false },
13
+    { name: '三室', id: 3, Selected: false },
14
+    { name: '四室', id: 4, Selected: false },
15
+    { name: '五室以上', id: 5, Selected: false }
15 16
   ])
16
-  const [CurrentId, setCurrentId] = useState(defaultValue)
17 17
 
18
-  const CutArea = (id) => {
18
+  useEffect(() => {
19
+    InitList(CityAreaList, defaultValue, (arr) => {
20
+      setCityAreaList(arr)
21
+    })
22
+  }, [])
23
+
24
+  const InitList = (list, defaultList, callback = () => { }) => {
25
+    let Arr = list.map((item) => { return { ...item, Selected: false } })
26
+    if (defaultList.length) {
27
+      defaultList.map((item) => {
28
+        Arr.map((subItem) => {
29
+          if (item === subItem.id) {
30
+            subItem.Selected = true
31
+          }
32
+        })
33
+      })
34
+    } else {
35
+      Arr[0].Selected = true
36
+    }
37
+    callback(Arr)
38
+  }
39
+
40
+  const CutArea = (item, index) => {
19 41
     return () => {
20
-      setCurrentId(id)
42
+      CutFilter(CityAreaList, item, index, (arr) => {
43
+        setCityAreaList(arr)
44
+      })
45
+    }
46
+  }
47
+
48
+  const CutFilter = (list, item, index, callback = () => { }) => {
49
+    let Arr = [...list]
50
+    if (item.id === '-') {
51
+      if (!item.Selected) {
52
+        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
53
+        Arr[index].Selected = !item.Selected
54
+      }
55
+    } else {
56
+      if (item.Selected) { // 取消单个勾选
57
+        let Bool = false
58
+        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
59
+        if (!Bool) Arr[0].Selected = true
60
+        Arr[index].Selected = !item.Selected
61
+      } else { // 单个勾选
62
+        Arr[index].Selected = !item.Selected
63
+        let Bool = false
64
+        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
65
+        if (!Bool) {
66
+          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
67
+          Arr[0].Selected = true
68
+        } else {
69
+          Arr[0].Selected = false
70
+        }
71
+      }
21 72
     }
73
+    callback(Arr)
22 74
   }
23 75
 
24 76
   const Sure = () => {
25
-    change({name: 'houseType', value: CurrentId})
77
+    let Arr = []
78
+    CityAreaList.map((item) => { if (item.Selected && item.id !== '-') Arr.push(item.id) })
79
+    change({ houseType: Arr })
26 80
   }
27 81
 
28 82
   return (
29 83
     <view className='components FilterForHouseType'>
30 84
       {
31 85
         CityAreaList.map((item, index) => (
32
-          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item.id)}>
86
+          <view className='ListItem' key={`ListItem${index}`} onClick={CutArea(item, index)}>
33 87
             <view>
34 88
               <view>
35 89
                 <text>{item.name}</text>
36
-                {
37
-                  CurrentId === item.id &&
38
-                  <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
39
-                }
90
+                <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
40 91
               </view>
41 92
             </view>
42 93
           </view>

+ 4
- 0
src/pages/index/buildingList/components/FilterForHouseType/index.scss 查看文件

@@ -31,6 +31,10 @@
31 31
           right: -2px;
32 32
           bottom: 0;
33 33
           height: 36px;
34
+          opacity: 0;
35
+          &.active {
36
+            opacity: 1;
37
+          }
34 38
         }
35 39
       }
36 40
     }

+ 112
- 36
src/pages/index/buildingList/components/FilterForMore/index.jsx 查看文件

@@ -1,55 +1,131 @@
1
-import { useState } from 'react'
1
+import { useState, useEffect } from 'react'
2 2
 import { ScrollView, Image } from '@tarojs/components'
3 3
 import './index.scss'
4 4
 
5 5
 export default function FilterForMore (props) {
6 6
 
7
-  const { change = () => { }, defaultValue = ['-', '-', '-'], Cancel = () => { }, BuildingTypeList = [] } = props
7
+  const { change = () => { }, AreaDefault = [], StatusDefault = [], BuildingTypeDefault = [], Cancel = () => { }, BuildingTypeList = [] } = props
8
+  const [Counts, setCounts] = useState(0)
9
+  const [AreaList, setAreaList] = useState([
10
+    { name: '不限', id: '-', Selected: true },
11
+    { name: '60㎡以下', id: '0-60', Selected: false },
12
+    { name: '60-90㎡', id: '60-90', Selected: false },
13
+    { name: '90-110㎡', id: '90-110', Selected: false },
14
+    { name: '110-200㎡', id: '110-200', Selected: false },
15
+    { name: '200㎡以上', id: '200-', Selected: false }
16
+  ])
17
+  const [BuildingTypes, setBuildingTypes] = useState(BuildingTypeList.map((item, index) => { return { ...item, Selected: index === 0 } }))
8 18
 
9
-  const [AreaList] = useState([
10
-    { name: '不限', id: '-' },
11
-    { name: '60㎡以下', id: '0-60' },
12
-    { name: '60-90㎡', id: '60-90' },
13
-    { name: '90-110㎡', id: '90-110' },
14
-    { name: '110-200㎡', id: '110-200' },
15
-    { name: '200㎡以上', id: '200-' }
19
+  const [StatusList, setStatusList] = useState([
20
+    { name: '不限', id: '-', Selected: true },
21
+    { name: '在售', id: '在售', Selected: false },
22
+    { name: '未开盘', id: '未开盘', Selected: false },
23
+    { name: '售罄', id: '售罄', Selected: false }
16 24
   ])
17
-  const [CurrentAreaId, setCurrentAreaId] = useState(defaultValue[0])
18 25
 
19
-  const [CurrentBuildingTypeId, setCurrentBuildingTypeId] = useState(defaultValue[1])
26
+  useEffect(() => {
27
+    if(Counts < 3) {
28
+      if(AreaList.length) {
29
+        InitList(AreaList, AreaDefault, (arr) => {
30
+          setAreaList(arr)
31
+          setCounts(Counts + 1)
32
+        })
33
+      }
34
+      if(BuildingTypes.length) {
35
+        InitList(BuildingTypes, BuildingTypeDefault, (arr) => {
36
+          setBuildingTypes(arr)
37
+          setCounts(Counts + 1)
38
+        })
39
+      }
40
+      if(StatusList.length) {
41
+        InitList(StatusList, StatusDefault, (arr) => {
42
+          setStatusList(arr)
43
+          setCounts(Counts + 1)
44
+        })
45
+      }
46
+    }
47
+  }, [AreaList, BuildingTypes, StatusList])
20 48
 
21
-  const [StatusList] = useState([
22
-    { name: '不限', id: '-' },
23
-    { name: '在售', id: '在售' },
24
-    { name: '未开盘', id: '未开盘' },
25
-    { name: '售罄', id: '售罄' }
26
-  ])
27
-  const [CurrentStatusId, setCurrentStatusId] = useState(defaultValue[2])
49
+  const InitList = (list, defaultValue, callback = () => {}) => {
50
+    let Arr = list.map((item) => { return { ...item, Selected: false } })
51
+      if (defaultValue.length) {
52
+        defaultValue.map((item) => {
53
+          Arr.map((subItem) => {
54
+            if (item === subItem.id) {
55
+              subItem.Selected = true
56
+            }
57
+          })
58
+        })
59
+      } else {
60
+        Arr[0].Selected = true
61
+      }
62
+      callback(Arr)
63
+  }
28 64
 
29
-  const CutArea = (id) => {
65
+  const CutArea = (item, index) => {
30 66
     return () => {
31
-      setCurrentAreaId(id)
67
+      CutFilter(AreaList, item, index, (arr) => {
68
+        setAreaList(arr)
69
+      })
32 70
     }
33 71
   }
34 72
 
35
-  const CutBuildingType = (id) => {
73
+  const CutBuildingType = (item, index) => {
36 74
     return () => {
37
-      setCurrentBuildingTypeId(id)
75
+      CutFilter(BuildingTypes, item, index, (arr) => {
76
+        setBuildingTypes(arr)
77
+      })
38 78
     }
39 79
   }
40 80
 
41
-  const CutStatus = (id) => {
81
+  const CutStatus = (item, index) => {
42 82
     return () => {
43
-      setCurrentStatusId(id)
83
+      CutFilter(StatusList, item, index, (arr) => {
84
+        setStatusList(arr)
85
+      })
86
+    }
87
+  }
88
+
89
+  const CutFilter = (list, item, index, callback = () => { }) => {
90
+    let Arr = [...list]
91
+    if (item.id === '-') {
92
+      if (!item.Selected) {
93
+        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
94
+        Arr[index].Selected = !item.Selected
95
+      }
96
+    } else {
97
+      if (item.Selected) { // 取消单个勾选
98
+        let Bool = false
99
+        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
100
+        if (!Bool) Arr[0].Selected = true
101
+        Arr[index].Selected = !item.Selected
102
+      } else { // 单个勾选
103
+        Arr[index].Selected = !item.Selected
104
+        let Bool = false
105
+        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
106
+        if (!Bool) {
107
+          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
108
+          Arr[0].Selected = true
109
+        } else {
110
+          Arr[0].Selected = false
111
+        }
112
+      }
44 113
     }
114
+    callback(Arr)
45 115
   }
46 116
 
47 117
   const Sure = () => {
48
-    change([
49
-      { name: 'buildingType', value: CurrentBuildingTypeId },
50
-      { name: 'area', value: CurrentAreaId },
51
-      { name: 'marketStatus', value: CurrentStatusId },
52
-    ])
118
+    let area = []
119
+    AreaList.map((item) => { if (item.Selected && item.id !== '-') area.push(item.id) })
120
+    let buildingType = []
121
+    BuildingTypes.map((item) => { if (item.Selected && item.id !== '-') buildingType.push(item.id) })
122
+    let marketStatus = []
123
+    StatusList.map((item) => { if (item.Selected && item.id !== '-') marketStatus.push(item.id) })
124
+    change({
125
+      area,
126
+      buildingType,
127
+      marketStatus
128
+    })
53 129
   }
54 130
 
55 131
   return (
@@ -59,11 +135,11 @@ export default function FilterForMore (props) {
59 135
           <text>面积</text>
60 136
           {
61 137
             AreaList.map((item, index) => (
62
-              <view className='ListItem' key={`AreaListItem${index}`} onClick={CutArea(item.id)}>
138
+              <view className='ListItem' key={`AreaListItem${index}`} onClick={CutArea(item, index)}>
63 139
                 <view>
64 140
                   <view>
65 141
                     <text>{item.name}</text>
66
-                    <Image mode='heightFix' className={CurrentAreaId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
142
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
67 143
                   </view>
68 144
                 </view>
69 145
               </view>
@@ -71,12 +147,12 @@ export default function FilterForMore (props) {
71 147
           }
72 148
           <text>类型</text>
73 149
           {
74
-            BuildingTypeList.map((item, index) => (
75
-              <view className='ListItem' key={`BuildingTypeListItem${index}`} onClick={CutBuildingType(item.id)}>
150
+            BuildingTypes.map((item, index) => (
151
+              <view className='ListItem' key={`BuildingTypeListItem${index}`} onClick={CutBuildingType(item, index)}>
76 152
                 <view>
77 153
                   <view>
78 154
                     <text>{item.name}</text>
79
-                    <Image mode='heightFix' className={CurrentBuildingTypeId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
155
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
80 156
                   </view>
81 157
                 </view>
82 158
               </view>
@@ -85,11 +161,11 @@ export default function FilterForMore (props) {
85 161
           <text>售卖状态</text>
86 162
           {
87 163
             StatusList.map((item, index) => (
88
-              <view className='ListItem' key={`StatusListItem${index}`} onClick={CutStatus(item.id)}>
164
+              <view className='ListItem' key={`StatusListItem${index}`} onClick={CutStatus(item, index)}>
89 165
                 <view>
90 166
                   <view>
91 167
                     <text>{item.name}</text>
92
-                    <Image mode='heightFix' className={CurrentStatusId === item.id ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
168
+                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
93 169
                   </view>
94 170
                 </view>
95 171
               </view>

+ 20
- 14
src/pages/index/buildingList/index.jsx 查看文件

@@ -34,13 +34,13 @@ export default withLayout((props) => {
34 34
   const [CurrentFilter, setCurrentFilter] = useState(null)
35 35
   const [FilterData, setFilterData] = useState({
36 36
     buildingArea: [],
37
-    area: '-',
37
+    area: [],
38 38
     price: '-',
39 39
     priceType: null,
40
-    houseType: '-',
41
-    buildingType: '-',
40
+    houseType: [],
41
+    buildingType: [],
42 42
     orderBy: '-',
43
-    marketStatus: '-',
43
+    marketStatus: [],
44 44
     name: '-'
45 45
   })
46 46
 
@@ -85,14 +85,25 @@ export default withLayout((props) => {
85 85
     setHasNextPage(false)
86 86
     let Data = {}
87 87
     for (let key in FilterData) {
88
-      if (FilterData[key] !== '-' && FilterData[key] !== null && key !== 'buildingArea') {
88
+      if (FilterData[key] !== '-' && FilterData[key] !== null && key !== 'buildingArea' && key !== 'area' && key !== 'buildingType' && key !== 'marketStatus' && key !== 'houseType') {
89 89
         Data[key] = FilterData[key]
90 90
       }
91 91
     }
92 92
     if(FilterData.buildingArea.length) {
93 93
       Data.buildingArea = FilterData.buildingArea.join(',')
94 94
     }
95
-    console.log(Data)
95
+    if(FilterData.area.length) {
96
+      Data.area = FilterData.area.join(',')
97
+    }
98
+    if(FilterData.buildingType.length) {
99
+      Data.buildingType = FilterData.buildingType.join(',')
100
+    }
101
+    if(FilterData.marketStatus.length) {
102
+      Data.marketStatus = FilterData.marketStatus.join(',')
103
+    }
104
+    if(FilterData.houseType.length) {
105
+      Data.houseType = FilterData.houseType.join(',')
106
+    }
96 107
     fetch({ url: API_ITEMS_LIST, method: 'get', payload: { cityId: city.curCity.id, pageNumber, pageSize, isRecentOpening, isCommerce, ...Data } }).then((res) => {
97 108
       setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
98 109
       setHasNextPage(res.current < res.pages)
@@ -121,16 +132,11 @@ export default withLayout((props) => {
121 132
   const FilterChange = (e) => {
122 133
     let Data = { ...FilterData }
123 134
     Data[e.name] = e.value
124
-    console.log(Data)
125 135
     setFilterData({...Data})
126 136
   }
127 137
 
128 138
   const FiltersChange = (e) => {
129
-    let Data = { ...FilterData }
130
-    e.map((item) => {
131
-      Data[item.name] = item.value
132
-    })
133
-    setFilterData({...Data})
139
+    setFilterData({...FilterData, ...e})
134 140
   }
135 141
 
136 142
   const PriceChange = (e) => {
@@ -197,13 +203,13 @@ export default withLayout((props) => {
197 203
           {/* 户型 */}
198 204
           {
199 205
             CurrentFilter === 3 &&
200
-            <FilterForHouseType change={FilterChange} defaultValue={FilterData.houseType}></FilterForHouseType>
206
+            <FilterForHouseType change={FiltersChange} defaultValue={FilterData.houseType}></FilterForHouseType>
201 207
           }
202 208
 
203 209
           {/* 更多 */}
204 210
           {
205 211
             CurrentFilter === 4 &&
206
-            <FilterForMore change={FiltersChange} defaultValue={[FilterData.area, FilterData.buildingType, FilterData.marketStatus]} BuildingTypeList={BuildingTypeList}></FilterForMore>
212
+            <FilterForMore change={FiltersChange} AreaDefault={FilterData.area} StatusDefault={FilterData.marketStatus} BuildingTypeDefault={FilterData.buildingType} BuildingTypeList={BuildingTypeList}></FilterForMore>
207 213
           }
208 214
 
209 215
           {/* 排序 */}