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 292 additions and 188 deletions
... ... @@ -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(
... ...