Authored by 梁志锋

购物车功能开发

framework @ 75bbc3b0
Subproject commit e9d066dd88a8e7e37103021c427a205a5cfcdcec
Subproject commit 75bbc3b075de19f239532f60c5995d06c5f814e2
... ...
... ... @@ -11,7 +11,8 @@ var $ = require('jquery');
// var $page = $('.yoho-page');
var $num;
var $num,
$chosed;
// var tpl;
... ... @@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
var $this = $(this),
$that = $(e.target).closest('.chose-items'),
numArray,
index;
index,
i;
if ($this.hasClass('chosed')) {
$this.parent().find('.block').removeClass('chosed');
$that.find('.num .left-num').html('');
} else if ($this.hasClass('disable')) {
$this.css('background-color', '#000');
return;
} else if (!$this.hasClass('chosed')) {
$this.siblings('.chosed').removeClass('chosed');
$this.addClass('chosed');
index = $this.index();
var $siblingBlock = $this.closest('.block-list').siblings(':first'),
currentNumArray = $this.data('numstr').split('/');
$this.siblings('.chosed').removeClass('chosed');
$this.toggleClass('chosed');
index = $this.index();
$chosed = $('.block-list>ul>li.chosed');
//根据颜色切换图片
if ($this.closest('.block-list').hasClass('color-list')) {
$('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
}
//根据颜色切换图片
if ($this.closest('.block-list').hasClass('color-list')) {
$('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
}
//剩余的商品数
if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {
numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');
$that.find('.num .left-num').html('剩余' + numArray[index] + '件');
} else {
$that.find('.num .left-num').html('');
if ($chosed.length === 0) {
$this.closest('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
$siblingBlock.find('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
} else if ($chosed.length === 1 && $this.hasClass('chosed')) {
numArray = $chosed.data('numstr').split('/');
$siblingBlock.find('.block').removeClass('zero-stock');
for (i = 0; i < numArray.length; i++) {
if (0 === numArray[i] - 0) {
$siblingBlock.find('.block').eq(i).addClass('zero-stock');
}
}
//点击切换
} else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
$siblingBlock.find('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
$that.find('.num .left-num').html('');
} else if ($chosed.length === 2) {
$siblingBlock.find('.block').removeClass('zero-stock');
for (i = 0; i < currentNumArray.length; i++) {
if (0 === currentNumArray[i] - 0) {
$siblingBlock.find('.block').eq(i).addClass('zero-stock');
}
}
numArray = $siblingBlock.find('.chosed').data('numstr').split('/');
$that.find('.num .left-num').html('剩余' + numArray[index] + '件');
}
}).on('touchstart', '.btn-minus', function() {
var num = +$num.val();
var num = +$num.val(),
$chosed = $('.block-list>ul>li.chosed');
//若颜色和尺码没有被同时选中,则不能点击
if ($('.block-list>ul>li.chosed').length < 2) {
if ($chosed.length < 2) {
return;
}
... ...
... ... @@ -33,6 +33,7 @@ lazyLoad({
try_again_css: 'order-failure'
});
$names = $('.name');
if ($names.length > 0) {
$names[0].mlellipsis(2);
... ...
... ... @@ -98,8 +98,8 @@ function submitOrder() {
data: {
addressId: orderInfo('addressId'),
cartType: orderInfo('cartType'),
deliveryId: orderInfo('deliveryId'),
deliveryTimeId: orderInfo('deliveryTimeId'),
deliveryId: orderInfo('deliveryId') || 1,
deliveryTimeId: orderInfo('deliveryTimeId') || 1,
invoiceText: orderInfo('invoiceText'),
invoiceType: orderInfo('invoiceType'),
msg: orderInfo('msg'),
... ... @@ -109,13 +109,24 @@ function submitOrder() {
yohoCoin: orderInfo('yohoCoin')
}
}).then(function(res) {
console.log(res);
if (!res) {
tip.show('网络出错');
}
if (res.code !== 200) {
tip.show(res.message || '网络出错');
} else {
console.log(1);
}
}).fail(function() {
tip.show('网络出错');
});
}
// 界面点击,状态存 cookie
if (!orderInfo('addressId')) {
orderInfo('addressId', $('.address-wrap').data('address-id'));
}
$('.dispatch-mode').on('touchend', 'li', function() {
orderInfo('deliveryId', $(this).data('id'));
orderCompute();
... ...
... ... @@ -22,6 +22,7 @@ try {
invoiceType: null,
msg: null
};
window.setCookie('order-info', JSON.stringify(info));
}
exports.orderInfo = function(key, value) {
... ...
... ... @@ -105,10 +105,16 @@
color: #e10;
}
&.disable {
&.zero-stock {
color: #e0e0e0;
border-color: #e0e0e0;
}
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
color: #e0e0e0;
background-color: #f0f0f0;
}
}
.num {
... ...
... ... @@ -289,3 +289,36 @@
}
}
}
.shopping-cart-zero{
.cart-zero{
width: 100%;
height: auto;
padding-top:2rem;
padding-bottom:20%;
i{
font-size: 6em;
display: block;
margin: 0 auto;
text-align: center;
color: #505050;
}
p{
display: block;
text-align: center;
font-size: 1.2em;
color: #505050;
padding:.6rem 0;
}
a{
width: 27%;
height: 1.2rem;
overflow: hidden;
line-height: 1.2rem;
border:1px solid #505050;
border-radius:.2rem;
display: block;
margin: 0 auto;
text-align: center;
}
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div id="mainCart" class="shopping-cart-page yoho-page">
<div id="mainCart" class="shopping-cart-page yoho-page" style="display: none;">
{{# shoppingCart}}
{{#if cartNav}}
<ul class="cart-nav clearfix">
... ... @@ -45,7 +46,6 @@
{{/ shoppingCart}}
</div>
<div id="advanceBuy" class="shopping-cart-page yoho-page hide">
{{# shoppingCart}}
{{# commonCart}}
... ... @@ -61,4 +61,13 @@
{{/ shoppingCart}}
</div>
<div class="shopping-cart-zero yoho-page">
<div class="cart-zero">
<i class="iconfont">&#xe62c</i>
<p>您的购物车暂无商品</p>
<a href="">随便逛逛</a>
</div>
{{> product/recommend-for-you}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="order-ensure-page yoho-page">
{{# orderEnsure}}
<a class="address-wrap block" href="/shoppingCart/selectAddress">
<a class="address-wrap block" href="/shoppingCart/selectAddress" data-address-id="{{addressId}}">
<p class="infos">
收货地址
<span class="per-info">{{name}} {{phoneNum}}</span>
... ...
... ... @@ -206,6 +206,7 @@
{{#if shoppingCartPage}}
<script>
seajs.use('js/shopping-cart/cart');
seajs.use('js/product/recommend-for-you');
</script>
{{/if}}
{{#if giftAdvancePage}}
... ...
... ... @@ -25,7 +25,7 @@
<span>颜色</span>
<ul class="clearfix" data-type="color">
{{# colors}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}">
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-numstr="{{sizeNumStr}}">
{{name}}
</li>
{{/ colors}}
... ... @@ -35,7 +35,7 @@
<span>尺码</span>
<ul class="clearfix" data-type="size" >
{{# sizes}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}">
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}">
{{name}}
</li>
{{/ sizes}}
... ...
... ... @@ -195,7 +195,7 @@ class ShoppingCartController extends AbstractAction
'orderEnsurePage' => true,
'orderEnsure' => CartModel::cartPay($uid, $cartType, $cookieData)
);
// var_dump($data);
$this->_view->display('order-ensure', $data);
}
... ...