product list

 <div id="product-list">
     <Sort></Sort>
     <List url="/product/list" :query='{a:1}'></List>
-    <div class="drawer-slide">
-        <div class="drawer-main">
-            <filter></filter>
-        </div>
-    </div>
+    <Drawer>
+        <Filter></Filter>
+    </Drawer>
 </div>
\ No newline at end of file

@@ -54,10 +54,8 @@
     "gulp-postcss": "^6.1.0",
     "gulp-sourcemaps": "^2.0.0-alpha",
     "gulp-util": "^3.0.7",
-    "handlebars": "^4.0.5",
     "handlebars-loader": "^1.3.0",
     "husky": "^0.11.4",
-    "node-sass": "^3.8.0",
     "nodemon": "1.9.2",
     "postcss-assets": "^4.0.1",
     "postcss-cachebuster": "^0.1.3",

 const Vue = require('yoho-vue');
-const sort = require('component/sort.vue');
-const list = require('component/list.vue');
-const filter = require('component/filter.vue');
+const lazyload = require('yoho-vue-lazyload');
+const infinitScroll = require('yoho-vue-infinite-scroll');
+const sort = require('product/sort.vue');
+const list = require('product/list.vue');
+const drawer = require('product/drawer.vue');
+const filter = require('product/filter.vue');
+
+Vue.use(lazyload);
+Vue.use(infinitScroll);
 
 require('common/vue-filter');
 
 new Vue({
     el: '#product-list',
     components: {
-        list, sort, filter
+        list, sort, filter, drawer
     }
 });

@@ -44,3 +44,13 @@ a {
     max-width: 750px;
     width: 100%;
 }
+.right {
+    float: right;
+}
+
+.left {
+    float: right;
+}
+.text-center {
+    text-align: center;
+}

+<template>
+    <div class="drawer" :class="{'drawer-open': on }" v-show="on">
+        <div class="drawer-main" v-el:main>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+module.exports = {
+    props: {
+        on: Boolean
+    }
+};
+</script>
+<style>
+.drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.drawer-main {
+    position: absolute;
+    top: 0;
+    right: 0%;
+    bottom: 0;
+    min-width: 80%;
+    max-width: 100%;
+    background-color: #fff;
+    transition: all 0.3s 0.2s;
+}
+</style>

 <template>
     <div class="filter">
         <div class="filter-actions">
-            <a href="javascript:; filter-action">清空</a>
+            <a href="javascript:;" class="filter-action" @click="clearVals">清空</a>
             <button class="button button-small filter-action">确定</button>
         </div>
         <div class="filter-params">
             <ul class="filter-cates">
                 <li class="filter-cate" v-for="filter in filters">
-                    <i class="icon icon-right"></i>
-                    <span>{{filter.classfly}}</span>
-                    <span class="filter-cate-val">{{val[filter.key]}}</span>
+                    <i class="icon icon-right right"></i>
+                    <span class="filter-cate-label">{{filter.classfly}}</span>
+                    <span class="filter-cate-val">{{vals[filter.key]}}</span>
                 </li>
             </ul>
         </div>
     </div>
 </template>
+<script>
+const $ = require('yoho-jquery');
+
+module.exports = {
+    data: function() {
+        return {
+            vals: {
+                brand: 'Supreme',
+                category: '夹克'
+            },
+            filters: [{
+                classfly: 'Brand品牌',
+                key: 'brand',
+                itemArray: []
+            }, {
+                classfly: 'Category品类',
+                key: 'category',
+                itemArray: []
+            }, {
+                classfly: 'Color颜色',
+                key: 'color',
+                itemArray: []
+            }, {
+                classfly: 'Size尺寸',
+                key: 'size',
+                itemArray: []
+            }]
+        };
+    },
+    methods: {
+        clearVals: function() {
+            const self = this;
+
+            $.each(this.vals, (k) => {
+                self.vals[k] = '';
+            });
+        }
+    }
+};
+</script>
 <style>
 @import "../../scss/common/color";
 
 .filter {
-    padding: 0 20px;
+    padding: 0 30px;
 }
 
 .filter-actions {
+    font-size: 34px;
     text-align: right;
-    padding: 10px 0;
+    padding: 45px 0;
 }
 
 .filter-action {
-    margin-left: 20px;
+    font-size: inherit;
+    margin-left: 40px;
 }
 
 .filter-actions,
@@ -42,14 +84,24 @@
     padding: 0;
 }
 
-.filter-cate {
-    .icon-right {
-        float: right;
-    }
+.filter-cate .icon-right {
+    margin-left: 24px;
+}
+
+.filter-cate,
+.icon-right {
+    height: 118px;
+    line-height: 118px;
+}
+
+.filter-cate-label {
+    font-size: 36px;
+    font-weight: bold;
 }
 
 .filter-cate-val {
     float: right;
+    font-size: 28px;
 }
 
 .filter-cate-val,
@@ -57,32 +109,3 @@
     color: $grey;
 }
 </style>
-<script>
-module.exports = {
-    data: function() {
-        return {
-            val: {
-                brand: 'Supreme',
-                category: '夹克'
-            },
-            filters: [{
-                classfly: 'Brand品牌',
-                key: 'brand',
-                itemArray: []
-            }, {
-                classfly: 'Category品类',
-                key: 'category',
-                itemArray: []
-            }, {
-                classfly: 'Color颜色',
-                key: 'color',
-                itemArray: []
-            }, {
-                classfly: 'Size尺寸',
-                key: 'size',
-                itemArray: []
-            }]
-        };
-    }
-};
-</script>

 <template>
-    <div class="goods-box">
-        <ul class="cardlist card-large">
+    <div class="goods-box" v-infinite-scroll="fetch()" infinite-scroll-disable="disableFetch">
+        <ul class="cardlist card-large clearfix">
             <li class="card" v-for="item in products">
                 <div class="card-pic">
                     <a href="">
-                        <img :src="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
+                        <img v-lazy="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
                     </a>
                 </div>
                 <div class="card-bd">
@@ -16,43 +16,76 @@
                 </div>
             </li>
         </ul>
+        <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p>
+        <p class="cardlist--end text-center" v-show="atEnd ">--End--</p>
     </div>
 </template>
 <script>
 let $ = require('yoho-jquery');
 
+/**
+ *  @example
+ *  <List url='' :query='{}' disable-fetch></List>
+ *  <List :init-data='{}'></List>
+ */
+
 module.exports = {
     props: {
+
         /* 请求地址 */
         url: {
             type: String,
             required: true
         },
-        initData: Array, /* 初始数据, 应该只单次绑定, 然后fetch数据全靠url */
-        query: Object /* 请求参数 */
+
+        /* 初始数据, 应该只单次绑定, 然后fetch数据全靠url */
+        initData: Array,
+
+        /* 请求参数 */
+        query: Object,
+
+        /* 开启滚动加载 */
+        disableFetch: Boolean 
     },
     data: function() {
         return {
-            products: []
+            state: {
+                curPage: 0,
+                totalPage: 10
+            },
+            products: [],
+            inLoading: false,
+            atEnd: false
         };
     },
     methods: {
         fetch: function() {
+            if (this.atEnd) {
+                return;
+            }
             let self = this;
 
+            this.state.curPage++;
+            this.inLoading = true;
             $.ajax({
                 url: this.url,
                 type: 'POST',
             })
-            .then(result => {
+            .done(result => {
                 self.$set('products', self.products.concat(result.data.productList));
+            })
+            .always(() => {
+                self.inLoading = false;
+                self.atEnd = self.state.curPage === self.state.totalPage;
             });
+
         }
     },
     created: function() {
         // 有初始数据，用初始数据
         if (this.initData) {
-            self.$set('products', self.products.concat(this.initData));
+            this.$set('products', this.products.concat(this.initData));
+            this.atEnd = true;
         } else if (this.url) {
             this.fetch();
         }
@@ -115,23 +148,4 @@ module.exports = {
         color: $red;
     }
 }
-
-.drawer-slide {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-}
-
-.drawer-main {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    min-width: 80%;
-    max-width: 100%;
-    background-color: #fff;
-}
 </style>

@@ -3,22 +3,30 @@
         <li class="sort-item active"><span>默认</span></li>
         <li class="sort-item">
             <span class="sort-name">最新</span>
+            <span class="sort-icon">
+                <i class="icon icon-sort-asc"></i>
+                <i class="icon icon-sort-desc"></i>
+            </span>
         </li>
         <li class="sort-item">
             <span class="sort-name">价格</span>
         </li>
         <li class="sort-item">
             <span class="sort-name">折扣</span>
+            <span class="sort-icon">
+                <i class="icon icon-sort-asc"></i>
+                <i class="icon icon-sort-desc"></i>
+            </span>
         </li>
     </ul>
 </template>
 <script>
 module.exports = {
 
-}
+};
 </script>
 <style>
-@import '../../scss/common/color';
+@import "../../scss/common/color";
 
 .sort-navs {
     list-style: none;
@@ -35,7 +43,7 @@ module.exports = {
     text-align: center;
 
     &:after {
-        content: '|';
+        content: "|";
         position: absolute;
         right: 0;
         color: $grey;
@@ -49,6 +57,18 @@ module.exports = {
         font-size: 28px;
     }
 
+    .sort-icon {
+        position: relative;
+        margin-left: 10px;
+
+        .icon-sort-asc,
+        .icon-sort-desc {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+
     &.active {
         color: $black;
     }