Merge branch 'feature/web' of http://git.dev.yoho.cn/web/yohobuy into feature/web

@@ -2,17 +2,7 @@
 <div class="commodity">
 <div class="commodity">
 
 
 	<ul class="clearfix">
 	<ul class="clearfix">
-		{{#each commodity}}
-		<li>
-			{{# state}}
-			<i class="commodity-tag{{.}}"></i>
-			{{/ state}}
-			<a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}"/></div>
-				<p class="commodity-name">{{name}}</p>
-				<p class="commodity-price"><span>¥{{price}}</span></p>
-			</a>
-		</li>
-		{{/each}}
+		
 	</ul>
 	</ul>
 	<div class="loading">
 	<div class="loading">
 		<p>Loading...</p>
 		<p>Loading...</p>

+
+var $ = require('jquery');
+
+
+function infiniteLoad(options) {
+    var defaults = {
+        index: 0,
+        isload: true,//是否正在加载
+        isrun: true,//判断是否执行
+        offset: {
+            height: null,
+            width: null
+        }
+    };
+
+    this.registerEvent = {
+        before: [],
+        change: [],
+        after: []
+    };
+
+    this.options = $.extend(true, {}, defaults, options);
+
+    return this;
+}
+
+infiniteLoad.prototype.on = function(name, callback) {
+    var g = this;
+    var _e = g.registerEvent[name];
+
+    if (_e) {
+        _e.push(callback);
+    }
+    return _e;
+};
+
+infiniteLoad.prototype.off = function(name, callback) {
+    var g = this;
+    var _e = g.registerEvent[name];
+    var e = [];
+
+    $.each(_e, function(name, _callback) {
+        if (_callback === callback) {
+            e.push(name);
+        }
+    });
+
+    $.each(e.reverse(), function(name, _callback) {
+        _e.splice(_callback, 1);
+    });
+};
+
+infiniteLoad.prototype.exect = function(key, params) {
+    var g = this;
+    var e;
+
+    if (g.registerEvent[key] && g.registerEvent[key].length > 0) {
+        for (e in g.registerEvent[key]) {
+            if (g.registerEvent[key].hasOwnProperty(e)) {
+                g.registerEvent[key][e](params);
+            }
+        }
+    }
+};
+
+infiniteLoad.prototype.init = function() {
+    var g = this;
+    var p = this.options;
+
+    function __loadMore() {
+
+        if (p.isload && g.__directionCalculation()) {
+            p.isload = false;
+            p.index++;
+            g.exect('after', p);
+        }
+
+        g.exect('change', p);
+    }
+
+    g.exect('before', p);
+
+    $(window).scroll(__loadMore);
+};
+
+infiniteLoad.prototype.emit = function() {
+    var p = this.options;
+
+    p.isload = true;
+};
+
+infiniteLoad.prototype.__directionCalculation = function() {
+    var p = this.options;
+
+    if (p.offset.height() > 0 && $(window).scrollTop() + $(window).height() >= p.offset.height()) {
+        return true;
+    }
+
+    if (p.offset.width() > 0 && $(window).scrollLeft() + $(window).width() >= p.offset.width()) {
+        return true;
+    }
+    return false;
+};
+
+module.exports = infiniteLoad;

+var $ = require('jquery');
+
+//var Lazyload = require('yoho.lazyload');
+var Handlebars = require('yoho.handlebars');
+var InfiniteLoad = require('../common/infiniteLoad');
+
+(function($) {
+    var $container = $('div.commodity ul');
+    var $load = $('.loading');
+    var load = new InfiniteLoad({
+        offset: {
+            height: function() {
+                return parseFloat($container.offset().top) + parseFloat($container.height());
+            }
+        }
+    });
+
+    load.on('after', function(p) {
+        var options = {
+            type: 'POST',
+            url: '/boys/commodity',
+            data: {
+                pageIndex: p.index,
+                pageCount: 10,
+                flag: 'boy'
+            },
+            success: function(data) {
+                var code = data.code;
+                var myTemplate;
+
+                if (code === 200) {
+
+                    myTemplate = Handlebars.compile(load.tpl);
+
+                    $container.append(myTemplate(data.commodity));
+
+                    //懒加载插件貌似有点问题,图片先直接展示
+                    //Lazyload($container.find('img.lazy'));
+
+                    load.emit();
+                } else {
+
+                    $load.html('END');
+                }
+            },
+            error: function() {
+
+                $load.html('网络断开连接了~');
+            }
+        };
+
+        $.ajax(options);
+    });
+
+    load.on('before', function() {
+
+        //请求模板
+        load.tpl = '{{#each this}}';
+        load.tpl += '<li>';
+        load.tpl += '	{{# state}}';
+        load.tpl += '	<i class="commodity-tag{{.}}"></i>';
+        load.tpl += '	{{/ state}}';
+        load.tpl += '	<a href="{{url}}"><div class="commodity-img">';
+        load.tpl += '       <img class="lazy" data-original="{{img}}" src="{{img}}"/></div>';
+        load.tpl += '		<p class="commodity-name">{{name}}</p>';
+        load.tpl += '		<p class="commodity-price"><span>¥{{price}}</span></p>';
+        load.tpl += '	</a>';
+        load.tpl += '</li>';
+        load.tpl += '{{/each}}';
+
+        load.emit();
+    });
+
+    load.init();
+}($));
+
+

@@ -9,10 +9,13 @@ var $ = require('jquery'),
 
 
 require('../common/linkage-slider');
 require('../common/linkage-slider');
 require('../common/slider2');
 require('../common/slider2');
+require('../common/newArrivls');
+
 
 
 $('.slide-container').linkageSlider();
 $('.slide-container').linkageSlider();
 $('.img-brand').slider2();
 $('.img-brand').slider2();
 
 
+
 $.ajax({
 $.ajax({
     type: 'GET',
     type: 'GET',
     url: '/boys/getBrand',
     url: '/boys/getBrand',

@@ -14,6 +14,7 @@
     "main": "index.js",
     "main": "index.js",
     "dependencies": {
     "dependencies": {
       "jquery": "1.8.3",
       "jquery": "1.8.3",
+      "yoho.lazyload": "1.0.0",
       "yoho.handlebars": "3.0.3"
       "yoho.handlebars": "3.0.3"
     },
     },
     "devDependencies": {
     "devDependencies": {

@@ -277,8 +277,10 @@
                 }
                 }
             }
             }
             .tpl-category{
             .tpl-category{
+            	height: 228px;
                 padding: 10px 0;
                 padding: 10px 0;
                 background-color: #f8f8f8;
                 background-color: #f8f8f8;
+                overflow: hidden;
                 a{
                 a{
                     float: left;
                     float: left;
                     width: 50%;
                     width: 50%;

@@ -373,7 +373,32 @@ class BoysController extends AbstractAction
                             'href' => '',
                             'href' => '',
                             'name' => 'MORE'
                             'name' => 'MORE'
                         )
                         )
-                    ),
+                    )
+                )
+            )
+		);
+        $this->_view->display('index', $data);
+    }
+    /**
+     * 男装首页 新品上架 接口数据
+     * 
+     * @param int $pageIndex 当前页数
+     * @param int $pageCount 一页显示个数
+     * @param string flag 类型(男装/女装等,用于区分)
+     * @return json
+     */
+    public function commodityAction()
+    {
+        $result = array();
+
+        do {
+            /* 判断是不是AJAX请求 */
+            if (!$this->isAjax()) {
+                break;
+            }
+
+            $result=array(
+            	'code'=>200,
             	'commodity'=>array(
             	'commodity'=>array(
 	                array(
 	                array(
 	                    'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
 	                    'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
@@ -409,26 +434,12 @@ class BoysController extends AbstractAction
 	                    'name'=> '优显led触控台灯',
 	                    'name'=> '优显led触控台灯',
 	                    'price'=> 168,
 	                    'price'=> 168,
 	                    'state'=> 1 //状态
 	                    'state'=> 1 //状态
-                        ),
-                        array(
-                            'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
-                            'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
-                            'name'=> '优显led触控台灯',
-                            'price'=> 168,
-                            'state'=> 1 //状态
-                        ),
-                        array(
-                            'url' =>'http://www.muji.com.cn/cn/store/goods/4547315967308' ,
-                            'img'=> 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/02/01c21e6610eefdc5ebd7ad890e49b09c2d.jpg',
-                            'name'=> '优显led触控台灯',
-                            'price'=> 168,
-                            'state'=> 1 //状态
-                        )
-                    )
 	                )
 	                )
                 )
                 )
 			);
 			);
-        $this->_view->display('index', $data);
+        } while (false);
+
+        $this->echoJson($result);
     }
     }
 
 
     public function getBrandAction() 
     public function getBrandAction() 
@@ -693,6 +704,7 @@ class BoysController extends AbstractAction
                 )
                 )
             )
             )
         );
         );
+
         $this->echoJson($data);
         $this->echoJson($data);
     }
     }
 }
 }