Commit e40e790a301df8a61508cd5078a65833ee7eb81b
1 parent
e9b87ccef5
Exists in
master
首页bug修改
Showing
8 changed files
with
1304 additions
and
20 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
src/components/HMFilterDropdown/HMFilterDropdown.vue
... | ... | @@ -12,7 +12,7 @@ |
12 | 12 | <view |
13 | 13 | class="first-menu" |
14 | 14 | :class="{'on':showPage==index || on[index] === 1}" |
15 | - @tap="togglePage(index)" | |
15 | + @tap="togglePage(index, false)" | |
16 | 16 | v-if="!item.isNoPull" |
17 | 17 | > |
18 | 18 | <text class="name">{{item.name}}</text> |
... | ... | @@ -372,14 +372,14 @@ export default { |
372 | 372 | this.$forceUpdate() |
373 | 373 | }, |
374 | 374 | // 菜单开关 |
375 | - togglePage (index) { | |
375 | + togglePage (index, isRequest = true) { | |
376 | 376 | if (index === this.showPage) { |
377 | - this.hidePageLayer(true) | |
377 | + this.hidePageLayer(true, isRequest) | |
378 | 378 | this.hideMask() |
379 | 379 | this.showPage = -1 |
380 | 380 | } else { |
381 | 381 | if (this.showPage > -1) { |
382 | - this.hidePageLayer(false) | |
382 | + this.hidePageLayer(false, isRequest) | |
383 | 383 | } |
384 | 384 | this.showPageLayer(index) |
385 | 385 | this.showMask() |
... | ... | @@ -416,14 +416,17 @@ export default { |
416 | 416 | }) |
417 | 417 | }, |
418 | 418 | // hide菜单页 |
419 | - hidePageLayer (isAnimation) { | |
419 | + hidePageLayer (isAnimation,isRequset = true) { | |
420 | 420 | this.triangleDeg[this.showPage] = 0 |
421 | 421 | const tmpIndex = this.showPage |
422 | 422 | if (isAnimation) { |
423 | 423 | setTimeout(() => { |
424 | 424 | this.pageState.splice(tmpIndex, 1, false) |
425 | - }, 200) | |
426 | - this.confirm() | |
425 | + }, 200) | |
426 | + // debugger | |
427 | + if(isRequset){ | |
428 | + this.confirm() | |
429 | + } | |
427 | 430 | } else { |
428 | 431 | this.pageState.splice(tmpIndex, 1, false) |
429 | 432 | } |
... | ... | @@ -812,20 +815,21 @@ export default { |
812 | 815 | } |
813 | 816 | .labels { |
814 | 817 | flex-direction: row; |
815 | - flex-wrap: wrap; | |
818 | + flex-wrap: wrap; | |
819 | + justify-content: space-between; | |
816 | 820 | .on { |
817 | 821 | border-color: #ff6b4a; |
818 | 822 | background-color: #ff6b4a; |
819 | 823 | color: #fff; |
820 | 824 | } |
821 | 825 | > view { |
822 | - width: 148rpx; | |
826 | + width: 220rpx; | |
823 | 827 | height: 30px; |
824 | 828 | border: solid 1rpx #adadad; |
825 | 829 | border-radius: 2px; |
826 | - margin-right: 15px; | |
830 | + margin-right: 2px; | |
827 | 831 | margin-top: 8px; |
828 | - padding: 0 16rpx; | |
832 | + padding: 0 10rpx; | |
829 | 833 | box-sizing: border-box; |
830 | 834 | font-size: 12px; |
831 | 835 | flex-direction: row; | ... | ... |
src/components/sl-filter/filter-view.vue
... | ... | @@ -0,0 +1,475 @@ |
1 | +<template> | |
2 | + | |
3 | + <view> | |
4 | + <view style="padding: 0px 0px;"> | |
5 | + <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index"> | |
6 | + <view v-if="item.isSort"> | |
7 | + <view class="filter-content-list"> | |
8 | + <view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'" | |
9 | + :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)"> | |
10 | + <text>{{detailItem.title}}</text> | |
11 | + </view> | |
12 | + </view> | |
13 | + </view> | |
14 | + <view v-else> | |
15 | + <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length"> | |
16 | + <text>{{item.detailTitle}}</text> | |
17 | + </view> | |
18 | + <view class="filter-content-detail"> | |
19 | + <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}" | |
20 | + @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)"> | |
21 | + {{detailItem.title}} | |
22 | + </text> | |
23 | + </view> | |
24 | + <view class="filter-content-footer"> | |
25 | + <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)"> | |
26 | + <text>重置</text> | |
27 | + </view> | |
28 | + <view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick"> | |
29 | + <text>确定</text> | |
30 | + </view> | |
31 | + </view> | |
32 | + </view> | |
33 | + </view> | |
34 | + </view> | |
35 | + </view> | |
36 | + | |
37 | +</template> | |
38 | + | |
39 | +<script> | |
40 | + export default { | |
41 | + data() { | |
42 | + return { | |
43 | + selectArr: [], | |
44 | + result: {}, | |
45 | + menuIndex: 0, | |
46 | + selectDetailList: [], | |
47 | + independenceObj: {}, | |
48 | + selectedKey: '', | |
49 | + cacheSelectedObj: {}, | |
50 | + defaultSelectedTitleObj: {} | |
51 | + }; | |
52 | + }, | |
53 | + props: { | |
54 | + themeColor: { | |
55 | + type: String, | |
56 | + default () { | |
57 | + return '#D1372C' | |
58 | + } | |
59 | + }, | |
60 | + menuList: { | |
61 | + type: Array, | |
62 | + default () { | |
63 | + return [] | |
64 | + } | |
65 | + }, | |
66 | + independence: { | |
67 | + type: Boolean, | |
68 | + default: false | |
69 | + } | |
70 | + }, | |
71 | + computed: { | |
72 | + selectedTitleObj() { | |
73 | + let obj = {} | |
74 | + for (let i = 0; i < this.menuList.length; i++) { | |
75 | + let item = this.menuList[i]; | |
76 | + obj[item.key] = item.title; | |
77 | + } | |
78 | + return obj; | |
79 | + }, | |
80 | + defaultSelectedObj() { // 保存初始状态 | |
81 | + return this.getSelectedObj() | |
82 | + }, | |
83 | + selectedObj: { | |
84 | + get() { | |
85 | + return this.getSelectedObj() | |
86 | + }, | |
87 | + set(newObj) { | |
88 | + return newObj; | |
89 | + } | |
90 | + | |
91 | + } | |
92 | + }, | |
93 | + methods: { | |
94 | + getSelectedObj() { | |
95 | + let obj = {} | |
96 | + for (let i = 0; i < this.menuList.length; i++) { | |
97 | + let item = this.menuList[i]; | |
98 | + if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值 | |
99 | + | |
100 | + if (item.isMutiple) { | |
101 | + obj[item.key] = []; | |
102 | + item.detailList[0].isSelected = false; | |
103 | + if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组 | |
104 | + item.defaultSelectedIndex = [item.defaultSelectedIndex]; | |
105 | + } | |
106 | + for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj | |
107 | + item.detailList[item.defaultSelectedIndex[j]].isSelected = true; | |
108 | + obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value) | |
109 | + } | |
110 | + | |
111 | + } else { | |
112 | + obj[item.key] = item.detailList[item.defaultSelectedIndex].value; | |
113 | + this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; | |
114 | + this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; | |
115 | + item.detailList[0].isSelected = false; | |
116 | + item.detailList[item.defaultSelectedIndex].isSelected = true; | |
117 | + } | |
118 | + } else { | |
119 | + if (item.isMutiple) { | |
120 | + obj[item.key] = []; | |
121 | + } else { | |
122 | + obj[item.key] = ''; | |
123 | + } | |
124 | + } | |
125 | + } | |
126 | + this.result = obj; | |
127 | + return obj; | |
128 | + }, | |
129 | + // 重置所有选项,包括默认选项,并更新result | |
130 | + resetAllSelect(callback) { | |
131 | + let titles = []; | |
132 | + for (let i = 0; i < this.menuList.length; i++) { | |
133 | + this.resetSelected(this.menuList[i].detailList,this.menuList[i].key); | |
134 | + titles[this.menuList[i].key] = this.menuList[i].title; | |
135 | + } | |
136 | + let obj = { | |
137 | + 'result': this.result, | |
138 | + 'titles': titles, | |
139 | + 'isReset': true | |
140 | + } | |
141 | + this.$emit("confirm", obj); | |
142 | + callback(this.result); | |
143 | + }, | |
144 | + // 重置选项为设置的默认值,并更新result | |
145 | + resetSelectToDefault(callback) { | |
146 | + for (let i = 0; i < this.menuList.length; i++) { | |
147 | + this.selectDetailList = this.menuList[i].detailList; | |
148 | + | |
149 | + if (this.menuList[i].defaultSelectedIndex) { | |
150 | + if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true | |
151 | + for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) { | |
152 | + if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) { | |
153 | + this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this | |
154 | + .menuList[i].key) | |
155 | + } | |
156 | + } | |
157 | + } else { | |
158 | + this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[ | |
159 | + i].key) | |
160 | + } | |
161 | + | |
162 | + // 获取非默认项的下标 | |
163 | + let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i]) | |
164 | + // 把所有不是默认的为true的点为false | |
165 | + for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) { | |
166 | + if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) { | |
167 | + this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this | |
168 | + .menuList[i].key) | |
169 | + } | |
170 | + } | |
171 | + } | |
172 | + | |
173 | + | |
174 | + } | |
175 | + | |
176 | + this.selectedObj = this.defaultSelectedObj; | |
177 | + this.result = this.defaultSelectedObj; | |
178 | + let obj = { | |
179 | + 'result': this.result, | |
180 | + 'titles': this.defaultSelectedTitleObj, | |
181 | + 'isReset': true | |
182 | + } | |
183 | + this.$emit("confirm", obj); | |
184 | + callback(this.result) | |
185 | + }, | |
186 | + getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项 | |
187 | + let tempDefault = menuListItem.defaultSelectedIndex; | |
188 | + if (!Array.isArray(tempDefault)) { | |
189 | + tempDefault = [tempDefault]; | |
190 | + } | |
191 | + // 获取所有项的下标 组成新的数组 | |
192 | + let all = []; | |
193 | + for (let i = 0; i < menuListItem.detailList.length; i++) { | |
194 | + all.push(i) | |
195 | + } | |
196 | + // 将默认选中的数组与所有项的数组的不同值合并为一个新数组 | |
197 | + var unDefaultSelectedIndex = tempDefault.filter(function(v) { | |
198 | + return !(all.indexOf(v) > -1) | |
199 | + }).concat(all.filter(function(v) { | |
200 | + return !(tempDefault.indexOf(v) > -1) | |
201 | + })); | |
202 | + return unDefaultSelectedIndex; | |
203 | + }, | |
204 | + resetMenuList(val) { | |
205 | + this.menuList = val; | |
206 | + this.$emit('update:menuList', val) | |
207 | + }, | |
208 | + menuTabClick(index) { | |
209 | + this.menuIndex = index; | |
210 | + this.selectDetailList = this.menuList[index].detailList; | |
211 | + this.selectedKey = this.menuList[index].key; | |
212 | + // 如果是独立菜单 | |
213 | + if (this.independence && !this.menuList[index].isSort) { | |
214 | + if (JSON.stringify(this.independenceObj) == '{}') { | |
215 | + this.initIndependenceObj(index); | |
216 | + } else { | |
217 | + for (let key in this.independenceObj) { | |
218 | + if (key != this.selectedKey) { | |
219 | + this.initIndependenceObj(index); | |
220 | + this.resetSelected(this.menuList[index].detailList, this.selectedKey); | |
221 | + } | |
222 | + } | |
223 | + } | |
224 | + | |
225 | + } | |
226 | + if (this.independence && this.menuList[index].isSort) { | |
227 | + | |
228 | + this.independenceObj = {}; | |
229 | + | |
230 | + | |
231 | + } | |
232 | + if (this.independence) { | |
233 | + let idx = this.menuList[index].defaultSelectedIndex; | |
234 | + if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值 | |
235 | + if (this.menuList[index].isMutiple) { | |
236 | + for (let i = 0; i < idx.length; i++) { | |
237 | + if (this.menuList[index].detailList[idx[i]].isSelected == false) { | |
238 | + this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey); | |
239 | + } | |
240 | + | |
241 | + } | |
242 | + } else { | |
243 | + if (this.menuList[index].detailList[idx].isSelected == false) { | |
244 | + | |
245 | + this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey); | |
246 | + | |
247 | + } | |
248 | + } | |
249 | + | |
250 | + } | |
251 | + } | |
252 | + | |
253 | + | |
254 | + // #ifdef H5 | |
255 | + this.selectedObj = this.selectedObj; | |
256 | + this.$forceUpdate(); | |
257 | + // #endif | |
258 | + }, | |
259 | + initIndependenceObj(index) { | |
260 | + this.independenceObj = {}; | |
261 | + if (this.menuList[index].isMutiple) { | |
262 | + this.independenceObj[this.selectedKey] = []; | |
263 | + } else { | |
264 | + this.independenceObj[this.selectedKey] = ''; | |
265 | + } | |
266 | + }, | |
267 | + itemTap(index, list, isMutiple, key) { | |
268 | + if (isMutiple == true) { | |
269 | + list[index].isSelected = !list[index].isSelected; | |
270 | + if (index == 0) { | |
271 | + this.resetSelected(list, key) | |
272 | + if (!this.independence) { | |
273 | + this.selectedTitleObj[key] = list[index].title; | |
274 | + } | |
275 | + } else { | |
276 | + list[0].isSelected = false | |
277 | + if (list[index].isSelected) { | |
278 | + if (this.independence) { | |
279 | + this.independenceObj[this.selectedKey].push(list[index].value); | |
280 | + } else { | |
281 | + this.selectedObj[key].push(list[index].value); | |
282 | + } | |
283 | + } else { | |
284 | + list[index].isSelected = false; | |
285 | + if (this.independence) { | |
286 | + var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value); | |
287 | + this.independenceObj[this.selectedKey].splice(idx, 1); | |
288 | + } else { | |
289 | + var idx = this.selectedObj[key].indexOf(list[index].value); | |
290 | + this.selectedObj[key].splice(idx, 1); | |
291 | + } | |
292 | + | |
293 | + } | |
294 | + if (this.independence) { | |
295 | + this.result = this.independenceObj; | |
296 | + } else { | |
297 | + this.result = this.selectedObj; | |
298 | + } | |
299 | + | |
300 | + } | |
301 | + } else { | |
302 | + if (index == 0) { | |
303 | + this.resetSelected(list, key) | |
304 | + if (!this.independence) { | |
305 | + this.selectedTitleObj[key] = list[index].title; | |
306 | + } | |
307 | + } else { | |
308 | + list[0].isSelected = false | |
309 | + if (this.independence) { | |
310 | + this.independenceObj[this.selectedKey] = list[index].value; | |
311 | + this.result = this.independenceObj; | |
312 | + } else { | |
313 | + this.selectedObj[key] = list[index].value; | |
314 | + this.result = this.selectedObj; | |
315 | + this.selectedTitleObj[key] = list[index].title; | |
316 | + } | |
317 | + | |
318 | + for (let i = 0; i < list.length; i++) { | |
319 | + if (index == i) { | |
320 | + list[i].isSelected = true | |
321 | + } else { | |
322 | + list[i].isSelected = false | |
323 | + } | |
324 | + } | |
325 | + } | |
326 | + } | |
327 | + // #ifdef H5 | |
328 | + this.$forceUpdate(); | |
329 | + // #endif | |
330 | + }, | |
331 | + resetSelected(list, key) { | |
332 | + if (typeof this.result[key] == 'object') { | |
333 | + this.result[key] = []; | |
334 | + this.selectedTitleObj[key] = list[0].title; | |
335 | + } else { | |
336 | + this.result[key] = ''; | |
337 | + this.selectedTitleObj[key] = list[0].title; | |
338 | + } | |
339 | + for (let i = 0; i < list.length; i++) { | |
340 | + if (i == 0) { | |
341 | + list[i].isSelected = true; | |
342 | + } else { | |
343 | + list[i].isSelected = false; | |
344 | + } | |
345 | + } | |
346 | + // #ifdef H5 | |
347 | + this.$forceUpdate(); | |
348 | + // #endif | |
349 | + }, | |
350 | + sortTap(index, list, key) { | |
351 | + if (this.independence) { | |
352 | + this.independenceObj[this.selectedKey] = list[index].value; | |
353 | + this.result = this.independenceObj; | |
354 | + } else { | |
355 | + this.selectedObj[key] = list[index].value; | |
356 | + this.result = this.selectedObj; | |
357 | + this.selectedTitleObj[key] = list[index].title; | |
358 | + } | |
359 | + | |
360 | + for (let i = 0; i < list.length; i++) { | |
361 | + if (index == i) { | |
362 | + list[i].isSelected = true; | |
363 | + } else { | |
364 | + list[i].isSelected = false; | |
365 | + } | |
366 | + } | |
367 | + let obj = { | |
368 | + 'result': this.result, | |
369 | + 'titles': this.selectedTitleObj, | |
370 | + 'isReset': false | |
371 | + } | |
372 | + this.$emit("confirm", obj); | |
373 | + }, | |
374 | + sureClick() { | |
375 | + let obj = { | |
376 | + 'result': this.result, | |
377 | + 'titles': this.selectedTitleObj, | |
378 | + 'isReset': false | |
379 | + } | |
380 | + this.$emit("confirm", obj); | |
381 | + }, | |
382 | + resetClick(list, key) { | |
383 | + this.resetSelected(list, key) | |
384 | + } | |
385 | + } | |
386 | + } | |
387 | +</script> | |
388 | + | |
389 | +<style> | |
390 | + .filter-content { | |
391 | + background-color: #F6F7F8; | |
392 | + } | |
393 | + | |
394 | + .filter-content-title { | |
395 | + border-bottom: #EEEEEE 1px solid; | |
396 | + padding: 10px 15px; | |
397 | + font-size: 13px; | |
398 | + color: #999999; | |
399 | + } | |
400 | + | |
401 | + .filter-content-detail { | |
402 | + padding: 5px 15px; | |
403 | + } | |
404 | + | |
405 | + .filter-content-detail-item-active { | |
406 | + background-color: #D1372C; | |
407 | + color: #FFFFFF; | |
408 | + padding: 5px 15px; | |
409 | + border-radius: 20px; | |
410 | + margin-right: 10px; | |
411 | + margin-top: 10px; | |
412 | + display: inline-block; | |
413 | + font-size: 14px; | |
414 | + } | |
415 | + | |
416 | + .filter-content-detail-item-default { | |
417 | + background-color: #FFFFFF; | |
418 | + color: #666666; | |
419 | + padding: 5px 15px; | |
420 | + border-radius: 20px; | |
421 | + margin-right: 10px; | |
422 | + margin-top: 10px; | |
423 | + display: inline-block; | |
424 | + font-size: 14px; | |
425 | + } | |
426 | + | |
427 | + .filter-content-footer { | |
428 | + display: flex; | |
429 | + justify-content: space-between; | |
430 | + width: 100%; | |
431 | + height: 45px; | |
432 | + margin-top: 10px; | |
433 | + } | |
434 | + | |
435 | + .filter-content-footer-item { | |
436 | + width: 50%; | |
437 | + display: flex; | |
438 | + justify-content: center; | |
439 | + align-items: center; | |
440 | + font-size: 16px; | |
441 | + } | |
442 | + | |
443 | + .filter-content-list { | |
444 | + | |
445 | + padding: 5px 15px; | |
446 | + } | |
447 | + | |
448 | + .filter-content-list-item-default { | |
449 | + color: #666666; | |
450 | + width: 100%; | |
451 | + padding: 10px 0px; | |
452 | + } | |
453 | + | |
454 | + .filter-content-list-item-default text { | |
455 | + width: 90%; | |
456 | + font-size: 14px; | |
457 | + display: inline-block; | |
458 | + } | |
459 | + | |
460 | + .filter-content-list-item-active { | |
461 | + color: #D1372C; | |
462 | + width: 100%; | |
463 | + padding: 10px 0px; | |
464 | + } | |
465 | + | |
466 | + .filter-content-list-item-active text { | |
467 | + font-size: 14px; | |
468 | + width: 90%; | |
469 | + display: inline-block; | |
470 | + } | |
471 | + | |
472 | + .filter-content-list-item-active:after { | |
473 | + content: '✓'; | |
474 | + } | |
475 | +</style> | ... | ... |
src/components/sl-filter/iconfont/iconfont.css
... | ... | @@ -0,0 +1,20 @@ |
1 | +@font-face { | |
2 | + font-family: 'sl-font'; | |
3 | + src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype'); | |
4 | +} | |
5 | + | |
6 | +.sl-font { | |
7 | + font-family: "sl-font" !important; | |
8 | + font-size: 16px; | |
9 | + font-style: normal; | |
10 | + -webkit-font-smoothing: antialiased; | |
11 | + -moz-osx-font-smoothing: grayscale; | |
12 | +} | |
13 | + | |
14 | +.sl-down:before { | |
15 | + content: "\e61a"; | |
16 | +} | |
17 | + | |
18 | +.sl-up:before { | |
19 | + content: "\e61c"; | |
20 | +} | ... | ... |
src/components/sl-filter/popup-layer.vue
... | ... | @@ -0,0 +1,122 @@ |
1 | +<template> | |
2 | + <scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer"> | |
3 | + <view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location"> | |
4 | + <slot></slot> | |
5 | + </view> | |
6 | + </scroll-view> | |
7 | +</template> | |
8 | + | |
9 | +<script> | |
10 | + export default { | |
11 | + name: 'popup-layer', | |
12 | + props: { | |
13 | + direction: { | |
14 | + type: String, | |
15 | + default: 'top', // 方向 top,bottom,left,right | |
16 | + }, | |
17 | + autoClose: { | |
18 | + type: Boolean, | |
19 | + default: true, | |
20 | + }, | |
21 | + isTransNav: { | |
22 | + type: Boolean, | |
23 | + default: false | |
24 | + }, | |
25 | + navHeight: { | |
26 | + type: Number, | |
27 | + default: 0 | |
28 | + } | |
29 | + }, | |
30 | + data() { | |
31 | + return { | |
32 | + ifshow: false, // 是否展示, | |
33 | + translateValue: -100, // 位移距离 | |
34 | + timer: null, | |
35 | + iftoggle: false, | |
36 | + }; | |
37 | + }, | |
38 | + computed: { | |
39 | + _translate() { | |
40 | + if (this.isTransNav) { | |
41 | + const transformObj = { | |
42 | + 'top': `transform:translateY(${-this.translateValue}%)`, | |
43 | + 'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`, | |
44 | + 'left': `transform:translateX(${-this.translateValue}%)`, | |
45 | + 'right': `transform:translateX(${this.translateValue}%)` | |
46 | + }; | |
47 | + return transformObj[this.direction] | |
48 | + } else { | |
49 | + const transformObj = { | |
50 | + 'top': `transform:translateY(${-this.translateValue}%)`, | |
51 | + 'bottom': `transform:translateY(${this.translateValue}%)`, | |
52 | + 'left': `transform:translateX(${-this.translateValue}%)`, | |
53 | + 'right': `transform:translateX(${this.translateValue}%)` | |
54 | + }; | |
55 | + return transformObj[this.direction] | |
56 | + } | |
57 | + | |
58 | + }, | |
59 | + _location() { | |
60 | + const positionValue = { | |
61 | + 'top': 'bottom:0px;width:100%;', | |
62 | + 'bottom': 'top:0px;width:100%;', | |
63 | + 'left': 'right:0px;height:100%;', | |
64 | + 'right': 'left:0px;height:100%;', | |
65 | + }; | |
66 | + return positionValue[this.direction] + this._translate; | |
67 | + } | |
68 | + }, | |
69 | + methods: { | |
70 | + show() { | |
71 | + let _this = this; | |
72 | + this.ifshow = true; | |
73 | + let _open = setTimeout(() => { | |
74 | + this.translateValue = 0; | |
75 | + _open = null; | |
76 | + }, 100) | |
77 | + let _toggle = setTimeout(() => { | |
78 | + this.iftoggle = true; | |
79 | + _toggle = null; | |
80 | + }, 300); | |
81 | + }, | |
82 | + close() { | |
83 | + if (this.timer !== null || !this.iftoggle) { | |
84 | + return; | |
85 | + } | |
86 | + this.translateValue = -100 - this.navHeight; | |
87 | + | |
88 | + this.timer = setTimeout(() => { | |
89 | + this.ifshow = false; | |
90 | + this.timer = null; | |
91 | + this.iftoggle = false; | |
92 | + }, 300); | |
93 | + this.$emit("close") | |
94 | + }, | |
95 | + ableClose() { | |
96 | + if (this.autoClose) { | |
97 | + this.close(); | |
98 | + } | |
99 | + }, | |
100 | + stopEvent(event) {}, | |
101 | + } | |
102 | + } | |
103 | +</script> | |
104 | + | |
105 | +<style> | |
106 | + .popup-layer { | |
107 | + position: absolute; | |
108 | + z-index: 999999; | |
109 | + background: rgba(0, 0, 0, .3); | |
110 | + height: calc(100% - 50px); | |
111 | + width: 100%; | |
112 | + left: 0px; | |
113 | + overflow: hidden; | |
114 | + } | |
115 | + | |
116 | + .popup-content { | |
117 | + position: absolute; | |
118 | + z-index: 1000000; | |
119 | + background: #FFFFFF; | |
120 | + transition: all .3s ease; | |
121 | + } | |
122 | +</style> | ... | ... |
src/components/sl-filter/sl-filter.vue
... | ... | @@ -0,0 +1,317 @@ |
1 | +<template> | |
2 | + <view class="content"> | |
3 | + <view :style="{height: tabHeight + 1 +'px'}"> | |
4 | + <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}"> | |
5 | + <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)"> | |
6 | + <text :style="{color:color}">{{item.title}}</text> | |
7 | + <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text> | |
8 | + </view> | |
9 | + </view> | |
10 | + </view> | |
11 | + <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight" | |
12 | + :tabHeight="tabHeight"> | |
13 | + <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp" | |
14 | + ref="slFilterView" @confirm="filterResult"></sl-filter-view> | |
15 | + </popup-layer> | |
16 | + </view> | |
17 | + | |
18 | +</template> | |
19 | + | |
20 | +<script> | |
21 | + import popupLayer from '@/components/sl-filter/popup-layer.vue'; | |
22 | + import slFilterView from '@/components/sl-filter/filter-view.vue'; | |
23 | + export default { | |
24 | + components: { | |
25 | + popupLayer, | |
26 | + slFilterView | |
27 | + }, | |
28 | + props: { | |
29 | + menuList: { | |
30 | + type: Array, | |
31 | + default () { | |
32 | + return [] | |
33 | + } | |
34 | + }, | |
35 | + themeColor: { | |
36 | + type: String, | |
37 | + default () { | |
38 | + return '#000000' | |
39 | + } | |
40 | + }, | |
41 | + color: { | |
42 | + type: String, | |
43 | + default () { | |
44 | + return '#666666' | |
45 | + } | |
46 | + }, | |
47 | + independence: { | |
48 | + type: Boolean, | |
49 | + default: false | |
50 | + }, | |
51 | + isTransNav: { | |
52 | + type: Boolean, | |
53 | + default: false | |
54 | + }, | |
55 | + navHeight: { | |
56 | + type: Number, | |
57 | + default: 0 | |
58 | + }, | |
59 | + topFixed: { | |
60 | + type: Boolean, | |
61 | + default: false | |
62 | + } | |
63 | + }, | |
64 | + | |
65 | + computed: { | |
66 | + itemWidth() { | |
67 | + return 'calc(100%/2)' | |
68 | + }, | |
69 | + menuListTemp: { | |
70 | + get() { | |
71 | + return this.getMenuListTemp(); | |
72 | + }, | |
73 | + set(newObj) { | |
74 | + return newObj; | |
75 | + } | |
76 | + } | |
77 | + }, | |
78 | + // #ifndef H5 | |
79 | + onReady: function() { | |
80 | + let arr = []; | |
81 | + let titleArr = []; | |
82 | + let r = {}; | |
83 | + for (let i = 0; i < this.menuList.length; i++) { | |
84 | + arr.push({ | |
85 | + 'isActive': false | |
86 | + }); | |
87 | + // titleArr.push({ | |
88 | + // 'title': this.menuList[i].title, | |
89 | + // 'key': this.menuList[i].key | |
90 | + // }) | |
91 | + | |
92 | + r[this.menuList[i].key] = this.menuList[i].title; | |
93 | + | |
94 | + if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { | |
95 | + titleArr.push({ | |
96 | + 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, | |
97 | + 'key': this.menuList[i].key | |
98 | + }) | |
99 | + } else { | |
100 | + titleArr.push({ | |
101 | + 'title': this.menuList[i].title, | |
102 | + 'key': this.menuList[i].key | |
103 | + }) | |
104 | + } | |
105 | + | |
106 | + } | |
107 | + this.statusList = arr; | |
108 | + this.titleList = titleArr; | |
109 | + this.tempTitleObj = r; | |
110 | + }, | |
111 | + // #endif | |
112 | + | |
113 | + // #ifdef H5 | |
114 | + created: function() { | |
115 | + let arr = []; | |
116 | + let titleArr = []; | |
117 | + let r = {}; | |
118 | + for (let i = 0; i < this.menuList.length; i++) { | |
119 | + arr.push({ | |
120 | + 'isActive': false | |
121 | + }); | |
122 | + // titleArr.push({ | |
123 | + // 'title': this.menuList[i].title, | |
124 | + // 'key': this.menuList[i].key | |
125 | + // }); | |
126 | + r[this.menuList[i].key] = this.menuList[i].title; | |
127 | + | |
128 | + if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { | |
129 | + titleArr.push({ | |
130 | + 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, | |
131 | + 'key': this.menuList[i].key | |
132 | + }) | |
133 | + } else { | |
134 | + titleArr.push({ | |
135 | + 'title': this.menuList[i].title, | |
136 | + 'key': this.menuList[i].key | |
137 | + }) | |
138 | + } | |
139 | + | |
140 | + } | |
141 | + this.statusList = arr; | |
142 | + this.titleList = titleArr; | |
143 | + this.tempTitleObj = r; | |
144 | + }, | |
145 | + // #endif | |
146 | + data() { | |
147 | + return { | |
148 | + down: 'sl-down', | |
149 | + up: 'sl-up', | |
150 | + tabHeight: 50, | |
151 | + statusList: [], | |
152 | + selectedIndex: '', | |
153 | + titleList: [], | |
154 | + tempTitleObj: {} | |
155 | + }; | |
156 | + }, | |
157 | + methods: { | |
158 | + getMenuListTemp() { | |
159 | + let arr = this.menuList; | |
160 | + for (let i = 0; i < arr.length; i++) { | |
161 | + let item = arr[i]; | |
162 | + for (let j = 0; j < item.detailList.length; j++) { | |
163 | + let d_item = item.detailList[j]; | |
164 | + if (j == 0) { | |
165 | + d_item.isSelected = true | |
166 | + } else { | |
167 | + d_item.isSelected = false | |
168 | + } | |
169 | + } | |
170 | + } | |
171 | + return arr; | |
172 | + }, | |
173 | + // 重置所有选项,包括默认选项,并更新result | |
174 | + resetAllSelect(callback) { | |
175 | + this.$refs.slFilterView.resetAllSelect(function(e){ | |
176 | + callback(e); | |
177 | + }); | |
178 | + }, | |
179 | + // 重置选项为设置的默认值,并更新result | |
180 | + resetSelectToDefault(callback) { | |
181 | + this.$refs.slFilterView.resetSelectToDefault(function(e){ | |
182 | + callback(e); | |
183 | + }); | |
184 | + }, | |
185 | + resetMenuList(val) { | |
186 | + this.menuList = val; | |
187 | + this.$emit('update:menuList', val) | |
188 | + this.$forceUpdate(); | |
189 | + this.$refs.slFilterView.resetMenuList(val) | |
190 | + }, | |
191 | + showMenuClick(index) { | |
192 | + this.selectedIndex = index; | |
193 | + if (this.statusList[index].isActive == true) { | |
194 | + this.$refs.popupRef.close(); | |
195 | + this.statusList[index].isActive = false | |
196 | + } else { | |
197 | + this.menuTabClick(index); | |
198 | + this.$refs.popupRef.show() | |
199 | + } | |
200 | + }, | |
201 | + menuTabClick(index) { | |
202 | + this.$refs.slFilterView.menuTabClick(index); | |
203 | + for (let i = 0; i < this.statusList.length; i++) { | |
204 | + if (index == i) { | |
205 | + this.statusList[i].isActive = true; | |
206 | + } else { | |
207 | + this.statusList[i].isActive = false; | |
208 | + } | |
209 | + } | |
210 | + }, | |
211 | + filterResult(obj) { | |
212 | + let val = obj.result; | |
213 | + let titlesObj = obj.titles; | |
214 | + // 处理选项映射到菜单title | |
215 | + if (this.independence) { | |
216 | + if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) { | |
217 | + let tempTitle = ''; | |
218 | + for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) { | |
219 | + let item = this.menuList[this.selectedIndex].detailList[i]; | |
220 | + if (item.value == val[this.menuList[this.selectedIndex].key]) { | |
221 | + tempTitle = item.title; | |
222 | + } | |
223 | + } | |
224 | + if (this.menuList[this.selectedIndex].reflexTitle) { | |
225 | + this.titleList[this.selectedIndex].title = tempTitle; | |
226 | + } | |
227 | + } | |
228 | + } else { | |
229 | + for (let key in titlesObj) { | |
230 | + if (!Array.isArray(titlesObj[key])) { | |
231 | + this.tempTitleObj[key] = titlesObj[key]; | |
232 | + } | |
233 | + | |
234 | + } | |
235 | + for (let key in this.tempTitleObj) { | |
236 | + for (let i = 0; i < this.titleList.length; i++) { | |
237 | + if (this.titleList[i].key == key) { | |
238 | + this.titleList[i].title = this.tempTitleObj[key]; | |
239 | + } | |
240 | + } | |
241 | + } | |
242 | + } | |
243 | + | |
244 | + this.$refs.popupRef.close() | |
245 | + if (obj.isReset) { | |
246 | + | |
247 | + } else{ | |
248 | + this.$emit("result", val) | |
249 | + } | |
250 | + | |
251 | + | |
252 | + }, | |
253 | + close() { | |
254 | + for (let i = 0; i < this.statusList.length; i++) { | |
255 | + this.statusList[i].isActive = false; | |
256 | + } | |
257 | + } | |
258 | + } | |
259 | + } | |
260 | +</script> | |
261 | + | |
262 | +<style lang="scss"> | |
263 | + @import 'iconfont/iconfont.css'; | |
264 | + // .content{ | |
265 | + // flex-shrink: 0; | |
266 | + // width: 100%; | |
267 | + // height: 44px; | |
268 | + // position: fixed; | |
269 | + // z-index: 997; | |
270 | + // flex-wrap: nowrap; | |
271 | + // display: flex; | |
272 | + // flex-direction: row; | |
273 | + // // top: var(--window-top); | |
274 | + // left: 0; | |
275 | + // view { | |
276 | + // display: flex; | |
277 | + // flex-wrap: nowrap; | |
278 | + // } | |
279 | + // } | |
280 | + .select-tab { | |
281 | + border-bottom: #F7F7F7 1px solid; | |
282 | + background-color: #FFFFFF; | |
283 | + display: flex; | |
284 | + width: 100%; | |
285 | + } | |
286 | + | |
287 | + .select-tab-fixed-top { | |
288 | + border-bottom: #F7F7F7 1px solid; | |
289 | + background-color: #FFFFFF; | |
290 | + display: flex; | |
291 | + width: 100%; | |
292 | + position: fixed; | |
293 | + /* #ifdef H5 */ | |
294 | + top: 44px; | |
295 | + /* #endif */ | |
296 | + /* #ifndef H5 */ | |
297 | + top: 0; | |
298 | + /* #endif */ | |
299 | + } | |
300 | + | |
301 | + .arrows { | |
302 | + margin-left: 5px; | |
303 | + } | |
304 | + | |
305 | + .select-tab .select-tab-item, | |
306 | + .select-tab-fixed-top .select-tab-item { | |
307 | + display: flex; | |
308 | + justify-content: center; | |
309 | + align-items: center; | |
310 | + } | |
311 | + | |
312 | + .select-tab .select-tab-item text, | |
313 | + .select-tab-fixed-top .select-tab-item text { | |
314 | + color: #666666; | |
315 | + font-size: 14px; | |
316 | + } | |
317 | +</style> | ... | ... |
src/pages/index/index.vue
... | ... | @@ -106,8 +106,8 @@ |
106 | 106 | </view> |
107 | 107 | </view> |
108 | 108 | <view class="loading-text"> |
109 | - <text>{{loadedText}}</text> | |
110 | - <!-- <text v-else>{{loadedText}}</text> --> | |
109 | + <text v-if="isLoading==true">{{loadingText}}</text> | |
110 | + <text v-else>{{loadedText}}</text> | |
111 | 111 | </view> |
112 | 112 | </view> |
113 | 113 | <!-- </scroll-view> --> |
... | ... | @@ -140,7 +140,7 @@ export default { |
140 | 140 | valueArr: "", |
141 | 141 | isLoading: true, //初始化加载状态 |
142 | 142 | loadingText: "data loading...", |
143 | - loadedText: "~~到底啦~~", | |
143 | + loadedText: "~~暂无更多数据~~", | |
144 | 144 | filterDropdownValue: [], |
145 | 145 | filterData: [], |
146 | 146 | searchText: "", |
... | ... | @@ -158,7 +158,12 @@ export default { |
158 | 158 | goodsList() { |
159 | 159 | // 也可以从 getters 获取 |
160 | 160 | // console.log('index-list=====>',this.$store.state.index.list) |
161 | - return this.$store.state.index.list; | |
161 | + let list = this.$store.state.index.list; | |
162 | + if(list.length == 0){ | |
163 | + this.isLoading = false; | |
164 | + } | |
165 | + this.scrollTop = 0.1; | |
166 | + return list | |
162 | 167 | }, |
163 | 168 | categoryList() { |
164 | 169 | return this.$store.state.index.categoryList; |
... | ... | @@ -260,7 +265,6 @@ export default { |
260 | 265 | flex-direction: column; |
261 | 266 | align-items: center; |
262 | 267 | justify-content: center; |
263 | - background-color: #f7f6f6; | |
264 | 268 | } |
265 | 269 | .header { |
266 | 270 | display: flex; | ... | ... |
src/store/modules/index.js
... | ... | @@ -16,6 +16,350 @@ initArr.forEach(function (value) { |
16 | 16 | list.push(initData) |
17 | 17 | }); |
18 | 18 | |
19 | +let categoryList = [ | |
20 | + { | |
21 | + "type": "checkbox", | |
22 | + "name": "产品", | |
23 | + "value": "category", | |
24 | + "submenu": [ | |
25 | + { | |
26 | + "label": "镜框", | |
27 | + "name": "镜框", | |
28 | + "value": "1" | |
29 | + }, | |
30 | + { | |
31 | + "label": "镜片", | |
32 | + "name": "镜片", | |
33 | + "value": "2" | |
34 | + }, | |
35 | + { | |
36 | + "label": "特种镜", | |
37 | + "name": "特种镜", | |
38 | + "value": "146" | |
39 | + } | |
40 | + ], | |
41 | + "groups": [ | |
42 | + "001" | |
43 | + ] | |
44 | + }, | |
45 | + { | |
46 | + "type": "radio", | |
47 | + "name": "规则", | |
48 | + "value": "px", | |
49 | + "submenu": [ | |
50 | + { | |
51 | + "name": "按价格排", | |
52 | + "value": "1" | |
53 | + }, | |
54 | + { | |
55 | + "name": "按销量排", | |
56 | + "value": "2" | |
57 | + } | |
58 | + ], | |
59 | + "groups": [ | |
60 | + "002" | |
61 | + ] | |
62 | + }, | |
63 | + { | |
64 | + "type": "radio", | |
65 | + "name": "排序", | |
66 | + "value": "sort", | |
67 | + "submenu": [ | |
68 | + { | |
69 | + "name": "从高到低", | |
70 | + "value": "1" | |
71 | + }, | |
72 | + { | |
73 | + "name": "从低到高", | |
74 | + "value": "2" | |
75 | + } | |
76 | + ], | |
77 | + "groups": [ | |
78 | + "003" | |
79 | + ] | |
80 | + }, | |
81 | + { | |
82 | + "type": "filter", | |
83 | + "name": "筛选", | |
84 | + "value": "filter", | |
85 | + "submenu": [ | |
86 | + { | |
87 | + "type": "checkbox", | |
88 | + "name": "性别", | |
89 | + "value": "sex", | |
90 | + "submenu": [ | |
91 | + { | |
92 | + "label": "男性", | |
93 | + "name": "男性", | |
94 | + "value": "27" | |
95 | + }, | |
96 | + { | |
97 | + "label": "女性", | |
98 | + "name": "女性", | |
99 | + "value": "28" | |
100 | + } | |
101 | + ] | |
102 | + }, | |
103 | + { | |
104 | + "type": "checkbox", | |
105 | + "name": "年龄", | |
106 | + "value": "age", | |
107 | + "submenu": [ | |
108 | + { | |
109 | + "label": "通用", | |
110 | + "name": "通用", | |
111 | + "value": "24" | |
112 | + } | |
113 | + ] | |
114 | + }, | |
115 | + { | |
116 | + "type": "checkbox", | |
117 | + "name": "适用场景", | |
118 | + "value": "sense", | |
119 | + "submenu": [ | |
120 | + { | |
121 | + "label": "行政风", | |
122 | + "name": "行政风", | |
123 | + "value": "53" | |
124 | + }, | |
125 | + { | |
126 | + "label": "青春学子风", | |
127 | + "name": "青春学子风", | |
128 | + "value": "54" | |
129 | + }, | |
130 | + { | |
131 | + "label": "运动风", | |
132 | + "name": "运动风", | |
133 | + "value": "55" | |
134 | + }, | |
135 | + { | |
136 | + "label": "简约-极简文艺范", | |
137 | + "name": "简约-极简文艺范", | |
138 | + "value": "56" | |
139 | + }, | |
140 | + { | |
141 | + "label": "奶奶风", | |
142 | + "name": "奶奶风", | |
143 | + "value": "57" | |
144 | + }, | |
145 | + { | |
146 | + "label": "流线洛可可", | |
147 | + "name": "流线洛可可", | |
148 | + "value": "58" | |
149 | + }, | |
150 | + { | |
151 | + "label": "自然舒视角", | |
152 | + "name": "自然舒视角", | |
153 | + "value": "59" | |
154 | + }, | |
155 | + { | |
156 | + "label": "无界人文系", | |
157 | + "name": "无界人文系", | |
158 | + "value": "60" | |
159 | + }, | |
160 | + { | |
161 | + "label": "有机未来时", | |
162 | + "name": "有机未来时", | |
163 | + "value": "61" | |
164 | + }, | |
165 | + { | |
166 | + "label": "立体巴洛克", | |
167 | + "name": "立体巴洛克", | |
168 | + "value": "62" | |
169 | + }, | |
170 | + { | |
171 | + "label": "多元新风尚", | |
172 | + "name": "多元新风尚", | |
173 | + "value": "63" | |
174 | + }, | |
175 | + { | |
176 | + "label": "理性几何派", | |
177 | + "name": "理性几何派", | |
178 | + "value": "64" | |
179 | + }, | |
180 | + { | |
181 | + "label": "轻简北欧风", | |
182 | + "name": "轻简北欧风", | |
183 | + "value": "65" | |
184 | + }, | |
185 | + { | |
186 | + "label": "质感哥特潮", | |
187 | + "name": "质感哥特潮", | |
188 | + "value": "66" | |
189 | + }, | |
190 | + { | |
191 | + "label": "时尚", | |
192 | + "name": "时尚", | |
193 | + "value": "67" | |
194 | + }, | |
195 | + { | |
196 | + "label": "复古", | |
197 | + "name": "复古", | |
198 | + "value": "68" | |
199 | + }, | |
200 | + { | |
201 | + "label": "商务", | |
202 | + "name": "商务", | |
203 | + "value": "69" | |
204 | + }, | |
205 | + { | |
206 | + "label": "休闲", | |
207 | + "name": "休闲", | |
208 | + "value": "70" | |
209 | + }, | |
210 | + { | |
211 | + "label": "折射率", | |
212 | + "name": "折射率", | |
213 | + "value": "285" | |
214 | + } | |
215 | + ] | |
216 | + }, | |
217 | + { | |
218 | + "type": "checkbox", | |
219 | + "name": "价格", | |
220 | + "value": "price", | |
221 | + "submenu": [ | |
222 | + { | |
223 | + "name": "100以下", | |
224 | + "value": "1,100" | |
225 | + }, | |
226 | + { | |
227 | + "name": "100-300", | |
228 | + "value": "100,300" | |
229 | + }, | |
230 | + { | |
231 | + "name": "300-1000", | |
232 | + "value": "300,1000" | |
233 | + }, | |
234 | + { | |
235 | + "name": "1000以上", | |
236 | + "value": "1000,-1" | |
237 | + } | |
238 | + ] | |
239 | + }, | |
240 | + { | |
241 | + "type": "checkbox", | |
242 | + "name": "材质", | |
243 | + "value": "glasscate", | |
244 | + "submenu": [ | |
245 | + { | |
246 | + "label": "购易", | |
247 | + "name": "购易", | |
248 | + "value": "72" | |
249 | + }, | |
250 | + { | |
251 | + "label": "海俪恩", | |
252 | + "name": "海俪恩", | |
253 | + "value": "73" | |
254 | + }, | |
255 | + { | |
256 | + "label": "沙漠风暴", | |
257 | + "name": "沙漠风暴", | |
258 | + "value": "74" | |
259 | + }, | |
260 | + { | |
261 | + "label": "古诗", | |
262 | + "name": "古诗", | |
263 | + "value": "75" | |
264 | + }, | |
265 | + { | |
266 | + "label": "暴龙", | |
267 | + "name": "暴龙", | |
268 | + "value": "76" | |
269 | + }, | |
270 | + { | |
271 | + "label": "犀牛", | |
272 | + "name": "犀牛", | |
273 | + "value": "77" | |
274 | + }, | |
275 | + { | |
276 | + "label": "Ray-Ban雷朋", | |
277 | + "name": "Ray-Ban雷朋", | |
278 | + "value": "78" | |
279 | + }, | |
280 | + { | |
281 | + "label": "PARIM派丽蒙", | |
282 | + "name": "PARIM派丽蒙", | |
283 | + "value": "79" | |
284 | + }, | |
285 | + { | |
286 | + "label": "石狼", | |
287 | + "name": "石狼", | |
288 | + "value": "80" | |
289 | + }, | |
290 | + { | |
291 | + "label": "木九十", | |
292 | + "name": "木九十", | |
293 | + "value": "81" | |
294 | + } | |
295 | + ] | |
296 | + }, | |
297 | + { | |
298 | + "type": "checkbox", | |
299 | + "name": "品牌", | |
300 | + "value": "brand", | |
301 | + "submenu": [ | |
302 | + { | |
303 | + "label": "购易", | |
304 | + "name": "购易", | |
305 | + "value": "72" | |
306 | + }, | |
307 | + { | |
308 | + "label": "海俪恩", | |
309 | + "name": "海俪恩", | |
310 | + "value": "73" | |
311 | + }, | |
312 | + { | |
313 | + "label": "沙漠风暴", | |
314 | + "name": "沙漠风暴", | |
315 | + "value": "74" | |
316 | + }, | |
317 | + { | |
318 | + "label": "古诗", | |
319 | + "name": "古诗", | |
320 | + "value": "75" | |
321 | + }, | |
322 | + { | |
323 | + "label": "暴龙", | |
324 | + "name": "暴龙", | |
325 | + "value": "76" | |
326 | + }, | |
327 | + { | |
328 | + "label": "犀牛", | |
329 | + "name": "犀牛", | |
330 | + "value": "77" | |
331 | + }, | |
332 | + { | |
333 | + "label": "Ray-Ban雷朋", | |
334 | + "name": "Ray-Ban雷朋", | |
335 | + "value": "78" | |
336 | + }, | |
337 | + { | |
338 | + "label": "PARIM派丽蒙", | |
339 | + "name": "PARIM派丽蒙", | |
340 | + "value": "79" | |
341 | + }, | |
342 | + { | |
343 | + "label": "石狼", | |
344 | + "name": "石狼", | |
345 | + "value": "80" | |
346 | + }, | |
347 | + { | |
348 | + "label": "木九十", | |
349 | + "name": "木九十", | |
350 | + "value": "81" | |
351 | + } | |
352 | + ] | |
353 | + } | |
354 | + ], | |
355 | + "groups": [ | |
356 | + "001", | |
357 | + "002", | |
358 | + "003" | |
359 | + ], | |
360 | + } | |
361 | + ] | |
362 | + | |
19 | 363 | //初始化数据是为了显示默认骨架 |
20 | 364 | const state = { |
21 | 365 | categoryList: [], |
... | ... | @@ -52,7 +396,6 @@ initArr.forEach(function (value) { |
52 | 396 | }); |
53 | 397 | commit('CATEGORY', data); |
54 | 398 | resolve(data) |
55 | - console.log('3333') | |
56 | 399 | }, |
57 | 400 | fail: (res) => { |
58 | 401 | console.log("fail status === > ", res); |
... | ... | @@ -67,8 +410,7 @@ initArr.forEach(function (value) { |
67 | 410 | url: shopList, |
68 | 411 | success: (res) => { |
69 | 412 | commit('LIST', res.data.data) |
70 | - resolve(res.data) | |
71 | - console.log('3333') | |
413 | + resolve(res.data) | |
72 | 414 | }, |
73 | 415 | fail: (res) => { |
74 | 416 | console.log("fail status === > ", res); | ... | ... |