fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by huangyCode
Commit 664491bc835402b4c9980b4d121fd4068aa9dd05 1 parent eb22e1c8

修改查询列表参数和筛选参数

Inline Side-by-side
Showing 3 changed files with 119 additions and 95 deletions
1 <template> 1 <template>
2 <div class="container" v-show="showType"> 2 <div class="container" v-show="showType">
3 <div class="header"> 3 <div class="header">
4 - <div class="back" @click="hide()"></div> 4 + <div class="back" @click="back()"></div>
5 </div> 5 </div>
6 <div class="title">筛选</div> 6 <div class="title">筛选</div>
7 - <div class="content">  
8 - <div class="item" v-for="(filter,row) in filterData"> 7 + <div class="content-search">
  8 + <div class="item" v-if="filterData && filterData.length" v-for="(filter,row) in filterData">
9 <div class="item-title">{{filter.filterName}}</div> 9 <div class="item-title">{{filter.filterName}}</div>
10 <div v-if="filter.itemList && filter.itemList.length" class="item-list"> 10 <div v-if="filter.itemList && filter.itemList.length" class="item-list">
11 <div class="item-img-content" v-if="filter.filterId === 'brand'" 11 <div class="item-img-content" v-if="filter.filterId === 'brand'"
@@ -17,10 +17,15 @@ @@ -17,10 +17,15 @@
17 </div> 17 </div>
18 <div class="item-text item-size" v-if="filter.filterId === 'size'" :style="i===0 && 'margin-left:1rem'" 18 <div class="item-text item-size" v-if="filter.filterId === 'size'" :style="i===0 && 'margin-left:1rem'"
19 :class="filterParams.size.includes(item.itemId) && 'item-text-selected'" 19 :class="filterParams.size.includes(item.itemId) && 'item-text-selected'"
20 - v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">{{item.itemName}}</div>  
21 - <div class="item-text" v-if="filter.filterId === 'sort' || filter.filterId === 'gender'" :style="i===0 && 'margin-left:1rem'" 20 + v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">
  21 + {{item.itemName}}
  22 + </div>
  23 + <div class="item-text" v-if="filter.filterId === 'sort' || filter.filterId === 'gender'"
  24 + :style="i===0 && 'margin-left:1rem'"
22 :class="(filterParams.sort.includes(item.itemId) || filterParams.gender.includes(item.itemId)) && 'item-text-selected'" 25 :class="(filterParams.sort.includes(item.itemId) || filterParams.gender.includes(item.itemId)) && 'item-text-selected'"
23 - v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">{{item.itemName}}</div> 26 + v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">
  27 + {{item.itemName}}
  28 + </div>
24 </div> 29 </div>
25 </div> 30 </div>
26 </div> 31 </div>
@@ -52,6 +57,12 @@ export default { @@ -52,6 +57,12 @@ export default {
52 }, 57 },
53 filterData: [], 58 filterData: [],
54 filterVisible: false, 59 filterVisible: false,
  60 + copyFilterParams: {
  61 + sort: [], // 品类id
  62 + brand: [], // 品牌id
  63 + gender: [], // 性别
  64 + size: [], // 尺码id
  65 + }
55 }; 66 };
56 }, 67 },
57 activated() { 68 activated() {
@@ -72,12 +83,19 @@ export default { @@ -72,12 +83,19 @@ export default {
72 methods: { 83 methods: {
73 ...mapActions(['fetchFilterData']), 84 ...mapActions(['fetchFilterData']),
74 clear() { 85 clear() {
75 - this.setFilterParam({ 86 + let filterParams = {
76 sort: [], // 品类id 87 sort: [], // 品类id
77 brand: [], // 品牌id 88 brand: [], // 品牌id
78 gender: [], // 性别 89 gender: [], // 性别
79 size: [], // 尺码id 90 size: [], // 尺码id
80 - }); 91 + };
  92 +
  93 + for (let item of this.filterData) {
  94 + if (item.itemList && item.itemList.length === 1) {
  95 + filterParams[item.filterId].push(item.itemList[0].itemId);
  96 + }
  97 + }
  98 + this.setFilterParam(filterParams);
81 }, 99 },
82 100
83 fetchData: async function(params) { 101 fetchData: async function(params) {
@@ -93,7 +111,13 @@ export default { @@ -93,7 +111,13 @@ export default {
93 this.filterParams = filterParams; 111 this.filterParams = filterParams;
94 }, 112 },
95 113
  114 + back() {
  115 + this.filterParams = {...this.copyFilterParams};
  116 + this.hide();
  117 + },
  118 +
96 submit() { 119 submit() {
  120 + this.copyFilterParams = {...this.filterParams};
97 let params = { 121 let params = {
98 sort: this.filterParams.sort.join(','), 122 sort: this.filterParams.sort.join(','),
99 brand: this.filterParams.brand.join(','), // 品牌id 123 brand: this.filterParams.brand.join(','), // 品牌id
@@ -137,7 +161,7 @@ export default { @@ -137,7 +161,7 @@ export default {
137 this.setFilterParam(optParams); 161 this.setFilterParam(optParams);
138 }, 162 },
139 163
140 - setFilterParam({filter}) { 164 + setFilterParam(filter) {
141 let filterParams = this.filterParams; 165 let filterParams = this.filterParams;
142 166
143 if (typeof filter === 'object' && Object.keys(filter).length) { 167 if (typeof filter === 'object' && Object.keys(filter).length) {
@@ -158,7 +182,7 @@ export default { @@ -158,7 +182,7 @@ export default {
158 } 182 }
159 }; 183 };
160 </script> 184 </script>
161 -<style scoped> 185 +<style lang="scss" scoped>
162 .header { 186 .header {
163 width: 100%; 187 width: 100%;
164 height: 45PX; 188 height: 45PX;
@@ -190,7 +214,83 @@ export default { @@ -190,7 +214,83 @@ export default {
190 margin-left: 40px; 214 margin-left: 40px;
191 } 215 }
192 216
193 - .content { 217 + .content-search {
  218 +
  219 + .item {
  220 + margin-bottom: 60px;
  221 + }
  222 +
  223 + .item-title {
  224 + margin-left: 40px;
  225 + margin-bottom: 20px;
  226 + font-size: 40px;
  227 + color: #000;
  228 + letter-spacing: 0;
  229 + font-weight: 500;
  230 + }
  231 +
  232 + .item-list {
  233 + overflow-y: hidden;
  234 + overflow-x: scroll;
  235 + display: -webkit-box;
  236 + width: 100%;
  237 + }
  238 +
  239 + .item-list ::-webkit-scrollbar {
  240 + display: none;
  241 + }
  242 +
  243 + .item-text {
  244 + background: #f5f5f5;
  245 + font-size: 28px;
  246 + color: #222;
  247 + text-align: center;
  248 + width: 200px;
  249 + height: 80px;
  250 + line-height: 80px;
  251 + margin-right: 20px;
  252 + border-radius: 40px;
  253 + }
  254 +
  255 + .item-text-selected {
  256 + background: #08304b;
  257 + color: #fff;
  258 + }
  259 +
  260 + .item-size {
  261 + width: 130px;
  262 + height: 80px;
  263 + line-height: 80px;
  264 + }
  265 +
  266 + .item-img {
  267 + width: 140px;
  268 + height: 70px;
  269 + margin-bottom: 22px;
  270 + }
  271 +
  272 + .item-img-selected {
  273 + opacity: 1 !important;
  274 + }
  275 +
  276 + .item-img-content {
  277 + opacity: 0.2;
  278 + width: 160px;
  279 + height: 140px;
  280 + display: flex;
  281 + justify-content: center;
  282 + flex-direction: column;
  283 + margin-right: 20px;
  284 + }
  285 +
  286 + .item-img-text {
  287 + font-size: 20px;
  288 + color: #000;
  289 + letter-spacing: 0;
  290 + text-align: center;
  291 + width: 140px;
  292 + height: 64px;
  293 + }
194 } 294 }
195 295
196 .bottom { 296 .bottom {
@@ -230,82 +330,6 @@ export default { @@ -230,82 +330,6 @@ export default {
230 margin-right: 32px; 330 margin-right: 32px;
231 } 331 }
232 332
233 - .item {  
234 - margin-bottom: 60px;  
235 - }  
236 -  
237 - .item-title {  
238 - margin-left: 40px;  
239 - margin-bottom: 20px;  
240 - font-size: 40px;  
241 - color: #000;  
242 - letter-spacing: 0;  
243 - font-weight: 500;  
244 - }  
245 -  
246 - .item-list {  
247 - overflow-y: hidden;  
248 - overflow-x: scroll;  
249 - display: -webkit-box;  
250 - width: 100%;  
251 - }  
252 -  
253 - .item-list ::-webkit-scrollbar {  
254 - display: none;  
255 - }  
256 -  
257 - .item-text {  
258 - background: #f5f5f5;  
259 - font-size: 28px;  
260 - color: #222;  
261 - text-align: center;  
262 - width: 200px;  
263 - height: 80px;  
264 - line-height: 80px;  
265 - margin-right: 20px;  
266 - border-radius: 40px;  
267 - }  
268 -  
269 - .item-text-selected {  
270 - background: #08304b;  
271 - color: #fff;  
272 - }  
273 -  
274 - .item-size {  
275 - width: 130px;  
276 - height: 80px;  
277 - line-height: 80px;  
278 - }  
279 -  
280 - .item-img {  
281 - width: 140px;  
282 - height: 70px;  
283 - margin-bottom: 22px;  
284 - }  
285 -  
286 - .item-img-selected {  
287 - opacity: 1 !important;  
288 - }  
289 -  
290 - .item-img-content {  
291 - opacity: 0.2;  
292 - width: 160px;  
293 - height: 140px;  
294 - display: flex;  
295 - justify-content: center;  
296 - flex-direction: column;  
297 - margin-right: 20px;  
298 - }  
299 -  
300 - .item-img-text {  
301 - font-size: 20px;  
302 - color: #000;  
303 - letter-spacing: 0;  
304 - text-align: center;  
305 - width: 140px;  
306 - height: 64px;  
307 - }  
308 -  
309 .back { 333 .back {
310 margin-top: 24px; 334 margin-top: 24px;
311 width: 24PX; 335 width: 24PX;
@@ -98,8 +98,6 @@ export default { @@ -98,8 +98,6 @@ export default {
98 } 98 }
99 if (Object.keys(params).length && params.type) { 99 if (Object.keys(params).length && params.type) {
100 this.type = params.type; 100 this.type = params.type;
101 - } else {  
102 - params.type = 6;  
103 } 101 }
104 !params.order && (params.order = 'sale_desc'); 102 !params.order && (params.order = 'sale_desc');
105 this.fetchList({...params, isReset: true}); 103 this.fetchList({...params, isReset: true});
@@ -9,18 +9,18 @@ @@ -9,18 +9,18 @@
9 </div> 9 </div>
10 </form> 10 </form>
11 <Scroll v-show="!query.length" :options="scrollOptions"> 11 <Scroll v-show="!query.length" :options="scrollOptions">
12 - <div class="recent title middle" v-if="searchWord.length">热门推荐</div> 12 + <div class="recent title middle" v-if="searchWord && searchWord.length">热门推荐</div>
13 <div class="content middle"> 13 <div class="content middle">
14 - <div class="item" v-if="searchWord.length" v-for="item of searchWord" @click="goSearch({query : item.search_word})"> 14 + <div class="item" v-if="searchWord && searchWord.length" v-for="item of searchWord" @click="goSearch({query : item.search_word})">
15 {{item.search_word}} 15 {{item.search_word}}
16 </div> 16 </div>
17 </div> 17 </div>
18 - <div class="recent middle" v-if="localHistory.length"> 18 + <div class="recent middle" v-if="localHistory && localHistory.length">
19 <div class="title">最近搜索</div> 19 <div class="title">最近搜索</div>
20 <div class="search-clear search-clear-img" @click="clearLocalHistory()"></div> 20 <div class="search-clear search-clear-img" @click="clearLocalHistory()"></div>
21 </div> 21 </div>
22 <div class="content middle"> 22 <div class="content middle">
23 - <div class="item" v-if="localHistory.length" v-for="item of localHistory" @click="goSearch({query : item})">{{item}} 23 + <div class="item" v-if="localHistory && localHistory.length" v-for="item of localHistory" @click="goSearch({query : item})">{{item}}
24 </div> 24 </div>
25 </div> 25 </div>
26 </Scroll> 26 </Scroll>
@@ -72,7 +72,8 @@ export default { @@ -72,7 +72,8 @@ export default {
72 this.$router.push({ 72 this.$router.push({
73 name: 'List', 73 name: 'List',
74 query: { 74 query: {
75 - query: this.query 75 + query: this.query,
  76 + type: 6
76 } 77 }
77 }); 78 });
78 }, 79 },
@@ -85,7 +86,8 @@ export default { @@ -85,7 +86,8 @@ export default {
85 this.$router.push({ 86 this.$router.push({
86 name: 'List', 87 name: 'List',
87 query: { 88 query: {
88 - query 89 + query,
  90 + type: 6
89 } 91 }
90 }); 92 });
91 }, 93 },