列表筛选修改

 const Vue = require('vue');
 const $ = require('jquery');
 const search = require('product/list/index.vue');
+const VueTouch = require('vue-touch');
+
+Vue.use(VueTouch);
 
 $(function() {
     let app = new Vue(search); // eslint-disable-line

 <template>
     <div class="ft-item">
-        <div class="title" @click="toggle(name)">
+        <div class="title" @click="toggleExpand(name)">
             <span class="t-text">{{name}}</span>
             <i class="t-icon icon icon-add"></i>
             <span class="t-val ellipsis">{{chosenVal}}</span>
@@ -29,34 +29,50 @@ module.exports = {
         return {
             chosenVal: '',
             show: false,
-            chosen: [],
+            chosen: {},
             choiceName: '品牌',
             showMore: false,
-            allChoices: []
+            allChoices: [],
+            initialChoices: []
         }
     },
     methods: {
-        toggle(name) {
+        toggleExpand() {
             if (this.show) {
-                this.chosen.sort((a, b) => {
-                    return a.index - b.index
-                });
-
                 this.show = false;
-                this.$emit('filterVal.change', name);
                 return;
             }
 
-            this.show = true;
+            bus.$emit('expand.choice.only', this.name);
         },
         toggleChoice(index, choice) {
             const newChoice = {
+                id: choice.id,
                 name: choice.name,
+                isChosen: !choice.isChosen,
                 category_name: choice.category_name,
-                isChosen: !choice.isChosen
+                relation_parameter: choice.relation_parameter
             };
 
             this.allChoices.$set(index, newChoice);
+            !newChoice.isChosen && (delete this.chosen[index]);
+            newChoice.isChosen && (this.chosen[index] = newChoice);
+
+            this.calcChosenVal();
+            bus.$emit('choice.change', this.name, this.chosen);
+        },
+        calcChosenVal(){
+            let name;
+            let names = [];
+            let keys = Object.keys(this.chosen);
+
+            _.each(keys, key => {
+                name = this.name !== '品类' ?
+                    this.chosen[key].name :
+                    this.chosen[key].category_name;
+                names.push(name)
+            });
+            this.chosenVal = names.join('，');
         },
         expandAll(name){
             switch (name) {
@@ -71,15 +87,33 @@ module.exports = {
             const len = this.choices.length;
 
             this.allChoices = this.choices.slice();
+            this.initialChoices = this.choices.slice();
             isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
             if (len > 11 && isLimited) {
                 this.showMore = true;
                 this.allChoices = this.choices.slice(0, 11);
+                this.initialChoices = this.choices.slice(0, 11);
             }
+        },
+        clearChosenVal(){
+            this.show = false;
+            this.chosen = [];
+            this.chosenVal = '';
+            this.allChoices = this.initialChoices.slice();
+            bus.$emit('choice.change', this.name, this.chosen);
+        },
+        searchChosenVal(){
+            this.show = false;
+        },
+        foldExcept(name) {
+            this.show = this.name === name
         }
     },
     created(){
         this.setAllChoices();
+        bus.$on('chosenVal.clear', this.clearChosenVal);
+        bus.$on('chosenVal.search', this.searchChosenVal);
+        bus.$on('fold.choice.except', this.foldExcept);
     },
     components: {}
 };

 <template>
     <div class="top-filter clearfix">
-        <div class="filter-overlay" v-show="layFlag"></div>
+        <div class="filter-overlay" v-show="layFlag" v-touch:tap="close"></div>
         <div class="filter-content">
             <ul class="filter-type">
                 <li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>
@@ -24,8 +24,20 @@
     </div>
 </template>
 <script>
+const $ = require('jquery');
 const _ = require('lodash');
 const bus = require('common/vue-bus');
+const qs = require('yoho-qs/parse');
+let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
+
+const keyMap = {
+    品牌: 'brand',
+    品类: 'sort',
+    颜色: 'color',
+    尺寸: 'size',
+    价格: 'price',
+    折扣: 'discount'
+};
 
 module.exports = {
     props: {
@@ -34,6 +46,7 @@ module.exports = {
     },
     data(){
         return {
+            chosen: {},
             recDown: true,
             filterDown: true,
             recItems: [
@@ -54,22 +67,22 @@ module.exports = {
             filterItems: [
                 {
                     name: '品牌',
-                    choices: this.filter.brand
+                    choices: []
                 }, {
                     name: '品类',
                     choices: []
                 }, {
                     name: '颜色',
-                    choices: this.filter.color
+                    choices: []
                 }, {
                     name: '尺寸',
-                    choices: this.filter.size
+                    choices: []
                 }, {
                     name: '价格',
-                    choices: this.filter.priceRange
+                    choices: []
                 }, {
                     name: '折扣',
-                    choices: this.filter.discount
+                    choices: []
                 }
             ],
             activeSort: {
@@ -135,10 +148,52 @@ module.exports = {
             this.layFlag = false;
         },
         filterSearch(){
+            let query;
+            let filter = {};
+            let ids = [];
+            let keys = [];
+
+            _.each(this.chosen, (val, key) => {
+                ids = [];
+                keys = Object.keys(val);
+
+                _.each(keys, v => {
+                    if (key !== '品类') {
+                        ids.push(val[v].id);
+                    } else {
+                        ids.push(val[v].relation_parameter.sort);
+                    }
+                });
 
+                if (ids.length) {
+                    filter[keyMap[key]] = ids.join(',');
+                } else {
+                    delete filter[keyMap[key]];
+                }
+            });
+
+            query = $.extend({}, locationQuery, filter);
+            query = $.param(query);
+
+            if (history.replaceState) {
+                history.replaceState({}, '', location.pathname + '?'+ query);
+            }
+
+            bus.$emit('fold.choice.except');
+            bus.$emit('filter.change', {
+                val: filter,
+                ref: this._uid
+            });
+            this.close();
         },
         clearFilter(){
-
+            bus.$emit('chosenVal.clear');
+        },
+        close(){
+            this.layFlag = false;
+            this.toggleFilter();
+            this.bodyElStyle.position = 'static';
+            this.bodyElStyle.overflow = 'auto';
         }
     },
     watch: {
@@ -164,15 +219,28 @@ module.exports = {
     },
     created(){
         let temp = [];
+
         _.each(this.filter.group_sort, item => {
             temp = temp.concat(item.sub);
         });
-
         this.filterItems[1].choices = temp;
+        this.filterItems[0].choices = this.filter.brand;
+        this.filterItems[2].choices = this.filter.color;
+        this.filterItems[3].choices = this.filter.size;
+        this.filterItems[4].choices = this.filter.priceRange;
+        this.filterItems[5].choices = this.filter.discount;
+
+        bus.$on('choice.change', (name, chosen) => {
+            if (!_.isArray(chosen)) {
+                this.chosen[name] = chosen;
+            } else {
+                delete this.chosen[name];
+            }
+        });
 
-        bus.$on('filter.choice.change', choice => {
-
-        })
+        bus.$on('expand.choice.only', name => {
+            bus.$emit('fold.choice.except', name);
+        });
     }
 };
 </script>
@@ -360,7 +428,7 @@ module.exports = {
             }
 
             &.clear-btn {
-                margin: 50px auto 100px;
+                margin: 50px auto 70px;
                 width: 140px;
                 color: #000;
                 line-height: 48px;