颜色尺码代码回滚

@@ -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>