guang-list/editor/index

@@ -308,6 +308,7 @@
     {
         id: '',
         author: {
+            id: 1,
             avatar: '',
             name: '',
             intro: '',

@@ -10,6 +10,8 @@ var $ = require('yoho.zepto'),
 
 var tip = require('../plugin/tip');
 
+var loading = false;
+
 ellipsis.init();
 
 /**
@@ -39,13 +41,15 @@ function initInfosEvt($container) {
             tip.show('网络断开连接了~');
         });
     });
+
+    _setLazyLoadAndMellipsis($container.find('.guang-info'));
 }
 
 /**
  * 设置指定资讯项的Lazyload和文字截取
  * @params $infos 资讯项
  */
-function setLazyLoadAndMellipsis($infos) {
+function _setLazyLoadAndMellipsis($infos) {
     lazyLoad($infos.find('img.lazy'));
 
     $infos.each(function() {
@@ -56,5 +60,42 @@ function setLazyLoadAndMellipsis($infos) {
     });
 }
 
+/**
+ * 资讯LoadMore
+ */
+function loadMore($container, opt) {
+    var infosNum = $container.find('.guang-info').length;
+
+    if (loading) {
+        return;
+    }
+
+    loading = true;
+    $.ajax({
+        type: 'GET',
+        url: '/infos/get',
+        data: opt
+    }).then(function(data) {
+        var res,
+            $newInfos;
+
+        if (data.code === 200) {
+            res = data.data;
+
+            if (res.end) {
+                opt.end = true;
+            }
+
+            $container.append(res.infos);
+            $newInfos = $container.find('.guang-info:gt(' + (infosNum - 1) + ')');
+            _setLazyLoadAndMellipsis($newInfos);
+
+            opt.page++;
+        }
+
+        loading = false;
+    });
+}
+
 exports.initInfosEvt = initInfosEvt;
-exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
\ No newline at end of file
+exports.loadMore = loadMore;
\ No newline at end of file

+/**
+ * 逛首页,列表页，编辑页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    Swiper = require('yoho.iswiper');
+
+var info = require('./info'),
+    loadMore = info.loadMore;
+
+var winH = $(window).height(),
+    loadMoreH = $('#load-more').height();
+
+var setting = {
+    page: 1,
+    end: false
+};
+
+var $infos = $('#info-list'),
+    mySwiper;
+
+info.initInfosEvt($infos);
+
+mySwiper = new Swiper('.swiper-container', {
+    lazyLoading: true,
+    pagination: '.swiper-pagination'
+});
+
+$(document).scroll(function() {
+    if (setting.end) {
+        return;
+    }
+
+    if ($(window).scrollTop() + $(window).height() >= $(document).height() - loadMoreH) {
+        loadMore($infos, setting);
+    }
+});
\ No newline at end of file

@@ -31,7 +31,6 @@ setTimeout(function() {
 });
 
 info.initInfosEvt($infosContainer);
-info.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));
 
 //文字介绍收起与展开
 $('#more-intro').bind('touchstart', function() {

-@import "tvls", "info", "plus-star";
\ No newline at end of file
+@import "tvls", "info", "plus-star", "info-list";
\ No newline at end of file

+.guang-list-page {
+    .editor-header {
+        margin-bottom: 30rem / $pxConvertRem;
+        padding-top: 36rem / $pxConvertRem;
+        padding-bottom: 40rem / $pxConvertRem;
+        background: #fff;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .avatar {
+        float: left;
+        margin-left: 30rem / $pxConvertRem;
+        img {
+            width: 100rem / $pxConvertRem;
+            height: 100rem / $pxConvertRem;
+            @include border-radius(50%);
+        }
+    }
+
+    .text {
+        float: left;
+        margin-left: 32rem / $pxConvertRem;
+        width: 475rem / $pxConvertRem;
+        .name {
+            font-size: 32rem / $pxConvertRem;
+            line-height: 40rem / $pxConvertRem;
+        }
+        .info {
+            margin-top: 6rem / $pxConvertRem;
+            color: #bdbdbf;
+            font-size: 24rem / $pxConvertRem;
+            line-height: 32rem / $pxConvertRem;
+        }
+    }
+
+    .swiper-container {
+        width: 100%;
+        height: 310rem / $pxConvertRem;
+
+        img {
+            height: 100%;
+            width: 100%;
+        }
+
+        .swiper-pagination {
+            bottom: 0;
+            left: 0;
+            width: 100%;
+        }
+
+        .swiper-pagination-bullet-active {
+            background: #fff;
+        }
+    }
+
+    .guang-nav {
+        background-color: #fff;
+        overflow: hidden;
+        height: 80rem / $pxConvertRem;
+    }
+
+    .guang-nav-item {
+        float: left;
+        color: #ccc;
+        font-size: 28rem / $pxConvertRem;
+        padding: 0 22rem / $pxConvertRem;
+        line-height: 80rem / $pxConvertRem;
+
+        &.focus a {
+            color: #000;
+        }
+
+        a {
+            color: #ccc;
+        }
+    }
+
+    .load-more-info {
+        width: 100%;
+        height: 70rem / $pxConvertRem;
+        line-height: 70rem / $pxConvertRem;
+        text-align: center;
+        font-size: 14px;
+        overflow: hidden;
+
+        .status {
+            &.hide {
+                display: none;
+            }
+        }
+    }
+}
\ No newline at end of file

 .guang-info {
-    margin: 30rem / $pxConvertRem 0 0 0;
+    margin-bottom: 30rem / $pxConvertRem;
     padding: 0 0 24rem / $pxConvertRem 0;
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;
     background: #fff;
 
+    &:last-child {
+        margin-bottom: 0;
+    }
+
     .info-img {
         position: relative;
         width: 100%;
@@ -29,7 +33,7 @@
         text-decoration: none;
     }   
 
-    .tag-tag {
+    .info-tag {
         position: absolute;
         top: 0;
         left: 105rem / $pxConvertRem;

+{{> layout/header}}
+<div class="guang-list-page guang-page yoho-page">
+    {{# guang}}
+        {{#if isHomePage}}
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    {{# swiper}}
+                        <div class="swiper-slide">
+                            <a href="{{url}}">
+                                <img class="swiper-lazy" data-src="{{img}}">
+                            </a>
+                            <div class="swiper-lazy-preloader"></div>
+                        </div>
+                    {{/ swiper}}
+                </div>
+                <div class="swiper-pagination"></div>
+            </div>
+        {{/if}}
+
+        {{# author}}
+            <div id="author-infos" class="editor-header clearfix" data-id={{id}}>
+                <div class="avatar">
+                    <img src="{{avatar}}">
+                </div>
+                <div class="text">
+                    <p class="name">{{name}}</p>
+                    <p class="info">{{info}}</p>
+                </div>
+            </div>
+        {{/ author}}
+
+        {{#if isHomePage}}
+        <ul id="guang-nav" class="guang-nav clearfix">
+            {{# navs}}
+                <li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
+                    <a class="pjax-link" href="{{url}}">{{type}}</a>
+                </li>
+            {{/ navs}}
+        </ul>
+        {{/if}}
+
+        <div id="info-list" class="info-list">
+            {{# infos}}
+                {{> guang/info}}
+            {{/ infos}}
+        </div>
+
+        <div id="load-more-info" class="load-more-info">
+            <div class="loading status">
+                正在加载...
+            </div>
+            <span class="no-more status hide">没有更多啦</span>
+        </div>
+    {{/ guang}}
+</div>
+{{> layout/footer}}
\ No newline at end of file

 <?php
+use Action\AbstractAction;
 
-/* 
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
+/**
+ * 逛首页、列表页、编辑页
  */
+class ListController extends AbstractAction
+{
+    
+    /**
+     * 首页
+     */
+    public function indexAction()
+    {
+        $data = array(
+            'isHomePage' => true,
+            'swiper' => array(
+                array(
+                    'url' => '',
+                    'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
+                ),
+                array(
+                    'url' => '',
+                    'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
+                )
+            ),
+            'navs' => array(
+                array(
+                    'typeId' => 1,
+                    'type' => '最新',
+                    'url' => '/guang/index'
+                ),
+                array(
+                    'typeId' => 2,
+                    'type' => '话题',
+                    'focus' => true,
+                    'url' => '/guang/index'
+                ),
+                array(
+                    'typeId' => 3,
+                    'type' => '搭配',
+                    'url' => '/guang/index'
+                ),
+                array(
+                    'typeId' => 4,
+                    'type' => '潮人',
+                    'url' => '/guang/index'
+                ),
+                array(
+                    'typeId' => 5,
+                    'type' => '潮物',
+                    'url' => '/guang/index'
+                ),
+                array(
+                    'typeId' => 6,
+                    'type' => '小贴士',
+                    'url' => '/guang/index'
+                )
+            ),
+            'infos' => array(
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionMan' => true
+                ),
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isTip' => true
+                ),
+                array(
+                    'id' => 2,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 100,
+                        'isLiked' => false
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionGood' => true
+                )
+            )
+        );
+        $this->_view->assign('title', 'YOHO!有货');
+        $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
+    }
 
+    /**
+     * 列表页
+     */
+    public function listAction()
+    {
+        $data = array(
+            'infos' => array(
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionMan' => true
+                ),
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isTip' => true
+                ),
+                array(
+                    'id' => 2,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 100,
+                        'isLiked' => false
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionGood' => true
+                )
+            )
+        );
+        $this->_view->assign('title', 'YOHO!有货');
+        $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
+    }
+    
+    /**
+     * 编辑页
+     */
+    public function editorAction()
+    {
+        $data = array(
+            'author' => array(
+                'avatar' => 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
+                'name' => '山本耀司',
+                'info' => '设计理念：他以简洁而富有韵味，线条流畅，反时尚的设计风格而著称。'
+            ),
+            'infos' => array(
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionMan' => true
+                ),
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => true,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isTip' => true
+                ),
+                array(
+                    'id' => 2,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 100,
+                        'isLiked' => false
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => '',
+                    'isFashionGood' => true
+                )
+            )
+        );
+        $this->_view->assign('title', 'YOHO!有货');
+        $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
+    }
+    
+}
\ No newline at end of file