...
|
...
|
@@ -16,8 +16,11 @@ var $ = require('jquery'), |
|
|
var $chosePanel = $('#chose-panel'),
|
|
|
$num,
|
|
|
$chosed,
|
|
|
$imgsThumb,
|
|
|
|
|
|
// re = /\d+/,
|
|
|
|
|
|
$leftNum,
|
|
|
leftNum,
|
|
|
confirming,
|
|
|
curColorIndex,
|
...
|
...
|
@@ -26,7 +29,10 @@ var $chosePanel = $('#chose-panel'), |
|
|
hasChooseColor,
|
|
|
hasChooseSize,
|
|
|
$curSizeBlock,
|
|
|
$sizeRowList;
|
|
|
$sizeRowList,
|
|
|
cbFn,
|
|
|
$allChoseItems,
|
|
|
$yohoPage = $('.yoho-page');
|
|
|
|
|
|
//初始化购物车面板显示
|
|
|
function init() {
|
...
|
...
|
@@ -35,12 +41,14 @@ function init() { |
|
|
hasChooseColor = false;
|
|
|
hasChooseSize = false;
|
|
|
$curSizeBlock = null;
|
|
|
$sizeRowList = $('.size-list ul');
|
|
|
$imgsThumb = $('.chose-panel').find('.thumb'),
|
|
|
$allChoseItems = $('.chose-items'),
|
|
|
$sizeRowList = $('.size-list ul'),
|
|
|
$leftNum = $('#left-num'),
|
|
|
$firstRow = $sizeRowList.eq(0);
|
|
|
$firstRow.toggleClass('hide');
|
|
|
$curSizeRow = $firstRow;
|
|
|
}
|
|
|
init();
|
|
|
|
|
|
function checkColorSizeNum() {
|
|
|
if (!hasChooseColor && !hasChooseSize) {
|
...
|
...
|
@@ -56,32 +64,29 @@ function checkColorSizeNum() { |
|
|
return true;
|
|
|
}
|
|
|
|
|
|
function show(html) {
|
|
|
function show(html, cb) {
|
|
|
if (html) {
|
|
|
$chosePanel.html(html);
|
|
|
init();
|
|
|
}
|
|
|
$('.chose-panel').show();
|
|
|
|
|
|
$('body').css('overflow', 'hidden');
|
|
|
$num = $('#good-num');
|
|
|
cbFn = cb;
|
|
|
}
|
|
|
|
|
|
//隐藏当前Panel
|
|
|
function hide() {
|
|
|
$('.chose-panel').hide();
|
|
|
$('body').css('overflow', 'auto');
|
|
|
cbFn = null;
|
|
|
}
|
|
|
|
|
|
//修改加入购物车的文字和背景
|
|
|
function updateConformButtonClassAndText() {
|
|
|
$chosed = $('.chose-items').find('.chosed');
|
|
|
$chosed = $allChoseItems.find('.chosed');
|
|
|
if (2 === $chosed.closest('.zero-stock').length) {
|
|
|
$('#chose-btn-sure').css('background-color', '#c0c0c0');
|
|
|
$('#chose-btn-sure').html('已售罄');
|
|
|
$('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄');
|
|
|
} else {
|
|
|
$('#chose-btn-sure').css('background-color', '#eb0313');
|
|
|
$('#chose-btn-sure').html('确定');
|
|
|
$('#chose-btn-sure').css('background-color', '#eb0313').html('确定');
|
|
|
}
|
|
|
}
|
|
|
|
...
|
...
|
@@ -92,11 +97,11 @@ function resetColorZeroStock($siblingBlock) { |
|
|
|
|
|
if (!hasChooseSize) {
|
|
|
$siblingBlock.find('ul>li').each(function() {
|
|
|
$(this).removeClass('zero-stock');
|
|
|
if ('0' === $(this).data('num')) {
|
|
|
$(this).addClass('zero-stock');
|
|
|
}
|
|
|
});
|
|
|
$(this).removeClass('zero-stock');
|
|
|
if ('0' === $(this).data('num')) {
|
|
|
$(this).addClass('zero-stock');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
for (i = 0; i < numArray.length; i++) {
|
...
|
...
|
@@ -110,13 +115,13 @@ function resetColorZeroStock($siblingBlock) { |
|
|
// 选择了颜色切换商品图片
|
|
|
function changeGoodImgWhenClickColor() {
|
|
|
if (hasChooseColor && curColorIndex) {
|
|
|
$('.chose-panel').find('.thumb').addClass('hide').eq(curColorIndex).removeClass('hide');
|
|
|
$imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
init();
|
|
|
|
|
|
$('.yoho-page').on('touchstart', '.chose-panel', function(e) {
|
|
|
$yohoPage.on('touchstart', '.chose-panel', function(e) {
|
|
|
var $cur = $(e.target);
|
|
|
|
|
|
if ($cur.closest('.main').length > 0) {
|
...
|
...
|
@@ -127,12 +132,11 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { |
|
|
hide();
|
|
|
});
|
|
|
|
|
|
$('.color-list').on('touchstart', '.block', function(e) {
|
|
|
$yohoPage.on('touchstart', '.color-list .block', function(e) {
|
|
|
var $this = $(this),
|
|
|
$that = $(e.target).closest('.chose-items'),
|
|
|
index,
|
|
|
curSelectedSizeBlock,
|
|
|
$sizeChosed,
|
|
|
curSizeBlock,
|
|
|
$preSiblingBlock,
|
|
|
scindex,
|
|
|
curGoodNum;
|
|
|
|
...
|
...
|
@@ -141,16 +145,16 @@ $('.color-list').on('touchstart', '.block', function(e) { |
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
index = $this.index();
|
|
|
|
|
|
$sizeChosed = $siblingBlock.find('.chosed');
|
|
|
scindex = $sizeChosed.index();
|
|
|
$preSiblingBlock = $siblingBlock.find('.chosed');
|
|
|
scindex = $preSiblingBlock.index();
|
|
|
$curSizeRow = $sizeRowList.eq(index);
|
|
|
|
|
|
// 当前颜色已经是选中状态,再点击时
|
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
//颜色原来已经是勾选时,要清空剩余件数的提示
|
|
|
$that.find('.num .left-num').html('');
|
|
|
$('#left-num').val(0);
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$leftNum.val(0);
|
|
|
hasChooseColor = false;
|
|
|
|
|
|
// 当前颜色不是选中状态,选中时
|
...
|
...
|
@@ -162,24 +166,25 @@ $('.color-list').on('touchstart', '.block', function(e) { |
|
|
$curSizeRow.removeClass('hide').addClass('show');
|
|
|
|
|
|
// 之前选中的尺码去掉勾选样式
|
|
|
if ($sizeChosed.length > 0) {
|
|
|
$sizeChosed.removeClass('chosed');
|
|
|
curSelectedSizeBlock = $curSizeRow.children().get(scindex);
|
|
|
if ($preSiblingBlock.length > 0) {
|
|
|
$preSiblingBlock.removeClass('chosed');
|
|
|
|
|
|
}
|
|
|
|
|
|
curSizeBlock = $curSizeRow.children().get(scindex);
|
|
|
|
|
|
// 当前选中颜色对应的尺码行,其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
|
|
|
if (curSelectedSizeBlock) {
|
|
|
curGoodNum = $(curSelectedSizeBlock).data('num');
|
|
|
$(curSelectedSizeBlock).addClass('chosed');
|
|
|
if (curSizeBlock) {
|
|
|
curGoodNum = $(curSizeBlock).data('num');
|
|
|
$(curSizeBlock).addClass('chosed');
|
|
|
|
|
|
//如果当前有尺码被选中,且数量等于0,则颜色块添加数量为0的样式
|
|
|
if (curGoodNum > 0) {
|
|
|
$that.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
$('#left-num').val(curGoodNum);
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
$leftNum.val(curGoodNum);
|
|
|
} else {
|
|
|
$(curSelectedSizeBlock).removeClass('zero-stock').addClass('zero-stock');
|
|
|
$that.find('.num .left-num').html('');
|
|
|
$('#left-num').val(0);
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$leftNum.val(0);
|
|
|
}
|
|
|
}
|
|
|
}
|
...
|
...
|
@@ -195,9 +200,8 @@ $('.color-list').on('touchstart', '.block', function(e) { |
|
|
changeGoodImgWhenClickColor();
|
|
|
});
|
|
|
|
|
|
$('.size-list').on('touchstart', '.block', function(e) {
|
|
|
$yohoPage.on('touchstart', '.size-list .block', function(e) {
|
|
|
var $this = $(this),
|
|
|
$that = $(e.target).closest('.chose-items'),
|
|
|
index,
|
|
|
curGoodNum;
|
|
|
|
...
|
...
|
@@ -211,7 +215,7 @@ $('.size-list').on('touchstart', '.block', function(e) { |
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
//尺码原来已经是勾选时,要清空剩余件数的提示
|
|
|
$that.find('.num .left-num').html('');
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$('#left-num').val(0);
|
|
|
hasChooseSize = false;
|
|
|
|
...
|
...
|
@@ -226,12 +230,12 @@ $('.size-list').on('touchstart', '.block', function(e) { |
|
|
$curSizeBlock.removeClass('chosed');
|
|
|
}
|
|
|
|
|
|
// 如果当前有尺码被选中,且数量等于0,则颜色块添加数量为0的样式, 否则显示剩余件数
|
|
|
// 如果当前有尺码被选中,且数量等于0, 否则显示剩余件数
|
|
|
if (curGoodNum > 0 && hasChooseColor) {
|
|
|
$that.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
$('#left-num').val(curGoodNum);
|
|
|
} else {
|
|
|
$that.find('.num .left-num').html('');
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$('#left-num').val(0);
|
|
|
}
|
|
|
|
...
|
...
|
@@ -249,8 +253,8 @@ $('.size-list').on('touchstart', '.block', function(e) { |
|
|
|
|
|
});
|
|
|
|
|
|
$('.btn-minus').on('touchstart', function() {
|
|
|
var num = $num.val();
|
|
|
$yohoPage.on('touchstart', '.btn-minus', function() {
|
|
|
var num = parseInt($num.val(), 10);
|
|
|
|
|
|
leftNum = $('#left-num').val();
|
|
|
|
...
|
...
|
@@ -263,10 +267,8 @@ $('.btn-minus').on('touchstart', function() { |
|
|
}
|
|
|
|
|
|
$num.val(num - 1);
|
|
|
});
|
|
|
|
|
|
$('.btn-plus').on('touchstart', function() {
|
|
|
var num = $num.val();
|
|
|
}).on('touchstart', '.btn-plus', function() {
|
|
|
var num = parseInt($num.val(), 10);
|
|
|
|
|
|
leftNum = $('#left-num').val();
|
|
|
|
...
|
...
|
@@ -281,9 +283,7 @@ $('.btn-plus').on('touchstart', function() { |
|
|
|
|
|
//TODO:库存数验证
|
|
|
$num.val(num + 1);
|
|
|
});
|
|
|
|
|
|
$('#chose-btn-sure').on('touchstart', function() {
|
|
|
}).on('touchstart', '#chose-btn-sure', function() {
|
|
|
|
|
|
var productSku,
|
|
|
buyNumber = $('#good-num').val() - 0,
|
...
|
...
|
@@ -298,6 +298,7 @@ $('#chose-btn-sure').on('touchstart', function() { |
|
|
return;
|
|
|
}
|
|
|
|
|
|
//TODO status change
|
|
|
if ($('#chose-btn-sure').html() === '已售罄') {
|
|
|
return;
|
|
|
}
|
...
|
...
|
@@ -332,10 +333,13 @@ $('#chose-btn-sure').on('touchstart', function() { |
|
|
}).done(function(res) {
|
|
|
loading.hideLoadingMask();
|
|
|
if (res.code === 200) {
|
|
|
$('.num-tag').html(numInCart + buyNumber);
|
|
|
$('.num-tag').removeClass('hide');
|
|
|
$('.num-tag').html(numInCart + buyNumber).removeClass('hide');
|
|
|
confirming = false;
|
|
|
hide();
|
|
|
|
|
|
if (cbFn) {
|
|
|
cbFn(res.location);
|
|
|
}
|
|
|
}
|
|
|
if (res.message) {
|
|
|
tip.show(res.message);
|
...
|
...
|
|