shopping cart

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
+Created by FontForge 20120731 at Tue Oct 20 15:11:31 2015
  By Ads
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
     bbox="0 -224 3943 812"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E61A"
+    unicode-range="U+0078-E621"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -117,5 +117,25 @@ q16 -8 34 -8zM899.5 225q30.5 0 51 21.5t20.5 52.5q0 9 -2 18t-5.5 16.5t-8 14t-11 1
     <glyph glyph-name="uniE61A" unicode="&#xe61a;" 
 d="M511 -84q-102 0 -188.5 50t-137 137t-50.5 189t50.5 188.5t137 137t188.5 50.5t189 -50.5t137 -137t50 -188.5t-50 -189t-137 -137t-189 -50zM676 421q7 6 0 12l-6 7q-2 2 -5.5 2t-6.5 -2l-138 -139l-137 137q-6 6 -12 0l-6 -6q-6 -6 0 -12l136 -137l-138 -138
 q-6 -6 0 -12l6 -6q7 -7 13 0l138 138l138 -139q6 -6 13 0l6 6q6 6 0 13l-139 138zM676 421z" />
+    <glyph glyph-name="uniE61B" unicode="&#xe61b;" 
+d="M437 41h-193q-27 2 -41.5 22.5t-17.5 45.5q3 25 17.5 41t41.5 18h193v63l-193 1q-27 2 -41.5 19t-17.5 43q3 25 17.5 41t41.5 18h144l-134 236q-10 12 -19 30.5t-8 40.5q5 28 20 45.5t56 22.5q24 -2 43 -16.5t31 -31.5l152 -278l167 280q12 17 31 30t43 16q15 -1 27.5 -4
+t22 -10t16 -20t9.5 -34q0 -29 -20 -55l-155 -252h147q26 -2 41 -18t17 -41q-2 -26 -17.5 -44t-41.5 -20l-191 -1v-61h192q26 -2 41 -20t17 -43q-2 -26 -17 -43.5t-41 -19.5l-192 1v-106q-4 -85 -93 -85q-44 0 -68.5 21t-26.5 64v104z" />
+    <glyph glyph-name="uniE61C" unicode="&#xe61c;" 
+d="M946 -196h-868q-26 0 -44 18t-18 44v868q0 26 18 44t44 18h868q26 0 44 -18t18 -44v-868q0 -26 -18 -44t-44 -18zM946 703q0 13 -9 22t-22 9h-806q-13 0 -22 -9t-9 -22v-806q0 -13 9 -22t22 -9h806q13 0 22 9t9 22v806z" />
+    <glyph glyph-name="uniE61D" unicode="&#xe61d;" 
+d="M939 -202h-876q-17 0 -31.5 8.5t-23 23t-8.5 31.5v876q0 26 18.5 44.5t44.5 18.5h876q26 0 44.5 -18.5t18.5 -44.5v-876q0 -39 -35 -57q-14 -6 -28 -6zM814 612l-376 -438l-250 188l-63 -126l313 -250l439 501z" />
+    <glyph glyph-name="uniE61E" unicode="&#xe61e;" 
+d="M224 211l416 410l179 -179l-416 -410zM659 525l-19 19l-333 -333l19 -19zM698 486l-20 20l-332 -333l19 -19zM736 448l-19 19l-333 -333l19 -19zM717 704q14 14 38 14t39 -14l102 -102q6 -6 9.5 -14t4.5 -16.5t0 -17t-4.5 -16.5t-9.5 -13l-64 -58l-173 173zM211 186
+l167 -167l-148 -51l-70 70zM205 -45l-83 -32l32 83z" />
+    <glyph glyph-name="uniE61F" unicode="&#xe61f;" 
+d="M512 812q-138 0 -256 -69t-187 -187t-69 -256t69 -256t187 -187t256 -69t256 69t187 187t69 256t-69 256t-187 187t-256 69zM563 44h-102v307h102v-307zM563 454h-102v102h102v-102z" />
+    <glyph glyph-name="uniE620" unicode="&#xe620;" 
+d="M938 276h-400v274h-50v-274h-399q-15 0 -29 5.5t-24 15.5t-16 24t-6 29v175q0 31 22 53t53 22h90q-18 21 -29 46t-11 54q0 27 10 47.5t25 30t29.5 15t24.5 6.5l11 1q53 0 100 -15.5t81 -42t56 -50t39 -50.5q17 27 39.5 51t56 50t79.5 41.5t98 15.5h4q2 0 8.5 -1.5
+t13.5 -3t16 -5.5t16.5 -9t15.5 -13t13.5 -17.5t9 -23.5t3.5 -30q0 -28 -9.5 -52t-25.5 -45h85q31 0 53 -22t22 -53v-175q0 -44 -39 -65q-17 -9 -36 -9zM264 725q-15 0 -26 -2.5t-15.5 -6t-6.5 -7.5t-2 -6v-3q0 -49 66 -100h173q-14 30 -30 52.5t-34 35.5t-33 21t-34.5 11.5
+t-30 4t-27.5 0.5zM763 723q-13 0 -20 -0.5t-21.5 -1.5t-24.5 -4.5t-24 -9t-25.5 -14.5t-24 -21.5t-24.5 -30.5t-22 -41h177q59 50 59 97v3q0 2 -2 6.5t-7 7.5t-15.5 6t-25.5 3zM488 -224h-349q-15 0 -29 6t-24 16t-16 24t-6 29v375h424v-450zM538 226h400v-375
+q0 -31 -22 -53t-53 -22h-325v450z" />
+    <glyph glyph-name="uniE621" unicode="&#xe621;" 
+d="M160 492v-640q0 -26 19 -45t45 -19h576q26 0 45 19t19 45v640h-704zM352 -84h-64v448h64v-448zM480 -84h-64v448h64v-448zM608 -84h-64v448h64v-448zM736 -84h-64v448h64v-448zM880 684h-208v80q0 20 -14 34t-34 14h-224q-8 0 -15 -2.5t-13 -7t-10.5 -10.5t-7 -13
+t-2.5 -15v-80h-208q-20 0 -34 -14t-14 -34v-80h832v80q0 6 -1.5 11t-3.5 10t-5.5 9t-7.5 7.5t-9 5.5t-10 3.5t-11 1.5zM608 684h-192v63h192v-63z" />
   </font>
 </defs></svg>

+/**
+ * 购物车商品
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.zeptolazyload');
+
+ellipsis.init();
+
+lazyLoad($('.lazy'));
+
+$('.name')[0].mlellipsis(2);
+
+//checkbox toggle status
+$('.checkbox').bind('touchstart', function() {
+    var $this = $(this);
+
+    if ($this.hasClass('icon-cb-checked')) {
+        $this.removeClass('icon-cb-checked').addClass('icon-checkbox');
+    } else {
+        $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
+    }
+});
\ No newline at end of file

+/**
+ * 购物车Logic
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/20
+ */
+
+var $ = require('yoho.zepto');
+
+require('./good');
+
+$('.cart-nav').delegate('li', 'touchstart', function() {
+    var $this = $(this);
+
+    if ($this.hasClass('active')) {
+        return;
+    }
+
+    $this.siblings('.active').removeClass('active');
+    $this.addClass('active');
+});
\ No newline at end of file

@@ -74,6 +74,16 @@ a {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-checkbox:before { content: "\e61c"; }
+.icon-cb-checked:before { content: "\e61d"; }
+.icon-gift:before { content: "\e620"; }
+.icon-del:before { content: "\e621"; }
+.icon-money:before { content: "\e61b"; }
+.icon-edit:before { content: "\e61e"; }
+.icon-yoho-like:before { content: "\e605"; }
+.icon-close:before { content: "\e61a"; }
+.icon-right-arrow:before { content: "\e614"; }
+
 .yoho-tip {
     position: absolute;
     display: none;
@@ -92,4 +102,4 @@ a {
     @include border-radius(10px);
 }
 
-@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index";
\ No newline at end of file
+@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";
\ No newline at end of file

+.shopping-cart-good {
+    position: relative;
+    padding-left: 16rem / $pxConvertRem;
+
+    .checkbox {
+        position: absolute;
+        top: 50%;
+        margin-top: -14rem / $pxConvertRem;
+        font-size: 28rem / $pxConvertRem;
+        color: #f0f0f0;
+
+        &.icon-cb-checked {
+            color: #000;
+        }
+    }
+
+    .info {
+        float: left;
+        margin-left: 50rem / $pxConvertRem;
+        padding: 16rem / $pxConvertRem 0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .thumb {
+        float: left;
+        width: 120rem / $pxConvertRem;
+        height: 160rem / $pxConvertRem;
+    }
+    
+    .deps {
+        margin-left: 135rem / $pxConvertRem;
+        padding-right: 20rem / $pxConvertRem;
+    }
+
+    .name {
+        font-size: 28rem / $pxConvertRem;
+    }
+    
+    .row:nth-child(2) {
+        font-size: 22rem / $pxConvertRem;
+        height: 45rem / $pxConvertRem;
+        line-height: 45rem / $pxConvertRem;
+
+        > span {
+            margin-right: 15rem / $pxConvertRem;
+        }
+    }
+
+    .row:nth-child(3) {
+        position: relative;
+    }
+
+    .color, .size {
+        color: #b6b6b6;
+    }
+
+    .appear-date {
+        color: #e01;
+    }
+
+    .price {
+        font-size: 24rem / $pxConvertRem;
+        color: #000;
+    }
+
+    .count {
+        font-size: 20rem / $pxConvertRem;
+        color: #999;
+        margin-left: 22rem / $pxConvertRem;
+    }
+
+    .sold-out, .low-stocks {
+        display: inline-block;
+        width: 100rem / $pxConvertRem;
+        height: 30rem / $pxConvertRem;
+        line-height: 30rem / $pxConvertRem;
+        font-size: 22rem / $pxConvertRem;
+        border: none;
+        color: #fff;
+        text-align: center;
+        margin-left: 16rem / $pxConvertRem;
+    }
+
+    .sold-out {
+        background: #999;
+    }
+
+    .low-stocks {
+        background: #e01;
+    }
+
+    .icon-del,
+    .icon-edit {
+        position: absolute;
+        color: #ccc;
+        font-size: 30rem / $pxConvertRem;
+    }
+
+    .icon-del {
+        right: 14rem / $pxConvertRem;
+    }
+
+    .icon-edit {
+        right: 72rem / $pxConvertRem;
+    }
+
+    .opt-panel {
+        display: none;
+
+        width: 220rem / $pxConvertRem;
+        height: 190rem / $pxConvertRem;
+
+        color: #fff;
+
+        .put-in-favorite {
+            background: #bbb;
+        }
+
+        .del {
+            background: #999;
+        }
+    }
+}
\ No newline at end of file

+@import "good";
+
+.cart-nav {
+    height: 30rem / $pxConvertRem;
+    color: #c6c6c6;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 30rem / $pxConvertRem 0;
+
+    li {
+        float: left;
+        width: 50%;
+    }
+
+    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;
+    }
+
+    li:first-child span {
+        border-right: 1px solid #e0e0e0;
+    }
+}
+
+.cart-goods {
+    border-bottom: 1px solid #e0e0e0;
+
+    .shopping-cart-good:last-child .info {
+        border-bottom: none;
+    }
+}
+
+.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;
+        }
+    }
+
+    .count {
+        color: #f00;
+    }
+
+    .icon-right-arrow {
+        color: #8f8f8f;
+    }
+}
+
+.price-compute {
+    padding: 20rem / $pxConvertRem;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 26rem / $pxConvertRem;
+
+    .title {
+        display: inline-block;
+        width: 175rem / $pxConvertRem;
+    }
+
+    .minus {
+        float: right;
+    }
+}
+
+.balance {
+    position: fixed;
+    box-sizing: border-box;
+    bottom: 0;
+    width: 100%;
+    padding: 20rem / $pxConvertRem;
+    height: 120rem / $pxConvertRem;
+    border-top: 1px solid #e0e0e0;
+
+    .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

+{{> layout/header}}
+<div class="shopping-cart-page yoho-page">
+    {{# shoppingCart}}
+        {{#if cartNav}}
+            <ul class="cart-nav">
+                <li class="active">
+                    <span>
+                        普通商品({{commonGoodsCount}})
+                    </span>
+                </li>
+                <li>
+                    <span>
+                        预售商品({{presellGoodsCount}})
+                    </span>
+                </li>
+            </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 icon-gift"></span>
+                        赠品
+                        <a href={{url}}>
+                            <span class="count">{{count}}</span>
+                            <span class="iconfont icon-right-arrow"></span>
+                        </a>
+                    </li>
+                {{/ freebie}}
+                {{# advanceBuy}}
+                    <li class="advance-buy">
+                        <span class="iconfont icon-money"></span>
+                        加价购
+                        <a href={{url}}>
+                            <span class="count">{{count}}</span>
+                            <span class="iconfont icon-right-arrow"></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>
+    {{/ shoppingCart}}
+</div>
+{{> layout/footer}}
\ No newline at end of file

@@ -129,4 +129,11 @@
     <script>
         seajs.use('js/index/search');
     </script>
+{{/if}}
+
+{{!-- 购物车 --}}
+{{#if shoppingCartPage}}
+    <script>
+        seajs.use('js/shopping-cart/index');
+    </script>
 {{/if}}
\ No newline at end of file

+<div class="shopping-cart-good clearfix">
+    <span class="checkbox icon-cb-checked iconfont"></span>
+    <div class="info">
+        <img class="thumb lazy" data-original={{thumb}}>
+        <div class="deps">
+            <p class="name row">{{name}}</p>
+            <p class="row">
+                {{#if color}}
+                    <span class="color">
+                        颜色:{{color}}
+                    </span>
+                {{/if}}
+
+                {{#if size}}
+                    <span class="size">
+                        尺码:{{size}}
+                    </span>
+                {{/if}}
+
+                {{#if appearDate}}
+                    <span class="appear-date">
+                        上市期:{{appearDate}}
+                    </span>
+                {{/if}}
+            </p>
+            <p class="row">
+                <span class="price">
+                    ￥{{price}}
+                </span>
+                <span class="count">
+                    ×{{count}}
+                </span>
+                {{#if soldOut}}
+                    <span class="sold-out">
+                        已售罄
+                    </span>
+                {{/if}}
+
+                {{#if lowStocks}}
+                    <span class="low-stocks">
+                        库存不足
+                    </span>
+                {{/if}}
+
+                <span class="iconfont icon-edit"></span>
+                <span class="iconfont icon-del"></span>
+            </p>
+        </div>
+    </div>
+    <div class="opt-panel">
+        <div class="put-in-favorite">
+            <span class="iconfont icon-yoho-like"></span>
+            移入收藏夹
+        </div>
+        <div class="del">
+            <span class="iconfont icon-close"></span>
+            删除
+        </div>
+    </div>
+</div>
\ No newline at end of file

+<?php
+
+use Action\AbstractAction;
+
+/**
+ * 购物车
+ */
+class ShoppingCartController extends AbstractAction
+{
+    public function indexAction()
+    {
+        $data = array(
+            'cartNav' => true,
+            'commonGoodsCount' => 2,
+            'presellGoodsCount' => 2,
+            'goods' => array(
+                array(
+                    '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(
+                    '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' => 3192,
+            'activityPrice' => 0,
+            'count' => 8,
+            'sumPrice' => 3192
+        );
+        // 渲染模板
+        $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(
+            'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data));
+    }
+}