吉鹏 / gulu-vue

Download as
Browse Code »

Commit baabad2e5a1d26e8b4b6deed3d8b16cd8705490e

Authored by 范牧
1 parent 2a95c67ccc
Exists in master

搜索bug修改

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