Authored by yyq

Merge branch 'feature/product' into develop

@@ -493,9 +493,12 @@ const setSizeData = (sizeInfo) => { @@ -493,9 +493,12 @@ const setSizeData = (sizeInfo) => {
493 tasteTable.tbody = []; 493 tasteTable.tbody = [];
494 _.forEach(sizeInfo.modelBos, value => { 494 _.forEach(sizeInfo.modelBos, value => {
495 let modelInfo = [ 495 let modelInfo = [
496 - value.avatar, value.modelName, value.height,  
497 - value.weight, value.vitalStatistics, value.fitModelBo.fit_size,  
498 - value.fitModelBo.feel 496 + {
  497 + img: value.avatar,
  498 + name: value.modelName
  499 + },
  500 + value.height, value.weight, value.vitalStatistics,
  501 + value.fitModelBo.fit_size, value.fitModelBo.feel
499 ]; 502 ];
500 503
501 // 是否有备注 504 // 是否有备注
@@ -66,31 +66,25 @@ @@ -66,31 +66,25 @@
66 <p class="btns"> 66 <p class="btns">
67 {{# fashionTopGoods}} 67 {{# fashionTopGoods}}
68 {{#if buyNow}} 68 {{#if buyNow}}
69 - <span class="btn">立即购买</span> 69 + <span id="buy-now" class="btn">立即购买</span>
70 {{/if}} 70 {{/if}}
71 71
72 {{#if openSoon}} 72 {{#if openSoon}}
73 <span class="btn">即将开售</span> 73 <span class="btn">即将开售</span>
74 {{/if}} 74 {{/if}}
75 {{^}} 75 {{^}}
76 - <span class="btn">加入购物袋</span> 76 + <span id="add-to-bag" class="btn">加入购物袋</span>
77 {{/ fashionTopGoods}} 77 {{/ fashionTopGoods}}
78 - <span class="btn disable hide">已售罄</span>  
79 - <span class="btn white">收藏商品</span> 78 + <span id="sold-out" class="btn disable hide">已售罄</span>
  79 + <span id="collect-product" class="btn white">收藏商品</span>
80 </p> 80 </p>
  81 + {{> share}}
  82 + </div>
  83 + <div class="balance-wrapper">
  84 + <p class="success-tip">商品已成功添加到购物袋!</p>
  85 + <a class="go-bag btn" href="/shopping/cart">去购物袋结算</a>
  86 + <span id="keep-shopping" class="btn white">继续购物</span>
81 </div> 87 </div>
82 - <p class="share-row">  
83 - <span class="title pull-left">分享:</span>  
84 - <span class="share-wrapper pull-left clearfix">  
85 - <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>  
86 - <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>  
87 - <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>  
88 - <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>  
89 - <i class="qq" data-type="qq" title="分享到QQ好友"></i>  
90 - <i class="renren" data-type="renren" title="分享到人人"></i>  
91 - <i class="douban" data-type="douban" class="分享到豆瓣"></i>  
92 - </span>  
93 - </p>  
94 </div> 88 </div>
95 </div> 89 </div>
96 {{/ goodInfo}} 90 {{/ goodInfo}}
1 /** 1 /**
2 - * 退换货申请 2 + * 商品详情
3 * @author: yyqing<yanqing.yang@yoho.cn> 3 * @author: yyqing<yanqing.yang@yoho.cn>
4 * @date: 2016/7/15 4 * @date: 2016/7/15
5 */ 5 */
6 var $ = require('yoho-jquery'), 6 var $ = require('yoho-jquery'),
7 lazyload = require('yoho-jquery-lazyload'); 7 lazyload = require('yoho-jquery-lazyload');
8 8
9 -var $colorText = $('.choose-color .color'), 9 +var $tradeWrapper = $('.trade-wrapper'),
  10 + $balanceWrapper = $('.balance-wrapper'),
  11 + $colorText = $('.choose-color .color'),
10 $sizeText = $('.choose-size .size'), 12 $sizeText = $('.choose-size .size'),
11 - $colorList = $('.color-list'), 13 + $colorItem = $('.color-list .round-color'),
12 $sizeList = $('.size-list'), 14 $sizeList = $('.size-list'),
13 - $sizeItem = $('.size-list').children(); 15 + $sizeItem = $('.size-list > li');
  16 +
  17 +var $addToBag = $('#add-to-bag');
  18 +
  19 +var SLIDETIME = 200;
14 20
15 lazyload($('img.lazy')); 21 lazyload($('img.lazy'));
16 22
17 -$colorList.on('click', '.round-color', function() { 23 +function getBuyProduct() {
  24 + var sku;
  25 +
  26 + $sizeItem.each(function() {
  27 + var $this = $(this),
  28 + data;
  29 +
  30 + if ($this.hasClass('cur')) {
  31 + data = $this.data();
  32 + sku = data.sku;
  33 + }
  34 + });
  35 +
  36 + return sku;
  37 +}
  38 +
  39 +// 颜色
  40 +$('.color-list').on('click', '.color-item', function() {
18 var $this = $(this), 41 var $this = $(this),
19 - data = $this.parent().data(); 42 + index = $this.index(),
  43 + data = $this.data();
20 44
21 if (!$this.hasClass('cur')) { 45 if (!$this.hasClass('cur')) {
22 - $colorList.removeClass('cur'); 46 + $colorItem.removeClass('cur');
  47 + $sizeList.not('.hide').addClass('hide');
  48 + $sizeList.eq(index).removeClass('hide');
  49 + $sizeItem.removeClass('cur');
23 $colorText.text(data.color ? data.color : ''); 50 $colorText.text(data.color ? data.color : '');
24 - $this.addClass('cur'); 51 + $this.children().addClass('cur');
25 } 52 }
26 }); 53 });
27 54
28 -$sizeList.on('click', 'li', function() { 55 +// 尺码
  56 +$('.size-list').on('click', 'li', function() {
29 var $this = $(this), 57 var $this = $(this),
30 data = $this.data(); 58 data = $this.data();
31 59
@@ -35,3 +63,25 @@ $sizeList.on('click', 'li', function() { @@ -35,3 +63,25 @@ $sizeList.on('click', 'li', function() {
35 $this.addClass('cur'); 63 $this.addClass('cur');
36 } 64 }
37 }); 65 });
  66 +
  67 +$addToBag.click(function() {
  68 + var sku = getBuyProduct();
  69 +
  70 + if (sku) {
  71 + $.ajax({
  72 + type: 'POST',
  73 + url: '/shopping/cart/add',
  74 + data: {
  75 + productSku: sku,
  76 + buyNumber: 1
  77 + }
  78 + }).then(function(data) {
  79 + if (data.code === 200) {
  80 + $tradeWrapper.slideUp(SLIDETIME);
  81 + $balanceWrapper.slideDown(SLIDETIME);
  82 +
  83 + // $('#cart-num').text(data.data.goods_count); // 更新数目
  84 + }
  85 + });
  86 + }
  87 +});
@@ -96,7 +96,6 @@ @@ -96,7 +96,6 @@
96 margin: 0 auto; 96 margin: 0 auto;
97 97
98 span { 98 span {
99 - background: url(/cart/del.png);  
100 float: left; 99 float: left;
101 width: 27px; 100 width: 27px;
102 height: 30px; 101 height: 30px;
@@ -97,7 +97,6 @@ @@ -97,7 +97,6 @@
97 } 97 }
98 } 98 }
99 99
100 - .btns {  
101 .btn { 100 .btn {
102 width: 300px; 101 width: 300px;
103 height: 46px; 102 height: 46px;
@@ -105,6 +104,25 @@ @@ -105,6 +104,25 @@
105 margin: 0 auto 20px; 104 margin: 0 auto 20px;
106 cursor: pointer; 105 cursor: pointer;
107 } 106 }
  107 +
  108 + .share {
  109 + width: 304px;
  110 + padding-left: 15px;
  111 + margin: 0 auto;
  112 + }
  113 +
  114 + .balance-wrapper {
  115 + display: none;
  116 + text-align: center;
  117 +
  118 + .success-tip {
  119 + margin: 15px 0;
  120 + }
  121 +
  122 + .go-bag {
  123 + color: #fff;
  124 + background: #e92601;
  125 + }
108 } 126 }
109 } 127 }
110 128