列表页筛选修改

@@ -7,8 +7,8 @@
         </div>
         <div class="choices" v-show="show">
             <span v-for="(index, choice) in allChoices"
-                  class="ellipsis choice"
-                  @click="addChoice(index, choice)">
+                  class="ellipsis choice" :class="{active: choice.isChosen}"
+                  @click="toggleChoice(index, choice)">
                      {{name === '品类' ? choice.category_name : choice.name}}
             </span>
             <span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name
@@ -17,6 +17,7 @@
     </div>
 </template>
 <script>
+const _ = require('lodash');
 const bus = require('common/vue-bus');
 
 module.exports = {
@@ -34,18 +35,6 @@ module.exports = {
             allChoices: []
         }
     },
-    computed: {
-        allChoices(){
-            const len = this.choices.length;
-            const isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
-
-            if (len > 11 && isLimited) {
-                this.showMore = true;
-                return this.choices.slice(0, 11);
-            }
-            return this.choices.slice();
-        }
-    },
     methods: {
         toggle(name) {
             if (this.show) {
@@ -60,12 +49,14 @@ module.exports = {
 
             this.show = true;
         },
-        addChoice(index, choice) {
-            choice._chosen = true;
-            this.chosen.push({
-                index,
-                choice
-            });
+        toggleChoice(index, choice) {
+            const newChoice = {
+                name: choice.name,
+                category_name: choice.category_name,
+                isChosen: !choice.isChosen
+            };
+
+            this.allChoices.$set(index, newChoice);
         },
         expandAll(name){
             switch (name) {
@@ -74,9 +65,21 @@ module.exports = {
                 case '品类':
                     break;
             }
+        },
+        setAllChoices(){
+            let isLimited = false;
+            const len = this.choices.length;
+
+            this.allChoices = this.choices.slice();
+            isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
+            if (len > 11 && isLimited) {
+                this.showMore = true;
+                this.allChoices = this.choices.slice(0, 11);
+            }
         }
     },
-    watch: {
+    created(){
+        this.setAllChoices();
     },
     components: {}
 };

 <template>
     <div class="top-filter clearfix">
+        <div class="filter-overlay" v-show="layFlag"></div>
+        <div class="filter-content">
             <ul class="filter-type">
                 <li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>
                 <li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>
@@ -14,8 +16,9 @@
                 <filter-item v-for="item in filterItems" :name="item.name" :choices="item.choices"></filter-item>
                 <div class="action">
                     <p class="tip">您可以选择一个或多个筛选项进行筛选</p>
-                <a class="action-btn filter-btn">筛选</a>
-                <a class="action-btn clear-btn">清空</a>
+                    <a class="action-btn filter-btn" @click="filterSearch">筛选</a>
+                    <a class="action-btn clear-btn" @click="clearFilter">清空</a>
+                </div>
             </div>
         </div>
     </div>
@@ -51,34 +54,29 @@ module.exports = {
             filterItems: [
                 {
                     name: '品牌',
-                    val: '',
                     choices: this.filter.brand
                 }, {
                     name: '品类',
-                    val: '',
                     choices: []
                 }, {
                     name: '颜色',
-                    val: '',
                     choices: this.filter.color
                 }, {
                     name: '尺寸',
-                    val: '',
                     choices: this.filter.size
                 }, {
                     name: '价格',
-                    val: '',
                     choices: this.filter.priceRange
                 }, {
                     name: '折扣',
-                    val: '',
                     choices: this.filter.discount
                 }
             ],
             activeSort: {
                 text: '推荐',
                 order: ''
-            }
+            },
+            layFlag: false
         }
     },
     computed: {
@@ -101,7 +99,6 @@ module.exports = {
         toggleRec(){
             this.filterDown = true;
             this.recDown = !this.recDown;
-
         },
         toggleFilter(){
             this.recDown = true;
@@ -121,6 +118,45 @@ module.exports = {
                 ref: this._uid
             });
             this.recDown = true;
+        },
+        showLay() {
+            this.bodyElStyle = document.querySelector('body').style;
+            this.bodyElStyle.position = 'absolute';
+            this.bodyElStyle.top = 0;
+            this.bodyElStyle.left = 0;
+            this.bodyElStyle.right = 0;
+            this.bodyElStyle.bottom = 0;
+            this.bodyElStyle.overflow = 'hidden';
+            this.layFlag = true;
+        },
+        hideLay() {
+            this.bodyElStyle.position = 'static';
+            this.bodyElStyle.overflow = 'auto';
+            this.layFlag = false;
+        },
+        filterSearch(){
+
+        },
+        clearFilter(){
+
+        }
+    },
+    watch: {
+        recDown(val){
+            if (val) {
+                this.hideLay();
+                return;
+            } else {
+                this.showLay();
+            }
+
+        },
+        filterDown(val){
+            if (val) {
+                return this.hideLay();
+            }
+
+            this.showLay();
         }
     },
     components: {
@@ -134,7 +170,9 @@ module.exports = {
 
         this.filterItems[1].choices = temp;
 
-        console.log(temp)
+        bus.$on('filter.choice.change', choice => {
+
+        })
     }
 };
 </script>
@@ -144,12 +182,29 @@ module.exports = {
 .top-filter {
     position: relative;
     height: 81px;
-    border-bottom: 1px solid #eee;
+
+    .filter-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: .5;
+        background-color: #000;
+    }
+
+    .filter-content {
+        position: relative;
+        background-color: #fff;
+    }
 
     .filter-type {
         font-size: 0;
         list-style: none;
+        height: 79px;
+        background-color: #fff;
         padding: 16px 30px 0;
+        border-bottom: 1px solid #eee;
 
         .type-item {
             display: inline-block;
@@ -179,7 +234,7 @@ module.exports = {
 
     .rec-detail {
         position: absolute;
-        top: 81px;
+        top: 79px;
         left: 0;
         right: 0;
 
@@ -192,6 +247,10 @@ module.exports = {
             background-color: #fff;
             border-bottom: 1px solid #eee;
 
+            &:last-child {
+                 border-bottom: none;
+            }
+
             &.active {
                  background: $grey;
             }
@@ -200,7 +259,7 @@ module.exports = {
 
     .filter-detail {
         position: absolute;
-        top: 81px;
+        top: 79px;
         left: 0;
         right: 0;
         height: 950px;

@@ -286,7 +286,7 @@
                 entity: {},
                 showFeatureSelector: false,
                 cartCount: 0,
-                isApp: true, // TODO yoho.isApp,
+                isApp: yoho.isApp,
                 isSoldOut: false,
                 isReady: false,
                 preferTitle: 'You Might Also Like',