商品列表添加

@@ -6,14 +6,16 @@
  */
 const Vue = require('yoho-vue');
 const lazyload = require('yoho-vue-lazyload');
+const infinitScroll = require('yoho-vue-infinite-scroll');
 
 const brandBox = require('channel/brand-box.vue');
 
+Vue.use(lazyload);
+Vue.use(infinitScroll);
+
 new Vue({
     el: '#brand',
     components: {
         brandBox
     }
 });
-
-Vue.use(lazyload);

 <template>
     <brand-top v-bind:share-data="shareData"></brand-top>
     <brand-shop-top></brand-shop-top>
-    <!--<goods-list v-bind:data="productList"></goods-list>-->
+    <goods-list v-bind:data="productList"></goods-list>
+    <drawer v-ref:drawer>
+        <filter :config.once="filterConfig"></filter>
+    </drawer>
 </template>
 
 <script>
     const $ = require('yoho-jquery');
+    const bus = require('common/vue-bus');
     const tip = require('common/tip');
     const brandTop = require('channel/brand-top.vue');
     const brandShopTop = require('channel/brand-shop-top.vue');
     const goodsList = require('product/list.vue');
+    const drawer = require('product/drawer.vue');
+    const filter = require('product/filter.vue');
+
+    require('common/vue-filter');
 
     module.exports = {
         data() {
@@ -19,27 +27,125 @@
                     link: 'm.blk.com',
                     img: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
                 },
-                productList: []
+                sortConfig: global.sortConfig,
+                filterConfig: global.filterConfig,
+
+                // query
+                url: '/product/list',
+                sort: 3,
+                filter: {},
+                page: 0, // page= 0 未搜索, 1 并且productList.length =0 没有数据, page = page_total 全部加载完
+                totalPage: 3,
+
+                // 产品列表
+                productList: [],
+
+                // state:
+                inSearching: false,
+
+                brand: require('product/filter/brand-group-mock')
             };
         },
+        watch: {
+            /* sort 和 filter 改变 都会触发 重新搜索 (想象成清空所有分页) */
+            sort: function() {
+                this.research();
+            },
+            filter: function() {
+                this.research();
+            }
+        },
         methods: {
             getProductList() {
                 let data = {};
 
                 $.ajax({
-                    url: '/get-brand-shop-goods',
+                    method: 'post',
+                    url: '/product/list',
                     data: data
                 }).done(result => {
-                    this.productList = result.productList;
+                    this.$set('productList', this.productList.concat(result.data.productList));
                 }).fail(() => {
                     tip('网络错误');
                 });
+            },
+            search: function() {
+                const self = this;
+
+                if (this.inSearching) {
+                    return;
+                }
+                if (this.page && this.page + 1 > this.totalPage) {
+                    return;
+                }
+
+                this.inSearching = true;
+                this.page++;
+                $.post(this.url, {
+                    sort: this.sort,
+                    filter: this.filter,
+                    page: this.page
+                }).done(res => {
+                    self.$set('productList', self.productList.concat(res.data.productList));
+                }).fail(error => {
+                    self.page--;
+                    console.log(error);
+                }).always(() => {
+                    self.inSearching = false;
+                });
+            },
+
+            openFilterSub: function() {
+                console.log('TODO: open filter sub');
+            },
+
+            /**
+             *
+             */
+            research: function() {
+                this.page = 0;
+                this.$set('productList', []);
+                this.search();
             }
         },
         components: {
             brandTop,
             brandShopTop,
-            goodsList
+            goodsList,
+            drawer,
+            filter
+        },
+        created() {
+            this.search();
+            bus.$on('list.paging', function() {
+                this.search();
+            });
+
+            bus.$on('sort.change', function({ val }) {
+                console.log(val);
+                this.sort = val;
+            });
+
+
+            /**
+             * 筛选组件 筛选值变更，触发 filter.change事件
+             *  1. 重新搜索
+             *  2. 关闭 drawer 组件
+             */
+            bus.$on('filter.change', function({ val }) {
+                console.log(val);
+                this.filter = val;
+                this.$refs.drawer.on = false;
+            });
+
+            /**
+             *  筛选组件 打开二级晒寻，通过bridge 打开APP view
+             *  1. 打开view
+             *  2. 监听 router.back ，重新设置 筛选值
+             */
+            bus.$on('filter.sub.show', function({val}) {
+                this.openFilterSub(val);
+            });
         }
     };
 </script>