Authored by OF1706

购物车js

<!-- 凑单 -->
<div class="detail-body">
<div class="detail-body" id="goodsTogetherDetail">
<div class="detail-bigpic">
<div class="bigpic">
<img src="../../../public/img/product/after-service-1.png">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
<div class="detail-bigpic none">
<div class="bigpic">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="bigpic none">
<img src="">
</div>
<div class="piclist">
<span class="pre"></span>
<div class="con">
<ul>
<li><img src="../../../public/img/product/after-service-1.png"></li>
<li><img src="../../../public/img/product/after-service-1.png"></li>
<li><img src="../../../public/img/product/after-service-1.png"></li>
<li><img src="../../../public/img/product/after-service-1.png"></li>
<li><img src="../../../public/img/product/after-service-1.png"></li>
<li class="active"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<span class="next"></span>
... ... @@ -35,11 +83,11 @@
<div class="colorBox">
<ul>
<li class="color active">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src="../../../public/img/product/after-service-1.png"></p>
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
<li class="color">
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src="../../../public/img/product/after-service-1.png"></p>
<p class="{{#if focus}}atcive{{/if}}"><span></span><img src=""></p>
<span>{{name}}</span>
</li>
</ul>
... ...
... ... @@ -8,6 +8,12 @@ var $ = require('yoho-jquery');
var lazyLoad = require('yoho-jquery-lazyload');
var Dialog = require('../common/dialog').Dialog;
var Alert = Dialog.Alert;
var $cartGoodsDetail = $('#goodsTogetherDetail'),
pacList = 0,
shopNum = 1,
promotionId,
shopNumAll;
// 优惠券 显示和隐藏
$('.sale-info').mouseenter(function() {
... ... @@ -92,5 +98,90 @@ function showTogetherGoods(id) {
}
// 清空失效商品
// 凑单弹框 详情切换
$('body').on('click', '.piclist li', function() {
console.log(99999);
pacList = $(this).index();
$('.detail-bigpic:not(.none) .piclist li').removeClass('active');
$(this).addClass('active');
$('.detail-bigpic:not(.none) .bigpic').hide().eq($(this).index()).show();
});
$('body').on('click', '.pre, .next', function() {
if ($(this).hasClass('next')) {
if (pacList >= $(this).siblings('.con').find('li').length - 1) {
return false;
}
pacList++;
} else {
if (pacList < 1) {
return false;
}
pacList--;
}
$(this).siblings('.con').find('li').removeClass('active').eq(pacList).addClass('active');
$('.detail-bigpic:not(.none) .bigpic').hide().eq(pacList).show();
});
$('body').on('click', '.color', function() {
pacList = 0;
$('.color').find('p').removeClass('active');
$(this).find('p').addClass('active');
$('.showSizeBox').addClass('none').eq($(this).index()).removeClass('none');
if ($('.showSizeBox:not(.none) span').length < 2) {
$('.showSizeBox:not(.none) span:first').addClass('active');
}
$('.detail-bigpic').addClass('none').eq($(this).index()).removeClass('none');
$('.detail-bigpic').eq($(this).index()).find('.bigpic').hide();
$('.detail-bigpic').eq($(this).index()).find('.bigpic:first').show();
$('.detail-bigpic').eq($(this).index()).find('.con li').removeClass('active');
$('.detail-bigpic').eq($(this).index()).find('.con li:first').addClass('active');
$('.showSizeBox').eq($(this).index()).find('span').each(function() {
if ($(this).hasClass('null-atcivec')) {
$('.addcart').addClass('none');
$('.btn_sellout').removeClass('none');
} else {
$('.addcart').removeClass('none');
$('.btn_sellout').addClass('none');
return false;
}
});
});
$('body').on('click', '.showSizeBox span', function() {
shopNumAll = $(this).data('num');
if ($(this).data('num') > 0) {
$('.showSizeBox:not(.none) span').removeClass('atcivec atcive').eq($(this).index()).addClass('active');
$('.addcart').removeClass('none');
$('.btn_sellout').addClass('none');
} else {
$('.showSizeBox:not(.none) span').removeClass('atcivec atcive').eq($(this).index()).addClass('active');
$('.addcart').addClass('none');
$('.btn_sellout').removeClass('none');
}
});
$('body').on('click', '.cut, .add', function() {
count = $(this).hasClass('minus') ? 'decreaseNum' : 'increaseNum';
if (promotionId) {
if ($(this).hasClass('cut')) {
new Alert('-_-,已经是最后一件,不能再减了!').show();
} else {
new Alert('最多只能购买一件,您好像购买的太多了!').show();
}
} else {
if ($(this).hasClass('add')) {
shopNum++;
} else {
shopNum--;
}
if (shopNum < 1) {
new Alert('-_-,已经是最后一件,不能在减了!').show();
shopNum = 1;
return false;
}
$('#num').val(shopNum);
}
});
... ...
... ... @@ -39,6 +39,9 @@
width: 100%;
height: auto;
}
&.none{
display: none;
}
}
.piclist {
... ...