购物车弹出框 --code reviewed by LZF

@@ -1261,7 +1261,7 @@
                         chosed: true,
                         name: '黄色'，
                         colorNum：10，
-                        shortUrl：'',
+                        sizeNumStr:'10/20/30'  //对应的商品尺码数目，用斜杠分割
                         
                     },
                     ...
@@ -1271,7 +1271,8 @@
                             id: 2,
                             chosed: true,
                             name: 'X',
-                            sizeNum: 2
+                            sizeNum: 2,
+                            colorNumStr:'10/20/30' //对应的商品颜色数目用斜杠分割
                         },
                             ...
                        ],

@@ -58,21 +58,51 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
 }).on('touchstart', '#chose-btn-sure', function() {
 
     //确定
-}).on('touchstart', '.block', function() {
+}).on('touchstart', '.block', function(e) {
 
     //尺寸颜色点选
-    var $this = $(this);
-
-    if ($this.hasClass('.chosed') || $this.hasClass('disable')) {
+    var $this = $(this),
+        $that = $(e.target).closest('.chose-items'),
+        numArray,
+        index;
+
+    if ($this.hasClass('chosed')) {
+        $this.parent().find('.block').removeClass('chosed');
+        $that.find('.num .left-num').html('');
+    } else if ($this.hasClass('disable')) {
+        $this.css('background-color', '#000');
         return;
+    } else if (!$this.hasClass('chosed')) {
+        $this.siblings('.chosed').removeClass('chosed');
+        $this.addClass('chosed');
+        index = $this.index();
+
+
+        //根据颜色切换图片
+        if ($this.closest('.block-list').hasClass('color-list')) {
+            $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
+        }
+
+        //剩余的商品数
+        if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {
+            numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');
+            $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
+        } else {
+            $that.find('.num .left-num').html('');
+        }
+
+        //点击切换
     }
 
-    $this.siblings('.chosed').removeClass('chosed');
-    $this.addClass('chosed');
 }).on('touchstart', '.btn-minus', function() {
     var num = +$num.val();
 
-    if (num === 1) {
+    //若颜色和尺码没有被同时选中，则不能点击
+    if ($('.block-list>ul>li.chosed').length < 2) {
+        return;
+    }
+
+    if (num === 0) {
         return;
     }
 
@@ -80,6 +110,11 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
 }).on('touchstart', '.btn-plus', function() {
     var num = +$num.val();
 
+    //若颜色和尺码没有被同时选中，则不能点击
+    if ($('.block-list>ul>li.chosed').length < 2) {
+        return;
+    }
+
     //TODO:库存数验证
     $num.val(num + 1);
 });

@@ -79,6 +79,11 @@
             left: 0;
             top: 20rem / $pxConvertRem;
         }
+        >span.left-num{
+            position: absolute;
+            left: pxToRem(380px);
+            top: 20rem / $pxConvertRem;
+        }
     }
 
     .block {
@@ -99,6 +104,11 @@
             background-position: bottom right;
             color: #e10;
         }
+
+        &.disable {
+           color: #e0e0e0;
+           border-color: #e0e0e0; 
+        }
     }
 
     .num {

@@ -3,7 +3,13 @@
     <div class="main">
         <div class="infos">
             <div class="basic-info">
-                <img class="thumb" src={{thumb}}>
+                {{#thumbs}}
+                {{#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>
                     <p class="price">
@@ -15,21 +21,21 @@
                 </div>
             </div>
             <div class="chose-items">
-                <div class="color-list">
+                <div class="color-list block-list">
                     <span>颜色</span>
                     <ul class="clearfix" data-type="color">
                         {{# colors}}
-                            <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}">
                                 {{name}}
                             </li>
                         {{/ colors}}
                     </ul>
                 </div>
-                <div class="size-list">
+                <div class="size-list block-list">
                     <span>尺码</span>                  
-                    <ul class="clearfix {{#if @first}}{{^}}hide{{/if}}" data-type="size" >
+                    <ul class="clearfix" data-type="size" >
                         {{# sizes}}
-                            <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}">
                                 {{name}}
                             </li>
                         {{/ sizes}}
@@ -44,8 +50,9 @@
                         <input id="good-num" class="good-num" type="text" value={{num}}>
                         <a class="btn btn-plus" href="javascript:void(0);">
                             <span class="iconfont">&#xe624;</span>
-                        </a>
+                        </a>  
                     </div>
+                    <span class="left-num"></span>
                 </div>
             </div>
         </div>