尺码颜色选择

梁志锋
Commit 2c88d62dbe37ae330311a1d6bc888642fa17bdc7 1 parent 81660dbc
Showing 3 changed files with 76 additions and 19 deletions
static/js/cart/cart.js
static/js/cart/chose-panel.js
template/m.yohobuy.com/partials/cart/chose-panel.phtml
--- a/static/js/cart/cart.js
View file @2c88d62
+++ b/static/js/cart/cart.js
View file @2c88d62
@@ -51,7 +51,7 @@ if ($('.cart-nav').length > 0) {
 }
 $('.btn-balance').on('touchend', function() {
-     if($('.balance span').hasClass('icon-cb-checked')){
+    if ($('.balance span').hasClass('icon-cb-checked')) {
         window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
     } else {
         tip.show('请先勾选商品~');
--- a/static/js/cart/chose-panel.js
View file @2c88d62
+++ b/static/js/cart/chose-panel.js
View file @2c88d62
@@ -98,15 +98,13 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
 $('.color-list').on('touchstart', '.block', function(e) {
     var $this = $(this),
         $that = $(e.target).closest('.chose-items'),
-        numArray,
         index,
         curSelectedSizeBlock,
         $sizeChosed,
         scindex,
         i;
-    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
-        currentNumArray = ($this.data('numstr') + '').split('/');
+    var $siblingBlock = $this.closest('.block-list').siblings(':first');
     $this.siblings('.chosed').removeClass('chosed');
     index = $this.index();
@@ -132,26 +130,45 @@ $('.color-list').on('touchstart', '.block', function(e) {
         }
         //把当前选中颜色对应的尺码那一行显示出来
-        //$sizeRowList.addClass('hide');
-        //$curSizeRow.toggleClass('hide');
+        $sizeRowList.addClass('hide');
+        $curSizeRow.toggleClass('hide');
-        //之前选中行 对应的尺码去掉勾选样式
+        // 之前选中的尺码去掉勾选样式
+        if ($sizeChosed) {
             $sizeChosed.removeClass('chosed');
+        }
-        // 当前选中颜色对应的尺码行，其对应的尺码加上 (前提是要判断下这个尺码是否存在)
+        // 当前选中颜色对应的尺码行，其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
         curSelectedSizeBlock = $curSizeRow.children().get(scindex);
         if (curSelectedSizeBlock) {
+            var curGoodNum = $(curSelectedSizeBlock).data('num');
             $(curSelectedSizeBlock).addClass('chosed');
+
+            //如果当前有尺码被选中，且数量等于0,则颜色块添加数量为0的样式
+            if(curGoodNum > 0) {
+                $that.find('.num .left-num').html('剩余' + curGoodNum + '件');
+            } else {
+                $(curSelectedSizeBlock).removeClass('zero-stock').addClass('zero-stock');
+                $that.find('.num .left-num').html('');
+            }
         }
     }
+    // 当前颜色块 切换勾选样式
     $this.toggleClass('chosed');
     curColorIndex = index;
+    // 设置按钮的样式和文字
     $chosed = $('.chose-items').find('.chosed');
+    if (2 === $chosed.closest('.zero-stock').length) {
+        $('#chose-btn-sure').css('background-color', '#c0c0c0');
+        $('#chose-btn-sure').html('已售罄');
+    } else {
+        $('#chose-btn-sure').css('background-color', '#eb0313');
+        $('#chose-btn-sure').html('确定');
+    }
-
-    if ($chosed.length === 0) {
+    /**if ($chosed.length === 0) {
         $this.closest('ul>li').each(function() {
             $(this).removeClass('zero-stock');
             if ('0' === $(this).data('num')) {
@@ -210,7 +227,7 @@ $('.color-list').on('touchstart', '.block', function(e) {
             $('#chose-btn-sure').css('background-color', '#eb0313');
             $('#chose-btn-sure').html('确定');
         }
-    }
+    }**/
 });
@@ -219,29 +236,66 @@ $('.size-list').on('touchstart', '.block', function(e) {
         $that = $(e.target).closest('.chose-items'),
         numArray,
         index,
+        curSelectedSizeBlock,
+        $colorChosed,
+        selectedColorindex,
         i;
-    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
-        currentNumArray = ($this.data('numstr') + '').split('/');
+    var $siblingBlock = $this.closest('.block-list').siblings(':first');
     $this.siblings('.chosed').removeClass('chosed');
     index = $this.index();
+    $colorChosed = $siblingBlock.find('.chosed');
+    selectedColorindex = $colorChosed.index();
+    $curSizeRow = $sizeRowList.eq(index);
+
+    // 当前尺码已经是选中状态,再点击时
     if ($this.hasClass('chosed')) {
         //尺码原来已经是勾选时，要清空剩余件数的提示
         $that.find('.num .left-num').html('');
         hasChooseSize = false;
+
+        // 去掉已经选中颜色的 数量为0的样式
+        if ($colorChosed) {
+            $colorChosed.removeClass('zero-stock').addClass('zero-stock');
+        }
+
+        // 当前尺码不是选中状态,选中时
     } else {
         hasChooseSize = true;
+
+        var curGoodNum = $this.data('num');
+
+        // 之前选中的尺码去掉勾选样式
+        if (preSelectedSizeBlock) {
+            $(preSelectedSizeBlock).removeClass('chosed');
+        }
+
+        // 如果当前有尺码被选中，且数量等于0,则颜色块添加数量为0的样式, 否则显示剩余件数
+        if(curGoodNum > 0) {
+            $that.find('.num .left-num').html('剩余' + curGoodNum + '件');
+        } else {
+            $colorChosed.removeClass('zero-stock').addClass('zero-stock');
+            $that.find('.num .left-num').html('');
+        }
     }
     $this.toggleClass('chosed');
     curSizeIndex = index;
+    // 设置按钮的样式和文字
     $chosed = $('.chose-items').find('.chosed');
+    if (2 === $chosed.closest('.zero-stock').length) {
+        $('#chose-btn-sure').css('background-color', '#c0c0c0');
+        $('#chose-btn-sure').html('已售罄');
+    } else {
+        $('#chose-btn-sure').css('background-color', '#eb0313');
+        $('#chose-btn-sure').html('确定');
+    }
-    if ($chosed.length === 0) {
+    /**if ($chosed.length === 0) {
         $this.closest('ul>li').each(function() {
             $(this).removeClass('zero-stock');
             if ('0' === $(this).data('num')) {
@@ -280,13 +334,13 @@ $('.size-list').on('touchstart', '.block', function(e) {
         $('#chose-btn-sure').css('background-color', '#eb0313');
         $('#chose-btn-sure').html('确定');
-        /**$siblingBlock.find('ul>li').each(function() {
+        $siblingBlock.find('ul>li').each(function() {
             $(this).removeClass('zero-stock');
             if ('0' === $(this).data('num')) {
                 $(this).addClass('zero-stock');
             }
         });
-        $that.find('.num .left-num').html('');*/
+        $that.find('.num .left-num').html('');
     } else if ($chosed.length === 2) {
         $siblingBlock.find('.block').removeClass('zero-stock');
         for (i = 0; i < currentNumArray.length; i++) {
@@ -303,7 +357,7 @@ $('.size-list').on('touchstart', '.block', function(e) {
             $('#chose-btn-sure').css('background-color', '#eb0313');
             $('#chose-btn-sure').html('确定');
         }
-    }
+    }**/
 });
--- a/template/m.yohobuy.com/partials/cart/chose-panel.phtml
View file @2c88d62
+++ b/template/m.yohobuy.com/partials/cart/chose-panel.phtml
View file @2c88d62
@@ -34,15 +34,18 @@
                 <div class="size-list block-list">
                     <span>尺码</span>
                     {{# sizes}}
+
+                    <ul class="size-row clearfix hide">
                         {{# size}}
-                        <ul class="size-row clearfix" data-type="size" >
                         <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>
-                        </ul>
                     {{/ size}}
+                </ul>
+
                 {{/ sizes}}
             </div>
+            <p>
             <div class="num">
                 <span>数量</span>
                 <div class="clearfix">