商品详情页购物车功能 -- code reviewd by LZF

@@ -1242,11 +1242,45 @@
                     'cartUrl':'购物车url',
                     'addToCartUrl':'添加购物车url',
                     'soldOut':'已售罄',
-                    'notForSale':'非卖品'
+                    'notForSale':'非卖品',
+
+
+                    thumb: [
+                      {
+                        id:1,
+                        url : ''
+                      },
+                      ...
+                    ],
+                    name: '',
+                    price: '',
+                    salePrice: '',
+                    colors: [
+                    {
+                        id: 1,
+                        chosed: true,
+                        name: '黄色'，
+                        colorNum：10，
+                        shortUrl：'',
+                        
+                    },
+                    ...
+                ],
+                    sizes: [
+                        {
+                            id: 2,
+                            chosed: true,
+                            name: 'X',
+                            sizeNum: 2
+                        },
+                            ...
+                       ],
+
+                totalNum: 20
             },
             'introUrl' : '',
             'id' : '',
-            'preferenceUrl' :''
+            'preferenceUrl' :'',
         }
 ### 评价列表页面 
         {

@@ -7,7 +7,8 @@
 
 var $ = require('jquery'),
      Hammer = require('yoho.hammer'),
-     tip = require('../../plugin/tip');
+     tip = require('../../plugin/tip'),
+     chosePanel = require('../../shopping-cart/chose-panel');
 
 var likeEle = document.getElementById('likeBtn'),
     likeHammer = likeEle && new Hammer(likeEle);
@@ -70,14 +71,17 @@ if (likeHammer) {
 
 if (addToCartHammer) {
     addToCartHammer.on('tap', function(e) {
+        chosePanel.show();
 
         // 统计代码：用于统计用户加入购物车的动作
-        if (window._yas) {
-            window._yas.sendCustomInfo({
-                pd: productId,
-                by: 1
-            }, false);
-        }
+        // if (window._yas) {
+        //     window._yas.sendCustomInfo({
+        //         pd: productId,
+        //         by: 1
+        //     }, false);
+        // }
+
+
     });
 }
 

@@ -5,36 +5,45 @@
  * @date: 2015/10/21
  */
 
-var $ = require('jquery'),
-    Handlebars = require('yoho.handlebars');
+var $ = require('jquery');
 
-var $page = $('.yoho-page');
+//    Handlebars = require('yoho.handlebars');
+
+// var $page = $('.yoho-page');
 
 var $num;
 
-var tpl;
+// var tpl;
 
 //读取partials
-$.ajax({
-    type: 'GET',
-    url: '/shoppingCart/tpl',
-    success: function(data) {
-        tpl = Handlebars.compile(data);
-    }
-});
+// $.ajax({
+//     type: 'GET',
+//     url: '/shoppingCart/tpl',
+//     success: function(data) {
+//         tpl = Handlebars.compile(data);
+//     }
+// });
 
-//显示
-function show(data) {
-    var html = tpl(data);
-
-    $page.append(html);
 
+//显示
+// function show(data) {
+//     // var html = tpl(data);
+//     $('.chose-panel').show();
+//     // $page.append(html);
+//     $('.chose-panel')
+//     $num = $('#good-num');
+// }
+
+function show() {
+    $('.chose-panel').show();
+    $('body').css('overflow', 'hidden');
     $num = $('#good-num');
 }
 
 //移除当前Panel
 function remove() {
-    $('.chose-panel').remove();
+    $('.chose-panel').hide();
+    $('body').css('overflow', 'auto');
 }
 
 $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
@@ -75,4 +84,5 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     $num.val(num + 1);
 });
 
+
 exports.show = show;
\ No newline at end of file

 .chose-panel {
-    position: absolute;
+    position: fixed;
+    display: none;
+    height: 100%;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0,0,0,.3);
+    z-index:3;
 
     .main {
         position: absolute;
-        height: 610rem / $pxConvertRem;
+        height: pxToRem(610px);
         bottom: 0;
         left: 0;
         right: 0;
@@ -18,7 +21,7 @@
     .infos {
         height: 460rem / $pxConvertRem;
         padding: 0 22rem / $pxConvertRem;
-        padding-top: 30rem / $pxConvertRem;
+        // padding-top: 30rem / $pxConvertRem;
     }
 
     .chose-items {
@@ -27,7 +30,10 @@
     }
 
     .basic-info {
-        margin-bottom: 30rem / $pxConvertRem;
+        overflow: hidden;
+        position: relative;
+        margin-bottom: pxToRem(30px);
+        margin-top: pxToRem(30px);
     }
 
     .thumb {
@@ -37,12 +43,18 @@
     }
 
     .text-info {
-        margin-left: 102rem / $pxConvertRem;
-
+        position: absolute;
+        height: auto;
+        left: pxToRem(95px);
+        top:50%;
+        transform: translateY(-50%);
         .name {
             font-size: 28rem / $pxConvertRem;
         }
 
+        .price{
+            font-size: pxToRem(24px);
+        }
         .sale-price {
             color: #e10;
 

@@ -114,6 +114,7 @@
 
     <div id="productDesc"> </div>
     {{> product/recommend-for-you}}
+    {{> shopping-cart/chose-panel}}
 
     {{#cartInfo}}
     <div class="cart-bar">
@@ -121,7 +122,8 @@
         <a href="{{cartUrl}}" class="num-incart iconfont">&#xe62c;</a>
 
         {{#if addToCartUrl}}
-            <a  id="addtoCart" href="{{addToCartUrl}}"  class="addto-cart">加入购物车</a>
+           <!--  <a  id="addtoCart" href="{{addToCartUrl}}"  class="addto-cart">加入购物车</a> -->
+           <a  id="addtoCart" href="javascript:;"  class="addto-cart">加入购物车</a>
         {{/if}}
 
         {{#if soldOut}}

+{{#cartInfo}}
 <div class="chose-panel">
     <div class="main">
         <div class="infos">
@@ -26,7 +27,7 @@
                 </div>
                 <div class="size-list">
                     <span>尺码</span>                  
-                    <ul class="clearfix" data-type="size">
+                    <ul class="clearfix {{#if @first}}{{^}}hide{{/if}}" data-type="size" >
                         {{# sizes}}
                             <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
                                 {{name}}
@@ -49,7 +50,8 @@
             </div>
         </div>
         <div class="btn-wrap">
-            <button id="chose-btn-sure" class="btn btn-sure">确定</button>
+            <button id="chose-btn-sure" class="btn btn-sure">加入购物车</button>
         </div>
     </div>
 </div>
+{{/cartInfo}}
\ No newline at end of file