修改颜色和尺码选

梁志锋
Commit 799eb9bc4048eaa5c8d21be266c867ecb9ab1e59 1 parent 3a3b09c8
Showing 1 changed file with 119 additions and 95 deletions
static/js/cart/chose-panel.js
--- a/static/js/cart/chose-panel.js
View file @799eb9b
+++ b/static/js/cart/chose-panel.js
View file @799eb9b
@@ -26,6 +26,11 @@ var $chosePanel = $('#chose-panel'),
     hasChooseSize,
     $curSizeBlock,
     $sizeRowList,
+    $curColorBlock,
+    $colorRowList,
+    $curSizeRow,
+    $curColorRow,
+    rowIndex,
     cbFn,
     $allChoseItems,
     queryString,
@@ -41,7 +46,13 @@ function init() {
     $imgsThumb = $('.chose-panel').find('.thumb');
     $allChoseItems = $('.chose-items');
     $sizeRowList = $('.size-list ul');
+    $colorRowList = $('.color-list ul');
     $leftNum = $('#left-num');
+    $curSizeRow = $sizeRowList.eq(0);
+    $curColorRow = $colorRowList.eq(0);
+    rowIndex = 0;
+    curColorIndex = 0;
+    curSizeIndex = 0;
 }
 function checkColorSizeNum() {
@@ -107,39 +118,6 @@ function updateConformButtonClassAndText() {
     }
 }
-//重置颜色块的库存为0的样式
-function resetColorZeroStock($siblingBlock) {
-    var numArray,
-        i;
-
-    if (!hasChooseSize) {
-        $siblingBlock.find('ul>li').each(function() {
-            if (0 === $(this).data('num')) {
-                $(this).addClass('zero-stock');
-            } else {
-                $(this).removeClass('zero-stock');
-            }
-        });
-
-    } 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');
-            }
-        }
-    }
-}
-
-// 选择了颜色切换商品图片
-function changeGoodImgWhenClickColor() {
-    if (hasChooseColor && curColorIndex >= 0) {
-        $imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
-    }
-}
-
 init();
 $yohoPage.on('touchstart', '.chose-panel', function(e) {
@@ -157,10 +135,6 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
     var $this = $(this),
         index,
         curSizeBlock,
-        $preSiblingBlock,
-        $curSizeRow,
-        numArray,
-        i,
         curGoodNum;
     var $siblingBlock = $this.closest('.block-list').siblings(':first');
@@ -168,24 +142,35 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
     $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');
-                }
+        //if (!hasChooseSize) {
+
+            //当前尺码行隐藏
+            $sizeRowList.eq(curSizeIndex).removeClass('show').addClass('hide');
+
+             //目标尺码行显示
+             $sizeRowList.eq(0).removeClass('hide').addClass('show');
+
+            curSizeIndex = 0;
+        //}
+
+        //如果尺码已经是选择状态
+        if (curColorIndex) {
+
+            // 之前选中的尺码去掉勾选样式,新尺码块勾选
+            if ($curSizeBlock && $curSizeBlock.length > 0) {
+                $curSizeBlock.removeClass('chosed');
+                curSizeBlock = $sizeRowList.eq(0).children().get(curColorIndex - 1);
+                $curSizeBlock = $(curSizeBlock);
+                curGoodNum = $curSizeBlock.data('num');
+                $curSizeBlock.addClass('chosed');
             }
         }
@@ -193,23 +178,20 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
     } else {
         hasChooseColor = true;
-        //把当前选中颜色对应的尺码那一行显示出来
-        $sizeRowList.addClass('hide');
-        $curSizeRow.removeClass('hide').addClass('show');
-
-        // 之前选中的尺码去掉勾选样式
-        if ($preSiblingBlock.length > 0) {
-            $preSiblingBlock.removeClass('chosed');
-            curSizeBlock = $curSizeRow.children().get(curSizeIndex);
-            $curSizeBlock = $(curSizeBlock);
-        }
-
-        // 当前选中颜色对应的尺码行，其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
-        if (curSizeBlock) {
-            curGoodNum = $(curSizeBlock).data('num');
-            $(curSizeBlock).addClass('chosed');
+        //如果尺码已经是选择状态
+        if (curColorIndex) {
+
+            // 之前选中的尺码去掉勾选样式,新尺码块勾选
+            if ($curSizeBlock && $curSizeBlock.length > 0) {
+                $curSizeBlock.removeClass('chosed');
+                //curSizeBlock = $sizeRowList.eq(curSizeIndex + 1).children().get(curColorIndex - 1);
+                curSizeBlock = $sizeRowList.eq(index + 1).children().get(curColorIndex - 1);
+                $curSizeBlock = $(curSizeBlock);
+                curGoodNum = $curSizeBlock.data('num');
+                $curSizeBlock.addClass('chosed');
+            }
-            //如果当前有尺码被选中，且数量等于0,则颜色块添加数量为0的样式
+            //数量大于0
             if (curGoodNum > 0) {
                 if ($soonSoldOut.length > 0) {
                     $allChoseItems.find('.num .left-num').html('即将售罄');
@@ -218,81 +200,123 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
                 }
                 $leftNum.val(curGoodNum);
+
+            //数量小于0
             } else {
                 $allChoseItems.find('.num .left-num').html('');
                 $leftNum.val(0);
             }
         }
+
+        // 尺码行当前行隐藏
+        $sizeRowList.eq(curSizeIndex).removeClass('show').addClass('hide');
+
+        //尺码对应行显示
+        $sizeRowList.eq(index + 1).removeClass('hide').addClass('show');
+
+        curSizeIndex = index + 1;
+        $curColorBlock = $this;
+
+        // 修改颜色时修改商品图片
+        $imgsThumb.addClass('hide').eq(index).removeClass('hide');
     }
     // 当前颜色块 切换勾选样式
     $this.toggleClass('chosed');
-    curColorIndex = index;
     $('#good-num').val(1);
-    // 修改颜色时修改商品图片
-    changeGoodImgWhenClickColor();
-
     // 设置按钮的样式和文字
     updateConformButtonClassAndText();
 }).on('touchstart', '.size-list .block', function() {
     var $this = $(this),
         index,
-        $curSizeRow,
+        curColorBlock,
         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;
+
+        //if (!hasChooseColor) {
+
+            //当前颜色行隐藏
+            $colorRowList.eq(curColorIndex).removeClass('show').addClass('hide');
+
+            //目标颜色行显示
+            $colorRowList.eq(0).removeClass('hide').addClass('show');
+
+            curColorIndex = 0;
+        //}
+
+        //如果颜色已经是选择状态
+        if (curSizeIndex) {
+
+            // 之前选中的颜色去掉勾选样式,新颜色块勾选
+            if ($curColorBlock && $curColorBlock.length > 0) {
+                $curColorBlock.removeClass('chosed');
+                curColorBlock = $colorRowList.eq(0).children().get(curSizeIndex - 1);
+                $curColorBlock = $(curColorBlock);
+                curGoodNum = $curColorBlock.data('num');
+                $curColorBlock.addClass('chosed');
+            }
+        }
         // 当前尺码不是选中状态,选中时
     } else {
         hasChooseSize = true;
-        curGoodNum = $this.data('num');
-        // 之前选中的尺码去掉勾选样式
-        if ($curSizeBlock) {
-            $curSizeBlock.removeClass('chosed');
-        }
+        //如果颜色已经是选择状态
+        if (curSizeIndex) {
+
+            // 之前选中的颜色去掉勾选样式,新颜色块勾选
+            if ($curColorBlock && $curColorBlock.length > 0) {
+                $curColorBlock.removeClass('chosed');
+                //curColorBlock = $colorRowList.eq(curColorIndex + 1).children().get(curSizeIndex - 1);
+                curColorBlock = $colorRowList.eq(index + 1).children().get(curSizeIndex - 1);
+                $curColorBlock = $(curColorBlock);
+                curGoodNum = $curColorBlock.data('num');
+                $curColorBlock.addClass('chosed');
+            }
-        // 如果当前有尺码被选中，且数量等于0, 否则显示剩余件数
-        if (curGoodNum > 0 && hasChooseColor) {
-            if ($soonSoldOut.length > 0) {
-                $allChoseItems.find('.num .left-num').html('即将售罄');
+            //数量大于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 {
-                $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
+                $allChoseItems.find('.num .left-num').html('');
+                $leftNum.val(0);
             }
-            $('#left-num').val(curGoodNum);
-        } else {
-            $allChoseItems.find('.num .left-num').html('');
-            $('#left-num').val(0);
         }
-        if (curGoodNum === 0 && hasChooseColor) {
-            $this.addClass('zero-stock');
-        }
-        curSizeIndex = index;
+        // 颜色当前行隐藏
+        $colorRowList.eq(curColorIndex).removeClass('show').addClass('hide');
+
+        //颜色对应行显示
+        $colorRowList.eq(index + 1).removeClass('hide').addClass('show');
+
+        curColorIndex = index + 1;
         $curSizeBlock = $this;
     }
     $this.toggleClass('chosed');
     $('#good-num').val(1);
-    // 重置颜色块的样式
-    resetColorZeroStock($siblingBlock);
-
     // 设置按钮的样式和文字
     updateConformButtonClassAndText();
 });