|
...
|
...
|
@@ -18,7 +18,6 @@ var $chosePanel = $('#chose-panel'), |
|
|
|
$chosed,
|
|
|
|
$imgsThumb,
|
|
|
|
$leftNum,
|
|
|
|
$leftNumHtml,
|
|
|
|
leftNum,
|
|
|
|
confirming,
|
|
|
|
curColorIndex,
|
|
...
|
...
|
@@ -27,12 +26,14 @@ var $chosePanel = $('#chose-panel'), |
|
|
|
hasChooseSize,
|
|
|
|
$curSizeBlock,
|
|
|
|
$sizeRowList,
|
|
|
|
$curColorBlock,
|
|
|
|
$colorRowList,
|
|
|
|
cbFn,
|
|
|
|
$allChoseItems,
|
|
|
|
queryString,
|
|
|
|
$soonSoldOut = $('.soonSoldOut-tag'),
|
|
|
|
$yohoPage = $('.yoho-page');
|
|
|
|
|
|
|
|
|
|
|
|
//初始化购物车面板显示
|
|
|
|
function init() {
|
|
|
|
hasChooseColor = false;
|
|
...
|
...
|
@@ -42,9 +43,10 @@ function init() { |
|
|
|
$imgsThumb = $('.chose-panel').find('.thumb');
|
|
|
|
$allChoseItems = $('.chose-items');
|
|
|
|
$sizeRowList = $('.size-list ul');
|
|
|
|
$colorRowList = $('.color-list ul');
|
|
|
|
$leftNum = $('#left-num');
|
|
|
|
$leftNumHtml =
|
|
|
|
$sizeRowList.eq(0).toggleClass('hide');
|
|
|
|
curColorIndex = 0;
|
|
|
|
curSizeIndex = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function checkColorSizeNum() {
|
|
...
|
...
|
@@ -110,37 +112,71 @@ function updateConformButtonClassAndText() { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//重置颜色块的库存为0的样式
|
|
|
|
function resetColorZeroStock($siblingBlock) {
|
|
|
|
var numArray,
|
|
|
|
i;
|
|
|
|
//显示剩余件数
|
|
|
|
function displayGoodNum(curGoodNum) {
|
|
|
|
|
|
|
|
if (!hasChooseSize) {
|
|
|
|
$siblingBlock.find('ul>li').each(function() {
|
|
|
|
if (0 === $(this).data('num')) {
|
|
|
|
$(this).addClass('zero-stock');
|
|
|
|
} else {
|
|
|
|
$(this).removeClass('zero-stock');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//数量大于0
|
|
|
|
if (curGoodNum > 0) {
|
|
|
|
if ($soonSoldOut.length > 0) {
|
|
|
|
$allChoseItems.find('.num .left-num').html('即将售罄');
|
|
|
|
} else {
|
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
|
}
|
|
|
|
|
|
|
|
$leftNum.val(curGoodNum);
|
|
|
|
|
|
|
|
//数量小于0
|
|
|
|
} else {
|
|
|
|
numArray = ($curSizeBlock.data('numstr') + '').split('/');
|
|
|
|
for (i = 0; i < numArray.length; i++) {
|
|
|
|
if ('0' === numArray[i]) {
|
|
|
|
$siblingBlock.find('.block').eq(i).addClass('zero-stock');
|
|
|
|
} else {
|
|
|
|
$siblingBlock.find('.block').eq(i).removeClass('zero-stock');
|
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
|
$leftNum.val(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
|
function changeSizeChosed(newSizeIndex) {
|
|
|
|
var sizes,
|
|
|
|
queryString,
|
|
|
|
i;
|
|
|
|
|
|
|
|
if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {
|
|
|
|
$curSizeBlock.removeClass('chosed');
|
|
|
|
sizes = $sizeRowList.eq(newSizeIndex).children();
|
|
|
|
for (i = 0; i < sizes.length; i++) {
|
|
|
|
if ($(sizes[i]).data('id') === $curSizeBlock.data('id')) {
|
|
|
|
$curSizeBlock = $(sizes[i]);
|
|
|
|
queryString = '#' + $curSizeBlock.data('id');
|
|
|
|
curColorIndex = $(queryString).data('index');
|
|
|
|
$curSizeBlock.addClass('chosed');
|
|
|
|
return $curSizeBlock.data('num');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述1,2,3
|
|
|
|
// 1.重置尺码选择的标志变量.
|
|
|
|
$curSizeBlock = null;
|
|
|
|
hasChooseSize = false;
|
|
|
|
|
|
|
|
// 2.当前颜色行隐藏
|
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
|
|
// 3.目标颜色行第一行显示
|
|
|
|
$colorRowList.eq(0).removeClass('hide');
|
|
|
|
curColorIndex = 0;
|
|
|
|
|
|
|
|
return -1;
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 选择了颜色切换商品图片
|
|
|
|
function changeGoodImgWhenClickColor() {
|
|
|
|
if (hasChooseColor && curColorIndex >= 0) {
|
|
|
|
$imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
|
|
|
|
//老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
|
function changeColorChosed(newColorIndex) {
|
|
|
|
if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {
|
|
|
|
$curColorBlock.removeClass('chosed');
|
|
|
|
$curColorBlock = $($colorRowList.eq(newColorIndex).children().get(curSizeIndex - 1));
|
|
|
|
$curColorBlock.addClass('chosed');
|
|
|
|
return $curColorBlock.data('num');
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
init();
|
|
...
|
...
|
@@ -158,135 +194,117 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) { |
|
|
|
|
|
|
|
$yohoPage.on('touchstart', '.color-list .block', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index,
|
|
|
|
curSizeBlock,
|
|
|
|
$preSiblingBlock,
|
|
|
|
$curSizeRow,
|
|
|
|
numArray,
|
|
|
|
i,
|
|
|
|
index = $this.index(),
|
|
|
|
curGoodNum;
|
|
|
|
|
|
|
|
var $siblingBlock = $this.closest('.block-list').siblings(':first');
|
|
|
|
|
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
|
index = $this.index();
|
|
|
|
|
|
|
|
$preSiblingBlock = $siblingBlock.find('.chosed');
|
|
|
|
$curSizeRow = $sizeRowList.eq(index);
|
|
|
|
|
|
|
|
// 当前颜色已经是选中状态,再点击时
|
|
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
|
|
//颜色原来已经是勾选时，要清空剩余件数的提示
|
|
|
|
//清空剩余件数的提示
|
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
|
$leftNum.val(0);
|
|
|
|
hasChooseColor = false;
|
|
|
|
|
|
|
|
$this.removeClass('zero-stock');
|
|
|
|
if ($curSizeBlock) {
|
|
|
|
numArray = ($curSizeBlock.data('numstr') + '').split('/');
|
|
|
|
for (i = 0; i < numArray.length; i++) {
|
|
|
|
if ('0' === numArray[i]) {
|
|
|
|
$('.color-list .block').eq(i).addClass('zero-stock');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//当前尺码行隐藏
|
|
|
|
$sizeRowList.eq(curSizeIndex).addClass('hide');
|
|
|
|
|
|
|
|
//目标尺码行显示
|
|
|
|
$sizeRowList.eq(0).removeClass('hide');
|
|
|
|
|
|
|
|
curSizeIndex = 0;
|
|
|
|
|
|
|
|
//老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
|
changeSizeChosed(0);
|
|
|
|
|
|
|
|
// 当前颜色不是选中状态,选中时
|
|
|
|
} else {
|
|
|
|
hasChooseColor = true;
|
|
|
|
|
|
|
|
//把当前选中颜色对应的尺码那一行显示出来
|
|
|
|
$sizeRowList.addClass('hide');
|
|
|
|
$curSizeRow.removeClass('hide').addClass('show');
|
|
|
|
// 尺码行当前行隐藏
|
|
|
|
$sizeRowList.eq(curSizeIndex).addClass('hide');
|
|
|
|
|
|
|
|
// 之前选中的尺码去掉勾选样式
|
|
|
|
if ($preSiblingBlock.length > 0) {
|
|
|
|
$preSiblingBlock.removeClass('chosed');
|
|
|
|
curSizeBlock = $curSizeRow.children().get(curSizeIndex);
|
|
|
|
$curSizeBlock = $(curSizeBlock);
|
|
|
|
}
|
|
|
|
//老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
|
curGoodNum = changeSizeChosed(index + 1);
|
|
|
|
|
|
|
|
// 当前选中颜色对应的尺码行，其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
|
|
|
|
if (curSizeBlock) {
|
|
|
|
curGoodNum = $(curSizeBlock).data('num');
|
|
|
|
$(curSizeBlock).addClass('chosed');
|
|
|
|
|
|
|
|
//如果当前有尺码被选中，且数量等于0,则颜色块添加数量为0的样式
|
|
|
|
if (curGoodNum > 0) {
|
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
|
$leftNum.val(curGoodNum);
|
|
|
|
} else {
|
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
|
$leftNum.val(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 显示剩余数量
|
|
|
|
displayGoodNum(curGoodNum);
|
|
|
|
|
|
|
|
//尺码对应行显示
|
|
|
|
$sizeRowList.eq(index + 1).removeClass('hide');
|
|
|
|
|
|
|
|
curSizeIndex = index + 1;
|
|
|
|
$curColorBlock = $this;
|
|
|
|
|
|
|
|
// 修改颜色时修改商品图片
|
|
|
|
$imgsThumb.addClass('hide').eq(index).removeClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
// 当前颜色块 切换勾选样式
|
|
|
|
$this.toggleClass('chosed');
|
|
|
|
curColorIndex = index;
|
|
|
|
$('#good-num').val(1);
|
|
|
|
// 颜色块切换勾选样式
|
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
|
|
|
|
|
// 特殊处理
|
|
|
|
if (-1 === curGoodNum) {
|
|
|
|
$curColorBlock = $($colorRowList.eq(0).children().get(index));
|
|
|
|
$curColorBlock.addClass('chosed');
|
|
|
|
} else {
|
|
|
|
$this.toggleClass('chosed');
|
|
|
|
}
|
|
|
|
|
|
|
|
// 修改颜色时修改商品图片
|
|
|
|
changeGoodImgWhenClickColor();
|
|
|
|
$('#good-num').val(1);
|
|
|
|
|
|
|
|
// 设置按钮的样式和文字
|
|
|
|
updateConformButtonClassAndText();
|
|
|
|
}).on('touchstart', '.size-list .block', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index,
|
|
|
|
$curSizeRow,
|
|
|
|
curGoodNum;
|
|
|
|
|
|
|
|
var $siblingBlock = $this.closest('.block-list').siblings(':first');
|
|
|
|
|
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
|
index = $this.index();
|
|
|
|
$curSizeRow = $sizeRowList.eq(index);
|
|
|
|
|
|
|
|
// 当前尺码已经是选中状态,再点击时
|
|
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
|
|
//尺码原来已经是勾选时，要清空剩余件数的提示
|
|
|
|
//清空剩余件数的提示
|
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
|
$('#left-num').val(0);
|
|
|
|
$leftNum.val(0);
|
|
|
|
hasChooseSize = false;
|
|
|
|
curSizeIndex = null;
|
|
|
|
$curSizeBlock = null;
|
|
|
|
|
|
|
|
//当前颜色行隐藏
|
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
|
|
//目标颜色行显示
|
|
|
|
$colorRowList.eq(0).removeClass('hide');
|
|
|
|
|
|
|
|
curColorIndex = 0;
|
|
|
|
|
|
|
|
//老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
|
changeColorChosed(0);
|
|
|
|
|
|
|
|
// 当前尺码不是选中状态,选中时
|
|
|
|
} else {
|
|
|
|
hasChooseSize = true;
|
|
|
|
curGoodNum = $this.data('num');
|
|
|
|
|
|
|
|
// 之前选中的尺码去掉勾选样式
|
|
|
|
if ($curSizeBlock) {
|
|
|
|
$curSizeBlock.removeClass('chosed');
|
|
|
|
}
|
|
|
|
index = $('#' + $this.data('id')).data('index') - 1;
|
|
|
|
|
|
|
|
// 如果当前有尺码被选中，且数量等于0, 否则显示剩余件数
|
|
|
|
if (curGoodNum > 0 && hasChooseColor) {
|
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
|
$('#left-num').val(curGoodNum);
|
|
|
|
} else {
|
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
|
$('#left-num').val(0);
|
|
|
|
}
|
|
|
|
// 颜色当前行隐藏
|
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
|
|
if (curGoodNum === 0 && hasChooseColor) {
|
|
|
|
$this.addClass('zero-stock');
|
|
|
|
}
|
|
|
|
curSizeIndex = index;
|
|
|
|
//老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
|
curGoodNum = changeColorChosed(index + 1);
|
|
|
|
|
|
|
|
// 显示剩余数量
|
|
|
|
displayGoodNum(curGoodNum);
|
|
|
|
|
|
|
|
//颜色对应行显示
|
|
|
|
$colorRowList.eq(index + 1).removeClass('hide');
|
|
|
|
|
|
|
|
curColorIndex = index + 1;
|
|
|
|
$curSizeBlock = $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 颜色块切换勾选样式
|
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
|
$this.toggleClass('chosed');
|
|
|
|
$('#good-num').val(1);
|
|
|
|
|
|
|
|
// 重置颜色块的样式
|
|
|
|
resetColorZeroStock($siblingBlock);
|
|
|
|
|
|
|
|
// 设置按钮的样式和文字
|
|
|
|
updateConformButtonClassAndText();
|
|
|
|
});
|
...
|
...
|
|
