fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit d2747fa2b8b69d5bdfd7bb130f3d2d2f9dcbe0f0 1 parent 6e5f07f4

商品详情页尺码选择集成

Inline Side-by-side
Showing 5 changed files with 186 additions and 42 deletions
@@ -527,11 +527,6 @@ let getNewProductAsyncData = (data) => { @@ -527,11 +527,6 @@ let getNewProductAsyncData = (data) => {
527 discount: _.get(bundleData, 'bundleInfo.discount', '') 527 discount: _.get(bundleData, 'bundleInfo.discount', '')
528 }; 528 };
529 } 529 }
530 -finalResult.discountBuy = {  
531 - num: 36,  
532 - promotionPhrase: 'xxx',  
533 - discount: '0.7'  
534 - };  
535 return finalResult; 530 return finalResult;
536 }); 531 });
537 }); 532 });
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 <span class="market-price">{{salePrice}}</span> {{else}} 16 <span class="market-price">{{salePrice}}</span> {{else}}
17 <span class="sale-price no-price">{{salePrice}}</span> {{/ isY}} {{/if}} 17 <span class="sale-price no-price">{{salePrice}}</span> {{/ isY}} {{/if}}
18 </p> 18 </p>
19 - <p class="not-choose">请选择颜色、尺码</p> 19 + <p class="not-choose">{{@root.noChoseText}}</p>
20 <p class="choosed-info hide"></p> 20 <p class="choosed-info hide"></p>
21 <p class="size-info hide"></p> 21 <p class="size-info hide"></p>
22 </div> 22 </div>
@@ -26,19 +26,19 @@ let $yohoPage = $('.yoho-page'), @@ -26,19 +26,19 @@ let $yohoPage = $('.yoho-page'),
26 $choseArea, 26 $choseArea,
27 $goodNum, 27 $goodNum,
28 $btnMinus, 28 $btnMinus,
29 - $thumbImg; 29 + $thumbImg,
  30 + $choseBtnSure,
  31 + $noChoose,
  32 + $chooseInfo;
30 33
31 class ChosePanel { 34 class ChosePanel {
32 constructor() { 35 constructor() {
33 - this.setting = {  
34 - buttonText: '确认'  
35 - }; 36 + this.C_ID = window._ChannelVary[window.cookie('_Channel')];
36 this._regEvents(); 37 this._regEvents();
37 } 38 }
38 show(opt) { 39 show(opt) {
39 if (opt && opt.data) { 40 if (opt && opt.data) {
40 this.data = opt.data; 41 this.data = opt.data;
41 - this.disableNum = opt.disableNum;  
42 this.maxBuyNum = opt.data.cartInfo.limit || 0; // 0表示不限制购买 42 this.maxBuyNum = opt.data.cartInfo.limit || 0; // 0表示不限制购买
43 this.skus = this.data.cartInfo.skus || []; 43 this.skus = this.data.cartInfo.skus || [];
44 this.props = this.data.cartInfo.props || []; 44 this.props = this.data.cartInfo.props || [];
@@ -48,10 +48,16 @@ class ChosePanel { @@ -48,10 +48,16 @@ class ChosePanel {
48 limitCode: opt.data.cartInfo.limitProductCode ? true : false, // 限购 48 limitCode: opt.data.cartInfo.limitProductCode ? true : false, // 限购
49 limit: opt.data.cartInfo.limit ? true : false, // 限制购买数量 49 limit: opt.data.cartInfo.limit ? true : false, // 限制购买数量
50 soonSoldOut: $('.soon-sold-out-tag').length ? true : false, // 即将售罄 50 soonSoldOut: $('.soon-sold-out-tag').length ? true : false, // 即将售罄
51 - seckill: $('.seckill-time').length ? true : false // 秒杀 51 + seckill: $('.seckill-time').length ? true : false, // 秒杀
  52 + disableNum: opt.disableNum // 禁用编辑
52 }; 53 };
53 - this.buttonText = opt.buttonText || this._getButtonText();  
54 this.buyNum = this.minBuyNum = this._defaultBuyNum(); 54 this.buyNum = this.minBuyNum = this._defaultBuyNum();
  55 + this.setting = {
  56 + disableNum: opt.disableNum,
  57 + noChoseText: `请选择${this.props.map(prop => prop.name).join('、')}`,
  58 + buttonText: opt.buttonText || this._getButtonText(),
  59 + buyNum: this.buyNum
  60 + };
55 } 61 }
56 62
57 if (!this.data) { 63 if (!this.data) {
@@ -74,18 +80,14 @@ class ChosePanel { @@ -74,18 +80,14 @@ class ChosePanel {
74 _render() { 80 _render() {
75 let html; 81 let html;
76 82
77 - html = panelT(Object.assign(this.data, {  
78 - buttonText: this.buttonText,  
79 - buyNum: this.buyNum,  
80 - disableNum: this.disableNum  
81 - })); 83 + html = panelT(Object.assign(this.data, this.setting));
82 if ($chosePanel.length) { 84 if ($chosePanel.length) {
83 $chosePanel.replaceWith(html); 85 $chosePanel.replaceWith(html);
84 } else { 86 } else {
85 $yohoPage.append(html); 87 $yohoPage.append(html);
86 } 88 }
87 89
88 - this.setVariable(); 90 + this._setVariable();
89 this._initStatus(); 91 this._initStatus();
90 innerScroll.disableScroll($choseArea); 92 innerScroll.disableScroll($choseArea);
91 } 93 }
@@ -93,7 +95,7 @@ class ChosePanel { @@ -93,7 +95,7 @@ class ChosePanel {
93 if (this.modes.tickets || this.modes.limitCode || this.modes.seckill) { 95 if (this.modes.tickets || this.modes.limitCode || this.modes.seckill) {
94 return '立即购买'; 96 return '立即购买';
95 } 97 }
96 - return '确定'; 98 + return '加入购物车';
97 } 99 }
98 _defaultBuyNum() { 100 _defaultBuyNum() {
99 return this.modes.discount && this.data.discountBuy.num || 1; 101 return this.modes.discount && this.data.discountBuy.num || 1;
@@ -119,25 +121,28 @@ class ChosePanel { @@ -119,25 +121,28 @@ class ChosePanel {
119 } 121 }
120 }); 122 });
121 } 123 }
122 - setVariable() { 124 + _setVariable() {
123 $chosePanel = $('.chose-panel'); 125 $chosePanel = $('.chose-panel');
124 $choseArea = $('.chose-panel .main .chose-items'); 126 $choseArea = $('.chose-panel .main .chose-items');
125 $goodNum = $('#good-num'); 127 $goodNum = $('#good-num');
126 $btnMinus = $('.btn-minus'); 128 $btnMinus = $('.btn-minus');
127 $thumbImg = $('.thumb-img'); 129 $thumbImg = $('.thumb-img');
  130 + $choseBtnSure = $('#chose-btn-sure');
  131 + $noChoose = $('.not-choose');
  132 + $chooseInfo = $('.choosed-info');
128 } 133 }
129 _regEvents() { 134 _regEvents() {
130 $yohoPage.on('touchstart', '.chose-panel', (e) => { 135 $yohoPage.on('touchstart', '.chose-panel', (e) => {
131 return this._closeClick(e); 136 return this._closeClick(e);
132 }); 137 });
133 $yohoPage.on('touchstart', '.block', (e) => { 138 $yohoPage.on('touchstart', '.block', (e) => {
134 - return this._blockClick(e); 139 + this._blockClick(e);
135 }); 140 });
136 $yohoPage.on('touchstart', '.btn-plus,.btn-minus', (e) => { 141 $yohoPage.on('touchstart', '.btn-plus,.btn-minus', (e) => {
137 - return this._numClick(e); 142 + this._numClick(e);
138 }); 143 });
139 $yohoPage.on('touchstart', '.thumb', (e) => { 144 $yohoPage.on('touchstart', '.thumb', (e) => {
140 - return this._thumbClick(e); 145 + this._thumbClick(e);
141 }); 146 });
142 $yohoPage.on('touchstart', '#chose-btn-sure', (e) => { 147 $yohoPage.on('touchstart', '#chose-btn-sure', (e) => {
143 return this._choseBtnSureClick(e); 148 return this._choseBtnSureClick(e);
@@ -165,7 +170,7 @@ class ChosePanel { @@ -165,7 +170,7 @@ class ChosePanel {
165 _numClick(e) { 170 _numClick(e) {
166 let buyNum; 171 let buyNum;
167 172
168 - if ($(e.currentTarget).hasClass('disabled')) { 173 + if (this.modes.disableNum) {
169 return; 174 return;
170 } 175 }
171 buyNum = $(e.currentTarget).hasClass('btn-minus') ? this.buyNum - 1 : this.buyNum + 1; 176 buyNum = $(e.currentTarget).hasClass('btn-minus') ? this.buyNum - 1 : this.buyNum + 1;
@@ -192,11 +197,19 @@ class ChosePanel { @@ -192,11 +197,19 @@ class ChosePanel {
192 let selectSku = this._checkSku(this.buyNum); 197 let selectSku = this._checkSku(this.buyNum);
193 198
194 if (selectSku) { 199 if (selectSku) {
195 - this._resolve(selectSku); 200 + this._resolve({
  201 + sku: selectSku,
  202 + buyNum: this.buyNum,
  203 + modes: this.modes
  204 + });
196 this.close(); 205 this.close();
  206 + return false;
197 } 207 }
198 } 208 }
199 _checkSku(buyNum) { 209 _checkSku(buyNum) {
  210 + if ($('.block.chosed.zero-stock').length) {
  211 + return false;
  212 + }
200 let validSelects = this.props 213 let validSelects = this.props
201 .filter(prop => !$(`.block[data-prop-id="${prop.type}"]`).hasClass('chosed')) 214 .filter(prop => !$(`.block[data-prop-id="${prop.type}"]`).hasClass('chosed'))
202 .map(prop => { 215 .map(prop => {
@@ -226,6 +239,10 @@ class ChosePanel { @@ -226,6 +239,10 @@ class ChosePanel {
226 tip.show(`每人只可购买${this.maxBuyNum}张当日门票`); 239 tip.show(`每人只可购买${this.maxBuyNum}张当日门票`);
227 return false; 240 return false;
228 } 241 }
  242 + if (this.modes.limit && buyNum > this.maxBuyNum) {
  243 + tip.show('您选择数量大于限购数量~');
  244 + return false;
  245 + }
229 if (buyNum > selectSku.storage) { 246 if (buyNum > selectSku.storage) {
230 tip.show('您选择的数量超过了最大库存量~'); 247 tip.show('您选择的数量超过了最大库存量~');
231 return false; 248 return false;
@@ -258,6 +275,27 @@ class ChosePanel { @@ -258,6 +275,27 @@ class ChosePanel {
258 }); 275 });
259 }); 276 });
260 } 277 }
  278 + if (window._yas && window._yas.sendCustomInfo && chosed) {
  279 + if (propId === 'color') {
  280 + window._yas.sendCustomInfo({
  281 + op: 'YB_GDS_COLOR_C',
  282 + param: JSON.stringify({
  283 + C_ID: this.C_ID,
  284 + PRD_ID: this.data.cartInfo.productId,
  285 + COLOR: $selectBlock.text()
  286 + })
  287 + }, true);
  288 + } else if (propId === 'size') {
  289 + window._yas.sendCustomInfo({
  290 + op: 'YB_GDS_SIZE_C',
  291 + param: JSON.stringify({
  292 + C_ID: this.C_ID,
  293 + PRD_ID: this.data.cartInfo.productId,
  294 + SIZE: $selectBlock.text()
  295 + })
  296 + }, true);
  297 + }
  298 + }
261 299
262 this._initBlockStatus(); 300 this._initBlockStatus();
263 } 301 }
@@ -266,9 +304,9 @@ class ChosePanel { @@ -266,9 +304,9 @@ class ChosePanel {
266 304
267 // 设置底部按钮文字 305 // 设置底部按钮文字
268 if ($('.block.chosed.zero-stock').length) { 306 if ($('.block.chosed.zero-stock').length) {
269 - $('#chose-btn-sure').css('background-color', '#c0c0c0').text('已售罄'); 307 + $choseBtnSure.css('background-color', '#c0c0c0').text('已售罄');
270 } else { 308 } else {
271 - $('#chose-btn-sure').css('background-color', '#eb0313').text(this.buttonText); 309 + $choseBtnSure.css('background-color', '#eb0313').text(this.setting.buttonText);
272 } 310 }
273 311
274 // 设置默认购买数量 312 // 设置默认购买数量
@@ -301,12 +339,12 @@ class ChosePanel { @@ -301,12 +339,12 @@ class ChosePanel {
301 })); 339 }));
302 340
303 if (valueList.length) { 341 if (valueList.length) {
304 - $('.not-choose').addClass('hide');  
305 - $('.choosed-info').removeClass('hide');  
306 - $('.choosed-info').text(`已选：${valueList.join('、')}`); 342 + $noChoose.addClass('hide');
  343 + $chooseInfo.removeClass('hide');
  344 + $chooseInfo.text(`已选：${valueList.join('、')}`);
307 } else { 345 } else {
308 - $('.not-choose').removeClass('hide');  
309 - $('.choosed-info').addClass('hide'); 346 + $noChoose.removeClass('hide');
  347 + $chooseInfo.addClass('hide');
310 } 348 }
311 349
312 if (selectSku) { 350 if (selectSku) {
@@ -326,6 +364,7 @@ class ChosePanel { @@ -326,6 +364,7 @@ class ChosePanel {
326 $chosePanel.find('.left-num').text(numText); 364 $chosePanel.find('.left-num').text(numText);
327 $chosePanel.find('.size-info').text(selectSku.sizeInfo).removeClass('hide'); 365 $chosePanel.find('.size-info').text(selectSku.sizeInfo).removeClass('hide');
328 } else { 366 } else {
  367 + $chosePanel.find('.left-num').text('');
329 $chosePanel.find('.size-info').text('').addClass('hide'); 368 $chosePanel.find('.size-info').text('').addClass('hide');
330 } 369 }
331 } 370 }
  1 +let $ = require('yoho-jquery'),
  2 + tip = require('plugin/tip');
  3 +
  4 +let functions = {
  5 + /**
  6 + * 添加门票
  7 + */
  8 + addTickets(productSku, buyNumber) {
  9 + var data = {
  10 + productSku: productSku,
  11 + buyNumber: buyNumber
  12 + };
  13 +
  14 + // 校验电子票
  15 + $.ajax({
  16 + url: '/cart/index/checkTickets',
  17 + dataType: 'json',
  18 + data: data,
  19 + type: 'post',
  20 + success: function(addRestult) {
  21 + if (addRestult.code !== 200) {
  22 + if (addRestult.code === 401) {
  23 + window.location.href = '//m.yohobuy.com/signin.html?refer=' + window.location.href;
  24 + }
  25 + tip.show(addRestult.message);
  26 + } else {
  27 + $('#productSku').val(productSku);
  28 + $('#buyNumber').val(buyNumber);
  29 + $('#buyNowForm').submit();
  30 + }
  31 + },
  32 + error: function() {
  33 + tip.show('网络异常~');
  34 + }
  35 +
  36 + });
  37 + },
  38 +
  39 + /**
  40 + * 添加限购商品
  41 + */
  42 + addLimitCode(limitProductCode, sku, skn, buyNum) {
  43 + let url = $('#limitProductPay').val() + '?limitproductcode=' + limitProductCode + '&sku=' +
  44 + sku + '&skn=' + skn + '&buy_number=' + buyNum;
  45 +
  46 + // 调用接口判断商品是否可以购买
  47 + $.ajax({
  48 + url: url
  49 + }).then(function(res) {
  50 + // 如果有错，则商品不可购买，执行页面刷新，否则跳到结算页面
  51 + if (res.error) {
  52 + tip.show(res.message);
  53 + setTimeout(function() {
  54 + location.reload();
  55 + }, 2000);
  56 + } else {
  57 + location.href = url;
  58 + }
  59 + }).fail(function() {
  60 + tip.show('网络异常!');
  61 + setTimeout(function() {
  62 + location.reload();
  63 + }, 2000);
  64 + });
  65 + },
  66 +
  67 + /**
  68 + * 添加到购物车
  69 + */
  70 + addToCart(sku, skn, buyNum) {
  71 + $.ajax({
  72 + method: 'POST',
  73 + url: '/cart/index/add',
  74 + data: {
  75 + productSku: sku,
  76 + new_product_skn: skn,
  77 + buyNumber: buyNum
  78 + }
  79 + }).done(function(res) {
  80 + var cartNum;
  81 +
  82 + if (res.code === 200) {
  83 + cartNum = res.data.goods_count;
  84 + if (cartNum > 99) {
  85 + cartNum = '99+';
  86 + }
  87 + $('.num-tag').html(cartNum).removeClass('hide');
  88 + }
  89 +
  90 + if (res.message) {
  91 + tip.show(res.message);
  92 + }
  93 + }).fail(function() {
  94 + tip.show('网络出了点问题~');
  95 + }).always(function() {
  96 + });
  97 + }
  98 +};
  99 +
  100 +module.exports = functions;
1 require('product/detail/detail.page.css'); 1 require('product/detail/detail.page.css');
2 -let $ = require('yoho-jquery'); 2 +let $ = require('yoho-jquery'),
  3 + tip = require('../plugin/tip');
3 let productId = $('#productId').val(); 4 let productId = $('#productId').val();
4 let goodsId = $('#goodsId').val(); 5 let goodsId = $('#goodsId').val();
5 let productSkn = $('#productSkn').val(); 6 let productSkn = $('#productSkn').val();
@@ -17,6 +18,8 @@ require('./detail/desc'); @@ -17,6 +18,8 @@ require('./detail/desc');
17 // 为你优选 18 // 为你优选
18 require('./detail/recommend-for-you-product-desc'); 19 require('./detail/recommend-for-you-product-desc');
19 20
  21 +let detailFuns = require('./detail/functions');
  22 +
20 window.rePosFooter && window.rePosFooter(); 23 window.rePosFooter && window.rePosFooter();
21 24
22 setTimeout(() => { 25 setTimeout(() => {
@@ -83,8 +86,6 @@ setTimeout(() => { @@ -83,8 +86,6 @@ setTimeout(() => {
83 $('#placeholder-infodata').replaceWith(infoDataHbs(data)); 86 $('#placeholder-infodata').replaceWith(infoDataHbs(data));
84 87
85 if (data.isDepositAdvance === 'Y') { 88 if (data.isDepositAdvance === 'Y') {
86 - // 定金预售商品  
87 - let tip = require('../plugin/tip');  
88 89
89 setTimeout(function() { 90 setTimeout(function() {
90 $('#addtoCart').text('立即购买').off('touchstart').on('touchstart', function() { 91 $('#addtoCart').text('立即购买').off('touchstart').on('touchstart', function() {
@@ -153,15 +154,24 @@ setTimeout(() => { @@ -153,15 +154,24 @@ setTimeout(() => {
153 let productCode = $('#limitProductCode').val(); 154 let productCode = $('#limitProductCode').val();
154 155
155 $('.cart-bar').hide(); 156 $('.cart-bar').hide();
156 - // productCode && chosePanel.setLimitGoodModeWithSknId(productCode, productSkn);  
157 chosePanel.show({ 157 chosePanel.show({
158 data: data, 158 data: data,
159 - buttonText: '加入购物车'  
160 - }).then(() => {  
161 - console.log('choice') 159 + disableNum: productCode
  160 + }).then((result) => {
  161 + $('.cart-bar').show();
  162 + if (result && result.sku) {
  163 + if (result.modes.tickets) {
  164 + detailFuns.addTickets(result.sku.skuId, result.buyNum);
  165 + return;
  166 + }
  167 + if (result.modes.limitCode) {
  168 + detailFuns.addLimitCode(productCode, result.sku.skuId, productSkn, result.buyNum);
  169 + return;
  170 + }
  171 + detailFuns.addToCart(result.sku.skuId, productSkn, result.buyNum);
  172 + }
162 }, () => { 173 }, () => {
163 $('.cart-bar').show(); 174 $('.cart-bar').show();
164 - console.log('cancel')  
165 }); 175 });
166 176
167 // 统计代码：用于统计用户加入购物车的动作 177 // 统计代码：用于统计用户加入购物车的动作
@@ -377,4 +387,4 @@ setTimeout(() => { @@ -377,4 +387,4 @@ setTimeout(() => {
377 }); 387 });
378 388
379 // 加载详情页的返回顶部按钮并注册事件-end 389 // 加载详情页的返回顶部按钮并注册事件-end
380 -}(productSkn, productId, brandId)); 390 +}(productSkn, productId, brandId));