chenchao / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 23edebb2431facc8ff2ae1bc56a33465cb85e5a8 1 parent 5cb0b361

shopping cart chose panel

Inline Side-by-side
Showing 9 changed files with 302 additions and 4 deletions
/**
* 购物车选择尺寸、颜色和数量面板
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/21
*/
var $ = require('yoho.zepto');
var Handlebars = require('yoho.handlebars');
var $page = $('.yoho-page');
var tpl;
//读取partials
$.ajax({
type: 'GET',
url: '/shoppingCart/tpl',
success: function(data) {
tpl = Handlebars.compile(data);
}
});
//显示
function show(data) {
var html = tpl(data);
$page.append(html);
}
exports.show = show;
\ No newline at end of file
... ...
... ... @@ -8,6 +8,8 @@ var $ = require('yoho.zepto'),
ellipsis = require('mlellipsis'),
lazyLoad = require('yoho.zeptolazyload');
var chosePanel = require('./chose-panel');
ellipsis.init();
lazyLoad($('.lazy'));
... ... @@ -23,4 +25,22 @@ $('.checkbox').bind('touchstart', function() {
} else {
$this.removeClass('icon-checkbox').addClass('icon-cb-checked');
}
});
\ No newline at end of file
});
$('.icon-edit').bind('touchstart', function() {
var id = $(this).closest('.shopping-cart-good').data('id');
$.ajax({
type: 'GET',
url: '/shoppingCart/goodinfo',
data: {
id: id
},
success: function(data) {
if (data.code === 200) {
chosePanel.show(data.data);
}
}
});
});
... ...
... ... @@ -22,7 +22,8 @@
"yoho.iswiper": "3.0.1",
"iscroll": "5.1.2",
"import-style": "1.0.0",
"yoho.zeptolazyload": "0.0.1"
"yoho.zeptolazyload": "0.0.1",
"yoho.handlebars": "3.0.3"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
.chose-panel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3);
.main {
position: absolute;
height: 718rem / $pxConvertRem;
bottom: 0;
left: 0;
right: 0;
background: #fff;
}
.infos {
height: 546rem / $pxConvertRem;
padding: 30rem / $pxConvertRem 22rem / $pxConvertRem 20rem / $pxConvertRem;
}
.basic-info {
margin-bottom: 30rem / $pxConvertRem;
}
.thumb {
float: left;
width: 80rem / $pxConvertRem;
height: 106rem / $pxConvertRem;
}
.text-info {
margin-left: 102rem / $pxConvertRem;
.name {
font-size: 28rem / $pxConvertRem;
}
.sale-price {
color: #e10;
&.no-price {
color: #000;
}
}
.market-price {
color: #b0b0b0;
text-decoration: line-through;
}
}
.color-list, .size-list, .num {
position: relative;
font-size: 28rem / $pxConvertRem;
padding-left: 80rem / $pxConvertRem;
> span {
position: absolute;
left: 0;
top: 20rem / $pxConvertRem;
}
}
.block {
float: left;
display: block;
width: 80rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
border: 1px solid #000;
margin-right: 30rem / $pxConvertRem;
margin-bottom: 30rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
text-align: center;
&.chosed {
border-color: #e10;
background: image-url('shopping-cart/right.png') no-repeat;
background-size: 38rem / $pxConvertRem;
background-position: bottom right;
color: #e10;
}
}
.num .btn {
float: left;
display: block;
height: 80rem / $pxConvertRem;
width: 80rem / $pxConvertRem;
text-align: center;
line-height: 80rem / $pxConvertRem;
border: 1px solid #e6e6e6;
&.disable {
color: #e6e6e6;
}
}
.good-num {
float: left;
width: 106rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
padding: 0;
border: none;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
text-align: center;
}
.btn-wrap {
height: 80rem / $pxConvertRem;
border-top: 1px solid #e6e6e6;
padding: 21rem / $pxConvertRem;
text-align: center;
.btn-sure {
width: 260rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
background: #e10;
color: #fff;
font-size: 32rem / $pxConvertRem;
border: none;
}
}
}
\ No newline at end of file
... ...
@import "good";
@import "good", "chose-panel";
.icon-checkbox:before { content: "\e61c"; }
... ...
<div class="chose-panel">
<div class="main">
<div class="infos">
<div class="basic-info">
<img class="thumb" src={{thumb}}>
<div class="text-info">
<p class="name">{{name}}</p>
<p class="price">
<span class="sale-price{{^price}} no-price{{/price}}">￥{{salePrice}}</span>
{{#if price}}
<span class="market-price">￥{{price}}</span>
{{/if}}
</p>
</div>
</div>
<div class="color-list">
<span>颜色</span>
<ul class="clearfix" data-type="color">
{{# colors}}
<li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
{{name}}
</li>
{{/ colors}}
</ul>
</div>
<div class="size-list">
<span>尺码</span>
<ul class="clearfix" data-type="size">
{{# sizes}}
<li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
{{name}}
</li>
{{/ sizes}}
</ul>
</div>
<div class="num">
<span>数量</span>
<div class="clearfix">
<a class="btn btn-minus" href="javascript:void(0);">
<span class="iconfont">&#xe625;</span>
</a>
<input id="good-num" class="good-num" type="text" value={{num}}>
<a class="btn btn-plus" href="javascript:void(0);">
<span class="iconfont">&#xe624;</span>
</a>
</div>
</div>
</div>
<div class="btn-wrap">
<button id="chose-btn-sure" class="btn btn-sure">确定</button>
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="shopping-cart-good clearfix">
<div class="shopping-cart-good clearfix" data-id={{id}}>
<span class="checkbox icon-cb-checked iconfont"></span>
<div class="info">
<img class="thumb lazy" data-original={{thumb}}>
... ...
... ... @@ -15,6 +15,7 @@ class ShoppingCartController extends AbstractAction
'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' => '黄色',
... ... @@ -25,6 +26,7 @@ class ShoppingCartController extends AbstractAction
'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' => '黄色',
... ... @@ -52,4 +54,69 @@ class ShoppingCartController extends AbstractAction
$this->_view->display('index', array('shoppingCartPage' => true, 'pageHeader' => array(
'navBack' => 'http://m.yohobuy.com', 'navTitle' => '购物车'), 'shoppingCart' => $data));
}
/**
* 读取chose-panel内容
*/
public function tplAction()
{
if($this->isAjax()) {
$data = file_get_contents('../../../template/m.yohobuy.com/partials/shopping-cart/chose-panel.phtml');
echo($data);
}
}
public function goodinfoAction()
{
if ($this->isAjax()) {
$data = array(
'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
'name' => '黄伟文Wyman X y yohood 联名商品YYYOHOOD圆领卫衣',
'price' => 289,
'salePrice' => 241,
'colors' => array(
array(
'id' => 1,
'name' => '黄色'
),
array(
'id' => 2,
'chosed' => true,
'name' => '白色'
)
),
'sizes' => array(
array(
'id' => 1,
'name' => 'XS'
),
array(
'id' => 2,
'name' => 'S'
),
array(
'id' => 3,
'chosed' => true,
'name' => 'M'
),
array(
'id' => 4,
'name' => 'L'
),
array(
'id' => 5,
'name' => 'XL'
),
array(
'id' => 6,
'name' => 'XXL'
)
),
'num' => 1
);
$this->echoJson(array('code' => 200, 'data' => $data));
}
}
}
... ...