列表页filter修改

@@ -19,4 +19,4 @@ router.post('/upload/image', auth, multipartMiddleware, uploadApi.uploadImg);
 
 router.get('/wechat/share/token', wechat.shareToken);
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;

@@ -47,4 +47,4 @@ module.exports = {
             cache: true
         }));
     }
-};
\ No newline at end of file
+};

@@ -94,4 +94,4 @@ const model = {
     }
 };
 
-module.exports = model;
\ No newline at end of file
+module.exports = model;

@@ -33,4 +33,4 @@ const editorialList = params => {
 
 module.exports = {
     editorialList
-};
\ No newline at end of file
+};

@@ -25,4 +25,4 @@ router.get(/like_(\d+)\.json/, auth, detail.like);
 router.get(/favorite_(\d+)\.json/, auth, detail.favorite);
 router.get(/misc_(\d+)\.json/, detail.misc);
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;

@@ -92,4 +92,4 @@ const refund = {
     }
 };
 
-module.exports = refund;
\ No newline at end of file
+module.exports = refund;

@@ -6,52 +6,6 @@
 'use strict';
 
 const api = global.yoho.API;
-const _ = require('lodash');
-
-/**
- *
- * @param product
- * @returns {*|string}
- * @private
- */
-const _procProductImg = (product) => {
-    if (product.gender === '2,3' || product.gender === '2' || product.gender === '3') {
-        return product.cover_2 || product.images_url || product.cover_1 || '';
-    }
-
-    return product.cover_1 || product.images_url || product.cover_2 || '';
-};
-
-/**
- *
- * @param list
- * @returns {Array}
- * @private
- */
-const _processProduct = (list) => {
-    let newRes = [];
-
-    list = list || [];
-
-    list.forEach(item => {
-        let defaultGoods = _.find(item.goods_list, {is_default: 'Y'});
-
-        // 无默认商品取商品列表第一个
-        if (!defaultGoods) {
-            defaultGoods = item.goods_list[0];
-        }
-
-        item.default_images = _procProductImg(defaultGoods);
-        item.goodsUrl = `${config.siteUrl}/product/pro_${item.product_id}_${defaultGoods.goods_id}/${item.cn_alphabet}.html`; // eslint-disable-line
-    });
-
-    _.chunk(list, 5).forEach(item => {
-        newRes.push({
-            list: item
-        });
-    });
-    return newRes;
-};
 
 /**
  * 商品详情

@@ -45,4 +45,4 @@ const search = {
     }
 };
 
-module.exports = search;
\ No newline at end of file
+module.exports = search;

@@ -132,4 +132,4 @@ module.exports = {
         }
         return api.get('', finalParams);
     }
-};
\ No newline at end of file
+};

@@ -199,4 +199,4 @@ module.exports = {
     getShopData,
     getBrandShopGoodsData,
     collectShopData
-};
\ No newline at end of file
+};

@@ -18,13 +18,13 @@ module.exports = {
         app_type: 1
     },
     domains: {
-        // api: 'http://api-test2.yohops.com:9999/',
-        // service: 'http://service-test2.yohops.com:9999/',
-        // singleApi: 'http://api-test2.yohops.com:9999/',
+        api: 'http://api-test2.yohops.com:9999/',
+        service: 'http://service-test2.yohops.com:9999/',
+        singleApi: 'http://api-test2.yohops.com:9999/',
 
-        api: 'http://api-test3.yohops.com:9999/',
-        service: 'http://service-test3.yohops.com:9999/',
-        singleApi: 'http://api-test3.yohops.com:9999/',
+        // api: 'http://api-test3.yohops.com:9999/',
+        // service: 'http://service-test3.yohops.com:9999/',
+        // singleApi: 'http://api-test3.yohops.com:9999/',
 
         // api: 'http://dev-api.yohops.com:9999/',
         // service: 'http://dev-service.yohops.com:9999/',

@@ -12,7 +12,7 @@ let base = require('./webpack.base.config');
 if (process.env.NODE_ENV === 'performance') {
     const Visualizer = require('webpack-visualizer-plugin');
     const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
- 
+
     base = merge(base, {
         plugins: [
             new Visualizer({

@@ -3,15 +3,15 @@ var $ = require('jquery');
 var interceptClick = require('common/intercept-click');
 
 yoho.ready(() => {
-	const header = Object.assign({}, interceptClick.defaultTitleMap[1]);
+    const header = Object.assign({}, interceptClick.defaultTitleMap[1]);
 
-	header.title.des = 'YOHO!BLK';
-	yoho.updateNavigationBar({
-		header: header
-	});
-	yoho.showLoading(false);
+    header.title.des = 'YOHO!BLK';
+    yoho.updateNavigationBar({
+        header: header
+    });
+    yoho.showLoading(false);
 
-	$('.home').on('click', () => {
-		yoho.goBack();
-	});
-});
\ No newline at end of file
+    $('.home').on('click', () => {
+        yoho.goBack();
+    });
+});

@@ -69,6 +69,7 @@ module.exports = (Vue) => {
         query = query && query[1] || '';
         if (query && query.indexOf('domain=') > -1) {
             let domain = query.match(/domain=([^&]*)&?.*?/);
+
             domain = domain[1] || '';
             return `${protocol}m.yohoblk.com/product/shop/${domain}?${query}`;
         }

@@ -6,15 +6,15 @@ const yoho = require('yoho');
 
 require('common/vue-filter')(Vue);
 Vue.use(lazyload, {
-	preLoad: 3
+    preLoad: 3
 });
 Vue.use(directive);
 
 yoho.ready(() => {
-	new Vue({
-		el: '#app',
-		components: {
-			app
-		}
-	});
-});
\ No newline at end of file
+    new Vue({
+        el: '#app',
+        components: {
+            app
+        }
+    });
+});

@@ -2,10 +2,10 @@ var yoho = require('yoho');
 var interceptClick = require('common/intercept-click');
 
 yoho.ready(() => {
-	const header = Object.assign({}, interceptClick.defaultTitleMap[1]);
+    const header = Object.assign({}, interceptClick.defaultTitleMap[1]);
 
-	header.title.des = '关于我们';
-	yoho.updateNavigationBar({
-		header: header
-	});
-});
\ No newline at end of file
+    header.title.des = '关于我们';
+    yoho.updateNavigationBar({
+        header: header
+    });
+});

@@ -16,4 +16,4 @@ yoho.ready(() => {
             favBrandList
         }
     });
-})
+});

@@ -3,26 +3,5 @@ const $ = require('jquery');
 const search = require('product/list/index.vue');
 
 $(function() {
-    const buildOrder = function() {
-        return [
-            {
-                txt: '默认',
-                val: ''
-            }, {
-                txt: '最新',
-                val: 's_t_desc'
-            }, {
-                type: 'updown',
-                txt: '价格',
-                val: ['s_p_asc', 's_p_desc'] // [up, down]
-            },
-            {
-                type: 'updown',
-                txt: '折扣',
-                val: ['p_d_asc', 'p_d_desc']
-            }
-        ];
-    };
-
-    let app = new Vue(search);
+    let app = new Vue(search); // eslint-disable-line
 });

+<template>
+    <div class="ft-item">
+        <div class="title" @click="toggle(name)">
+            <span class="t-text">{{name}}</span>
+            <i class="t-icon icon icon-add"></i>
+            <span class="t-val ellipsis">{{chosenVal}}</span>
+        </div>
+        <div class="choices" v-show="show">
+            <span v-for="(index, choice) in choices"
+                  class="ellipsis choice" :class="{active: true}"
+                  @click="addChoice(index, choice)">{{choice._chosen}}{{choice.name}}</span>
+        </div>
+    </div>
+</template>
+<script>
+const bus = require('common/vue-bus');
+
+module.exports = {
+    props: {
+        name: String,
+        choices: Array
+    },
+    data(){
+        return {
+            filterItems: [
+                {
+                    text: '品牌',
+                    val: ''
+                }, {
+                    text: '品类',
+                    val: ''
+                }, {
+                    text: '颜色',
+                    val: ''
+                }, {
+                    text: '尺寸',
+                    val: ''
+                }, {
+                    text: '价格',
+                    val: ''
+                }, {
+                    text: '折扣',
+                    val: ''
+                }
+            ],
+            chosenVal: '',
+            show: false,
+            chosen: []
+        }
+    },
+    computed: {
+        allChoices(){
+            const temp = [];
+
+            this.choices.forEach(choice => {
+                choice._chosen = false;
+                temp.push(choice);
+            });
+
+            return temp;
+        }
+    },
+    methods: {
+        toggle(name) {
+            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;
+        },
+        addChoice(index, choice) {
+            choice._chosen = true;
+            this.chosen.push({
+                index,
+                choice
+            });
+            console.log(this.choices);
+        }
+    },
+    watch: {
+    },
+    components: {}
+};
+</script>
+<style>
+@import "../../../../scss/common/_color.css";
+
+.ft-item {
+    color: $black;
+    border-bottom: 1px solid #eee;
+
+    .title {
+        height: 89px;
+        padding: 0 30px;
+        font-size: 32px;
+        line-height: 89px;
+    }
+
+    .t-val {
+        float: right;
+        max-width: 280px;
+        font-size: 24px;
+        margin-right: 10px;
+    }
+
+    .t-text {
+        float: left;
+    }
+
+    .t-icon {
+        float: right;
+        margin-top: 28px;
+        font-size: 24px;
+        font-weight: bold;
+    }
+
+    .choices {
+        padding: 0 30px;
+        overflow: hidden;
+    }
+
+    .choice {
+        position: relative;
+        float: left;
+        height: 50px;
+        width: 150px;
+        padding: 0 5px;
+        margin-left: 30px;
+        margin-bottom: 30px;
+        font-size: 24px;
+        line-height: 48px;
+        text-align: center;
+        border: 1px solid #000;
+
+        &:nth-child(4n+1) {
+            margin-left: 0;
+        }
+
+        &.active {
+            color: #fff;
+            background-color: #000;
+
+            &:after {
+                content: '';
+                width: 22px;
+                height: 22px;
+                top: 24px;
+                right: 0;
+                position: absolute;
+                display: inline-block;
+                background: resolve("product/active-mark.png");
+                background-size: cover;
+            }
+        }
+    }
+}
+
+</style>

@@ -4,17 +4,19 @@
             <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>
         </ul>
-        <div class="recommend-detail" v-show="!recDown">
-            <ul class="rec-items">
-                <li v-for="item in recItems" class="item"
+        <div class="rec-detail" v-show="!recDown">
+            <ul class="re-items">
+                <li v-for="item in recItems" class="re-item"
                     :class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li>
             </ul>
         </div>
-        <div class="recommend-detail" v-show="!filterDown">
-            <ul class="rec-items">
-                <li class="item">价格从高到低</li>
-                <li class="item">价格从低到高</li>
-            </ul>
+        <div class="filter-detail" v-show="!filterDown">
+            <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>
+            </div>
         </div>
     </div>
 </template>
@@ -23,7 +25,8 @@ const bus = require('common/vue-bus');
 
 module.exports = {
     props: {
-        val: String
+        val: String,
+        filter: Object
     },
     data(){
         return {
@@ -44,12 +47,41 @@ module.exports = {
                     val: 's_p_asc'
                 }
             ],
+            filterItems: [
+                {
+                    name: '品牌',
+                    val: '',
+                    choices: this.filter.brand
+                }, {
+                    name: '品类',
+                    val: '',
+                    choices: this.filter.group_sort // 多级
+                }, {
+                    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: ''
             }
         }
     },
+    watch: {
+    },
     computed: {
         recClass(){
             return {
@@ -92,13 +124,13 @@ module.exports = {
             this.recDown = true;
         }
     },
-    watch: {
-    },
-    components: {}
+    components: {
+        filterItem: require('./filter-item.vue')
+    }
 };
 </script>
 <style>
-@import "../../../scss/common/_color.css";
+@import "../../../../scss/common/_color.css";
 
 .top-filter {
     position: relative;
@@ -136,27 +168,138 @@ module.exports = {
         }
     }
 
-    .recommend-detail {
+    .rec-detail {
         position: absolute;
         top: 81px;
         left: 0;
         right: 0;
-    }
 
-    .rec-items {
-        .item {
+        .re-item {
             height: 90px;
             color: $black;
             font-size: 32px;
             text-align: center;
             line-height: 89px;
-            border-bottom: 1px solid #eee;
             background-color: #fff;
+            border-bottom: 1px solid #eee;
 
             &.active {
                  background: $grey;
             }
         }
     }
+
+    .filter-detail {
+        position: absolute;
+        top: 81px;
+        left: 0;
+        right: 0;
+        height: 950px;
+        background-color: #fff;
+
+        .ft-item {
+            color: $black;
+            border-bottom: 1px solid #eee;
+
+            .title {
+                height: 89px;
+                padding: 0 30px;
+                font-size: 32px;
+                line-height: 89px;
+            }
+
+            .t-val {
+                float: right;
+                max-width: 280px;
+                font-size: 24px;
+                margin-right: 10px;
+            }
+
+            .t-text {
+                float: left;
+            }
+
+            .t-icon {
+                float: right;
+                margin-top: 28px;
+                font-size: 24px;
+                font-weight: bold;
+            }
+
+            .choices {
+                padding: 0 30px;
+                overflow: hidden;
+            }
+
+            .choice {
+                position: relative;
+                float: left;
+                height: 50px;
+                width: 150px;
+                padding: 0 5px;
+                margin-left: 30px;
+                margin-bottom: 30px;
+                font-size: 24px;
+                line-height: 48px;
+                text-align: center;
+                border: 1px solid #000;
+
+                &:nth-child(4n+1) {
+                    margin-left: 0;
+                }
+
+                &.active {
+                    color: #fff;
+                    background-color: #000;
+
+                    &:after {
+                        content: '';
+                        width: 22px;
+                        height: 22px;
+                        top: 24px;
+                        right: 0;
+                        position: absolute;
+                        display: inline-block;
+                        background: resolve("product/active-mark.png");
+                        background-size: cover;
+                    }
+                }
+            }
+        }
+
+        .action {
+            padding: 0 30px;
+
+            .tip {
+                padding-top: 65px;
+                color: #000;
+                font-size: 24px;
+                text-align: center;
+            }
+        }
+
+
+        .action-btn {
+            display: block;
+            font-size: 28px;
+            text-align: center;
+
+            &.filter-btn {
+                margin-top: 30px;
+                color: #fff;
+                line-height: 100px;
+                background-color: #000;
+            }
+
+            &.clear-btn {
+                margin: 50px auto 100px;
+                width: 140px;
+                color: #000;
+                line-height: 48px;
+                background-color: #fff;
+                border: 1px solid #000;
+            }
+        }
+    }
 }
 </style>

@@ -4,7 +4,7 @@
             <i v-if="isiOS" class="icon icon-filter" slot="right" @touchstart="openFilter"></i>
             <i v-else class="icon icon-filter" slot="right" @click="openFilter"></i>
         </cheader>
-        <list-filter :val="order" v-if="enableOrder"></list-filter>
+        <list-filter :val="order" :filter="filterConfig" v-if="enableOrder"></list-filter>
         <List :data="productList" :state="listState" class="list-items"></List>
         <Filter :config="filterConfig" v-ref:filter></Filter>
         <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag>
@@ -20,7 +20,7 @@
     const bus = require('common/vue-bus');
     const tip = require('common/tip');
     const cheader = require('component/header.vue');
-    const listFilter = require('component/product/list-filter.vue');
+    const listFilter = require('component/product/list-filter/index.vue');
     const list = require('component/product/list.vue');
     const filter = require('component/product/filter.vue');
     const shoppingBag = require('component/product/shopping-bag.vue');