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); |
| ... | ... |