plus+star list

@@ -397,6 +397,31 @@
 
 
 ### PLUS+STAR
 ### PLUS+STAR
 
 
+    //列表页
+    {
+        ps: {
+            star: [
+                {
+                    deps: '',
+                    //情况1：一张图
+                    url: '',
+                    img: '',
+                    //情况2：多张图
+                    imgs: [
+                        {
+                            url: '',
+                            img: ''
+                        },
+                        ...
+                    ]
+                }
+            ],
+            plus: [
+                ...
+            ]
+        }
+    }
+    //详情页
     {
     {
         ps: {
         ps: {
             id: 1,
             id: 1,

@@ -4,4 +4,5 @@
  * @date: 2015/10/9
  * @date: 2015/10/9
  */
  */
 
 
-require('./plus-star');
+require('./plus-star/list');
+require('./plus-star/detail');

 /**
 /**
- * PLUS+STAR
+ * PLUS+STAR详情页
  * @author: xuqi<qi.xu@yoho.cn>
  * @author: xuqi<qi.xu@yoho.cn>
  * @date: 2015/10/10
  * @date: 2015/10/10
  */
  */
@@ -12,7 +12,7 @@ var $intro = $('#intro'),
     $imt = $('#intro-more-txt'),
     $imt = $('#intro-more-txt'),
     $infosContainer = $('#related-infos-container');
     $infosContainer = $('#related-infos-container');
 
 
-var info = require('./info');
+var info = require('../info');
 
 
 var mIntro, aIntro;
 var mIntro, aIntro;
 
 

+/**
+ * PLUS+STAR列表页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    lazyLoad = require('yoho.lazyload'),
+    Swiper = require('yoho.iswiper');
+
+var $navs = $('#nav-tab > li'),
+    $contents = $('#ps-content > .content');
+
+var mySwiper;
+
+lazyLoad($('img.lazy'));
+
+mySwiper = new Swiper('.swiper-container', {
+    lazyLoading: true,
+    pagination: '.swiper-pagination'
+});
+
+$('#nav-tab').delegate('li', 'touchstart', function() {
+    if ($(this).hasClass('focus')) {
+        return;
+    }
+    $navs.toggleClass('focus');
+    $contents.toggleClass('hide');
+});

@@ -19,7 +19,8 @@
       "yoho.zepto": "1.1.60",
       "yoho.zepto": "1.1.60",
       "yoho.jquery": "1.8.3",
       "yoho.jquery": "1.8.3",
       "yoho.lazyload": "1.1.0",
       "yoho.lazyload": "1.1.0",
-      "mlellipsis": "0.0.6"
+      "mlellipsis": "0.0.6",
+      "yoho.iswiper": "3.0.1"
     },
     },
     "devDependencies": {
     "devDependencies": {
       "expect.js": "0.3.1"
       "expect.js": "0.3.1"

+.ps-list-page {
+    background-color: #f0f0f0;
+
+    .nav-tab, .ps-content {
+        width: 100%;
+    }
+
+    .nav-tab {
+        height: 60rem / $pxConvertRem;
+        padding: 10rem / $pxConvertRem 0;
+        background-color: #fff;
+    }
+
+    .star-nav, .plus-nav {
+        box-sizing: border-box;
+        float: left;
+        width: 50%;
+        height: 60rem / $pxConvertRem;
+        line-height: 60rem / $pxConvertRem;
+        font-size: 16px;
+        text-align: center;
+        color: #ccc;
+
+        &.focus {
+            color: #000;
+        }
+    }
+
+    .star-nav {
+        border-right: 1px solid #ccc;
+    }
+
+    .plus-star-row {
+        margin-bottom: 10rem / $pxConvertRem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .content.hide {
+        display: none;
+    }
+
+    .swiper-container {
+        height: 310rem / $pxConvertRem;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: #fff;
+    }
+
+    .brand-deps {
+        height: 40rem / $pxConvertRem;
+        line-height: 40rem / $pxConvertRem;
+        padding-left: 10rem / $pxConvertRem;
+        font-size: 14px;
+        background: #fff;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
 .ps-detail-page {
 .ps-detail-page {
     background-color: #f0f0f0;
     background-color: #f0f0f0;
 
 

 {{>layout/header}}
 {{>layout/header}}
-
-This is a test {{test}}
-
+<div class="ps-list-page ps-page yoho-page">
+    {{# ps}}
+        <ul id="nav-tab" class="nav-tab clearfix">
+            <li class="star-nav focus">明星潮品</li>
+            <li class="plus-nav">原创潮牌</li>
+        </ul>
+        <div id="ps-content" class="ps-content">
+            <ul class="star-content content">
+                {{# star}}
+                    {{> guang/ps_item}}
+                {{/ star}}
+            </ul>
+            <ul class="plus-content content">
+                {{# plus}}
+                    {{> guang/ps_item}}
+                {{/ plus}}
+            </ul>
+        </div>
+    {{/ ps}}
+</div>
 {{>layout/footer}}
 {{>layout/footer}}

+<li class="plus-star-row">
+    {{#if imgs}}
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                {{# imgs}}
+                    <div class="swiper-slide">
+                        <a href={{url}}>
+                            <img class="swiper-lazy" data-src={{img}}>
+                        </a>
+                    </div>
+                {{/ imgs}}
+            </div>
+            <div class="swiper-pagination"></div>
+        </div>
+    {{^}}
+        <a href={{url}}>
+            <img class="lazy" data-original={{img}}>
+        </a>
+    {{/if}}
+    {{# deps}}
+        <p class="brand-deps">{{.}}</p>
+    {{/ deps}}
+</li>

@@ -11,8 +11,31 @@ class PlusstarController extends AbstractAction
      */
      */
     public function listAction()
     public function listAction()
     {
     {
+        $data = array(
+            'star' => array(
+                array(
+                    'imgs' => array(
+                        array(
+                            'url' => 'http://stussy.m.yohobuy.com',
+                            'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/6KTZ_01.jpg'
+                        ),
+                        array(
+                            'url' => 'http://stussy.m.yohobuy.com',
+                            'img' =>'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/5HUF_01.jpg'
+                        )
+                    )
+                ),
+                array(
+                    'url' => 'http://stussy.m.yohobuy.com',
+                    'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/4STAYREAL_02.jpg',
+                    'deps' => '优秀的自助品牌，高瞻远瞩的建设性意见来测试文字溢出后的处理问题'
+                )
+            ),
+            'plus' => array(
+            )
+        );
         $this->_view->assign('title', 'YOHO!有货');
         $this->_view->assign('title', 'YOHO!有货');
-        $this->_view->display('list', array('test' => 'hello world'));
+        $this->_view->display('list', array('modulePath' => 'guang/plus-star/list', 'ps' => $data));
     }
     }
     
     
     /**
     /**
@@ -164,7 +187,7 @@ class PlusstarController extends AbstractAction
             )
             )
         );
         );
         $this->_view->assign('title', 'PLUS+STAR 详情页');
         $this->_view->assign('title', 'PLUS+STAR 详情页');
-        $this->_view->display('detail', array('modulePath' => 'guang/plus-star', 'ps' => $data));
+        $this->_view->display('detail', array('modulePath' => 'guang/plus-star/detail', 'ps' => $data));
     }
     }
     
     
 }
 }