presell/common goods cart & tips

@@ -6,6 +6,8 @@
 
 var $ = require('yoho.zepto');
 
+var $cartContent = $('.cart-content');
+
 require('./good');
 
 $('.cart-nav').delegate('li', 'touchstart', function() {
@@ -17,4 +19,10 @@ $('.cart-nav').delegate('li', 'touchstart', function() {
 
     $this.siblings('.active').removeClass('active');
     $this.addClass('active');
+
+    //切换普通商品和预售商品购物车显示
+    $cartContent.toggleClass('hide');
+
+    //trigger lazyload
+    $(window).trigger('scroll');
 });
\ No newline at end of file

@@ -6,135 +6,175 @@
 
 .shopping-cart-page {
     padding-bottom: 120rem / $pxConvertRem;
-}
 
-.cart-nav {
-    height: 30rem / $pxConvertRem;
-    color: #c6c6c6;
-    border-bottom: 1px solid #e0e0e0;
-    padding: 30rem / $pxConvertRem 0;
+    .cart-nav {
+        height: 30rem / $pxConvertRem;
+        color: #c6c6c6;
+        border-bottom: 1px solid #e0e0e0;
+        padding: 30rem / $pxConvertRem 0;
 
-    li {
-        float: left;
-        width: 50%;
-    }
+        li {
+            float: left;
+            width: 50%;
+        }
 
-    li.active {
-        color: #000;
-    }
+        li.active {
+            color: #000;
+        }
 
-    span {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        height: 30rem / $pxConvertRem;
-        line-height: 30rem / $pxConvertRem;
-        font-size: 30rem / $pxConvertRem;
-        text-align: center;
-    }
+        span {
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+            height: 30rem / $pxConvertRem;
+            line-height: 30rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+            text-align: center;
+        }
 
-    li:first-child span {
-        border-right: 1px solid #e0e0e0;
+        li:first-child span {
+            border-right: 1px solid #e0e0e0;
+        }
     }
-}
 
-.cart-goods {
-    border-bottom: 1px solid #e0e0e0;
+    .login-info {
+        height: 46rem / $pxConvertRem;
+        padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;
+        color: #24acaa;
+        text-align: center;
+        font-size: 28rem / $pxConvertRem;
 
-    .shopping-cart-good:last-child .info {
-        border-bottom: none;
+        .btn {
+            display: inline-block;
+            background: #ed0010;
+            color: #fff;
+            width: 80rem / $pxConvertRem;
+            height: 46rem / $pxConvertRem;
+            line-height: 46rem / $pxConvertRem;
+        }
     }
-}
 
-.freebie-and-advance-buy {
-    padding: 20rem / $pxConvertRem;
-    font-size: 24rem / $pxConvertRem;
-    border-bottom: 1px solid #e0e0e0;
+    .presell-info {
+        height: 60rem / $pxConvertRem;
+        padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
+        font-size: 22rem / $pxConvertRem;
+        background: #f0f0f0;
+        color: #b7b7b7;
 
-    > li {
-        box-sizing: border-box;
-        height: 90rem / $pxConvertRem;
-        line-height: 90rem / $pxConvertRem;
-        margin-bottom: 10rem / $pxConvertRem;
-        background: #f8f8f8;
-        padding: 0 20rem / $pxConvertRem;
+        > span {
+            display: block;
+        }
 
-        &:last-child {
-            margin-bottom: 0;
+        .iconfont {
+            float: left;
+            font-size: 45rem / $pxConvertRem;
         }
 
-        a {
-            float: right;
+        .txt {
+            height: 30rem / $pxConvertRem;
+            line-height: 30rem / $pxConvertRem;
+            margin-left: 80rem / $pxConvertRem;
         }
     }
 
-    .count {
-        color: #f00;
-    }
+    .cart-goods {
+        border-bottom: 1px solid #e0e0e0;
 
-    .icon-right-arrow {
-        color: #8f8f8f;
+        .shopping-cart-good:last-child .info {
+            border-bottom: none;
+        }
     }
-}
-
-.price-compute {
-    padding: 20rem / $pxConvertRem;
-    border-bottom: 1px solid #e0e0e0;
-    font-size: 26rem / $pxConvertRem;
 
-    .title {
-        display: inline-block;
-        width: 175rem / $pxConvertRem;
-    }
+    .freebie-and-advance-buy {
+        padding: 20rem / $pxConvertRem;
+        font-size: 24rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
+
+        > li {
+            box-sizing: border-box;
+            height: 90rem / $pxConvertRem;
+            line-height: 90rem / $pxConvertRem;
+            margin-bottom: 10rem / $pxConvertRem;
+            background: #f8f8f8;
+            padding: 0 20rem / $pxConvertRem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            a {
+                float: right;
+            }
+        }
 
-    .minus {
-        float: right;
-    }
-}
+        .count {
+            color: #f00;
+        }
 
-.balance {
-    position: fixed;
-    box-sizing: border-box;
-    bottom: 0;
-    width: 100%;
-    padding: 20rem / $pxConvertRem;
-    height: 120rem / $pxConvertRem;
-    border-top: 1px solid #e0e0e0;
-    background: #fff;
-
-    .iconfont {
-        position: absolute;
-        top: 50%;
-        margin-top: -14rem / $pxConvertRem;
-        font-size: 28rem / $pxConvertRem;
+        .icon-right-arrow {
+            color: #8f8f8f;
+        }
     }
 
-    p {
-        float: left;
-        margin-left: 50rem / $pxConvertRem;
+    .price-compute {
+        padding: 20rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
         font-size: 26rem / $pxConvertRem;
 
-        span {
-            display: block;
-            height: 40rem / $pxConvertRem;
-            line-height: 40rem / $pxConvertRem;
+        .title {
+            display: inline-block;
+            width: 175rem / $pxConvertRem;
         }
 
-        .tip {
-            color: #666;
-            font-size: 22rem / $pxConvertRem;
+        .minus {
+            float: right;
         }
     }
 
-    .btn-balance {
-        float: right;
-        width: 140rem / $pxConvertRem;
-        height: 80rem / $pxConvertRem;
-        line-height: 80rem / $pxConvertRem;
-        text-align: center;
-        background: #e01;
-        color: #fff;
-        border: none;
-        font-size: 28rem / $pxConvertRem;
+    .balance {
+        position: fixed;
+        box-sizing: border-box;
+        bottom: 0;
+        width: 100%;
+        padding: 20rem / $pxConvertRem;
+        height: 120rem / $pxConvertRem;
+        border-top: 1px solid #e0e0e0;
+        background: #fff;
+
+        .iconfont {
+            position: absolute;
+            top: 50%;
+            margin-top: -14rem / $pxConvertRem;
+            font-size: 28rem / $pxConvertRem;
+        }
+
+        p {
+            float: left;
+            margin-left: 50rem / $pxConvertRem;
+            font-size: 26rem / $pxConvertRem;
+
+            span {
+                display: block;
+                height: 40rem / $pxConvertRem;
+                line-height: 40rem / $pxConvertRem;
+            }
+
+            .tip {
+                color: #666;
+                font-size: 22rem / $pxConvertRem;
+            }
+        }
+
+        .btn-balance {
+            float: right;
+            width: 140rem / $pxConvertRem;
+            height: 80rem / $pxConvertRem;
+            line-height: 80rem / $pxConvertRem;
+            text-align: center;
+            background: #e01;
+            color: #fff;
+            border: none;
+            font-size: 28rem / $pxConvertRem;
+        }
     }
-}
\ No newline at end of file
+}

@@ -16,63 +16,32 @@
             </ul>
         {{/if}}
 
-        <div class="cart-goods">
-            {{# goods}}
-                {{> shopping-cart/good}}
-            {{/ goods}}
-        </div>
-
-        {{#if freebieOrAdvanceBuy}}
-            <ul class="freebie-and-advance-buy">
-                {{# freebie}}
-                    <li class="freebie">
-                        <span class="iconfont">&#xe620;</span>
-                        赠品
-                        <a href={{url}}>
-                            <span class="count">{{count}}</span>
-                            <span class="iconfont icon-right-arrow">&#xe614;</span>
-                        </a>
-                    </li>
-                {{/ freebie}}
-                {{# advanceBuy}}
-                    <li class="advance-buy">
-                        <span class="iconfont">&#xe61b;</span>
-                        加价购
-                        <a href={{url}}>
-                            <span class="count">{{count}}</span>
-                            <span class="iconfont icon-right-arrow">&#xe614;</span>
-                        </a>
-                    </li>
-                {{/ advanceBuy}}
-            </ul>
+        {{#if showLoginInfo}}
+            <p class="login-info">
+                <span class="iconfont">&#xe628;</span>
+                请您先
+                <a class="btn btn-login">登录</a>
+                可以同步电脑和手机中的商品
+            </p>
         {{/if}}
 
-        <div class="price-compute">
-            <p class="sum-price">
-                <span class="title">总价</span>
-                ￥{{price}}
-            </p>
-            <p class="activity-price">
-                <span class="title">
-                    活动价
-                    <i class="minus">-</i>
-                </span>
-                ￥{{activityPrice}}
-            </p>
-        </div>
+        {{# commonCart}}
+            <div class="cart-content common">
+                {{> shopping-cart/cart-content}}
+            </div>
+        {{/ commonCart}}
+
+        {{# preSellCart}}
+            <div class="cart-content presell hide">
+                <p class="presell-info">
+                    <span class="iconfont">&#xe61a;</span>
+                    <span class="txt">预售商品全场包邮，到货后立即发货</span>
+                    <span class="txt">预售商品不参加活动，不可使用优惠券</span>
+                </p>
+                {{> shopping-cart/cart-content}}
+            </div>
+        {{/ preSellCart}}
 
-        <div class="balance">
-            <span class="iconfont icon-cb-checked"></span>
-            <p>
-                <span>
-                    {{count}}件总计:￥{{sumPrice}}
-                </span>
-                <span class="tip">(不含运费)</span>
-            </p>
-            <button class="btn-balance">
-                结算
-            </button>
-        </div>
     {{/ shoppingCart}}
 </div>
 {{> layout/footer}}
\ No newline at end of file

+<div class="cart-goods">
+    {{# goods}}
+        {{> shopping-cart/good}}
+    {{/ goods}}
+</div>
+
+{{#if freebieOrAdvanceBuy}}
+    <ul class="freebie-and-advance-buy">
+        {{# freebie}}
+            <li class="freebie">
+                <span class="iconfont">&#xe620;</span>
+                赠品
+                <a href={{url}}>
+                    <span class="count">{{count}}</span>
+                    <span class="iconfont icon-right-arrow">&#xe614;</span>
+                </a>
+            </li>
+        {{/ freebie}}
+        {{# advanceBuy}}
+            <li class="advance-buy">
+                <span class="iconfont">&#xe61b;</span>
+                加价购
+                <a href={{url}}>
+                    <span class="count">{{count}}</span>
+                    <span class="iconfont icon-right-arrow">&#xe614;</span>
+                </a>
+            </li>
+        {{/ advanceBuy}}
+    </ul>
+{{/if}}
+
+<div class="price-compute">
+    <p class="sum-price">
+        <span class="title">总价</span>
+        ￥{{price}}
+    </p>
+    <p class="activity-price">
+        <span class="title">
+            活动价
+            <i class="minus">-</i>
+        </span>
+        ￥{{activityPrice}}
+    </p>
+</div>
+
+<div class="balance">
+    <span class="iconfont icon-cb-checked"></span>
+    <p>
+        <span>
+            {{count}}件总计:￥{{sumPrice}}
+        </span>
+        <span class="tip">(不含运费)</span>
+    </p>
+    <button class="btn-balance">
+        结算
+    </button>
+        </div>
\ No newline at end of file

@@ -13,42 +13,72 @@ class ShoppingCartController extends AbstractAction
             'cartNav' => true,
             'commonGoodsCount' => 2,
             'presellGoodsCount' => 2,
-            'goods' => array(
-                array(
-                    'id' => 1,
-                    'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
-                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
-                    'color' => '黄色',
-                    'size' => 'F',
-                    'appearDate' => '12月',
-                    'price' => 399.00,
-                    'count' => 8,
-                    'lowStocks' => true
+            'showLoginInfo' => true,
+            'commonCart' => array(
+                'goods' => array(
+                    array(
+                        'id' => 1,
+                        'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
+                        'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
+                        'color' => '黄色',
+                        'size' => 'F',
+                        'appearDate' => '12月',
+                        'price' => 399.00,
+                        'count' => 8,
+                        'lowStocks' => true
+                    ),
+                    array(
+                        'id' => 2,
+                        'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
+                        'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                        'color' => '黄色',
+                        'size' => 'F',
+                        'price' => 553.00,
+                        'count' => 1,
+                        'soldOut' => true
+                    )
                 ),
-                array(
-                    'id' => 2,
-                    'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
-                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
-                    'color' => '黄色',
-                    'size' => 'F',
-                    'price' => 553.00,
-                    'count' => 1,
-                    'soldOut' => true
-                )
-            ),
-            'freebieOrAdvanceBuy' => true,
-            'freebie' => array(
-                'url' => '',
-                'count' => 2
-            ),
-            'advanceBuy' => array(
-                'url' => '',
-                'count' => 3
+                'freebieOrAdvanceBuy' => true,
+                'freebie' => array(
+                    'url' => '',
+                    'count' => 2
+                ),
+                'advanceBuy' => array(
+                    'url' => '',
+                    'count' => 3
+                ),
+                'price' => 3192,
+                'activityPrice' => 0,
+                'count' => 8,
+                'sumPrice' => 3192
             ),
-            'price' => 3192,
-            'activityPrice' => 0,
-            'count' => 8,
-            'sumPrice' => 3192
+            'preSellCart' => array(
+                'goods' => array(
+                    array(
+                        'id' => 2,
+                        'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
+                        'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                        'color' => '黄色',
+                        'size' => 'F',
+                        'price' => 553.00,
+                        'count' => 1,
+                        'soldOut' => true
+                    )
+                ),
+                'freebieOrAdvanceBuy' => true,
+                'freebie' => array(
+                    'url' => '',
+                    'count' => 2
+                ),
+                'advanceBuy' => array(
+                    'url' => '',
+                    'count' => 3
+                ),
+                'price' => 553,
+                'activityPrice' => 0,
+                'count' => 1,
+                'sumPrice' => 553
+            )
         );
         // 渲染模板
         $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(