wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit 88d6cc349f8b714dbad4cd3a09c04f95dc724cd6 1 parent 8fdd7852

颜色尺码代码回滚

Inline Side-by-side
Showing 2 changed files with 123 additions and 137 deletions
... ... @@ -18,6 +18,7 @@ var $chosePanel = $('#chose-panel'),
$chosed,
$imgsThumb,
$leftNum,
$leftNumHtml,
leftNum,
confirming,
curColorIndex,
... ... @@ -26,14 +27,12 @@ var $chosePanel = $('#chose-panel'),
hasChooseSize,
$curSizeBlock,
$sizeRowList,
$curColorBlock,
$colorRowList,
cbFn,
$allChoseItems,
queryString,
$soonSoldOut = $('.soonSoldOut-tag'),
$yohoPage = $('.yoho-page');
//初始化购物车面板显示
function init() {
hasChooseColor = false;
... ... @@ -43,10 +42,9 @@ function init() {
$imgsThumb = $('.chose-panel').find('.thumb');
$allChoseItems = $('.chose-items');
$sizeRowList = $('.size-list ul');
$colorRowList = $('.color-list ul');
$leftNum = $('#left-num');
curColorIndex = 0;
curSizeIndex = 0;
$leftNumHtml =
$sizeRowList.eq(0).toggleClass('hide');
}
function checkColorSizeNum() {
... ... @@ -112,71 +110,37 @@ function updateConformButtonClassAndText() {
}
}
//显示剩余件数
function displayGoodNum(curGoodNum) {
//数量大于0
if (curGoodNum > 0) {
if ($soonSoldOut.length > 0) {
$allChoseItems.find('.num .left-num').html('即将售罄');
} else {
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
}
//重置颜色块的库存为0的样式
function resetColorZeroStock($siblingBlock) {
var numArray,
i;
$leftNum.val(curGoodNum);
if (!hasChooseSize) {
$siblingBlock.find('ul>li').each(function() {
if (0 === $(this).data('num')) {
$(this).addClass('zero-stock');
} else {
$(this).removeClass('zero-stock');
}
});
//数量小于0
} else {
$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('name') === $curSizeBlock.data('name')) {
$curSizeBlock = $(sizes[i]);
queryString = '#' + $curSizeBlock.data('name');
curColorIndex = $(queryString).data('index');
$curSizeBlock.addClass('chosed');
return $curSizeBlock.data('num');
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');
}
}
//特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述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 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');
// 选择了颜色切换商品图片
function changeGoodImgWhenClickColor() {
if (hasChooseColor && curColorIndex >= 0) {
$imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
}
return 0;
}
init();
... ... @@ -194,117 +158,135 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) {
$yohoPage.on('touchstart', '.color-list .block', function() {
var $this = $(this),
index = $this.index(),
index,
curSizeBlock,
$preSiblingBlock,
$curSizeRow,
numArray,
i,
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;
//当前尺码行隐藏
$sizeRowList.eq(curSizeIndex).addClass('hide');
//目标尺码行显示
$sizeRowList.eq(0).removeClass('hide');
curSizeIndex = 0;
//老的选中尺码去掉勾选,新的选中尺码加上勾选
changeSizeChosed(0);
$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');
}
}
}
// 当前颜色不是选中状态,选中时
} else {
hasChooseColor = true;
// 尺码行当前行隐藏
$sizeRowList.eq(curSizeIndex).addClass('hide');
//把当前选中颜色对应的尺码那一行显示出来
$sizeRowList.addClass('hide');
$curSizeRow.removeClass('hide').addClass('show');
//老的选中尺码去掉勾选,新的选中尺码加上勾选
curGoodNum = changeSizeChosed(index + 1);
// 显示剩余数量
displayGoodNum(curGoodNum);
//尺码对应行显示
$sizeRowList.eq(index + 1).removeClass('hide');
curSizeIndex = index + 1;
$curColorBlock = $this;
// 修改颜色时修改商品图片
$imgsThumb.addClass('hide').eq(index).removeClass('hide');
}
// 颜色块切换勾选样式
$this.siblings('.chosed').removeClass('chosed');
// 之前选中的尺码去掉勾选样式
if ($preSiblingBlock.length > 0) {
$preSiblingBlock.removeClass('chosed');
curSizeBlock = $curSizeRow.children().get(curSizeIndex);
$curSizeBlock = $(curSizeBlock);
}
// 特殊处理
if (-1 === curGoodNum) {
$curColorBlock = $($colorRowList.eq(0).children().get(index));
$curColorBlock.addClass('chosed');
} else {
$this.toggleClass('chosed');
// 当前选中颜色对应的尺码行，其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
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);
}
}
}
// 当前颜色块 切换勾选样式
$this.toggleClass('chosed');
curColorIndex = index;
$('#good-num').val(1);
// 修改颜色时修改商品图片
changeGoodImgWhenClickColor();
// 设置按钮的样式和文字
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('');
$leftNum.val(0);
$('#left-num').val(0);
hasChooseSize = false;
//当前颜色行隐藏
$colorRowList.eq(curColorIndex).addClass('hide');
//目标颜色行显示
$colorRowList.eq(0).removeClass('hide');
curColorIndex = 0;
//老的选中颜色去掉勾选,新的选中颜色加上勾选
changeColorChosed(0);
curSizeIndex = null;
$curSizeBlock = null;
// 当前尺码不是选中状态,选中时
} else {
hasChooseSize = true;
curGoodNum = $this.data('num');
index = $('#' + $this.data('name')).data('index') - 1;
// 颜色当前行隐藏
$colorRowList.eq(curColorIndex).addClass('hide');
//老的选中颜色去掉勾选,新的选中颜色加上勾选
curGoodNum = changeColorChosed(index + 1);
// 显示剩余数量
displayGoodNum(curGoodNum);
// 之前选中的尺码去掉勾选样式
if ($curSizeBlock) {
$curSizeBlock.removeClass('chosed');
}
//颜色对应行显示
$colorRowList.eq(index + 1).removeClass('hide');
// 如果当前有尺码被选中，且数量等于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);
}
curColorIndex = index + 1;
if (curGoodNum === 0 && hasChooseColor) {
$this.addClass('zero-stock');
}
curSizeIndex = index;
$curSizeBlock = $this;
}
// 颜色块切换勾选样式
$this.siblings('.chosed').removeClass('chosed');
$this.toggleClass('chosed');
$('#good-num').val(1);
// 重置颜色块的样式
resetColorZeroStock($siblingBlock);
// 设置按钮的样式和文字
updateConformButtonClassAndText();
});
... ...
... ... @@ -4,7 +4,11 @@
<div class="infos">
<div class="basic-info" >
{{#thumbs}}
<img class="thumb {{#unless @first}}hide{{/if}}" src={{img}}>
{{#if @first}}
<img class="thumb" src={{img}}>
{{else}}
<img class="thumb hide" src={{img}}>
{{/if}}
{{/thumbs}}
<div class="text-info">
<p class="name">{{name}}</p>
... ... @@ -19,26 +23,26 @@
<div class="chose-items">
<div class="color-list block-list">
<span>颜色</span>
{{# colors}}
<ul id="{{sizeName}}" data-index="{{@index}}" class="size-row clearfix {{#unless @first}}hide{{/if}}">
{{# color}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}">
<ul class="clearfix" data-type="color">
{{# colors}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-id="{{id}}" data-numstr="{{sizeNumStr}}" data-skcid="{{skcId}}">
{{name}}
</li>
{{/ color}}
{{/ colors}}
</ul>
{{/ colors}}
</div>
<div class="size-list block-list">
<span>尺码</span>
{{# sizes}}
<ul id="{{sizeName}}" data-index="{{@index}}" class="size-row clearfix {{#unless @first}}hide{{/if}}">
<ul class="size-row clearfix hide">
{{# size}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-num="{{sizeNum}}" data-name="{{name}}" data-skuid="{{skuId}}">
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id="{{id}}" data-colorid="{{colorId}}" data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}" data-skuid="{{skuId}}" data-goodid="{{goodsId}}">
{{name}}
</li>
{{/ size}}
</ul>
{{/ sizes}}
</div>
<p>
... ...