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

huangyCode
Commit 664491bc835402b4c9980b4d121fd4068aa9dd05 1 parent eb22e1c8
Showing 3 changed files with 119 additions and 95 deletions
apps/pages/list/filtrate.vue
apps/pages/list/list.vue
apps/pages/list/search.vue
--- a/apps/pages/list/filtrate.vue
View file @664491b
+++ b/apps/pages/list/filtrate.vue
View file @664491b
 <template>
   <div class="container" v-show="showType">
     <div class="header">
-      <div class="back" @click="hide()"></div>
+      <div class="back" @click="back()"></div>
     </div>
     <div class="title">筛选</div>
-    <div class="content">
-      <div class="item" v-for="(filter,row) in filterData">
+    <div class="content-search">
+      <div class="item" v-if="filterData && filterData.length" v-for="(filter,row) in filterData">
         <div class="item-title">{{filter.filterName}}</div>
         <div v-if="filter.itemList && filter.itemList.length" class="item-list">
           <div class="item-img-content" v-if="filter.filterId === 'brand'"
@@ -17,10 +17,15 @@
           </div>
           <div class="item-text item-size" v-if="filter.filterId === 'size'" :style="i===0 && 'margin-left:1rem'"
                :class="filterParams.size.includes(item.itemId) && 'item-text-selected'"
-               v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">{{item.itemName}}</div>
-          <div class="item-text" v-if="filter.filterId === 'sort' || filter.filterId === 'gender'" :style="i===0 && 'margin-left:1rem'"
+               v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">
+            {{item.itemName}}
+          </div>
+          <div class="item-text" v-if="filter.filterId === 'sort' || filter.filterId === 'gender'"
+               :style="i===0 && 'margin-left:1rem'"
                :class="(filterParams.sort.includes(item.itemId) || filterParams.gender.includes(item.itemId)) && 'item-text-selected'"
-               v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">{{item.itemName}}</div>
+               v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row})">
+            {{item.itemName}}
+          </div>
         </div>
       </div>
     </div>
@@ -52,6 +57,12 @@ export default {
       },
       filterData: [],
       filterVisible: false,
+      copyFilterParams: {
+        sort: [], // 品类id
+        brand: [], // 品牌id
+        gender: [], // 性别
+        size: [], // 尺码id
+      }
     };
   },
   activated() {
@@ -72,12 +83,19 @@ export default {
   methods: {
     ...mapActions(['fetchFilterData']),
     clear() {
-      this.setFilterParam({
+      let filterParams = {
         sort: [], // 品类id
         brand: [], // 品牌id
         gender: [], // 性别
         size: [], // 尺码id
-      });
+      };
+
+      for (let item of this.filterData) {
+        if (item.itemList && item.itemList.length === 1) {
+          filterParams[item.filterId].push(item.itemList[0].itemId);
+        }
+      }
+      this.setFilterParam(filterParams);
     },
     fetchData: async function(params) {
@@ -93,7 +111,13 @@ export default {
       this.filterParams = filterParams;
     },
+    back() {
+      this.filterParams = {...this.copyFilterParams};
+      this.hide();
+    },
+
     submit() {
+      this.copyFilterParams = {...this.filterParams};
       let params = {
         sort: this.filterParams.sort.join(','),
         brand: this.filterParams.brand.join(','), // 品牌id
@@ -137,7 +161,7 @@ export default {
       this.setFilterParam(optParams);
     },
-    setFilterParam({filter}) {
+    setFilterParam(filter) {
       let filterParams = this.filterParams;
       if (typeof filter === 'object' && Object.keys(filter).length) {
@@ -158,7 +182,7 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
   .header {
     width: 100%;
     height: 45PX;
@@ -190,7 +214,83 @@ export default {
     margin-left: 40px;
   }
-  .content {
+  .content-search {
+
+    .item {
+      margin-bottom: 60px;
+    }
+
+    .item-title {
+      margin-left: 40px;
+      margin-bottom: 20px;
+      font-size: 40px;
+      color: #000;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+
+    .item-list {
+      overflow-y: hidden;
+      overflow-x: scroll;
+      display: -webkit-box;
+      width: 100%;
+    }
+
+    .item-list ::-webkit-scrollbar {
+      display: none;
+    }
+
+    .item-text {
+      background: #f5f5f5;
+      font-size: 28px;
+      color: #222;
+      text-align: center;
+      width: 200px;
+      height: 80px;
+      line-height: 80px;
+      margin-right: 20px;
+      border-radius: 40px;
+    }
+
+    .item-text-selected {
+      background: #08304b;
+      color: #fff;
+    }
+
+    .item-size {
+      width: 130px;
+      height: 80px;
+      line-height: 80px;
+    }
+
+    .item-img {
+      width: 140px;
+      height: 70px;
+      margin-bottom: 22px;
+    }
+
+    .item-img-selected {
+      opacity: 1 !important;
+    }
+
+    .item-img-content {
+      opacity: 0.2;
+      width: 160px;
+      height: 140px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      margin-right: 20px;
+    }
+
+    .item-img-text {
+      font-size: 20px;
+      color: #000;
+      letter-spacing: 0;
+      text-align: center;
+      width: 140px;
+      height: 64px;
+    }
   }
   .bottom {
@@ -230,82 +330,6 @@ export default {
     margin-right: 32px;
   }
-  .item {
-    margin-bottom: 60px;
-  }
-
-  .item-title {
-    margin-left: 40px;
-    margin-bottom: 20px;
-    font-size: 40px;
-    color: #000;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-
-  .item-list {
-    overflow-y: hidden;
-    overflow-x: scroll;
-    display: -webkit-box;
-    width: 100%;
-  }
-
-  .item-list ::-webkit-scrollbar {
-    display: none;
-  }
-
-  .item-text {
-    background: #f5f5f5;
-    font-size: 28px;
-    color: #222;
-    text-align: center;
-    width: 200px;
-    height: 80px;
-    line-height: 80px;
-    margin-right: 20px;
-    border-radius: 40px;
-  }
-
-  .item-text-selected {
-    background: #08304b;
-    color: #fff;
-  }
-
-  .item-size {
-    width: 130px;
-    height: 80px;
-    line-height: 80px;
-  }
-
-  .item-img {
-    width: 140px;
-    height: 70px;
-    margin-bottom: 22px;
-  }
-
-  .item-img-selected {
-    opacity: 1 !important;
-  }
-
-  .item-img-content {
-    opacity: 0.2;
-    width: 160px;
-    height: 140px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin-right: 20px;
-  }
-
-  .item-img-text {
-    font-size: 20px;
-    color: #000;
-    letter-spacing: 0;
-    text-align: center;
-    width: 140px;
-    height: 64px;
-  }
-
   .back {
     margin-top: 24px;
     width: 24PX;
--- a/apps/pages/list/list.vue
View file @664491b
+++ b/apps/pages/list/list.vue
View file @664491b
@@ -98,8 +98,6 @@ export default {
     }
     if (Object.keys(params).length && params.type) {
       this.type = params.type;
-    } else {
-      params.type = 6;
     }
     !params.order && (params.order = 'sale_desc');
     this.fetchList({...params, isReset: true});
--- a/apps/pages/list/search.vue
View file @664491b
+++ b/apps/pages/list/search.vue
View file @664491b
@@ -9,18 +9,18 @@
         </div>
       </form>
       <Scroll v-show="!query.length" :options="scrollOptions">
-        <div class="recent title middle" v-if="searchWord.length">热门推荐</div>
+        <div class="recent title middle" v-if="searchWord && searchWord.length">热门推荐</div>
         <div class="content middle">
-          <div class="item" v-if="searchWord.length" v-for="item of searchWord" @click="goSearch({query : item.search_word})">
+          <div class="item" v-if="searchWord && searchWord.length" v-for="item of searchWord" @click="goSearch({query : item.search_word})">
             {{item.search_word}}
           </div>
         </div>
-        <div class="recent middle" v-if="localHistory.length">
+        <div class="recent middle" v-if="localHistory && localHistory.length">
           <div class="title">最近搜索</div>
           <div class="search-clear search-clear-img" @click="clearLocalHistory()"></div>
         </div>
         <div class="content middle">
-          <div class="item" v-if="localHistory.length" v-for="item of localHistory" @click="goSearch({query : item})">{{item}}
+          <div class="item" v-if="localHistory && localHistory.length" v-for="item of localHistory" @click="goSearch({query : item})">{{item}}
           </div>
         </div>
       </Scroll>
@@ -72,7 +72,8 @@ export default {
       this.$router.push({
         name: 'List',
         query: {
-          query: this.query
+          query: this.query,
+          type: 6
         }
       });
     },
@@ -85,7 +86,8 @@ export default {
       this.$router.push({
         name: 'List',
         query: {
-          query
+          query,
+          type: 6
         }
       });
     },