商品列表

 <template>
   <LayoutApp :show-back="true">
-    <Scroll :scrollEvents="['scroll']" :options="scrollOptions" @scroll="scroll"
+    <div class="filter">
+      <div class="filter-tab">
+        <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>
+        <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">
+          <span>价格</span>
+          <div :class="arrowImage"></div>
+        </div>
+        <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>
+      </div>
+      <div class="screen middle">
+        <div class="screen-img"></div>
+        筛选
+      </div>
+    </div>
+    <Scroll :options="scrollOptions"
+            :data="productList.list"
             @pulling-up="onPullingUp">
       <ProductList :list="productList.list"></ProductList>
     </Scroll>
@@ -27,33 +42,143 @@ export default {
         },
         pullUpLoad: true
       },
-      fixed: false
+      fixed: false,
+      selectedType: 2,
+      priceDesc: true,
+      arrowImage: '',
+      searchKey: '',
+      listType: 1
     };
   },
   mounted() {
-    this.fetchProductList();
+    this.changeArrow();
+    let params = this.$route.params;
+
+    if (Object.keys(params).length && params.listType) {
+      this.listType = params.listType;
+    }
+    this.fetchProductList({listType: this.listType, isReset: true});
+
   },
   methods: {
     ...mapActions(['fetchProductList']),
 
+    // 上拉加载
     async onPullingUp() {
-      await this.fetchProductList();
+      await this.fetchProductList({listType: this.listType});
     },
-    scroll({ y }) {
-      const height = this.$refs.banner.$el.offsetHeight + this.$refs.header.offsetHeight;
 
-      if (-y >= height) {
-        this.fixed = true;
-      } else {
-        this.fixed = false;
+    // 点击tab type, 0: 推荐, 1: 价格, 2: 人气, 3: 新品
+    pressType(type) {
+      if (type === this.selectedType && type !== 1) {
+        return;
       }
+      let params = {
+        type: 6,
+        query: this.searchKey,
+        sort: this.filterParams.sort.join(','),
+        brand: this.filterParams.brand.join(','), // 品牌id
+        gender: this.filterParams.gender.join(','), // 性别
+        size: this.filterParams.size.join(','), // 尺码id
+      };
+
+      if (this.listType === 4) {
+        delete params.type;
+      }
+
+      this.selectedType = type;
+      if (type === 1) {
+        this.priceDesc = !this.priceDesc;
+        params.order = !this.priceDesc ? 'p_desc' : 'p_asc';
+      } else if (type === 2) {
+        this.priceDesc = true;
+        params.order = 'sale_desc';
+      } else if (type === 3) {
+        this.priceDesc = true;
+        params.order = 'st_desc';
       }
+      params.listType = this.listType;
+      params.isReset = true;
+      this.changeArrow();
+      this.fetchProductList(params);
+    },
+    changeArrow() {
+      this.arrowImage = (this.selectedType === 3 || this.selectedType === 2) ? 'price-arrow' :
+        this.priceDesc ? 'desc-arrow' : 'asc-arrow';
+    },
   },
   computed: {
-    ...mapState(['productList']),
+    ...mapState(['productList', 'filterParams']),
   },
 };
 </script>
 
 <style scoped>
+  .filter {
+    display: flex;
+    height: 120px;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 42px;
+    padding-right: 38px;
+  }
+
+  .filter-tab {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 32px;
+    color: #999;
+    text-align: center;
+  }
+
+  .selected-tab {
+    font-size: 40px;
+    color: #000;
+    font-weight: bold;
+  }
+
+  .tab-item {
+    margin-right: 60px;
+  }
+
+  .screen {
+    font-size: 32px;
+    color: #000;
+    letter-spacing: 0;
+  }
+
+  .middle {
+    display: flex;
+    align-items: center;
+  }
+
+  .asc-arrow {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/list/asc_arrow@3x.png) no-repeat;
+    background-size: cover;
+  }
+
+  .desc-arrow {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/list/desc_arrow@3x.png) no-repeat;
+    background-size: cover;
+  }
+
+  .price-arrow {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/list/price_arrow@3x.png) no-repeat;
+    background-size: cover;
+  }
+
+  .screen-img {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/list/filter@3x.png) no-repeat;
+    background-size: cover;
+  }
 </style>