fe / YOHO-ACTIVITY-PHP · 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 292 additions and 188 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,135 +6,175 @@ @@ -6,135 +6,175 @@
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 {  
12 - height: 30rem / $pxConvertRem;  
13 - color: #c6c6c6;  
14 - border-bottom: 1px solid #e0e0e0;  
15 - padding: 30rem / $pxConvertRem 0; 10 + .cart-nav {
  11 + height: 30rem / $pxConvertRem;
  12 + color: #c6c6c6;
  13 + border-bottom: 1px solid #e0e0e0;
  14 + padding: 30rem / $pxConvertRem 0;
16 15
17 - li {  
18 - float: left;  
19 - width: 50%;  
20 - } 16 + li {
  17 + float: left;
  18 + width: 50%;
  19 + }
21 20
22 - li.active {  
23 - color: #000;  
24 - } 21 + li.active {
  22 + color: #000;
  23 + }
25 24
26 - span {  
27 - display: block;  
28 - box-sizing: border-box;  
29 - width: 100%;  
30 - height: 30rem / $pxConvertRem;  
31 - line-height: 30rem / $pxConvertRem;  
32 - font-size: 30rem / $pxConvertRem;  
33 - text-align: center;  
34 - } 25 + span {
  26 + display: block;
  27 + box-sizing: border-box;
  28 + width: 100%;
  29 + height: 30rem / $pxConvertRem;
  30 + line-height: 30rem / $pxConvertRem;
  31 + font-size: 30rem / $pxConvertRem;
  32 + text-align: center;
  33 + }
35 34
36 - li:first-child span {  
37 - border-right: 1px solid #e0e0e0; 35 + li:first-child span {
  36 + border-right: 1px solid #e0e0e0;
  37 + }
38 } 38 }
39 -}  
40 39
41 -.cart-goods {  
42 - border-bottom: 1px solid #e0e0e0; 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;
43 46
44 - .shopping-cart-good:last-child .info {  
45 - border-bottom: none; 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 + }
46 } 55 }
47 -}  
48 56
49 -.freebie-and-advance-buy {  
50 - padding: 20rem / $pxConvertRem;  
51 - font-size: 24rem / $pxConvertRem;  
52 - border-bottom: 1px solid #e0e0e0; 57 + .presell-info {
  58 + height: 60rem / $pxConvertRem;
  59 + padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
  60 + font-size: 22rem / $pxConvertRem;
  61 + background: #f0f0f0;
  62 + color: #b7b7b7;
53 63
54 - > li {  
55 - box-sizing: border-box;  
56 - height: 90rem / $pxConvertRem;  
57 - line-height: 90rem / $pxConvertRem;  
58 - margin-bottom: 10rem / $pxConvertRem;  
59 - background: #f8f8f8;  
60 - padding: 0 20rem / $pxConvertRem; 64 + > span {
  65 + display: block;
  66 + }
61 67
62 - &:last-child {  
63 - margin-bottom: 0; 68 + .iconfont {
  69 + float: left;
  70 + font-size: 45rem / $pxConvertRem;
64 } 71 }
65 72
66 - a {  
67 - float: right; 73 + .txt {
  74 + height: 30rem / $pxConvertRem;
  75 + line-height: 30rem / $pxConvertRem;
  76 + margin-left: 80rem / $pxConvertRem;
68 } 77 }
69 } 78 }
70 79
71 - .count {  
72 - color: #f00;  
73 - } 80 + .cart-goods {
  81 + border-bottom: 1px solid #e0e0e0;
74 82
75 - .icon-right-arrow {  
76 - color: #8f8f8f; 83 + .shopping-cart-good:last-child .info {
  84 + border-bottom: none;
  85 + }
77 } 86 }
78 -}  
79 -  
80 -.price-compute {  
81 - padding: 20rem / $pxConvertRem;  
82 - border-bottom: 1px solid #e0e0e0;  
83 - font-size: 26rem / $pxConvertRem;  
84 87
85 - .title {  
86 - display: inline-block;  
87 - width: 175rem / $pxConvertRem;  
88 - } 88 + .freebie-and-advance-buy {
  89 + padding: 20rem / $pxConvertRem;
  90 + font-size: 24rem / $pxConvertRem;
  91 + border-bottom: 1px solid #e0e0e0;
  92 +
  93 + > li {
  94 + box-sizing: border-box;
  95 + height: 90rem / $pxConvertRem;
  96 + line-height: 90rem / $pxConvertRem;
  97 + margin-bottom: 10rem / $pxConvertRem;
  98 + background: #f8f8f8;
  99 + padding: 0 20rem / $pxConvertRem;
  100 +
  101 + &:last-child {
  102 + margin-bottom: 0;
  103 + }
  104 +
  105 + a {
  106 + float: right;
  107 + }
  108 + }
89 109
90 - .minus {  
91 - float: right;  
92 - }  
93 -} 110 + .count {
  111 + color: #f00;
  112 + }
94 113
95 -.balance {  
96 - position: fixed;  
97 - box-sizing: border-box;  
98 - bottom: 0;  
99 - width: 100%;  
100 - padding: 20rem / $pxConvertRem;  
101 - height: 120rem / $pxConvertRem;  
102 - border-top: 1px solid #e0e0e0;  
103 - background: #fff;  
104 -  
105 - .iconfont {  
106 - position: absolute;  
107 - top: 50%;  
108 - margin-top: -14rem / $pxConvertRem;  
109 - font-size: 28rem / $pxConvertRem; 114 + .icon-right-arrow {
  115 + color: #8f8f8f;
  116 + }
110 } 117 }
111 118
112 - p {  
113 - float: left;  
114 - margin-left: 50rem / $pxConvertRem; 119 + .price-compute {
  120 + padding: 20rem / $pxConvertRem;
  121 + border-bottom: 1px solid #e0e0e0;
115 font-size: 26rem / $pxConvertRem; 122 font-size: 26rem / $pxConvertRem;
116 123
117 - span {  
118 - display: block;  
119 - height: 40rem / $pxConvertRem;  
120 - line-height: 40rem / $pxConvertRem; 124 + .title {
  125 + display: inline-block;
  126 + width: 175rem / $pxConvertRem;
121 } 127 }
122 128
123 - .tip {  
124 - color: #666;  
125 - font-size: 22rem / $pxConvertRem; 129 + .minus {
  130 + float: right;
126 } 131 }
127 } 132 }
128 133
129 - .btn-balance {  
130 - float: right;  
131 - width: 140rem / $pxConvertRem;  
132 - height: 80rem / $pxConvertRem;  
133 - line-height: 80rem / $pxConvertRem;  
134 - text-align: center;  
135 - background: #e01;  
136 - color: #fff;  
137 - border: none;  
138 - font-size: 28rem / $pxConvertRem; 134 + .balance {
  135 + position: fixed;
  136 + box-sizing: border-box;
  137 + bottom: 0;
  138 + width: 100%;
  139 + padding: 20rem / $pxConvertRem;
  140 + height: 120rem / $pxConvertRem;
  141 + border-top: 1px solid #e0e0e0;
  142 + background: #fff;
  143 +
  144 + .iconfont {
  145 + position: absolute;
  146 + top: 50%;
  147 + margin-top: -14rem / $pxConvertRem;
  148 + font-size: 28rem / $pxConvertRem;
  149 + }
  150 +
  151 + p {
  152 + float: left;
  153 + margin-left: 50rem / $pxConvertRem;
  154 + font-size: 26rem / $pxConvertRem;
  155 +
  156 + span {
  157 + display: block;
  158 + height: 40rem / $pxConvertRem;
  159 + line-height: 40rem / $pxConvertRem;
  160 + }
  161 +
  162 + .tip {
  163 + color: #666;
  164 + font-size: 22rem / $pxConvertRem;
  165 + }
  166 + }
  167 +
  168 + .btn-balance {
  169 + float: right;
  170 + width: 140rem / $pxConvertRem;
  171 + height: 80rem / $pxConvertRem;
  172 + line-height: 80rem / $pxConvertRem;
  173 + text-align: center;
  174 + background: #e01;
  175 + color: #fff;
  176 + border: none;
  177 + font-size: 28rem / $pxConvertRem;
  178 + }
139 } 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>  
62 - </div> 28 + {{# commonCart}}
  29 + <div class="cart-content common">
  30 + {{> shopping-cart/cart-content}}
  31 + </div>
  32 + {{/ commonCart}}
  33 +
  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>
  40 + </p>
  41 + {{> shopping-cart/cart-content}}
  42 + </div>
  43 + {{/ preSellCart}}
63 44
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>  
71 - </p>  
72 - <button class="btn-balance">  
73 - 结算  
74 - </button>  
75 - </div>  
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,42 +13,72 @@ class ShoppingCartController extends AbstractAction @@ -13,42 +13,72 @@ class ShoppingCartController extends AbstractAction
13 'cartNav' => true, 13 'cartNav' => true,
14 'commonGoodsCount' => 2, 14 'commonGoodsCount' => 2,
15 'presellGoodsCount' => 2, 15 'presellGoodsCount' => 2,
16 - 'goods' => array(  
17 - array(  
18 - 'id' => 1,  
19 - 'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',  
20 - 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',  
21 - 'color' => '黄色',  
22 - 'size' => 'F',  
23 - 'appearDate' => '12月',  
24 - 'price' => 399.00,  
25 - 'count' => 8,  
26 - 'lowStocks' => true 16 + 'showLoginInfo' => true,
  17 + 'commonCart' => array(
  18 + 'goods' => array(
  19 + array(
  20 + 'id' => 1,
  21 + 'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
  22 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
  23 + 'color' => '黄色',
  24 + 'size' => 'F',
  25 + 'appearDate' => '12月',
  26 + 'price' => 399.00,
  27 + 'count' => 8,
  28 + 'lowStocks' => true
  29 + ),
  30 + array(
  31 + 'id' => 2,
  32 + 'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',
  33 + 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  34 + 'color' => '黄色',
  35 + 'size' => 'F',
  36 + 'price' => 553.00,
  37 + 'count' => 1,
  38 + 'soldOut' => true
  39 + )
27 ), 40 ),
28 - array(  
29 - 'id' => 2,  
30 - 'name' => 'TYAKSHA圣诞树凭借三角领蓝色白条毛衣',  
31 - 'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',  
32 - 'color' => '黄色',  
33 - 'size' => 'F',  
34 - 'price' => 553.00,  
35 - 'count' => 1,  
36 - 'soldOut' => true  
37 - )  
38 - ),  
39 - 'freebieOrAdvanceBuy' => true,  
40 - 'freebie' => array(  
41 - 'url' => '',  
42 - 'count' => 2  
43 - ),  
44 - 'advanceBuy' => array(  
45 - 'url' => '',  
46 - 'count' => 3 41 + 'freebieOrAdvanceBuy' => true,
  42 + 'freebie' => array(
  43 + 'url' => '',
  44 + 'count' => 2
  45 + ),
  46 + 'advanceBuy' => array(
  47 + 'url' => '',
  48 + 'count' => 3
  49 + ),
  50 + 'price' => 3192,
  51 + 'activityPrice' => 0,
  52 + 'count' => 8,
  53 + 'sumPrice' => 3192
47 ), 54 ),
48 - 'price' => 3192,  
49 - 'activityPrice' => 0,  
50 - 'count' => 8,  
51 - 'sumPrice' => 3192 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(