wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by Lynnic
Commit a0be6faf7732f46dd0bf21708448d1ac646ef5c8 1 parent 70ccd4c3

商品详情页购物车功能 -- code reviewd by LZF

Inline Side-by-side
Showing 6 changed files with 101 additions and 37 deletions
... ... @@ -1242,11 +1242,45 @@
'cartUrl':'购物车url',
'addToCartUrl':'添加购物车url',
'soldOut':'已售罄',
'notForSale':'非卖品'
'notForSale':'非卖品',
thumb: [
{
id:1,
url : ''
},
...
],
name: '',
price: '',
salePrice: '',
colors: [
{
id: 1,
chosed: true,
name: '黄色'，
colorNum：10，
shortUrl：'',
},
...
],
sizes: [
{
id: 2,
chosed: true,
name: 'X',
sizeNum: 2
},
...
],
totalNum: 20
},
'introUrl' : '',
'id' : '',
'preferenceUrl' :''
'preferenceUrl' :'',
}
### 评价列表页面
{
... ...
... ... @@ -7,7 +7,8 @@
var $ = require('jquery'),
Hammer = require('yoho.hammer'),
tip = require('../../plugin/tip');
tip = require('../../plugin/tip'),
chosePanel = require('../../shopping-cart/chose-panel');
var likeEle = document.getElementById('likeBtn'),
likeHammer = likeEle && new Hammer(likeEle);
... ... @@ -70,14 +71,17 @@ if (likeHammer) {
if (addToCartHammer) {
addToCartHammer.on('tap', function(e) {
chosePanel.show();
// 统计代码：用于统计用户加入购物车的动作
if (window._yas) {
window._yas.sendCustomInfo({
pd: productId,
by: 1
}, false);
}
// if (window._yas) {
// window._yas.sendCustomInfo({
// pd: productId,
// by: 1
// }, false);
// }
});
}
... ...
... ... @@ -5,36 +5,45 @@
* @date: 2015/10/21
*/
var $ = require('jquery'),
Handlebars = require('yoho.handlebars');
var $ = require('jquery');
var $page = $('.yoho-page');
// Handlebars = require('yoho.handlebars');
// var $page = $('.yoho-page');
var $num;
var tpl;
// var tpl;
//读取partials
$.ajax({
type: 'GET',
url: '/shoppingCart/tpl',
success: function(data) {
tpl = Handlebars.compile(data);
}
});
// $.ajax({
// type: 'GET',
// url: '/shoppingCart/tpl',
// success: function(data) {
// tpl = Handlebars.compile(data);
// }
// });
//显示
function show(data) {
var html = tpl(data);
$page.append(html);
//显示
// function show(data) {
// // var html = tpl(data);
// $('.chose-panel').show();
// // $page.append(html);
// $('.chose-panel')
// $num = $('#good-num');
// }
function show() {
$('.chose-panel').show();
$('body').css('overflow', 'hidden');
$num = $('#good-num');
}
//移除当前Panel
function remove() {
$('.chose-panel').remove();
$('.chose-panel').hide();
$('body').css('overflow', 'auto');
}
$('.yoho-page').on('touchstart', '.chose-panel', function(e) {
... ... @@ -75,4 +84,5 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
$num.val(num + 1);
});
exports.show = show;
\ No newline at end of file
... ...
.chose-panel {
position: absolute;
position: fixed;
display: none;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3);
z-index:3;
.main {
position: absolute;
height: 610rem / $pxConvertRem;
height: pxToRem(610px);
bottom: 0;
left: 0;
right: 0;
... ... @@ -18,7 +21,7 @@
.infos {
height: 460rem / $pxConvertRem;
padding: 0 22rem / $pxConvertRem;
padding-top: 30rem / $pxConvertRem;
// padding-top: 30rem / $pxConvertRem;
}
.chose-items {
... ... @@ -27,7 +30,10 @@
}
.basic-info {
margin-bottom: 30rem / $pxConvertRem;
overflow: hidden;
position: relative;
margin-bottom: pxToRem(30px);
margin-top: pxToRem(30px);
}
.thumb {
... ... @@ -37,12 +43,18 @@
}
.text-info {
margin-left: 102rem / $pxConvertRem;
position: absolute;
height: auto;
left: pxToRem(95px);
top:50%;
transform: translateY(-50%);
.name {
font-size: 28rem / $pxConvertRem;
}
.price{
font-size: pxToRem(24px);
}
.sale-price {
color: #e10;
... ...
... ... @@ -114,6 +114,7 @@
<div id="productDesc"> </div>
{{> product/recommend-for-you}}
{{> shopping-cart/chose-panel}}
{{#cartInfo}}
<div class="cart-bar">
... ... @@ -121,7 +122,8 @@
<a href="{{cartUrl}}" class="num-incart iconfont">&#xe62c;</a>
{{#if addToCartUrl}}
<a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a>
<!-- <a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a> -->
<a id="addtoCart" href="javascript:;" class="addto-cart">加入购物车</a>
{{/if}}
{{#if soldOut}}
... ...
{{#cartInfo}}
<div class="chose-panel">
<div class="main">
<div class="infos">
... ... @@ -25,8 +26,8 @@
</ul>
</div>
<div class="size-list">
<span>尺码</span>
<ul class="clearfix" data-type="size">
<span>尺码</span>
<ul class="clearfix {{#if @first}}{{^}}hide{{/if}}" data-type="size" >
{{# sizes}}
<li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
{{name}}
... ... @@ -49,7 +50,8 @@
</div>
</div>
<div class="btn-wrap">
<button id="chose-btn-sure" class="btn btn-sure">确定</button>
<button id="chose-btn-sure" class="btn btn-sure">加入购物车</button>
</div>
</div>
</div>
\ No newline at end of file
</div>
{{/cartInfo}}
\ No newline at end of file
... ...