加入购物车选尺码颜色的功能修改

@@ -19,29 +19,31 @@ require('./good');
 
 lazyLoad($('img.lazy'));
 
-navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
-navHammer.on('tap', function(e) {
-    var $this = $(e.target).closest('li');
-
-    if ($this.hasClass('active')) {
-        return;
-    }
-
-    if (cartType === 'ordinary') {
-        cartType = 'advance';
-    } else {
-        cartType = 'ordinary';
-    }
-
-    $this.siblings('.active').removeClass('active');
-    $this.addClass('active');
-
-    //切换普通商品和预售商品购物车显示
-    $cartContent.toggleClass('hide');
-
-    //trigger lazyload
-    $(window).trigger('scroll');
-});
+if ($('.cart-nav').length > 0) {
+    navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
+    navHammer.on('tap', function(e) {
+        var $this = $(e.target).closest('li');
+
+        if ($this.hasClass('active')) {
+            return;
+        }
+
+        if (cartType === 'ordinary') {
+            cartType = 'advance';
+        } else {
+            cartType = 'ordinary';
+        }
+
+        $this.siblings('.active').removeClass('active');
+        $this.addClass('active');
+
+        //切换普通商品和预售商品购物车显示
+        $cartContent.toggleClass('hide');
+
+        //trigger lazyload
+        $(window).trigger('scroll');
+    });
+}
 
 $('.btn-balance').on('touchend', function() {
     window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;

@@ -24,7 +24,13 @@ var panelTmpl,
     $sizeList,
     firstColorId,
     colorIndex,
-    confirming;
+    confirming,
+    hasChooseColor = false,
+    hasChooseSize = false,
+    curColorIndex,
+    curSizeIndex,
+    $curSizeRow,
+    $sizeRowList = $('.size-list ul');
 
 // 读取模板
 $.get('/cart/index/giftinfoTpl', function(html) {
@@ -39,45 +45,40 @@ $.get('/cart/index/giftinfoTpl', function(html) {
 
 //初始化购物车面板显示
 function init() {
-    $colorList = $('.chose-panel .color-list ul>li');
-    $sizeList = $('.chose-panel .size-list ul>li');
-    firstColorId = $colorList.eq(0).data('id');
-    $sizeList.each(function() {
-        colorIndex = $(this).data('colorid');
-
-        if (colorIndex === firstColorId) {
-            $(this).removeClass('hide');
-        }
-    });
+    //$colorList = $('.chose-panel .color-list ul>li');
+    //$sizeList = $('.chose-panel .size-list ul>li');
+    //firstColorId = $colorList.eq(0).data('id');
+    //$sizeList.each(function() {
+    //    colorIndex = $(this).data('colorid');
+    //
+    //    if (colorIndex === firstColorId) {
+    //        $(this).removeClass('hide');
+    //    }
+    //});
+    var $firstRow = $sizeRowList.eq(0);
+    //$firstRow.toggleClass('hide');
+    $curSizeRow = $firstRow;
 }
 
 init();
 
-//显示
-// function show(data) {
-//     // var html = tpl(data);
-//     $('.chose-panel').show();
-//     // $page.append(html);
-//     $('.chose-panel')
-//     $num = $('#good-num');
-// }
-
-
-
 function show(data) {
     if (data) {
         $chosePanel.html(panelTmpl(data));
         init();
     }
+}
 
+//显示当前Panel
+function show() {
     $('.chose-panel').show();
 
     $('body').css('overflow', 'hidden');
     $num = $('#good-num');
 }
 
-//移除当前Panel
-function remove() {
+//隐藏当前Panel
+function hide() {
     $('.chose-panel').hide();
     $('body').css('overflow', 'auto');
 }
@@ -90,57 +91,130 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     }
 
     //点击蒙版消失
-    remove();
-}).on('touchstart', '#chose-btn-sure', function() {
+    hide();
+});
 
-    var productSku,
-        buyNumber = $('#good-num').val() - 0,
+$('.color-list').on('touchstart', '.block', function(e) {
+    var $this = $(this),
+        $that = $(e.target).closest('.chose-items'),
+        numArray,
+        index,
+        curSelectedSizeBlock,
+        i;
 
-        promotionId,
-        isEdit = 0,
-        numInCart = $('.num-tag').html() - 0;
+    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
+        currentNumArray = ($this.data('numstr') + '').split('/');
 
-    //  goodsType,
-    // isEdit;
+    $this.siblings('.chosed').removeClass('chosed');
+    index = $this.index();
 
-    $chosed = $('.block-list>ul>li.chosed');
+    var $sizeChosed = $siblingBlock.find('.chosed');
+    var scindex = $sizeChosed.index();
+    $curSizeRow = $sizeRowList.eq(index);
 
-    if (2 === $chosed.length && 0 === $chosed.closest('.zero-stock').length) {
-        productSku = $sizeList.closest('.chosed').data('skuid');
-        promotionId = $('[data-id="' + productSku + '"]').closest('.advance-block').data('promotion-id');
-        if (confirming) {
-            return false;
+    // 当前颜色已经是选中状态,再点击时
+    if ($this.hasClass('chosed')) {
+
+        //颜色原来已经是勾选时，要清空剩余件数的提示
+        $that.find('.num .left-num').html('');
+        hasChooseColor = false;
+
+        // 当前颜色不是选中状态,选中时
+    } else {
+        hasChooseColor = true;
+
+        //根据颜色切换图片
+        if ($this.closest('.block-list').hasClass('color-list')) {
+            $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide');
         }
 
-        confirming = true;
-        loading.showLoadingMask();
-        $.ajax({
-            method: 'POST',
-            url: '/cart/index/add',
-            data: {
-                productSku: productSku,
-                buyNumber: buyNumber,
-                promotionId: promotionId,
-                isEdit: isEdit
+        //把当前选中颜色对应的尺码那一行显示出来
+        //$sizeRowList.addClass('hide');
+        //$curSizeRow.toggleClass('hide');
+
+        //之前选中行 对应的尺码去掉勾选样式
+        $sizeChosed.removeClass('chosed');
+
+        // 当前选中颜色对应的尺码行，其对应的尺码加上 (前提是要判断下这个尺码是否存在)
+        curSelectedSizeBlock = $curSizeRow.children().get(scindex);
+        if (curSelectedSizeBlock) {
+            $(curSelectedSizeBlock).addClass('chosed');
+        }
+    }
+
+    $this.toggleClass('chosed');
+    curColorIndex = index;
+
+    $chosed = $('.chose-items').find('.chosed');
+
+
+    if ($chosed.length === 0) {
+        $this.closest('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if ('0' === $(this).data('num')) {
+                $(this).addClass('zero-stock');
             }
-        }).done(function(res) {
-            loading.hideLoadingMask();
-            if (res.code === 200) {
-                $('.num-tag').html(numInCart + buyNumber);
-                $('.num-tag').removeClass('hide');
-                remove();
+        });
+
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if ('0' === $(this).data('num')) {
+                $(this).addClass('zero-stock');
             }
-            if (res.message) {
-                tip.show(res.message);
+        });
+    } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
+        //if ($this.closest('.block-list').hasClass('color-list')) {
+
+            $sizeList.addClass('hide');
+
+            //切换尺码信息
+            $sizeList.each(function() {
+                colorIndex = $(this).data('colorid');
+                if (colorIndex === $this.data('id')) {
+                    $(this).removeClass('hide');
+                }
+            });
+        //}
+
+        numArray = ($chosed.data('numstr') + '').split('/');
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < numArray.length; i++) {
+            if ('0' === numArray[i]) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
+        }
+    } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
+        $('#chose-btn-sure').css('background-color', '#eb0313');
+        $('#chose-btn-sure').html('确定');
+
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if ('0' === $(this).data('num')) {
+                $(this).addClass('zero-stock');
             }
-        }).fail(function() {
-            tip.show('网络出了点问题~');
-        }).always(function() {
-            confirming = false;
         });
+        $that.find('.num .left-num').html('');
+    } else if ($chosed.length === 2) {
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < currentNumArray.length; i++) {
+            if ('0' === currentNumArray[i]) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
+        }
+        numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');
+        $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
+        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('确定');
+        }
     }
 
-}).on('touchstart', '.block', function(e) {
+});
+
+$('.size-list').on('touchstart', '.block', function(e) {
     var $this = $(this),
         $that = $(e.target).closest('.chose-items'),
         numArray,
@@ -151,26 +225,33 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
         currentNumArray = ($this.data('numstr') + '').split('/');
 
     $this.siblings('.chosed').removeClass('chosed');
-    $this.toggleClass('chosed');
     index = $this.index();
-    $chosed = $('.block-list>ul>li.chosed');
 
-    //根据颜色切换图片
-    if ($this.closest('.block-list').hasClass('color-list')) {
-        $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide');
+    if ($this.hasClass('chosed')) {
+
+        //尺码原来已经是勾选时，要清空剩余件数的提示
+        $that.find('.num .left-num').html('');
+        hasChooseSize = false;
+    } else {
+        hasChooseSize = true;
     }
 
+    $this.toggleClass('chosed');
+    curSizeIndex = index;
+
+    $chosed = $('.chose-items').find('.chosed');
+
     if ($chosed.length === 0) {
         $this.closest('ul>li').each(function() {
             $(this).removeClass('zero-stock');
-            if (0 === $(this).data('num') - 0) {
+            if ('0' === $(this).data('num')) {
                 $(this).addClass('zero-stock');
             }
         });
 
         $siblingBlock.find('ul>li').each(function() {
             $(this).removeClass('zero-stock');
-            if (0 === $(this).data('num') - 0) {
+            if ('0' === $(this).data('num')) {
                 $(this).addClass('zero-stock');
             }
         });
@@ -191,7 +272,7 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
         numArray = ($chosed.data('numstr') + '').split('/');
         $siblingBlock.find('.block').removeClass('zero-stock');
         for (i = 0; i < numArray.length; i++) {
-            if (0 === numArray[i] - 0) {
+            if ('0' === numArray[i]) {
                 $siblingBlock.find('.block').eq(i).addClass('zero-stock');
             }
         }
@@ -199,17 +280,17 @@ $('.yoho-page').on('touchstart', '.chose-panel', 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') - 0) {
+            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++) {
-            if (0 === currentNumArray[i] - 0) {
+            if ('0' === currentNumArray[i]) {
                 $siblingBlock.find('.block').eq(i).addClass('zero-stock');
             }
         }
@@ -224,8 +305,10 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
         }
     }
 
-}).on('touchstart', '.btn-minus', function() {
-    var num = +$num.val(),
+});
+
+$('.btn-minus').on('touchstart', function() {
+    var num = $num.val(),
         $chosed = $('.block-list>ul>li.chosed'),
         leftNum = re.exec($('.num .left-num').html());
 
@@ -239,11 +322,14 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     }
 
     $num.val(num - 1);
-}).on('touchstart', '.btn-plus', function() {
-    var num = +$num.val();
+});
+
+$('.btn-plus').on('touchstart', function() {
+    var num = $num.val();
 
     //若颜色和尺码没有被同时选中，则不能点击
     if ($('.block-list>ul>li.chosed').length < 2) {
+        tip.show('请选择颜色和尺码~');
         return;
     }
     leftNum = re.exec($('.num .left-num').html());
@@ -255,5 +341,57 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     $num.val(num + 1);
 });
 
+$('#chose-btn-sure').on('touchend', function() {
+
+    var productSku,
+        buyNumber = $('#good-num').val() - 0,
+
+        promotionId,
+        isEdit = 0,
+        numInCart = $('.num-tag').html() - 0;
+
+    //  goodsType,
+    // isEdit;
+
+    $chosed = $('.block-list>ul>li.chosed');
+
+    if (2 === $chosed.length && 0 === $chosed.closest('.zero-stock').length) {
+        productSku = $sizeList.closest('.chosed').data('skuid');
+        promotionId = $('[data-id="' + productSku + '"]').closest('.advance-block').data('promotion-id');
+        if (confirming) {
+            return false;
+        }
+
+        confirming = true;
+        loading.showLoadingMask();
+        $.ajax({
+            method: 'POST',
+            url: '/cart/index/add',
+            data: {
+                productSku: productSku,
+                buyNumber: buyNumber,
+                promotionId: promotionId,
+                isEdit: isEdit
+            }
+        }).done(function(res) {
+            loading.hideLoadingMask();
+            if (res.code === 200) {
+                $('.num-tag').html(numInCart + buyNumber);
+                $('.num-tag').removeClass('hide');
+                confirming = false;
+                hide();
+            }
+            if (res.message) {
+                tip.show(res.message);
+            }
+        }).fail(function() {
+            tip.show('网络出了点问题~');
+        }).always(function() {
+            confirming = false;
+        });
+    }
+
+});
+
 exports.init = init;
 exports.show = show;

@@ -124,6 +124,7 @@ $loginBtn.on('touchstart', function() {
         });
     } else {
         showErrTip('账号或密码有错误，请重新输入');
+        $loginBtn.text('登录').removeClass('disable');
     }
 });
 

@@ -126,6 +126,7 @@ $loginBtn.on('touchstart', function() {
         });
     } else {
         showErrTip('账号或密码有错误，请重新输入');
+        $loginBtn.text('登录').removeClass('disable');
     }
 });
 

@@ -15,7 +15,7 @@
                     <p class="price">
                         <span class="sale-price{{^price}} no-price{{/price}}">{{salePrice}}</span>
                         {{#if price}}
-                            <span class="market-price">{{price}}</span>
+                        <span class="market-price">{{price}}</span>
                         {{/if}}
                     </p>
                 </div>
@@ -25,41 +25,42 @@
                     <span>颜色</span>
                     <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>
+                        <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>
                         {{/ colors}}
                     </ul>
                 </div>
                 <div class="size-list block-list">
-                    <span>尺码</span>  
-
-                    <ul class="clearfix" data-type="size" >
-                        {{# sizes}}
-                            <li class="block hide {{#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}}
+                    <span>尺码</span>
+                    {{# sizes}}
+                        {{# 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>
-                        {{/ sizes}}
-                    </ul>
-                </div>
-                <div class="num">
-                    <span>数量</span>
-                    <div class="clearfix">
-                        <a class="btn btn-minus" href="javascript:void(0);">
-                            <span class="iconfont">&#xe625;</span>
-                        </a>
-                        <input id="good-num" class="good-num" type="text" value="1">
-                        <a class="btn btn-plus" href="javascript:void(0);">
-                            <span class="iconfont">&#xe624;</span>
-                        </a>  
-                    </div>
-                    <span class="left-num"></span>
+                        </ul>
+                        {{/ size}}
+                    {{/ sizes}}
+            </div>
+            <div class="num">
+                <span>数量</span>
+                <div class="clearfix">
+                    <a class="btn btn-minus" href="javascript:void(0);">
+                        <span class="iconfont">&#xe625;</span>
+                    </a>
+                    <input id="good-num" class="good-num" type="text" value="1">
+                    <a class="btn btn-plus" href="javascript:void(0);">
+                        <span class="iconfont">&#xe624;</span>
+                    </a>
                 </div>
+                <span class="left-num"></span>
             </div>
         </div>
-        <div class="btn-wrap">
-            <button id="chose-btn-sure" class="btn btn-sure">确定</button>
-        </div>
+    </div>
+    <div class="btn-wrap">
+        <button id="chose-btn-sure" class="btn btn-sure">确定</button>
     </div>
 </div>
-{{/cartInfo}}
\ No newline at end of file
+        </div>
+        {{/cartInfo}}
\ No newline at end of file

@@ -44,7 +44,6 @@ class DetailController extends AbstractAction
             $this->setTitle($data['goodsName']);
         }
         $this->setNavHeader('商品详情');
-
         // 渲染模板
         $this->_view->display('index', $data);
     }