fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 5435ab457210bc785b0cd720722e93e61f72b465 1 parent 25ab8268

presell/common goods cart & tips

Inline Side-by-side
Showing 5 changed files with 165 additions and 61 deletions
@@ -6,6 +6,8 @@ @@ -6,6 +6,8 @@
6 6
7 var $ = require('yoho.zepto'); 7 var $ = require('yoho.zepto');
8 8
  9 +var $cartContent = $('.cart-content');
  10 +
9 require('./good'); 11 require('./good');
10 12
11 $('.cart-nav').delegate('li', 'touchstart', function() { 13 $('.cart-nav').delegate('li', 'touchstart', function() {
@@ -17,4 +19,10 @@ $('.cart-nav').delegate('li', 'touchstart', function() { @@ -17,4 +19,10 @@ $('.cart-nav').delegate('li', 'touchstart', function() {
17 19
18 $this.siblings('.active').removeClass('active'); 20 $this.siblings('.active').removeClass('active');
19 $this.addClass('active'); 21 $this.addClass('active');
  22 +
  23 + //切换普通商品和预售商品购物车显示
  24 + $cartContent.toggleClass('hide');
  25 +
  26 + //trigger lazyload
  27 + $(window).trigger('scroll');
20 }); 28 });
@@ -6,9 +6,8 @@ @@ -6,9 +6,8 @@
6 6
7 .shopping-cart-page { 7 .shopping-cart-page {
8 padding-bottom: 120rem / $pxConvertRem; 8 padding-bottom: 120rem / $pxConvertRem;
9 -}  
10 9
11 -.cart-nav { 10 + .cart-nav {
12 height: 30rem / $pxConvertRem; 11 height: 30rem / $pxConvertRem;
13 color: #c6c6c6; 12 color: #c6c6c6;
14 border-bottom: 1px solid #e0e0e0; 13 border-bottom: 1px solid #e0e0e0;
@@ -36,17 +35,57 @@ @@ -36,17 +35,57 @@
36 li:first-child span { 35 li:first-child span {
37 border-right: 1px solid #e0e0e0; 36 border-right: 1px solid #e0e0e0;
38 } 37 }
39 -} 38 + }
  39 +
  40 + .login-info {
  41 + height: 46rem / $pxConvertRem;
  42 + padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;
  43 + color: #24acaa;
  44 + text-align: center;
  45 + font-size: 28rem / $pxConvertRem;
  46 +
  47 + .btn {
  48 + display: inline-block;
  49 + background: #ed0010;
  50 + color: #fff;
  51 + width: 80rem / $pxConvertRem;
  52 + height: 46rem / $pxConvertRem;
  53 + line-height: 46rem / $pxConvertRem;
  54 + }
  55 + }
  56 +
  57 + .presell-info {
  58 + height: 60rem / $pxConvertRem;
  59 + padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
  60 + font-size: 22rem / $pxConvertRem;
  61 + background: #f0f0f0;
  62 + color: #b7b7b7;
  63 +
  64 + > span {
  65 + display: block;
  66 + }
40 67
41 -.cart-goods { 68 + .iconfont {
  69 + float: left;
  70 + font-size: 45rem / $pxConvertRem;
  71 + }
  72 +
  73 + .txt {
  74 + height: 30rem / $pxConvertRem;
  75 + line-height: 30rem / $pxConvertRem;
  76 + margin-left: 80rem / $pxConvertRem;
  77 + }
  78 + }
  79 +
  80 + .cart-goods {
42 border-bottom: 1px solid #e0e0e0; 81 border-bottom: 1px solid #e0e0e0;
43 82
44 .shopping-cart-good:last-child .info { 83 .shopping-cart-good:last-child .info {
45 border-bottom: none; 84 border-bottom: none;
46 } 85 }
47 -} 86 + }
48 87
49 -.freebie-and-advance-buy { 88 + .freebie-and-advance-buy {
50 padding: 20rem / $pxConvertRem; 89 padding: 20rem / $pxConvertRem;
51 font-size: 24rem / $pxConvertRem; 90 font-size: 24rem / $pxConvertRem;
52 border-bottom: 1px solid #e0e0e0; 91 border-bottom: 1px solid #e0e0e0;
@@ -75,9 +114,9 @@ @@ -75,9 +114,9 @@
75 .icon-right-arrow { 114 .icon-right-arrow {
76 color: #8f8f8f; 115 color: #8f8f8f;
77 } 116 }
78 -} 117 + }
79 118
80 -.price-compute { 119 + .price-compute {
81 padding: 20rem / $pxConvertRem; 120 padding: 20rem / $pxConvertRem;
82 border-bottom: 1px solid #e0e0e0; 121 border-bottom: 1px solid #e0e0e0;
83 font-size: 26rem / $pxConvertRem; 122 font-size: 26rem / $pxConvertRem;
@@ -90,9 +129,9 @@ @@ -90,9 +129,9 @@
90 .minus { 129 .minus {
91 float: right; 130 float: right;
92 } 131 }
93 -} 132 + }
94 133
95 -.balance { 134 + .balance {
96 position: fixed; 135 position: fixed;
97 box-sizing: border-box; 136 box-sizing: border-box;
98 bottom: 0; 137 bottom: 0;
@@ -137,4 +176,5 @@ @@ -137,4 +176,5 @@
137 border: none; 176 border: none;
138 font-size: 28rem / $pxConvertRem; 177 font-size: 28rem / $pxConvertRem;
139 } 178 }
  179 + }
140 } 180 }
@@ -16,63 +16,32 @@ @@ -16,63 +16,32 @@
16 </ul> 16 </ul>
17 {{/if}} 17 {{/if}}
18 18
19 - <div class="cart-goods">  
20 - {{# goods}}  
21 - {{> shopping-cart/good}}  
22 - {{/ goods}}  
23 - </div>  
24 -  
25 - {{#if freebieOrAdvanceBuy}}  
26 - <ul class="freebie-and-advance-buy">  
27 - {{# freebie}}  
28 - <li class="freebie">  
29 - <span class="iconfont">&#xe620;</span>  
30 - 赠品  
31 - <a href={{url}}>  
32 - <span class="count">{{count}}</span>  
33 - <span class="iconfont icon-right-arrow">&#xe614;</span>  
34 - </a>  
35 - </li>  
36 - {{/ freebie}}  
37 - {{# advanceBuy}}  
38 - <li class="advance-buy">  
39 - <span class="iconfont">&#xe61b;</span>  
40 - 加价购  
41 - <a href={{url}}>  
42 - <span class="count">{{count}}</span>  
43 - <span class="iconfont icon-right-arrow">&#xe614;</span>  
44 - </a>  
45 - </li>  
46 - {{/ advanceBuy}}  
47 - </ul> 19 + {{#if showLoginInfo}}
  20 + <p class="login-info">
  21 + <span class="iconfont">&#xe628;</span>
  22 + 请您先
  23 + <a class="btn btn-login">登录</a>
  24 + 可以同步电脑和手机中的商品
  25 + </p>
48 {{/if}} 26 {{/if}}
49 27
50 - <div class="price-compute">  
51 - <p class="sum-price">  
52 - <span class="title">总价</span>  
53 - ￥{{price}}  
54 - </p>  
55 - <p class="activity-price">  
56 - <span class="title">  
57 - 活动价  
58 - <i class="minus">-</i>  
59 - </span>  
60 - ￥{{activityPrice}}  
61 - </p> 28 + {{# commonCart}}
  29 + <div class="cart-content common">
  30 + {{> shopping-cart/cart-content}}
62 </div> 31 </div>
  32 + {{/ commonCart}}
63 33
64 - <div class="balance">  
65 - <span class="iconfont icon-cb-checked"></span>  
66 - <p>  
67 - <span>  
68 - {{count}}件总计:￥{{sumPrice}}  
69 - </span>  
70 - <span class="tip">(不含运费)</span> 34 + {{# preSellCart}}
  35 + <div class="cart-content presell hide">
  36 + <p class="presell-info">
  37 + <span class="iconfont">&#xe61a;</span>
  38 + <span class="txt">预售商品全场包邮，到货后立即发货</span>
  39 + <span class="txt">预售商品不参加活动，不可使用优惠券</span>
71 </p> 40 </p>
72 - <button class="btn-balance">  
73 - 结算  
74 - </button> 41 + {{> shopping-cart/cart-content}}
75 </div> 42 </div>
  43 + {{/ preSellCart}}
  44 +
76 {{/ shoppingCart}} 45 {{/ shoppingCart}}
77 </div> 46 </div>
78 {{> layout/footer}} 47 {{> layout/footer}}
  1 +<div class="cart-goods">
  2 + {{# goods}}
  3 + {{> shopping-cart/good}}
  4 + {{/ goods}}
  5 +</div>
  6 +
  7 +{{#if freebieOrAdvanceBuy}}
  8 + <ul class="freebie-and-advance-buy">
  9 + {{# freebie}}
  10 + <li class="freebie">
  11 + <span class="iconfont">&#xe620;</span>
  12 + 赠品
  13 + <a href={{url}}>
  14 + <span class="count">{{count}}</span>
  15 + <span class="iconfont icon-right-arrow">&#xe614;</span>
  16 + </a>
  17 + </li>
  18 + {{/ freebie}}
  19 + {{# advanceBuy}}
  20 + <li class="advance-buy">
  21 + <span class="iconfont">&#xe61b;</span>
  22 + 加价购
  23 + <a href={{url}}>
  24 + <span class="count">{{count}}</span>
  25 + <span class="iconfont icon-right-arrow">&#xe614;</span>
  26 + </a>
  27 + </li>
  28 + {{/ advanceBuy}}
  29 + </ul>
  30 +{{/if}}
  31 +
  32 +<div class="price-compute">
  33 + <p class="sum-price">
  34 + <span class="title">总价</span>
  35 + ￥{{price}}
  36 + </p>
  37 + <p class="activity-price">
  38 + <span class="title">
  39 + 活动价
  40 + <i class="minus">-</i>
  41 + </span>
  42 + ￥{{activityPrice}}
  43 + </p>
  44 +</div>
  45 +
  46 +<div class="balance">
  47 + <span class="iconfont icon-cb-checked"></span>
  48 + <p>
  49 + <span>
  50 + {{count}}件总计:￥{{sumPrice}}
  51 + </span>
  52 + <span class="tip">(不含运费)</span>
  53 + </p>
  54 + <button class="btn-balance">
  55 + 结算
  56 + </button>
  57 + </div>
@@ -13,6 +13,8 @@ class ShoppingCartController extends AbstractAction @@ -13,6 +13,8 @@ class ShoppingCartController extends AbstractAction
13 'cartNav' => true, 13 'cartNav' => true,
14 'commonGoodsCount' => 2, 14 'commonGoodsCount' => 2,
15 'presellGoodsCount' => 2, 15 'presellGoodsCount' => 2,
  16 + 'showLoginInfo' => true,
  17 + 'commonCart' => array(
16 'goods' => array( 18 'goods' => array(
17 array( 19 array(
18 'id' => 1, 20 'id' => 1,
@@ -49,6 +51,34 @@ class ShoppingCartController extends AbstractAction @@ -49,6 +51,34 @@ class ShoppingCartController extends AbstractAction
49 'activityPrice' => 0, 51 'activityPrice' => 0,
50 'count' => 8, 52 'count' => 8,
51 'sumPrice' => 3192 53 'sumPrice' => 3192
  54 + ),
  55 + 'preSellCart' => array(
  56 + 'goods' => array(
  57 + array(
  58 + 'id' => 2,
  59 + 'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
  60 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  61 + 'color' => '黄色',
  62 + 'size' => 'F',
  63 + 'price' => 553.00,
  64 + 'count' => 1,
  65 + 'soldOut' => true
  66 + )
  67 + ),
  68 + 'freebieOrAdvanceBuy' => true,
  69 + 'freebie' => array(
  70 + 'url' => '',
  71 + 'count' => 2
  72 + ),
  73 + 'advanceBuy' => array(
  74 + 'url' => '',
  75 + 'count' => 3
  76 + ),
  77 + 'price' => 553,
  78 + 'activityPrice' => 0,
  79 + 'count' => 1,
  80 + 'sumPrice' => 553
  81 + )
52 ); 82 );
53 // 渲染模板 83 // 渲染模板
54 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array( 84 $this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(