wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit 685d0412c841b102b4f75eac378032d836a432e0 1 parent 5de12158

购物车功能开发

Inline Side-by-side
Showing 5 changed files with 134 additions and 55 deletions
... ... @@ -5,6 +5,7 @@
*/
var $ = require('jquery'),
lazyLoad = require('yoho.lazyload'),
Hammer = require('yoho.hammer');
var $cartContent = $('.cart-content');
... ... @@ -13,6 +14,8 @@ var navHammer;
require('./good');
lazyLoad($('img.lazy'));
navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
navHammer.on('tap', function(e) {
var $this = $(e.target).closest('li');
... ...
... ... @@ -8,78 +8,151 @@ var $ = require('jquery'),
ellipsis = require('mlellipsis'),
lazyLoad = require('yoho.lazyload');
var chosePanel = require('./chose-panel');
var dialog = require('../me/dialog'),
tip = require('../plugin/tip');
var $curDelPanel;
var $names;
//删除面板显示后任何点击行为都将触发隐藏面板
function docTouchEvt() {
$curDelPanel && $curDelPanel.addClass('hide');
//chosePanel = require('./chose-panel');
//
$(document).off('touchstart', docTouchEvt);
}
var cartType = 'ordinary';
//var $curDelPanel;
////删除面板显示后任何点击行为都将触发隐藏面板
//function docTouchEvt() {
// $curDelPanel && $curDelPanel.addClass('hide');
//
// //
// $(document).off('touchstart', docTouchEvt);
//}
ellipsis.init();
lazyLoad($('.lazy'));
lazyLoad({
try_again_css: 'order-failure'
});
$('.name')[0].mlellipsis(2);
$names = $('.name');
if ($names.length > 0) {
$names[0].mlellipsis(2);
}
//TIP:事件委托在.cart-goods，商品列表的容器统一需要有.cart-goods
$('.cart-goods').on('touchstart', '.checkbox', function() {
var $this = $(this);
if ($this.hasClass('icon-cb-checked')) {
$this.removeClass('icon-cb-checked').addClass('icon-checkbox');
} else {
$this.removeClass('icon-checkbox').addClass('icon-cb-checked');
}
}).on('touchstart', '.icon-edit', function() {
var id = $(this).closest('.shopping-cart-good').data('id');
var $this = $(this),
id = $(this).closest('.shopping-cart-good').data('id');
$.ajax({
type: 'GET',
url: '/shoppingCart/goodinfo',
url: '/shoppingCart/select',
data: {
id: id
},
success: function(data) {
if (data.code === 200) {
chosePanel.show(data.data);
}
}).then(function(data) {
if (data.code === 200) {
if ($this.hasClass('icon-cb-checked')) {
$this.removeClass('icon-cb-checked').addClass('icon-checkbox');
} else {
$this.removeClass('icon-checkbox').addClass('icon-cb-checked');
}
}
$.ajax({
type: 'GET',
url: '/shoppingCart/getCartData',
data: {
id: id
},
success: function(data) {
if (data) {
$('#good-totalprice').html('¥' + data.commonCart.price);
$('#good-activityPrice').html('¥' + data.commonCart.activityPrice);
$('#good-total').html(data.commonCart.count + '件总计:¥' + data.commonCart.sumPrice);
}
},
error: function() {
tip.show('网络错误');
}
});
}).fail(function() {
tip.show('网络错误');
});
}).on('touchstart', '.icon-edit', function() {
}).on('touchstart', '.icon-del', function(e) {
var $this = $(this);
e.stopPropagation();
//手动触发docTouchEvt清除因点击到del按钮上而被阻止冒泡到doc上的事件从而清除已打开的删除面板
docTouchEvt();
$curDelPanel = $(this).closest('.shopping-cart-good').children('.opt-panel').removeClass('hide');
$(document).on('touchstart', docTouchEvt);
}).on('touchstart', '.opt-panel', function() {
var $this = $(this),
id = $this.closest('.shopping-cart-good').data('id'),
url;
if ($this.closest('.put-in-favorite').length > 0) {
//移入收藏夹
url = '/shoppingCart/col';
} else {
//删除
url = '/shoppingCart/del';
}
//docTouchEvt();
//
//$curDelPanel = $(this).closest('.shopping-cart-good').children('.opt-panel').removeClass('hide');
//
//$(document).on('touchstart', docTouchEvt);
$.ajax({
type: 'POST',
url: url,
data: {
id: id
dialog.showDialog({
dialogText: '您确定要从购物车中删除吗？',
hasFooter: {
leftBtnText: '取消',
rightBtnText: '确定'
}
}, function() {
var id = $this.closest('.shopping-cart-good').data('id');
$.ajax({
method: 'post',
url: '/shoppingCart/del',
data: {
id: id
}
}).then(function(data) {
if (data.code === 200) {
dialog.showDialog({
dialogText: '删除成功',
autoHide: true,
fast: true
});
history.go(0);
}
}).fail(function() {
dialog.showDialog({
autoHide: true,
dialogText: '网络错误~'
});
});
});
});
// .on('touchstart', '.opt-panel', function() {
// var $this = $(this),
// id = $this.closest('.shopping-cart-good').data('id'),
// url;
//
// if ($this.closest('.put-in-favorite').length > 0) {
//
// //移入收藏夹
// url = '/shoppingCart/col';
// } else {
//
// //删除
// url = '/shoppingCart/del';
// }
//
// $.ajax({
// type: 'POST',
// url: url,
// data: {
// id: id
// }
// });
//})
$('.btn-balance').on('touchend', function() {
window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
});
... ...
... ... @@ -32,26 +32,26 @@
<div class="price-compute">
<p class="sum-price">
<span class="title">总价</span>
¥{{price}}
<span id="good-totalprice">¥{{price}}</span>
</p>
<p class="activity-price">
<span class="title">
活动价
<i class="minus">-</i>
</span>
¥{{activityPrice}}
<span id="good-activityPrice">¥{{activityPrice}}</span>
</p>
</div>
<div class="balance">
<span class="iconfont icon-cb-checked"></span>
<p>
<span>
<span id="good-total">
{{count}}件总计:¥{{sumPrice}}
</span>
<span class="tip">(不含运费)</span>
</p>
<button class="btn-balance">
<a class="btn-balance">
结算
</button>
</a>
</div>
\ No newline at end of file
... ...
... ... @@ -22,6 +22,9 @@
<span class="price">
¥{{price}}
</span>
<span class="price">
¥{{salePrice}}
</span>
<span class="count">
×{{count}}
</span>
... ...
... ... @@ -51,7 +51,7 @@
</p>
</div>
</div>
<div class="opt-panel hide">
<!--<div class="opt-panel hide">
<div class="put-in-favorite">
<span class="iconfont">&#xe622;</span>
<span>移入</span>
... ... @@ -61,5 +61,5 @@
<span class="iconfont">&#xe626;</span>
删除
</div>
</div>
</div>-->
</div>
... ...