fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit f24d84287deeb3c8a14d51a26e0e70c6cbb6254e 1 parent a85b1ebb

guang-list/editor/index

Inline Side-by-side
Showing 9 changed files with 494 additions and 10 deletions
@@ -308,6 +308,7 @@ @@ -308,6 +308,7 @@
308 { 308 {
309 id: '', 309 id: '',
310 author: { 310 author: {
  311 + id: 1,
311 avatar: '', 312 avatar: '',
312 name: '', 313 name: '',
313 intro: '', 314 intro: '',
@@ -10,6 +10,8 @@ var $ = require('yoho.zepto'), @@ -10,6 +10,8 @@ var $ = require('yoho.zepto'),
10 10
11 var tip = require('../plugin/tip'); 11 var tip = require('../plugin/tip');
12 12
  13 +var loading = false;
  14 +
13 ellipsis.init(); 15 ellipsis.init();
14 16
15 /** 17 /**
@@ -39,13 +41,15 @@ function initInfosEvt($container) { @@ -39,13 +41,15 @@ function initInfosEvt($container) {
39 tip.show('网络断开连接了~'); 41 tip.show('网络断开连接了~');
40 }); 42 });
41 }); 43 });
  44 +
  45 + _setLazyLoadAndMellipsis($container.find('.guang-info'));
42 } 46 }
43 47
44 /** 48 /**
45 * 设置指定资讯项的Lazyload和文字截取 49 * 设置指定资讯项的Lazyload和文字截取
46 * @params $infos 资讯项 50 * @params $infos 资讯项
47 */ 51 */
48 -function setLazyLoadAndMellipsis($infos) { 52 +function _setLazyLoadAndMellipsis($infos) {
49 lazyLoad($infos.find('img.lazy')); 53 lazyLoad($infos.find('img.lazy'));
50 54
51 $infos.each(function() { 55 $infos.each(function() {
@@ -56,5 +60,42 @@ function setLazyLoadAndMellipsis($infos) { @@ -56,5 +60,42 @@ function setLazyLoadAndMellipsis($infos) {
56 }); 60 });
57 } 61 }
58 62
  63 +/**
  64 + * 资讯LoadMore
  65 + */
  66 +function loadMore($container, opt) {
  67 + var infosNum = $container.find('.guang-info').length;
  68 +
  69 + if (loading) {
  70 + return;
  71 + }
  72 +
  73 + loading = true;
  74 + $.ajax({
  75 + type: 'GET',
  76 + url: '/infos/get',
  77 + data: opt
  78 + }).then(function(data) {
  79 + var res,
  80 + $newInfos;
  81 +
  82 + if (data.code === 200) {
  83 + res = data.data;
  84 +
  85 + if (res.end) {
  86 + opt.end = true;
  87 + }
  88 +
  89 + $container.append(res.infos);
  90 + $newInfos = $container.find('.guang-info:gt(' + (infosNum - 1) + ')');
  91 + _setLazyLoadAndMellipsis($newInfos);
  92 +
  93 + opt.page++;
  94 + }
  95 +
  96 + loading = false;
  97 + });
  98 +}
  99 +
59 exports.initInfosEvt = initInfosEvt; 100 exports.initInfosEvt = initInfosEvt;
60 -exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;  
  101 +exports.loadMore = loadMore;
  1 +/**
  2 + * 逛首页,列表页，编辑页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/10
  5 + */
  6 +
  7 +var $ = require('yoho.zepto'),
  8 + Swiper = require('yoho.iswiper');
  9 +
  10 +var info = require('./info'),
  11 + loadMore = info.loadMore;
  12 +
  13 +var winH = $(window).height(),
  14 + loadMoreH = $('#load-more').height();
  15 +
  16 +var setting = {
  17 + page: 1,
  18 + end: false
  19 +};
  20 +
  21 +var $infos = $('#info-list'),
  22 + mySwiper;
  23 +
  24 +info.initInfosEvt($infos);
  25 +
  26 +mySwiper = new Swiper('.swiper-container', {
  27 + lazyLoading: true,
  28 + pagination: '.swiper-pagination'
  29 +});
  30 +
  31 +$(document).scroll(function() {
  32 + if (setting.end) {
  33 + return;
  34 + }
  35 +
  36 + if ($(window).scrollTop() + $(window).height() >= $(document).height() - loadMoreH) {
  37 + loadMore($infos, setting);
  38 + }
  39 +});
@@ -31,7 +31,6 @@ setTimeout(function() { @@ -31,7 +31,6 @@ setTimeout(function() {
31 }); 31 });
32 32
33 info.initInfosEvt($infosContainer); 33 info.initInfosEvt($infosContainer);
34 -info.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));  
35 34
36 //文字介绍收起与展开 35 //文字介绍收起与展开
37 $('#more-intro').bind('touchstart', function() { 36 $('#more-intro').bind('touchstart', function() {
1 -@import "tvls", "info", "plus-star";  
  1 +@import "tvls", "info", "plus-star", "info-list";
  1 +.guang-list-page {
  2 + .editor-header {
  3 + margin-bottom: 30rem / $pxConvertRem;
  4 + padding-top: 36rem / $pxConvertRem;
  5 + padding-bottom: 40rem / $pxConvertRem;
  6 + background: #fff;
  7 + border-bottom: 1px solid #e0e0e0;
  8 + }
  9 +
  10 + .avatar {
  11 + float: left;
  12 + margin-left: 30rem / $pxConvertRem;
  13 + img {
  14 + width: 100rem / $pxConvertRem;
  15 + height: 100rem / $pxConvertRem;
  16 + @include border-radius(50%);
  17 + }
  18 + }
  19 +
  20 + .text {
  21 + float: left;
  22 + margin-left: 32rem / $pxConvertRem;
  23 + width: 475rem / $pxConvertRem;
  24 + .name {
  25 + font-size: 32rem / $pxConvertRem;
  26 + line-height: 40rem / $pxConvertRem;
  27 + }
  28 + .info {
  29 + margin-top: 6rem / $pxConvertRem;
  30 + color: #bdbdbf;
  31 + font-size: 24rem / $pxConvertRem;
  32 + line-height: 32rem / $pxConvertRem;
  33 + }
  34 + }
  35 +
  36 + .swiper-container {
  37 + width: 100%;
  38 + height: 310rem / $pxConvertRem;
  39 +
  40 + img {
  41 + height: 100%;
  42 + width: 100%;
  43 + }
  44 +
  45 + .swiper-pagination {
  46 + bottom: 0;
  47 + left: 0;
  48 + width: 100%;
  49 + }
  50 +
  51 + .swiper-pagination-bullet-active {
  52 + background: #fff;
  53 + }
  54 + }
  55 +
  56 + .guang-nav {
  57 + background-color: #fff;
  58 + overflow: hidden;
  59 + height: 80rem / $pxConvertRem;
  60 + }
  61 +
  62 + .guang-nav-item {
  63 + float: left;
  64 + color: #ccc;
  65 + font-size: 28rem / $pxConvertRem;
  66 + padding: 0 22rem / $pxConvertRem;
  67 + line-height: 80rem / $pxConvertRem;
  68 +
  69 + &.focus a {
  70 + color: #000;
  71 + }
  72 +
  73 + a {
  74 + color: #ccc;
  75 + }
  76 + }
  77 +
  78 + .load-more-info {
  79 + width: 100%;
  80 + height: 70rem / $pxConvertRem;
  81 + line-height: 70rem / $pxConvertRem;
  82 + text-align: center;
  83 + font-size: 14px;
  84 + overflow: hidden;
  85 +
  86 + .status {
  87 + &.hide {
  88 + display: none;
  89 + }
  90 + }
  91 + }
  92 +}
1 .guang-info { 1 .guang-info {
2 - margin: 30rem / $pxConvertRem 0 0 0; 2 + margin-bottom: 30rem / $pxConvertRem;
3 padding: 0 0 24rem / $pxConvertRem 0; 3 padding: 0 0 24rem / $pxConvertRem 0;
4 border-top: 1px solid #e0e0e0; 4 border-top: 1px solid #e0e0e0;
5 border-bottom: 1px solid #e0e0e0; 5 border-bottom: 1px solid #e0e0e0;
6 background: #fff; 6 background: #fff;
7 7
  8 + &:last-child {
  9 + margin-bottom: 0;
  10 + }
  11 +
8 .info-img { 12 .info-img {
9 position: relative; 13 position: relative;
10 width: 100%; 14 width: 100%;
@@ -29,7 +33,7 @@ @@ -29,7 +33,7 @@
29 text-decoration: none; 33 text-decoration: none;
30 } 34 }
31 35
32 - .tag-tag { 36 + .info-tag {
33 position: absolute; 37 position: absolute;
34 top: 0; 38 top: 0;
35 left: 105rem / $pxConvertRem; 39 left: 105rem / $pxConvertRem;
  1 +{{> layout/header}}
  2 +<div class="guang-list-page guang-page yoho-page">
  3 + {{# guang}}
  4 + {{#if isHomePage}}
  5 + <div class="swiper-container">
  6 + <div class="swiper-wrapper">
  7 + {{# swiper}}
  8 + <div class="swiper-slide">
  9 + <a href="{{url}}">
  10 + <img class="swiper-lazy" data-src="{{img}}">
  11 + </a>
  12 + <div class="swiper-lazy-preloader"></div>
  13 + </div>
  14 + {{/ swiper}}
  15 + </div>
  16 + <div class="swiper-pagination"></div>
  17 + </div>
  18 + {{/if}}
  19 +
  20 + {{# author}}
  21 + <div id="author-infos" class="editor-header clearfix" data-id={{id}}>
  22 + <div class="avatar">
  23 + <img src="{{avatar}}">
  24 + </div>
  25 + <div class="text">
  26 + <p class="name">{{name}}</p>
  27 + <p class="info">{{info}}</p>
  28 + </div>
  29 + </div>
  30 + {{/ author}}
  31 +
  32 + {{#if isHomePage}}
  33 + <ul id="guang-nav" class="guang-nav clearfix">
  34 + {{# navs}}
  35 + <li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
  36 + <a class="pjax-link" href="{{url}}">{{type}}</a>
  37 + </li>
  38 + {{/ navs}}
  39 + </ul>
  40 + {{/if}}
  41 +
  42 + <div id="info-list" class="info-list">
  43 + {{# infos}}
  44 + {{> guang/info}}
  45 + {{/ infos}}
  46 + </div>
  47 +
  48 + <div id="load-more-info" class="load-more-info">
  49 + <div class="loading status">
  50 + 正在加载...
  51 + </div>
  52 + <span class="no-more status hide">没有更多啦</span>
  53 + </div>
  54 + {{/ guang}}
  55 +</div>
  56 +{{> layout/footer}}
1 <?php 1 <?php
  2 +use Action\AbstractAction;
2 3
3 -/*  
4 - * To change this license header, choose License Headers in Project Properties.  
5 - * To change this template file, choose Tools | Templates  
6 - * and open the template in the editor. 4 +/**
  5 + * 逛首页、列表页、编辑页
7 */ 6 */
  7 +class ListController extends AbstractAction
  8 +{
  9 +
  10 + /**
  11 + * 首页
  12 + */
  13 + public function indexAction()
  14 + {
  15 + $data = array(
  16 + 'isHomePage' => true,
  17 + 'swiper' => array(
  18 + array(
  19 + 'url' => '',
  20 + 'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
  21 + ),
  22 + array(
  23 + 'url' => '',
  24 + 'img' => 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
  25 + )
  26 + ),
  27 + 'navs' => array(
  28 + array(
  29 + 'typeId' => 1,
  30 + 'type' => '最新',
  31 + 'url' => '/guang/index'
  32 + ),
  33 + array(
  34 + 'typeId' => 2,
  35 + 'type' => '话题',
  36 + 'focus' => true,
  37 + 'url' => '/guang/index'
  38 + ),
  39 + array(
  40 + 'typeId' => 3,
  41 + 'type' => '搭配',
  42 + 'url' => '/guang/index'
  43 + ),
  44 + array(
  45 + 'typeId' => 4,
  46 + 'type' => '潮人',
  47 + 'url' => '/guang/index'
  48 + ),
  49 + array(
  50 + 'typeId' => 5,
  51 + 'type' => '潮物',
  52 + 'url' => '/guang/index'
  53 + ),
  54 + array(
  55 + 'typeId' => 6,
  56 + 'type' => '小贴士',
  57 + 'url' => '/guang/index'
  58 + )
  59 + ),
  60 + 'infos' => array(
  61 + array(
  62 + 'id' => 1,
  63 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  64 + 'title' => '1.副线不知为何总是好看点',
  65 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  66 + 'In England中Panul Smith缔造了一个传奇',
  67 + 'showTags' => true,
  68 + 'publishTime' => '2月13日 12:34',
  69 + 'pageView' => 3445,
  70 + 'like' => array(
  71 + 'count' => 459,
  72 + 'isLiked' => true
  73 + ),
  74 + 'share' => true,
  75 + 'url' => '',
  76 + 'likeUrl' => '',
  77 + 'isFashionMan' => true
  78 + ),
  79 + array(
  80 + 'id' => 1,
  81 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  82 + 'title' => '1.副线不知为何总是好看点',
  83 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  84 + 'In England中Panul Smith缔造了一个传奇',
  85 + 'showTags' => true,
  86 + 'publishTime' => '2月13日 12:34',
  87 + 'pageView' => 3445,
  88 + 'like' => array(
  89 + 'count' => 459,
  90 + 'isLiked' => true
  91 + ),
  92 + 'share' => true,
  93 + 'url' => '',
  94 + 'likeUrl' => '',
  95 + 'isTip' => true
  96 + ),
  97 + array(
  98 + 'id' => 2,
  99 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  100 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  101 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  102 + 'In England中Panul Smith缔造了一个传奇',
  103 + 'showTags' => false,
  104 + 'publishTime' => '2月13日 12:34',
  105 + 'pageView' => 3445,
  106 + 'like' => array(
  107 + 'count' => 100,
  108 + 'isLiked' => false
  109 + ),
  110 + 'share' => true,
  111 + 'url' => '',
  112 + 'likeUrl' => '',
  113 + 'isFashionGood' => true
  114 + )
  115 + )
  116 + );
  117 + $this->_view->assign('title', 'YOHO!有货');
  118 + $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
  119 + }
8 120
  121 + /**
  122 + * 列表页
  123 + */
  124 + public function listAction()
  125 + {
  126 + $data = array(
  127 + 'infos' => array(
  128 + array(
  129 + 'id' => 1,
  130 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  131 + 'title' => '1.副线不知为何总是好看点',
  132 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  133 + 'In England中Panul Smith缔造了一个传奇',
  134 + 'showTags' => true,
  135 + 'publishTime' => '2月13日 12:34',
  136 + 'pageView' => 3445,
  137 + 'like' => array(
  138 + 'count' => 459,
  139 + 'isLiked' => true
  140 + ),
  141 + 'share' => true,
  142 + 'url' => '',
  143 + 'likeUrl' => '',
  144 + 'isFashionMan' => true
  145 + ),
  146 + array(
  147 + 'id' => 1,
  148 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  149 + 'title' => '1.副线不知为何总是好看点',
  150 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  151 + 'In England中Panul Smith缔造了一个传奇',
  152 + 'showTags' => true,
  153 + 'publishTime' => '2月13日 12:34',
  154 + 'pageView' => 3445,
  155 + 'like' => array(
  156 + 'count' => 459,
  157 + 'isLiked' => true
  158 + ),
  159 + 'share' => true,
  160 + 'url' => '',
  161 + 'likeUrl' => '',
  162 + 'isTip' => true
  163 + ),
  164 + array(
  165 + 'id' => 2,
  166 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  167 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  168 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  169 + 'In England中Panul Smith缔造了一个传奇',
  170 + 'showTags' => false,
  171 + 'publishTime' => '2月13日 12:34',
  172 + 'pageView' => 3445,
  173 + 'like' => array(
  174 + 'count' => 100,
  175 + 'isLiked' => false
  176 + ),
  177 + 'share' => true,
  178 + 'url' => '',
  179 + 'likeUrl' => '',
  180 + 'isFashionGood' => true
  181 + )
  182 + )
  183 + );
  184 + $this->_view->assign('title', 'YOHO!有货');
  185 + $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
  186 + }
  187 +
  188 + /**
  189 + * 编辑页
  190 + */
  191 + public function editorAction()
  192 + {
  193 + $data = array(
  194 + 'author' => array(
  195 + 'avatar' => 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
  196 + 'name' => '山本耀司',
  197 + 'info' => '设计理念：他以简洁而富有韵味，线条流畅，反时尚的设计风格而著称。'
  198 + ),
  199 + 'infos' => array(
  200 + array(
  201 + 'id' => 1,
  202 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  203 + 'title' => '1.副线不知为何总是好看点',
  204 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  205 + 'In England中Panul Smith缔造了一个传奇',
  206 + 'showTags' => true,
  207 + 'publishTime' => '2月13日 12:34',
  208 + 'pageView' => 3445,
  209 + 'like' => array(
  210 + 'count' => 459,
  211 + 'isLiked' => true
  212 + ),
  213 + 'share' => true,
  214 + 'url' => '',
  215 + 'likeUrl' => '',
  216 + 'isFashionMan' => true
  217 + ),
  218 + array(
  219 + 'id' => 1,
  220 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  221 + 'title' => '1.副线不知为何总是好看点',
  222 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  223 + 'In England中Panul Smith缔造了一个传奇',
  224 + 'showTags' => true,
  225 + 'publishTime' => '2月13日 12:34',
  226 + 'pageView' => 3445,
  227 + 'like' => array(
  228 + 'count' => 459,
  229 + 'isLiked' => true
  230 + ),
  231 + 'share' => true,
  232 + 'url' => '',
  233 + 'likeUrl' => '',
  234 + 'isTip' => true
  235 + ),
  236 + array(
  237 + 'id' => 2,
  238 + 'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  239 + 'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
  240 + 'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
  241 + 'In England中Panul Smith缔造了一个传奇',
  242 + 'showTags' => false,
  243 + 'publishTime' => '2月13日 12:34',
  244 + 'pageView' => 3445,
  245 + 'like' => array(
  246 + 'count' => 100,
  247 + 'isLiked' => false
  248 + ),
  249 + 'share' => true,
  250 + 'url' => '',
  251 + 'likeUrl' => '',
  252 + 'isFashionGood' => true
  253 + )
  254 + )
  255 + );
  256 + $this->_view->assign('title', 'YOHO!有货');
  257 + $this->_view->display('index', array('modulePath' => 'guang/list', 'guang' => $data));
  258 + }
  259 +
  260 +}