刘文博 / gulu-vue

Download as
Browse Code »

Commit 467128613dd6a43e48d53c82acbfb23ace5b49f1

Authored by 范牧
1 parent fb748734ca
Exists in master

筛选逻辑添加

Showing 2 changed files with 11 additions and 7 deletions   Show diff stats
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @4671286
1 <template> 1 <template>
2 <view 2 <view
3 class="HMfilterDropdown" 3 class="HMfilterDropdown"
4 @touchmove.stop.prevent="discard" 4 @touchmove.stop.prevent="discard"
5 @tap.stop="discard" 5 @tap.stop="discard"
6 > 6 >
7 <view class="nav"> 7 <view class="nav">
8 <block 8 <block
9 v-for="(item,index) in menu" 9 v-for="(item,index) in menu"
10 :key="index" 10 :key="index"
11 > 11 >
12 <view 12 <view
13 class="first-menu" 13 class="first-menu"
14 :class="{'on':showPage==index || on[index] === 1}" 14 :class="{'on':showPage==index || on[index] === 1}"
15 @tap="togglePage(index)" 15 @tap="togglePage(index)"
16 v-if="!item.isNoPull" 16 v-if="!item.isNoPull"
17 > 17 >
18 <text class="name">{{item.name}}</text> 18 <text class="name">{{item.name}}</text>
19 <text 19 <text
20 class="iconfont triangle" 20 class="iconfont triangle"
21 :style="'transform:rotate('+triangleDeg[index]+'deg);'" 21 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
22 ></text> 22 ></text>
23 </view> 23 </view>
24 <view 24 <view
25 class="first-menu" 25 class="first-menu"
26 :class="{'on':showPage==index || on[index] === 1}" 26 :class="{'on':showPage==index || on[index] === 1}"
27 @tap="showAll()" 27 @tap="showAll()"
28 v-else 28 v-else
29 > 29 >
30 <text class="name">{{item.name}}</text> 30 <text class="name">{{item.name}}</text>
31 </view> 31 </view>
32 </block> 32 </block>
33 </view> 33 </view>
34 <view 34 <view
35 class="mask" 35 class="mask"
36 :class="{'show':isShowMask,'hide':maskVisibility!=true}" 36 :class="{'show':isShowMask,'hide':maskVisibility!=true}"
37 @tap="togglePage(showPage)" 37 @tap="togglePage(showPage)"
38 ></view> 38 ></view>
39 <block 39 <block
40 v-for="(page,page_index) in subData" 40 v-for="(page,page_index) in subData"
41 :key="page_index" 41 :key="page_index"
42 > 42 >
43 <view 43 <view
44 class="sub-menu-class" 44 class="sub-menu-class"
45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}" 45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
46 > 46 >
47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
48 <scroll-view 48 <scroll-view
49 class="sub-menu-list" 49 class="sub-menu-list"
50 :class="[activeMenuArr[page_index].length>1?'first':'alone']" 50 :class="[activeMenuArr[page_index].length>1?'first':'alone']"
51 :scroll-y="true" 51 :scroll-y="true"
52 :scroll-into-view="'first_id'+firstScrollInto" 52 :scroll-into-view="'first_id'+firstScrollInto"
53 > 53 >
54 <block 54 <block
55 v-for="(sub,index) in page.submenu" 55 v-for="(sub,index) in page.submenu"
56 :key="index" 56 :key="index"
57 > 57 >
58 <view 58 <view
59 class="sub-menu" 59 class="sub-menu"
60 :id="'first_id'+index" 60 :id="'first_id'+index"
61 :class="{'on':activeMenuArr[page_index][0]==index}" 61 :class="{'on':activeMenuArr[page_index][0]==index}"
62 @tap="selectHierarchyMenu(page_index,index,null,null)" 62 @tap="selectHierarchyMenu(page_index,index,null,null)"
63 > 63 >
64 <view class="menu-name"> 64 <view class="menu-name">
65 <text>{{sub.name}}</text> 65 <text>{{sub.name}}</text>
66 <text class="iconfont selected"></text> 66 <text class="iconfont selected"></text>
67 </view> 67 </view>
68 </view> 68 </view>
69 </block> 69 </block>
70 </scroll-view> 70 </scroll-view>
71 <block 71 <block
72 v-for="(sub,index) in page.submenu" 72 v-for="(sub,index) in page.submenu"
73 :key="index" 73 :key="index"
74 > 74 >
75 <scroll-view 75 <scroll-view
76 class="sub-menu-list not-first" 76 class="sub-menu-list not-first"
77 :scroll-y="true" 77 :scroll-y="true"
78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
79 :scroll-into-view="'second_id'+secondScrollInto" 79 :scroll-into-view="'second_id'+secondScrollInto"
80 > 80 >
81 <block 81 <block
82 v-for="(sub_second,second_index) in sub.submenu" 82 v-for="(sub_second,second_index) in sub.submenu"
83 :key="second_index" 83 :key="second_index"
84 > 84 >
85 <view 85 <view
86 class="sub-menu" 86 class="sub-menu"
87 :id="'second_id'+second_index" 87 :id="'second_id'+second_index"
88 :class="{'on':activeMenuArr[page_index][1]==second_index}" 88 :class="{'on':activeMenuArr[page_index][1]==second_index}"
89 > 89 >
90 <view 90 <view
91 class="menu-name" 91 class="menu-name"
92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)" 92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
93 > 93 >
94 <text>{{sub_second.name}}</text> 94 <text>{{sub_second.name}}</text>
95 <text class="iconfont selected"></text> 95 <text class="iconfont selected"></text>
96 </view> 96 </view>
97 <view 97 <view
98 class="more-sub-menu" 98 class="more-sub-menu"
99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0" 99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
100 > 100 >
101 <block 101 <block
102 v-for="(sub2,sub2_index) in sub_second.submenu" 102 v-for="(sub2,sub2_index) in sub_second.submenu"
103 :key="sub2_index" 103 :key="sub2_index"
104 > 104 >
105 <text 105 <text
106 v-if="sub_second.showAllSub || (sub2_index<8)" 106 v-if="sub_second.showAllSub || (sub2_index<8)"
107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)" 108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
109 >{{sub2.name}}</text> 109 >{{sub2.name}}</text>
110 <text 110 <text
111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" 111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
112 @tap="showMoreSub(second_index)" 112 @tap="showMoreSub(second_index)"
113 >更多<text class="iconfont triangle"></text></text> 113 >更多<text class="iconfont triangle"></text></text>
114 </block> 114 </block>
115 </view> 115 </view>
116 </view> 116 </view>
117 </block> 117 </block>
118 </scroll-view> 118 </scroll-view>
119 </block> 119 </block>
120 </block> 120 </block>
121 <block v-if="page.type=='filter' || page.type=='checkbox'"> 121 <block v-if="page.type=='filter' || page.type=='checkbox'">
122 <view class="filter"> 122 <view class="filter">
123 <scroll-view 123 <scroll-view
124 class="menu-box" 124 class="menu-box"
125 :scroll-y="true" 125 :scroll-y="true"
126 > 126 >
127 <view 127 <view
128 class="box" 128 class="box"
129 v-for="(box,box_index) in page.submenu" 129 v-for="(box,box_index) in page.submenu"
130 :key="box_index" 130 :key="box_index"
131 > 131 >
132 <view class="title">{{box.name}}</view> 132 <view class="title">{{box.name}}</view>
133 <view class="labels"> 133 <view class="labels">
134 <view 134 <view
135 v-for="(label,label_index) in box.submenu" 135 v-for="(label,label_index) in box.submenu"
136 :key="label_index" 136 :key="label_index"
137 @tap="selectFilterLabel(page_index, box_index, label_index)" 137 @tap="selectFilterLabel(page_index, box_index, label_index)"
138 :class="{'on': label.selected}" 138 :class="{'on': label.selected}"
139 >{{label.name}}</view> 139 >{{label.name}}</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </scroll-view> 142 </scroll-view>
143 <view class="btn-box"> 143 <view class="btn-box">
144 <view 144 <view
145 class="reset" 145 class="reset"
146 @tap="resetFilterData(page_index)" 146 @tap="resetFilterData(page_index)"
147 >重置</view> 147 >重置</view>
148 <view 148 <view
149 class="submit" 149 class="submit"
150 @tap="setFilterData(page_index)" 150 @tap="setFilterData(page_index)"
151 >确定</view> 151 >确定</view>
152 </view> 152 </view>
153 </view> 153 </view>
154 </block> 154 </block>
155 <block v-if="page.type=='radio'"> 155 <block v-if="page.type=='radio'">
156 <view class="filter"> 156 <view class="filter">
157 <scroll-view 157 <scroll-view
158 class="menu-box" 158 class="menu-box"
159 :scroll-y="true" 159 :scroll-y="true"
160 > 160 >
161 <view 161 <view
162 class="box" 162 class="box"
163 v-for="(box,box_index) in page.submenu" 163 v-for="(box,box_index) in page.submenu"
164 :key="box_index" 164 :key="box_index"
165 > 165 >
166 <view class="title">{{box.name}}</view> 166 <view class="title">{{box.name}}</view>
167 <view class="labels"> 167 <view class="labels">
168 <view 168 <view
169 v-for="(label,label_index) in box.submenu" 169 v-for="(label,label_index) in box.submenu"
170 :key="label_index" 170 :key="label_index"
171 @tap="selectRadioLabel(page_index,box_index,label_index)" 171 @tap="selectRadioLabel(page_index,box_index,label_index)"
172 :class="{'on':label.selected}" 172 :class="{'on':label.selected}"
173 >{{label.name}}</view> 173 >{{label.name}}</view>
174 </view> 174 </view>
175 </view> 175 </view>
176 </scroll-view> 176 </scroll-view>
177 <view class="btn-box"> 177 <view class="btn-box">
178 <view 178 <view
179 class="reset" 179 class="reset"
180 @tap="resetFilterData(page_index)" 180 @tap="resetFilterData(page_index)"
181 >重置</view> 181 >重置</view>
182 <view 182 <view
183 class="submit" 183 class="submit"
184 @tap="setFilterData(page_index)" 184 @tap="setFilterData(page_index)"
185 >确定</view> 185 >确定</view>
186 </view> 186 </view>
187 </view> 187 </view>
188 </block> 188 </block>
189 </view> 189 </view>
190 </block> 190 </block>
191 </view> 191 </view>
192 </template> 192 </template>
193 <script> 193 <script>
194 export default { 194 export default {
195 data () { 195 data () {
196 return { 196 return {
197 subData: [], // 菜单数据 197 subData: [], // 菜单数据
198 menu: [], // 顶部横条数据 198 menu: [], // 顶部横条数据
199 showPage: -1, // 菜单页面显示/隐藏动画控制 199 showPage: -1, // 菜单页面显示/隐藏动画控制
200 pageState: [], // 页面的状态 200 pageState: [], // 页面的状态
201 activeMenuArr: [], // UI状态 201 activeMenuArr: [], // UI状态
202 shadowActiveMenuArr: [], // 记录选中 202 shadowActiveMenuArr: [], // 记录选中
203 defaultActive: [], 203 defaultActive: [],
204 triangleDeg: [], // 小三角形的翻转动画控制 204 triangleDeg: [], // 小三角形的翻转动画控制
205 isShowMask: false, // 遮罩层显示/隐藏动画控制 205 isShowMask: false, // 遮罩层显示/隐藏动画控制
206 maskVisibility: false, // 遮罩层显示/隐藏状态 206 maskVisibility: false, // 遮罩层显示/隐藏状态
207 // 滚动区域定位 207 // 滚动区域定位
208 firstScrollInto: 0, 208 firstScrollInto: 0,
209 secondScrollInto: 0, 209 secondScrollInto: 0,
210 componentTop: 0, // 组件top 210 componentTop: 0, // 组件top
211 isReadNewSelect: false, 211 isReadNewSelect: false,
212 on: [1, 0, 0, 0, 0], 212 on: [1, 0, 0, 0, 0],
213 selectedData: {} 213 selectedData: {}
214 } 214 }
215 }, 215 },
216 props: { 216 props: {
217 filterData: { 217 filterData: {
218 value: Array, 218 value: Array,
219 default: [] 219 default: []
220 }, 220 },
221 defaultSelected: { 221 defaultSelected: {
222 value: Array, 222 value: Array,
223 default: [] 223 default: []
224 }, 224 },
225 updateMenuName: { 225 updateMenuName: {
226 value: Boolean, 226 value: Boolean,
227 default: true 227 default: true
228 }, 228 },
229 dataFormat: { 229 dataFormat: {
230 value: String, 230 value: String,
231 default: 'Array' 231 default: 'Array'
232 } 232 }
233 }, 233 },
234 watch: { 234 watch: {
235 filterData: { 235 filterData: {
236 handler () { 236 handler () {
237 this.initMenu() // filterData重新赋值初始化菜单 237 this.initMenu() // filterData重新赋值初始化菜单
238 }, 238 },
239 immediate: true 239 immediate: true
240 }, 240 },
241 defaultSelected (newVal) { 241 defaultSelected (newVal) {
242 if (newVal.length === 0) { 242 if (newVal.length === 0) {
243 return 243 return
244 } 244 }
245 this.defaultActive = JSON.parse(JSON.stringify(newVal)) 245 this.defaultActive = JSON.parse(JSON.stringify(newVal))
246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)) 246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)) 247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
248 } 248 }
249 }, 249 },
250 methods: { 250 methods: {
251 initMenu () { 251 initMenu () {
252 let tmpMenuActiveArr = [] 252 let tmpMenuActiveArr = []
253 const tmpMenu = [] 253 const tmpMenu = []
254 for (let i = 0; i < this.filterData.length; i++) { 254 for (let i = 0; i < this.filterData.length; i++) {
255 let tmpitem = this.filterData[i] 255 let tmpitem = this.filterData[i]
256 tmpMenu.push({ 256 tmpMenu.push({
257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name), 258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
259 type: tmpitem.type, 259 type: tmpitem.type,
260 isNoPull: tmpitem.isNoPull 260 isNoPull: tmpitem.isNoPull
261 }) 261 })
262 // 初始化选中项数组-ui状态 262 // 初始化选中项数组-ui状态
263 tmpMenuActiveArr.push(this.processActive(tmpitem)) 263 tmpMenuActiveArr.push(this.processActive(tmpitem))
264 // 初始化角度数组 264 // 初始化角度数组
265 this.triangleDeg.push(0) 265 this.triangleDeg.push(0)
266 // 初始化控制显示状态数组 266 // 初始化控制显示状态数组
267 this.pageState.push(false) 267 this.pageState.push(false)
268 // 递归处理子菜单数据 268 // 递归处理子菜单数据
269 tmpitem = this.processSubMenu(tmpitem) 269 tmpitem = this.processSubMenu(tmpitem)
270 this.filterData[i] = tmpitem 270 this.filterData[i] = tmpitem
271 if (tmpitem.type === 'filter') { 271 if (tmpitem.type === 'filter') {
272 for (let i = 0; i < tmpitem.length; i++) { 272 for (let i = 0; i < tmpitem.length; i++) {
273 this.selectedData[`${tmpitem.submenu[i].value}`] = [] 273 this.selectedData[`${tmpitem.submenu[i].value}`] = []
274 } 274 }
275 } 275 }
276 } 276 }
277 console.log('this.selectedData', this.selectedData) 277 console.log('this.selectedData', this.selectedData)
278 this.menu = tmpMenu 278 this.menu = tmpMenu
279 // 初始化选中项数组 279 // 初始化选中项数组
280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr 280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
281 this.defaultActive = [] 281 this.defaultActive = []
282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
284 // 加载菜单数据 284 // 加载菜单数据
285 this.subData = this.filterData 285 this.subData = this.filterData
286 }, 286 },
287 // 展开更多 287 // 展开更多
288 showMoreSub (index) { 288 showMoreSub (index) {
289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true 289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
290 this.$forceUpdate() 290 this.$forceUpdate()
291 }, 291 },
292 // 选中 292 // 选中
293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) { 293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
294 // 读取记录 294 // 读取记录
295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) { 295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))) 296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
297 } else { 297 } else {
298 this.activeMenuArr[page_index].splice(0, 1, level1_index); 298 this.activeMenuArr[page_index].splice(0, 1, level1_index);
299 (level2_index != null || this.activeMenuArr[page_index].length >= 2) && this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1); 299 (level2_index != null || this.activeMenuArr[page_index].length >= 2) && this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
300 (level3_index != null || this.activeMenuArr[page_index].length >= 3) && this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1) 300 (level3_index != null || this.activeMenuArr[page_index].length >= 3) && this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1)
301 } 301 }
302 // 写入结果 302 // 写入结果
303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
304 ) { 304 ) {
305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index] 305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
307 this.togglePage(this.showPage) 307 this.togglePage(this.showPage)
308 } 308 }
309 }, 309 },
310 // 写入结果，筛选 310 // 写入结果，筛选
311 setFilterData (page_index) { 311 setFilterData (page_index) {
312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
313 this.togglePage(this.showPage) 313 this.togglePage(this.showPage)
314 }, 314 },
315 // 重置结果和ui，筛选 315 // 重置结果和ui，筛选
316 resetFilterData (page_index) { 316 resetFilterData (page_index) {
317 const tmpArr = [] 317 const tmpArr = []
318 let level = this.shadowActiveMenuArr[page_index].length 318 let level = this.shadowActiveMenuArr[page_index].length
319 while (level > 0) { 319 while (level > 0) {
320 tmpArr.push([]) 320 tmpArr.push([])
321 const box = this.subData[page_index].submenu[level - 1].submenu 321 const box = this.subData[page_index].submenu[level - 1].submenu
322 for (let i = 0; i < box.length; i++) { 322 for (let i = 0; i < box.length; i++) {
323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false 323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false
324 } 324 }
325 level-- 325 level--
326 } 326 }
327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)) 327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
328 this.$forceUpdate() 328 this.$forceUpdate()
329 }, 329 },
330 // 选中筛选类label-UI状态 330 // 选中筛选类label-UI状态
331 selectFilterLabel (page_index, box_index, label_index) { 331 selectFilterLabel (page_index, box_index, label_index) {
332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index) 332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
333 console.log('select', page_index, box_index, label_index, findIndex)
334 const data = this.filterData[page_index].submenu 333 const data = this.filterData[page_index].submenu
335 const selected = this.selectedData[`${data[box_index].value}`] 334 const selected = this.selectedData[`${data[box_index].value}`]
336 if (findIndex > -1) { 335 if (findIndex > -1) {
337 this.activeMenuArr[page_index][box_index].splice(findIndex, 1) 336 this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
338 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false 337 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
339 for (let i = 0; i < selected.length; i++) { 338 for (let i = 0; i < selected.length; i++) {
340 if (selected[i] === data[box_index].submenu[label_index].value) { 339 if (selected[i] === data[box_index].submenu[label_index].value) {
341 console.log('dd', this.selectedData[`${data[box_index].value}`], selected) 340 selected.splice(i, 1)
342 this.selectedData[`${data[box_index].value}`] = selected.slice(1, 1) 341 this.selectedData[`${data[box_index].value}`] = selected
343 console.log('dd2', this.selectedData[`${data[box_index].value}`], selected)
344 } 342 }
345 } 343 }
346 } else { 344 } else {
347 this.activeMenuArr[page_index][box_index].push(label_index) 345 this.activeMenuArr[page_index][box_index].push(label_index)
348 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true 346 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
349 if (!selected) { 347 if (!selected) {
350 this.selectedData[`${data[box_index].value}`] = [] 348 this.selectedData[`${data[box_index].value}`] = []
351 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 349 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
352 } else { 350 } else {
351 // console.log('---', data, this.filterData, this.selectedData)
353 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 352 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
354 } 353 }
355 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index]) 354 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
356 console.log('---', data, this.filterData, this.selectedData)
357 } 355 }
358 this.$forceUpdate() 356 this.$forceUpdate()
359 }, 357 },
360 // 选中单选类label-UI状态 358 // 选中单选类label-UI状态
361 selectRadioLabel (page_index, box_index, label_index) { 359 selectRadioLabel (page_index, box_index, label_index) {
362 const activeIndex = this.activeMenuArr[page_index][box_index][0] 360 const activeIndex = this.activeMenuArr[page_index][box_index][0]
363 if (activeIndex == label_index) { 361 if (activeIndex == label_index) {
364 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false 362 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
365 this.activeMenuArr[page_index][box_index][0] = null 363 this.activeMenuArr[page_index][box_index][0] = null
366 } else { 364 } else {
367 if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) { 365 if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) {
368 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false 366 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
369 } 367 }
370 368
371 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true 369 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
372 this.activeMenuArr[page_index][box_index][0] = label_index 370 this.activeMenuArr[page_index][box_index][0] = label_index
373 } 371 }
374 this.$forceUpdate() 372 this.$forceUpdate()
375 }, 373 },
376 // 菜单开关 374 // 菜单开关
377 togglePage (index) { 375 togglePage (index) {
378 if (index == this.showPage) { 376 if (index === this.showPage) {
379 this.hidePageLayer(true) 377 this.hidePageLayer(true)
380 this.hideMask() 378 this.hideMask()
381 this.showPage = -1 379 this.showPage = -1
382 } else { 380 } else {
383 if (this.showPage > -1) { 381 if (this.showPage > -1) {
384 this.hidePageLayer(false) 382 this.hidePageLayer(false)
385 } 383 }
386 this.showPageLayer(index) 384 this.showPageLayer(index)
387 this.showMask() 385 this.showMask()
388 } 386 }
389 if (this.on[0] === 1) { 387 if (this.on[0] === 1) {
390 this.on[0] = 0 388 this.on[0] = 0
391 } 389 }
392 this.on[index] = 1 390 this.on[index] = 1
393 }, 391 },
394 showAll () { 392 showAll () {
395 this.on = [1, 0, 0, 0, 0] 393 this.on = [1, 0, 0, 0, 0]
396 // 输出 394 // 输出
397 this.$emit('search', { 395 this.$emit('search', {
398 index: {}, 396 index: {},
399 value: {}, 397 value: {},
400 on: this.on, 398 on: this.on,
401 selectedData: this.selectedData 399 selectedData: this.selectedData
402 }) 400 })
403 }, 401 },
404 // hide遮罩层 402 // hide遮罩层
405 hideMask () { 403 hideMask () {
406 this.isShowMask = false 404 this.isShowMask = false
407 setTimeout(() => { 405 setTimeout(() => {
408 this.maskVisibility = false 406 this.maskVisibility = false
409 }, 200) 407 }, 200)
410 }, 408 },
411 // show遮罩层 409 // show遮罩层
412 showMask () { 410 showMask () {
413 this.maskVisibility = true 411 this.maskVisibility = true
414 this.$nextTick(() => { 412 this.$nextTick(() => {
415 setTimeout(() => { 413 setTimeout(() => {
416 this.isShowMask = true 414 this.isShowMask = true
417 }, 0) 415 }, 0)
418 }) 416 })
419 }, 417 },
420 // hide菜单页 418 // hide菜单页
421 hidePageLayer (isAnimation) { 419 hidePageLayer (isAnimation) {
422 this.triangleDeg[this.showPage] = 0 420 this.triangleDeg[this.showPage] = 0
423 const tmpIndex = this.showPage 421 const tmpIndex = this.showPage
424 if (isAnimation) { 422 if (isAnimation) {
425 setTimeout(() => { 423 setTimeout(() => {
426 this.pageState.splice(tmpIndex, 1, false) 424 this.pageState.splice(tmpIndex, 1, false)
427 }, 200) 425 }, 200)
428 this.confirm() 426 this.confirm()
429 } else { 427 } else {
430 this.pageState.splice(tmpIndex, 1, false) 428 this.pageState.splice(tmpIndex, 1, false)
431 } 429 }
432 this.firstScrollInto = null 430 this.firstScrollInto = null
433 this.secondScrollInto = null 431 this.secondScrollInto = null
434 }, 432 },
435 confirm () { 433 confirm () {
436 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 434 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
437 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 435 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
438 436
439 // 对结果做一下处理 437 // 对结果做一下处理
440 index.forEach((item, i) => { 438 index.forEach((item, i) => {
441 if (typeof (item[0]) === 'object') { 439 if (typeof (item[0]) === 'object') {
442 // 针对筛选结果过一个排序 440 // 针对筛选结果过一个排序
443 item.forEach((s, j) => { 441 item.forEach((s, j) => {
444 if (s != null) { 442 if (s != null) {
445 s.sort((val1, val2) => { 443 s.sort((val1, val2) => {
446 return val1 - val2 444 return val1 - val2
447 }) 445 })
448 item[j] = s 446 item[j] = s
449 s.forEach((v, k) => { 447 s.forEach((v, k) => {
450 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value 448 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
451 if (this.subData[i].type == 'radio' && value[i][j][k] == null) { 449 if (this.subData[i].type == 'radio' && value[i][j][k] == null) {
452 value[i][j] = [] 450 value[i][j] = []
453 index[i][j] = [] 451 index[i][j] = []
454 } 452 }
455 }) 453 })
456 } 454 }
457 }) 455 })
458 } else { 456 } else {
459 let submenu = this.subData[i].submenu[item[0]] 457 let submenu = this.subData[i].submenu[item[0]]
460 value[i][0] = submenu && submenu.value 458 value[i][0] = submenu && submenu.value
461 if (value[i].length >= 2 && item[1] != null) { 459 if (value[i].length >= 2 && item[1] != null) {
462 if (submenu.submenu.length > 0) { 460 if (submenu.submenu.length > 0) {
463 submenu = submenu.submenu[item[1]] 461 submenu = submenu.submenu[item[1]]
464 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null 462 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
465 } else { 463 } else {
466 value[i][1] = null 464 value[i][1] = null
467 } 465 }
468 if (value[i].length >= 3 && item[2] != null) { 466 if (value[i].length >= 3 && item[2] != null) {
469 if (submenu.submenu.length > 0) { 467 if (submenu.submenu.length > 0) {
470 submenu = submenu.submenu[item[2]] 468 submenu = submenu.submenu[item[2]]
471 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null 469 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
472 } else { 470 } else {
473 value[i][2] = null 471 value[i][2] = null
474 } 472 }
475 } 473 }
476 } 474 }
477 } 475 }
478 index[i] = item 476 index[i] = item
479 }) 477 })
480 // 输出 478 // 输出
481 this.$emit('search', { 479 this.$emit('search', {
482 index: index, 480 index: index,
483 value: value, 481 value: value,
484 on: this.on, 482 on: this.on,
485 selectedData: this.selectedData 483 selectedData: this.selectedData
486 }) 484 })
487 }, 485 },
488 // show菜单页 486 // show菜单页
489 showPageLayer (index) { 487 showPageLayer (index) {
490 this.processPage(index) 488 this.processPage(index)
491 this.pageState.splice(index, 1, true) 489 this.pageState.splice(index, 1, true)
492 this.$nextTick(() => { 490 this.$nextTick(() => {
493 setTimeout(() => { 491 setTimeout(() => {
494 this.showPage = index 492 this.showPage = index
495 }, 0) 493 }, 0)
496 }) 494 })
497 this.triangleDeg[index] = 180 495 this.triangleDeg[index] = 180
498 }, 496 },
499 reloadActiveMenuArr () { 497 reloadActiveMenuArr () {
500 for (let i = 0; i < this.filterData.length; i++) { 498 for (let i = 0; i < this.filterData.length; i++) {
501 let tmpitem = this.filterData[i] 499 let tmpitem = this.filterData[i]
502 const tmpArr = this.processActive(tmpitem) 500 const tmpArr = this.processActive(tmpitem)
503 tmpitem = this.processSubMenu(tmpitem) 501 tmpitem = this.processSubMenu(tmpitem)
504 if (this.activeMenuArr[i].length != tmpArr.length) { 502 if (this.activeMenuArr[i].length != tmpArr.length) {
505 this.filterData[i] = tmpitem 503 this.filterData[i] = tmpitem
506 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 504 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
507 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 505 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
508 } 506 }
509 } 507 }
510 this.subData = this.filterData 508 this.subData = this.filterData
511 this.$forceUpdate() 509 this.$forceUpdate()
512 }, 510 },
513 processPage (index) { 511 processPage (index) {
514 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 512 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
515 this.reloadActiveMenuArr() 513 this.reloadActiveMenuArr()
516 // 重置UI控制数组 514 // 重置UI控制数组
517 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) 515 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
518 if (this.menu[index].type === 'filter') { 516 if (this.menu[index].type === 'filter') {
519 // 重载筛选页选中状态 517 // 重载筛选页选中状态
520 const level = this.shadowActiveMenuArr[index].length 518 const level = this.shadowActiveMenuArr[index].length
521 for (let i = 0; i < level; i++) { 519 for (let i = 0; i < level; i++) {
522 const box = this.subData[index].submenu[i].submenu 520 const box = this.subData[index].submenu[i].submenu
523 for (let j = 0; j < box.length; j++) { 521 for (let j = 0; j < box.length; j++) {
524 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 522 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
525 this.subData[index].submenu[i].submenu[j].selected = true 523 this.subData[index].submenu[i].submenu[j].selected = true
526 } else { 524 } else {
527 this.subData[index].submenu[i].submenu[j].selected = false 525 this.subData[index].submenu[i].submenu[j].selected = false
528 } 526 }
529 } 527 }
530 } 528 }
531 } else if (this.menu[index].type === 'hierarchy') { 529 } else if (this.menu[index].type === 'hierarchy') {
532 this.$nextTick(() => { 530 this.$nextTick(() => {
533 setTimeout(() => { 531 setTimeout(() => {
534 // 滚动到选中项 532 // 滚动到选中项
535 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) 533 this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
536 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) 534 this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
537 }, 0) 535 }, 0)
538 }) 536 })
539 } else if (this.menu[index].type === 'radio') { 537 } else if (this.menu[index].type === 'radio') {
540 // 重载筛选页选中状态 538 // 重载筛选页选中状态
541 const level = this.shadowActiveMenuArr[index].length 539 const level = this.shadowActiveMenuArr[index].length
542 for (let i = 0; i < level; i++) { 540 for (let i = 0; i < level; i++) {
543 const box = this.subData[index].submenu[i].submenu 541 const box = this.subData[index].submenu[i].submenu
544 for (let j = 0; j < box.length; j++) { 542 for (let j = 0; j < box.length; j++) {
545 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 543 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
546 this.subData[index].submenu[i].submenu[j].selected = true 544 this.subData[index].submenu[i].submenu[j].selected = true
547 } else { 545 } else {
548 this.subData[index].submenu[i].submenu[j].selected = false 546 this.subData[index].submenu[i].submenu[j].selected = false
549 } 547 }
550 } 548 }
551 } 549 }
552 } 550 }
553 }, 551 },
554 processActive (tmpitem) { 552 processActive (tmpitem) {
555 const tmpArr = [] 553 const tmpArr = []
556 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { 554 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
557 let level = this.getMaxFloor(tmpitem.submenu) 555 let level = this.getMaxFloor(tmpitem.submenu)
558 while (level > 0) { 556 while (level > 0) {
559 tmpArr.push(0) 557 tmpArr.push(0)
560 level-- 558 level--
561 } 559 }
562 } else if (tmpitem.type === 'filter') { 560 } else if (tmpitem.type === 'filter') {
563 let level = tmpitem.submenu.length 561 let level = tmpitem.submenu.length
564 while (level > 0) { 562 while (level > 0) {
565 tmpArr.push([]) 563 tmpArr.push([])
566 level-- 564 level--
567 } 565 }
568 } else if (tmpitem.type === 'radio') { 566 } else if (tmpitem.type === 'radio') {
569 let level = tmpitem.submenu.length 567 let level = tmpitem.submenu.length
570 while (level > 0) { 568 while (level > 0) {
571 tmpArr.push([]) 569 tmpArr.push([])
572 level-- 570 level--
573 } 571 }
574 } 572 }
575 return tmpArr 573 return tmpArr
576 }, 574 },
577 processSubMenu (menu) { 575 processSubMenu (menu) {
578 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 576 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
579 for (let i = 0; i < menu.submenu.length; i++) { 577 for (let i = 0; i < menu.submenu.length; i++) {
580 menu.submenu[i] = this.processSubMenu(menu.submenu[i]) 578 menu.submenu[i] = this.processSubMenu(menu.submenu[i])
581 } 579 }
582 } else { 580 } else {
583 menu.submenu = [] 581 menu.submenu = []
584 } 582 }
585 return menu 583 return menu
586 }, 584 },
587 // 计算菜单层级 585 // 计算菜单层级
588 getMaxFloor (treeData) { 586 getMaxFloor (treeData) {
589 const floor = 0 587 const floor = 0
590 let max = 0 588 let max = 0
591 function each (data, floor) { 589 function each (data, floor) {
592 data.forEach(e => { 590 data.forEach(e => {
593 max = floor > max ? floor : max 591 max = floor > max ? floor : max
594 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 592 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
595 each(e.submenu, floor + 1) 593 each(e.submenu, floor + 1)
596 } 594 }
597 }) 595 })
598 } 596 }
599 each(treeData, 1) 597 each(treeData, 1)
600 598
601 return max 599 return max
602 }, 600 },
603 discard () { 601 discard () {
604 602
605 } 603 }
606 } 604 }
607 } 605 }
608 </script> 606 </script>
609 <style lang="scss"> 607 <style lang="scss">
610 .HMfilterDropdown { 608 .HMfilterDropdown {
611 flex-shrink: 0; 609 flex-shrink: 0;
612 width: 100%; 610 width: 100%;
613 height: 44px; 611 height: 44px;
614 position: fixed; 612 position: fixed;
615 z-index: 997; 613 z-index: 997;
616 flex-wrap: nowrap; 614 flex-wrap: nowrap;
617 display: flex; 615 display: flex;
618 flex-direction: row; 616 flex-direction: row;
619 top: var(--window-top); 617 top: var(--window-top);
620 left: 0; 618 left: 0;
621 view { 619 view {
622 display: flex; 620 display: flex;
623 flex-wrap: nowrap; 621 flex-wrap: nowrap;
624 } 622 }
625 } 623 }
626 .region { 624 .region {
627 flex: 1; 625 flex: 1;
628 height: 44px; 626 height: 44px;
629 } 627 }
630 .nav { 628 .nav {
631 width: 100%; 629 width: 100%;
632 height: 44px; 630 height: 44px;
633 z-index: 12; 631 z-index: 12;
634 background-color: #ffffff; 632 background-color: #ffffff;
635 flex-direction: row; 633 flex-direction: row;
636 .first-menu { 634 .first-menu {
637 width: 100%; 635 width: 100%;
638 font-size: 16px; 636 font-size: 16px;
639 color: #333333; 637 color: #333333;
640 flex-direction: row; 638 flex-direction: row;
641 align-items: center; 639 align-items: center;
642 justify-content: center; 640 justify-content: center;
643 transition: color 0.2s linear; 641 transition: color 0.2s linear;
644 642
645 &.on { 643 &.on {
646 color: #ff6b4a; 644 color: #ff6b4a;
647 645
648 .iconfont { 646 .iconfont {
649 color: #ff6b4a; 647 color: #ff6b4a;
650 } 648 }
651 } 649 }
652 .name { 650 .name {
653 height: 20px; 651 height: 20px;
654 // font-size: 16px; 652 // font-size: 16px;
655 text-align: center; 653 text-align: center;
656 text-overflow: clip; 654 text-overflow: clip;
657 overflow: hidden; 655 overflow: hidden;
658 } 656 }
659 .iconfont { 657 .iconfont {
660 width: 13px; 658 width: 13px;
661 height: 13px; 659 height: 13px;
662 line-height: 16px; 660 line-height: 16px;
663 align-items: center; 661 align-items: center;
664 justify-content: center; 662 justify-content: center;
665 transition: transform 0.2s linear, color 0.2s linear; 663 transition: transform 0.2s linear, color 0.2s linear;
666 } 664 }
667 } 665 }
668 } 666 }
669 .sub-menu-class { 667 .sub-menu-class {
670 width: 100%; 668 width: 100%;
671 position: absolute; 669 position: absolute;
672 left: 0; 670 left: 0;
673 transform: translate3d(0, -100%, 0); 671 transform: translate3d(0, -100%, 0);
674 max-height: 345px; 672 max-height: 345px;
675 background-color: #ffffff; 673 background-color: #ffffff;
676 z-index: 11; 674 z-index: 11;
677 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 675 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
678 overflow: hidden; 676 overflow: hidden;
679 flex-direction: row; 677 flex-direction: row;
680 transition: transform 0.15s linear; 678 transition: transform 0.15s linear;
681 &.hide { 679 &.hide {
682 display: none; 680 display: none;
683 } 681 }
684 682
685 &.show { 683 &.show {
686 transform: translate3d(0, calc(44px + 1rpx), 0); 684 transform: translate3d(0, calc(44px + 1rpx), 0);
687 } 685 }
688 } 686 }
689 .sub-menu-list { 687 .sub-menu-list {
690 width: 100%; 688 width: 100%;
691 height: 345px; 689 height: 345px;
692 flex-direction: column; 690 flex-direction: column;
693 .sub-menu { 691 .sub-menu {
694 min-height: 44px; 692 min-height: 44px;
695 font-size: 13px; 693 font-size: 13px;
696 flex-direction: column; 694 flex-direction: column;
697 padding-right: 15px; 695 padding-right: 15px;
698 > .menu-name { 696 > .menu-name {
699 height: 44px; 697 height: 44px;
700 flex-direction: row; 698 flex-direction: row;
701 align-items: center; 699 align-items: center;
702 justify-content: space-between; 700 justify-content: space-between;
703 > .iconfont { 701 > .iconfont {
704 display: none; 702 display: none;
705 font-size: 18px; 703 font-size: 18px;
706 color: #ff6b4a; 704 color: #ff6b4a;
707 } 705 }
708 } 706 }
709 } 707 }
710 &.first { 708 &.first {
711 flex-shrink: 0; 709 flex-shrink: 0;
712 width: 236rpx; 710 width: 236rpx;
713 background-color: #f0f0f0; 711 background-color: #f0f0f0;
714 .sub-menu { 712 .sub-menu {
715 padding-left: 15px; 713 padding-left: 15px;
716 714
717 &.on { 715 &.on {
718 background-color: #fff; 716 background-color: #fff;
719 } 717 }
720 } 718 }
721 } 719 }
722 &.alone { 720 &.alone {
723 max-height: 345px; 721 max-height: 345px;
724 min-height: 60rpx; 722 min-height: 60rpx;
725 height: auto; 723 height: auto;
726 .sub-menu { 724 .sub-menu {
727 min-height: calc(44px - 1rpx); 725 min-height: calc(44px - 1rpx);
728 margin-left: 15px; 726 margin-left: 15px;
729 border-bottom: solid 1rpx #e5e5e5; 727 border-bottom: solid 1rpx #e5e5e5;
730 728
731 &.on { 729 &.on {
732 color: #ff6b4a; 730 color: #ff6b4a;
733 731
734 > .menu-name { 732 > .menu-name {
735 > .iconfont { 733 > .iconfont {
736 display: block; 734 display: block;
737 } 735 }
738 } 736 }
739 } 737 }
740 } 738 }
741 } 739 }
742 &.not-first { 740 &.not-first {
743 .sub-menu { 741 .sub-menu {
744 min-height: calc(44px - 1rpx); 742 min-height: calc(44px - 1rpx);
745 margin-left: 15px; 743 margin-left: 15px;
746 border-bottom: solid 1rpx #e5e5e5; 744 border-bottom: solid 1rpx #e5e5e5;
747 > .menu-name { 745 > .menu-name {
748 height: calc(44px - 1rpx); 746 height: calc(44px - 1rpx);
749 > .iconfont { 747 > .iconfont {
750 display: none; 748 display: none;
751 font-size: 18px; 749 font-size: 18px;
752 color: #ff6b4a; 750 color: #ff6b4a;
753 } 751 }
754 } 752 }
755 &.on { 753 &.on {
756 color: #ff6b4a; 754 color: #ff6b4a;
757 > .menu-name { 755 > .menu-name {
758 > .iconfont { 756 > .iconfont {
759 display: block; 757 display: block;
760 } 758 }
761 } 759 }
762 } 760 }
763 .more-sub-menu { 761 .more-sub-menu {
764 flex-direction: row; 762 flex-direction: row;
765 flex-wrap: wrap; 763 flex-wrap: wrap;
766 padding-bottom: 9px; 764 padding-bottom: 9px;
767 > text { 765 > text {
768 height: 30px; 766 height: 30px;
769 border-radius: 3px; 767 border-radius: 3px;
770 background-color: #f5f5f5; 768 background-color: #f5f5f5;
771 color: #9b9b9b; 769 color: #9b9b9b;
772 margin-bottom: 6px; 770 margin-bottom: 6px;
773 margin-right: 6px; 771 margin-right: 6px;
774 text-align: center; 772 text-align: center;
775 line-height: 30px; 773 line-height: 30px;
776 border: solid #f5f5f5 1rpx; 774 border: solid #f5f5f5 1rpx;
777 flex: 0 0 calc(33.33% - 6px); 775 flex: 0 0 calc(33.33% - 6px);
778 overflow: hidden; 776 overflow: hidden;
779 font-size: 12px; 777 font-size: 12px;
780 &:nth-child(3n) { 778 &:nth-child(3n) {
781 margin-right: 0; 779 margin-right: 0;
782 } 780 }
783 &.on { 781 &.on {
784 border-color: #f6c8ac; 782 border-color: #f6c8ac;
785 color: #ff6b4a; 783 color: #ff6b4a;
786 } 784 }
787 .iconfont { 785 .iconfont {
788 color: #9b9b9b; 786 color: #9b9b9b;
789 } 787 }
790 } 788 }
791 } 789 }
792 } 790 }
793 } 791 }
794 } 792 }
795 .filter { 793 .filter {
796 width: 100%; 794 width: 100%;
797 height: 345px; 795 height: 345px;
798 display: flex; 796 display: flex;
799 flex-direction: column; 797 flex-direction: column;
800 justify-content: space-between; 798 justify-content: space-between;
801 align-items: center; 799 align-items: center;
802 .menu-box { 800 .menu-box {
803 width: 698rpx; 801 width: 698rpx;
804 height: calc(345px - 75px); 802 height: calc(345px - 75px);
805 flex-shrink: 1; 803 flex-shrink: 1;
806 .box { 804 .box {
807 width: 100%; 805 width: 100%;
808 margin-top: 16px; 806 margin-top: 16px;
809 flex-direction: column; 807 flex-direction: column;
810 .title { 808 .title {
811 width: 100%; 809 width: 100%;
812 font-size: 13px; 810 font-size: 13px;
813 color: #888; 811 color: #888;
814 } 812 }
815 .labels { 813 .labels {
816 flex-direction: row; 814 flex-direction: row;
817 flex-wrap: wrap; 815 flex-wrap: wrap;
818 .on { 816 .on {
819 border-color: #ff6b4a; 817 border-color: #ff6b4a;
820 background-color: #ff6b4a; 818 background-color: #ff6b4a;
821 color: #fff; 819 color: #fff;
822 } 820 }
823 > view { 821 > view {
824 width: 148rpx; 822 width: 148rpx;
825 height: 30px; 823 height: 30px;
826 border: solid 1rpx #adadad; 824 border: solid 1rpx #adadad;
827 border-radius: 2px; 825 border-radius: 2px;
828 margin-right: 15px; 826 margin-right: 15px;
829 margin-top: 8px; 827 margin-top: 8px;
830 padding: 0 16rpx; 828 padding: 0 16rpx;
831 box-sizing: border-box; 829 box-sizing: border-box;
832 font-size: 12px; 830 font-size: 12px;
833 flex-direction: row; 831 flex-direction: row;
834 justify-content: center; 832 justify-content: center;
835 align-items: center; 833 align-items: center;
836 overflow: hidden; 834 overflow: hidden;
837 white-space: nowrap; 835 white-space: nowrap;
838 text-overflow: ellipsis; 836 text-overflow: ellipsis;
839 &:nth-child(4n) { 837 &:nth-child(4n) {
840 margin-right: 0; 838 margin-right: 0;
841 } 839 }
842 } 840 }
843 } 841 }
844 } 842 }
845 } 843 }
846 .btn-box { 844 .btn-box {
847 flex-shrink: 0; 845 flex-shrink: 0;
848 width: 100%; 846 width: 100%;
849 height: 75px; 847 height: 75px;
850 flex-direction: row !important; 848 flex-direction: row !important;
851 align-items: center; 849 align-items: center;
852 justify-content: space-between; 850 justify-content: space-between;
853 > view { 851 > view {
854 width: 320rpx; 852 width: 320rpx;
855 height: 40px; 853 height: 40px;
856 border-radius: 40px; 854 border-radius: 40px;
857 border: solid 1rpx #ff6b4a; 855 border: solid 1rpx #ff6b4a;
858 align-items: center; 856 align-items: center;
859 justify-content: center; 857 justify-content: center;
860 } 858 }
861 .reset { 859 .reset {
862 color: #ff6b4a; 860 color: #ff6b4a;
863 } 861 }
864 .submit { 862 .submit {
865 color: #fff; 863 color: #fff;
866 background-color: #ff6b4a; 864 background-color: #ff6b4a;
867 } 865 }
868 } 866 }
869 } 867 }
870 .mask { 868 .mask {
871 z-index: 10; 869 z-index: 10;
872 position: fixed; 870 position: fixed;
873 top: 0; 871 top: 0;
874 left: 0; 872 left: 0;
875 right: 0; 873 right: 0;
876 bottom: 0; 874 bottom: 0;
877 background-color: rgba(0, 0, 0, 0); 875 background-color: rgba(0, 0, 0, 0);
878 transition: background-color 0.15s linear; 876 transition: background-color 0.15s linear;
879 &.show { 877 &.show {
880 background-color: rgba(0, 0, 0, 0.5); 878 background-color: rgba(0, 0, 0, 0.5);
881 } 879 }
882 &.hide { 880 &.hide {
883 display: none; 881 display: none;
884 } 882 }
885 } 883 }
886 /* 字体图标 */ 884 /* 字体图标 */
887 @font-face { 885 @font-face {
888 font-family: "HM-FD-font"; 886 font-family: "HM-FD-font";
889 src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA="); 887 src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=");
890 } 888 }
891 .iconfont { 889 .iconfont {
892 font-family: "HM-FD-font" !important; 890 font-family: "HM-FD-font" !important;
893 font-size: 13px; 891 font-size: 13px;
894 font-style: normal; 892 font-style: normal;
895 color: #757575; 893 color: #757575;
896 &.triangle { 894 &.triangle {
897 &:before { 895 &:before {
898 content: "\e65a"; 896 content: "\e65a";
899 } 897 }
900 } 898 }
901 &.selected { 899 &.selected {
902 &:before { 900 &:before {
903 content: "\e607"; 901 content: "\e607";
904 } 902 }
905 } 903 }
906 } 904 }
907 </style> 905 </style>
src/pages/index/index.vue
Diff comments   View file @4671286
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon 6 <icon
7 class="searchIcon" 7 class="searchIcon"
8 type="search" 8 type="search"
9 size="14" 9 size="14"
10 ></icon> 10 ></icon>
11 <input 11 <input
12 v-model="searchText" 12 v-model="searchText"
13 class="searchIpt" 13 class="searchIpt"
14 placeholder="老花镜" 14 placeholder="老花镜"
15 confirm-type="search" 15 confirm-type="search"
16 @blur="searchKey" 16 @blur="searchKey"
17 /> 17 />
18 </view> 18 </view>
19 19
20 <!-- 筛选栏--> 20 <!-- 筛选栏-->
21 <!-- <view class="screenBar"> 21 <!-- <view class="screenBar">
22 <view 22 <view
23 v-for="item in screenItems" 23 v-for="item in screenItems"
24 :key="item.current" 24 :key="item.current"
25 @click="onClickItem(item.current)" 25 @click="onClickItem(item.current)"
26 > 26 >
27 <view 27 <view
28 class="screenItem" 28 class="screenItem"
29 v-bind:class="{ active: current === item.current }" 29 v-bind:class="{ active: current === item.current }"
30 v-if="item.current === 2" 30 v-if="item.current === 2"
31 @click="dropDown" 31 @click="dropDown"
32 > 32 >
33 {{ item.text }} 33 {{ item.text }}
34 <icon 34 <icon
35 type="info" 35 type="info"
36 size="14" 36 size="14"
37 ></icon> 37 ></icon>
38 </view> 38 </view>
39 <view 39 <view
40 class="screenItem" 40 class="screenItem"
41 v-bind:class="{ active: current === item.current }" 41 v-bind:class="{ active: current === item.current }"
42 v-if="item.current === 4" 42 v-if="item.current === 4"
43 @click="showDrawer('showRight')" 43 @click="showDrawer('showRight')"
44 > 44 >
45 {{ item.text }} 45 {{ item.text }}
46 <icon 46 <icon
47 type="info" 47 type="info"
48 size="14" 48 size="14"
49 ></icon> 49 ></icon>
50 </view> 50 </view>
51 <view v-if="item.current !== 2&&item.current!==4"> 51 <view v-if="item.current !== 2&&item.current!==4">
52 <view 52 <view
53 class="screenItem" 53 class="screenItem"
54 v-bind:class="{ active: current === item.current }" 54 v-bind:class="{ active: current === item.current }"
55 >{{ item.text }}</view> 55 >{{ item.text }}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> --> 58 </view> -->
59 </view> 59 </view>
60 <Uni-drawer 60 <Uni-drawer
61 ref="showRight" 61 ref="showRight"
62 mask="true" 62 mask="true"
63 maskClick="true" 63 maskClick="true"
64 mode="right" 64 mode="right"
65 :width="320" 65 :width="320"
66 @change="change($event,'showRight')" 66 @change="change($event,'showRight')"
67 > 67 >
68 <view class="close"> 68 <view class="close">
69 <view @click="closeDrawer('showRight')"> 69 <view @click="closeDrawer('showRight')">
70 <text class="word-btn-white">关闭</text> 70 <text class="word-btn-white">关闭</text>
71 </view> 71 </view>
72 </view> 72 </view>
73 </Uni-drawer> 73 </Uni-drawer>
74 74
75 <!-- 筛选菜单--> 75 <!-- 筛选菜单-->
76 <view class="content-wrap"> 76 <view class="content-wrap">
77 <view> 77 <view>
78 <HMfilterDropdown 78 <HMfilterDropdown
79 :filterData="categoryList" 79 :filterData="categoryList"
80 :defaultSelected="filterDropdownValue" 80 :defaultSelected="filterDropdownValue"
81 :updateMenuName="true" 81 :updateMenuName="true"
82 @search="search" 82 @search="search"
83 @getList="getList" 83 @getList="getList"
84 data-format="Object" 84 data-format="Object"
85 ></HMfilterDropdown> 85 ></HMfilterDropdown>
86 <!-- 商品列表 --> 86 <!-- 商品列表 -->
87 <view class="goods-list"> 87 <view class="goods-list">
88 <view class="product-list"> 88 <view class="product-list">
89 <view 89 <view
90 class="product" 90 class="product"
91 v-for="(goods) in goodsList" 91 v-for="(goods) in goodsList"
92 :key="goods.id" 92 :key="goods.id"
93 > 93 >
94 <Card :goods="goods"></Card> 94 <Card :goods="goods"></Card>
95 </view> 95 </view>
96 </view> 96 </view>
97 <view class="loading-text">{{loadingText}}</view> 97 <view class="loading-text">{{loadingText}}</view>
98 </view> 98 </view>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 </template> 102 </template>
103 103
104 <script> 104 <script>
105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
106 import Card from '@/components/CommodityCard/CommodityCard.vue' 106 import Card from '@/components/CommodityCard/CommodityCard.vue'
107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
108 import store from '@/store' 108 import store from '@/store'
109 109
110 export default { 110 export default {
111 components: { 111 components: {
112 UniDrawer: UniDrawer, 112 UniDrawer: UniDrawer,
113 HMfilterDropdown: HMfilterDropdown, 113 HMfilterDropdown: HMfilterDropdown,
114 Card: Card 114 Card: Card
115 }, 115 },
116 data () { 116 data () {
117 return { 117 return {
118 indexArr: '', 118 indexArr: '',
119 valueArr: '', 119 valueArr: '',
120 loadingText: '~~到底了~~', 120 loadingText: '~~到底了~~',
121 filterDropdownValue: [], 121 filterDropdownValue: [],
122 filterData: [], 122 filterData: [],
123 searchText: '' 123 searchText: ''
124 } 124 }
125 }, 125 },
126 computed: { 126 computed: {
127 goodsList () { 127 goodsList () {
128 // 也可以从 getters 获取 128 // 也可以从 getters 获取
129 return this.$store.state.index.list 129 return this.$store.state.index.list
130 }, 130 },
131 categoryList () { 131 categoryList () {
132 return this.$store.state.index.categoryList 132 return this.$store.state.index.categoryList
133 } 133 }
134 }, 134 },
135 filters: { 135 filters: {
136 outData (value) { 136 outData (value) {
137 return JSON.stringify(value) 137 return JSON.stringify(value)
138 } 138 }
139 }, 139 },
140 onLoad () { 140 onLoad () {
141 store.dispatch('index/category') 141 store.dispatch('index/category')
142 // this.getList(); 142 // this.getList();
143 store.dispatch('index/list') 143 store.dispatch('index/list')
144 }, 144 },
145 methods: { 145 methods: {
146 showDrawer (e) { 146 showDrawer (e) {
147 this.$refs[e].open() 147 this.$refs[e].open()
148 }, 148 },
149 getList () { 149 getList () {
150 store.dispatch('index/list') 150 store.dispatch('index/list')
151 }, 151 },
152 // search(params) { 152 // search(params) {
153 // this.$store.index. 153 // this.$store.index.
154 // }, 154 // },
155 closeDrawer (e) { 155 closeDrawer (e) {
156 this.$refs[e].close() 156 this.$refs[e].close()
157 }, 157 },
158 change (e, type) { 158 change (e, type) {
159 this[type] = e 159 this[type] = e
160 }, 160 },
161 onClickItem (e) { 161 onClickItem (e) {
162 if (this.current !== e) { 162 if (this.current !== e) {
163 this.current = e 163 this.current = e
164 } 164 }
165 }, 165 },
166 dropDown () { 166 dropDown () {
167 console.log('下拉') 167 console.log('下拉')
168 }, 168 },
169 searchKey (e) { 169 searchKey (e) {
170 const { value: keyword } = e.detail 170 const { value: keyword } = e.detail
171 this.keyWords = keyword 171 this.keyWords = keyword
172 store.dispatch('index/search', { 172 store.dispatch('index/search', {
173 params: {}, 173 params: {},
174 keyword 174 keyword
175 }) 175 })
176 }, 176 },
177 // 接收菜单结果 177 // 接收菜单结果
178 search (e) { 178 search (e) {
179 const { on, value, selectedData } = e 179 const { on, value, selectedData } = e
180 let params = {} 180 let params = {}
181 console.log('dddd-1', params, selectedData)
182 for (const key in selectedData) {
183 if (selectedData.hasOwnProperty(key)) {
184 selectedData[key] = selectedData[key].toString()
185 }
186 }
187 console.log('dddd-2', params, selectedData)
181 if (on[0] === 1) { 188 if (on[0] === 1) {
182 // 若点击全部 189 // 若点击全部
183 this.searchText = '' 190 this.searchText = ''
184 store.dispatch('index/list') 191 store.dispatch('index/list')
185 } else { 192 } else {
186 for (let i = 1; i <= on.length; i++) { // on[0]是全部 193 for (let i = 1; i <= on.length; i++) { // on[0]是全部
187 if (on[i] === 1) { // 若该选项被选中 194 if (on[i] === 1) { // 若该选项被选中
188 if (this.categoryList[i].value === 'filter') { 195 if (this.categoryList[i].value === 'filter') {
189 console.log('dddd', params, selectedData)
190 params = { 196 params = {
191 ...selectedData, 197 ...selectedData,
192 ...params 198 ...params
193 } 199 }
194 } else { 200 } else {
195 params[`${this.categoryList[i].value}`] = value[i][0] 201 params[`${this.categoryList[i].value}`] = value[i][0]
196 } 202 }
197 } 203 }
198 } 204 }
199 store.dispatch('index/search', { 205 store.dispatch('index/search', {
200 params, 206 params,
201 keyword: this.keyWords 207 keyword: this.keyWords
202 }) 208 })
203 } 209 }
204 } 210 }
205 } 211 }
206 212
207 } 213 }
208 </script> 214 </script>
209 215
210 <style lang="scss"> 216 <style lang="scss">
211 .content { 217 .content {
212 display: flex; 218 display: flex;
213 flex-direction: column; 219 flex-direction: column;
214 align-items: center; 220 align-items: center;
215 justify-content: center; 221 justify-content: center;
216 background-color: #f7f6f6; 222 background-color: #f7f6f6;
217 } 223 }
218 .header { 224 .header {
219 display: flex; 225 display: flex;
220 flex-direction: column; 226 flex-direction: column;
221 align-items: center; 227 align-items: center;
222 justify-content: center; 228 justify-content: center;
223 background-color: #f7f6f6; 229 background-color: #f7f6f6;
224 height: 178rpx; 230 height: 178rpx;
225 width: 100%; 231 width: 100%;
226 z-index: 999; 232 z-index: 999;
227 position: fixed; 233 position: fixed;
228 top: 0; 234 top: 0;
229 left: 0; 235 left: 0;
230 } 236 }
231 .searchBar { 237 .searchBar {
232 width: 670rpx; 238 width: 670rpx;
233 display: flex; 239 display: flex;
234 justify-content: center; 240 justify-content: center;
235 align-items: center; 241 align-items: center;
236 box-sizing: border-box; 242 box-sizing: border-box;
237 padding: 0rpx 16rpx; 243 padding: 0rpx 16rpx;
238 border: 1px solid #ff6b4a; 244 border: 1px solid #ff6b4a;
239 border-radius: 8rpx; 245 border-radius: 8rpx;
240 background-color: #ffffff; 246 background-color: #ffffff;
241 } 247 }
242 248
243 .searchIpt { 249 .searchIpt {
244 height: 68rpx; 250 height: 68rpx;
245 width: 670rpx; 251 width: 670rpx;
246 padding: 16rpx; 252 padding: 16rpx;
247 font-size: 28rpx; 253 font-size: 28rpx;
248 box-sizing: border-box; 254 box-sizing: border-box;
249 } 255 }
250 .screenBar { 256 .screenBar {
251 width: 670rpx; 257 width: 670rpx;
252 height: 110rpx; 258 height: 110rpx;
253 display: flex; 259 display: flex;
254 flex-direction: row; 260 flex-direction: row;
255 justify-content: space-between; 261 justify-content: space-between;
256 align-items: center; 262 align-items: center;
257 color: #333333; 263 color: #333333;
258 font-size: 32rpx; 264 font-size: 32rpx;
259 } 265 }
260 .active { 266 .active {
261 color: #ff6b4a; 267 color: #ff6b4a;
262 } 268 }
263 .screenItem { 269 .screenItem {
264 display: flex; 270 display: flex;
265 justify-content: center; 271 justify-content: center;
266 align-items: center; 272 align-items: center;
267 } 273 }
268 .content-wrap { 274 .content-wrap {
269 width: 100%; 275 width: 100%;
270 background-color: #ffffff; 276 background-color: #ffffff;
271 } 277 }
272 278
273 .HMfilterDropdown { 279 .HMfilterDropdown {
274 top: 178rpx !important; 280 top: 178rpx !important;
275 } 281 }
276 282
277 .goods-list { 283 .goods-list {
278 padding-top: 286rpx; 284 padding-top: 286rpx;
279 .loading-text { 285 .loading-text {
280 width: 100%; 286 width: 100%;
281 display: flex; 287 display: flex;
282 justify-content: center; 288 justify-content: center;
283 align-items: center; 289 align-items: center;
284 height: 30px; 290 height: 30px;
285 color: #979797; 291 color: #979797;
286 font-size: 12px; 292 font-size: 12px;
287 } 293 }
288 .product-list { 294 .product-list {
289 width: 92%; 295 width: 92%;
290 padding: 0 4% 3vw 4%; 296 padding: 0 4% 3vw 4%;
291 display: flex; 297 display: flex;
292 justify-content: space-between; 298 justify-content: space-between;
293 flex-wrap: wrap; 299 flex-wrap: wrap;
294 .product { 300 .product {
295 width: 48%; 301 width: 48%;
296 margin: 0 0 20rpx 0; 302 margin: 0 0 20rpx 0;
297 background: #ffffff; 303 background: #ffffff;
298 border: 1px solid #f2f2f2; 304 border: 1px solid #f2f2f2;
299 } 305 }
300 } 306 }
301 } 307 }
302 </style> 308 </style>