Merge branch 'feature/product' into develop
Showing
5 changed files
with
100 additions
and
36 deletions
@@ -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 | +}); |
@@ -97,13 +97,31 @@ | @@ -97,13 +97,31 @@ | ||
97 | } | 97 | } |
98 | } | 98 | } |
99 | 99 | ||
100 | - .btns { | ||
101 | - .btn { | ||
102 | - width: 300px; | ||
103 | - height: 46px; | ||
104 | - line-height: 46px; | ||
105 | - margin: 0 auto 20px; | ||
106 | - cursor: pointer; | 100 | + .btn { |
101 | + width: 300px; | ||
102 | + height: 46px; | ||
103 | + line-height: 46px; | ||
104 | + margin: 0 auto 20px; | ||
105 | + cursor: pointer; | ||
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; | ||
107 | } | 125 | } |
108 | } | 126 | } |
109 | } | 127 | } |
-
Please register or login to post a comment