加入购物车

@@ -493,9 +493,12 @@ const setSizeData = (sizeInfo) => {
             tasteTable.tbody = [];
             _.forEach(sizeInfo.modelBos, value => {
                 let modelInfo = [
-                    value.avatar, value.modelName, value.height,
-                    value.weight, value.vitalStatistics, value.fitModelBo.fit_size,
-                    value.fitModelBo.feel
+                    {
+                        img: value.avatar,
+                        name: value.modelName
+                    },
+                    value.height, value.weight, value.vitalStatistics,
+                    value.fitModelBo.fit_size, value.fitModelBo.feel
                 ];
 
                 // 是否有备注

@@ -66,31 +66,25 @@
                         <p class="btns">
                             {{# fashionTopGoods}}
                                 {{#if buyNow}}
-                                    <span class="btn">立即购买</span>
+                                    <span id="buy-now" class="btn">立即购买</span>
                                 {{/if}}
 
                                 {{#if openSoon}}
                                     <span class="btn">即将开售</span>
                                 {{/if}}
                             {{^}}
-                                <span class="btn">加入购物袋</span>
+                                <span id="add-to-bag" class="btn">加入购物袋</span>
                             {{/ fashionTopGoods}}
-                            <span class="btn disable hide">已售罄</span>
-                            <span class="btn white">收藏商品</span>
+                            <span id="sold-out" class="btn disable hide">已售罄</span>
+                            <span id="collect-product" class="btn white">收藏商品</span>
                         </p>
+                        {{> share}}
+                    </div>
+                    <div class="balance-wrapper">
+                        <p class="success-tip">商品已成功添加到购物袋！</p>
+                        <a class="go-bag btn" href="/shopping/cart">去购物袋结算</a>
+                        <span id="keep-shopping" class="btn white">继续购物</span>
                     </div>
-                    <p class="share-row">
-                        <span class="title pull-left">分享：</span>
-                        <span class="share-wrapper pull-left clearfix">
-                            <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>
-                            <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>
-                            <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>
-                            <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>
-                            <i class="qq" data-type="qq" title="分享到QQ好友"></i>
-                            <i class="renren" data-type="renren" title="分享到人人"></i>
-                            <i class="douban" data-type="douban" class="分享到豆瓣"></i>
-                        </span>
-                    </p>
                 </div>
             </div>
         {{/ goodInfo}}

@@ -6,25 +6,50 @@
 var $ = require('yoho-jquery'),
     lazyload = require('yoho-jquery-lazyload');
 
-var $colorText = $('.choose-color .color'),
+var $tradeWrapper = $('.trade-wrapper'),
+    $balanceWrapper = $('.balance-wrapper'),
+    $colorText = $('.choose-color .color'),
     $sizeText = $('.choose-size .size'),
     $colorList = $('.color-list'),
     $sizeList = $('.size-list'),
     $sizeItem = $('.size-list').children();
 
+var $addToBag = $('#add-to-bag');
+
+var SLIDETIME = 200;
+
 lazyload($('img.lazy'));
 
+function getBuyProduct() {
+    var sku;
+
+    $sizeItem.each(function() {
+        var $this = $(this),
+            data;
+
+        if ($this.hasClass('cur')) {
+            data = $this.data();
+            sku = data.sku;
+        }
+    });
+
+    return sku;
+}
+
+// 颜色
 $colorList.on('click', '.round-color', function() {
     var $this = $(this),
         data = $this.parent().data();
 
     if (!$this.hasClass('cur')) {
         $colorList.removeClass('cur');
+        $sizeItem.removeClass('cur');
         $colorText.text(data.color ? data.color : '');
         $this.addClass('cur');
     }
 });
 
+// 尺码
 $sizeList.on('click', 'li', function() {
     var $this = $(this),
         data = $this.data();
@@ -35,3 +60,25 @@ $sizeList.on('click', 'li', function() {
         $this.addClass('cur');
     }
 });
+
+$addToBag.click(function() {
+    var sku = getBuyProduct();
+
+    if (sku) {
+        $.ajax({
+            type: 'POST',
+            url: '/shopping/cart/add',
+            data: {
+                productSku: sku,
+                buyNumber: 1
+            }
+        }).then(function(data) {
+            if (data.code === 200) {
+                $tradeWrapper.slideUp(SLIDETIME);
+                $balanceWrapper.slideDown(SLIDETIME);
+
+                // $('#cart-num').text(data.data.goods_count); // 更新数目
+            }
+        });
+    }
+});

@@ -96,7 +96,6 @@
             margin: 0 auto;
 
             span {
-                background: url(/cart/del.png);
                 float: left;
                 width: 27px;
                 height: 30px;

@@ -97,13 +97,31 @@
             }
         }
 
-        .btns {
-            .btn {
-                width: 300px;
-                height: 46px;
-                line-height: 46px;
-                margin: 0 auto 20px;
-                cursor: pointer;
+        .btn {
+            width: 300px;
+            height: 46px;
+            line-height: 46px;
+            margin: 0 auto 20px;
+            cursor: pointer;
+        }
+
+        .share {
+            width: 304px;
+            padding-left: 15px;
+            margin: 0 auto;
+        }
+
+        .balance-wrapper {
+            display: none;
+            text-align: center;
+
+            .success-tip {
+                margin: 15px 0;
+            }
+
+            .go-bag {
+                color: #fff;
+                background: #e92601;
             }
         }
     }