fe / yohobuywap-node · Commits

Go to a project

Authored by 李奇
Commit 16a59ce5db3067415343210da61cbff5f8197d6c 1 parent bd7090e2

商品选择修改

Inline Side-by-side
Showing 3 changed files with 84 additions and 227 deletions
@@ -23,34 +23,36 @@ @@ -23,34 +23,36 @@
23 </div> 23 </div>
24 <div class="chose-items"> 24 <div class="chose-items">
25 <div class="block-list"> 25 <div class="block-list">
26 - <span class="name">颜色</span>  
27 - <ul class="size-row clearfix"> 26 + <span class="name">{{@root._fullData.skcTitle}}</span>
  27 + <ul class="size-row skc clearfix">
28 {{#each goodsList}} 28 {{#each goodsList}}
29 - <li class="block{{#if chosed}} chosed{{/if}}" data-goods-id="{{goods_id}}">{{factory_goods_name}}</li> 29 + <li class="block{{#if chosed}} chosed{{/if}}" data-id="{{goods_id}}" data-prop="skc">
  30 + {{factory_goods_name}}</li>
30 {{/each}} 31 {{/each}}
31 </ul> 32 </ul>
32 </div> 33 </div>
33 <div class="block-list"> 34 <div class="block-list">
34 - <span class="name">尺码</span>  
35 - <ul class="size-row clearfix"> 35 + <span class="name">{{@root._fullData.skuTitle}}</span>
  36 + <ul class="size-row sku clearfix">
36 {{#each sizeList}} 37 {{#each sizeList}}
37 - <li class="block{{#if chosed}} chosed{{/if}}" data-sku="{{product_sku}}">{{size_name}}</li> 38 + <li class="block{{#if chosed}} chosed{{/if}}" data-sku="{{product_sku}}" data-prop="sku">
  39 + {{size_name}}</li>
38 {{/each}} 40 {{/each}}
39 </ul> 41 </ul>
40 </div> 42 </div>
41 <div class="num"> 43 <div class="num">
42 <span class="name">数量</span> 44 <span class="name">数量</span>
43 <div class="clearfix"> 45 <div class="clearfix">
44 - <a class="btn btn-minus {{#if @root.discountBuy}}discount-gray{{/if}}" href="javascript:void(0);">  
45 - <span class="iconfont {{#if @root.disableNum}}disabled{{/if}}">&#xe625;</span>  
46 - {{!--TODO promotionId => disabled--}} 46 + <a class="btn btn-minus" href="javascript:void(0);">
  47 + <span class="operator iconfont disabled">&#xe625;</span>
47 </a> 48 </a>
48 <input id="good-num" class="good-num disabled" type="text" value="{{@root.buyNumber}}" disabled="true"> 49 <input id="good-num" class="good-num disabled" type="text" value="{{@root.buyNumber}}" disabled="true">
49 <a class="btn btn-plus" href="javascript:void(0);"> 50 <a class="btn btn-plus" href="javascript:void(0);">
50 - <span class="iconfont {{#if @root.disableNum}}disabled{{/if}}">&#xe624;</span> 51 + <span class="operator iconfont disabled">&#xe624;</span>
51 </a> 52 </a>
52 </div> 53 </div>
53 - <input id="left-num" type="hidden" value="0"> 54 + <!--<span class="left-num-discount">即将售罄</span>-->
  55 + <span class="left-num-discount">限购1件</span>
54 </div> 56 </div>
55 </div> 57 </div>
56 </div> 58 </div>
@@ -273,6 +273,7 @@ class GroupProgress extends Page { @@ -273,6 +273,7 @@ class GroupProgress extends Page {
273 }); 273 });
274 } 274 }
275 275
  276 + this.pickData._fullData = data.data;
276 this.pickData.buyNumber = 1; 277 this.pickData.buyNumber = 1;
277 this.pickData.goodsList = data.data.goods_list; 278 this.pickData.goodsList = data.data.goods_list;
278 this.pickData.isSoldOutSoon = isSoldOutSoon; 279 this.pickData.isSoldOutSoon = isSoldOutSoon;
@@ -27,10 +27,9 @@ let $yohoPage = $('.yoho-page'), @@ -27,10 +27,9 @@ let $yohoPage = $('.yoho-page'),
27 $choseArea, 27 $choseArea,
28 $goodNum, 28 $goodNum,
29 $btnMinus, 29 $btnMinus,
  30 + $btnPlus,
30 $thumbImg, 31 $thumbImg,
31 - $choseBtnSure,  
32 - $noChoose,  
33 - $chooseInfo; 32 + $choseBtnSure;
34 33
35 class ChosePanel { 34 class ChosePanel {
36 constructor() { 35 constructor() {
@@ -50,6 +49,12 @@ class ChosePanel { @@ -50,6 +49,12 @@ class ChosePanel {
50 } 49 }
51 Object.assign(this, opt); 50 Object.assign(this, opt);
52 51
  52 + // 数据组装
  53 + if (this.data) {
  54 + this._goodsList = this.data.goodsList || [];
  55 + this._sizeList = (this.data.sizeList || []).slice();
  56 + }
  57 +
53 this._render(); 58 this._render();
54 return new Promise((resolve, reject) => { 59 return new Promise((resolve, reject) => {
55 this._resolve = resolve; 60 this._resolve = resolve;
@@ -72,7 +77,7 @@ class ChosePanel { @@ -72,7 +77,7 @@ class ChosePanel {
72 $yohoPage.append(html); 77 $yohoPage.append(html);
73 } 78 }
74 79
75 - this._setVariable(); 80 + this._setSelector();
76 this._initBlockStatus(); 81 this._initBlockStatus();
77 innerScroll.disableScroll($choseArea); 82 innerScroll.disableScroll($choseArea);
78 } 83 }
@@ -87,38 +92,25 @@ class ChosePanel { @@ -87,38 +92,25 @@ class ChosePanel {
87 */ 92 */
88 _initBlockStatus() { 93 _initBlockStatus() {
89 // 获取sku列表中库存小于最小购买数量的属性，如果在其他sku中它们没有满足购买数量条件的可以灰色 94 // 获取sku列表中库存小于最小购买数量的属性，如果在其他sku中它们没有满足购买数量条件的可以灰色
90 - let noStorageSkus = this.skus.filter(sku => sku.storage < this.minBuyNum);  
91 -  
92 - $chosePanel.find('.thumb').attr('src', this.data.cartInfo.defaultThumb); 95 + let noStorageSkus = this._sizeList.filter(sku => sku.storage_number < 1); // TODO 测试数据恢复
93 96
94 $('.block').removeClass('zero-stock'); 97 $('.block').removeClass('zero-stock');
95 - noStorageSkus.forEach(sku => {  
96 - for (let propType in sku.prop) {  
97 - if (propType) {  
98 - let prop = sku.prop[propType];  
99 - let zeroStock = !this.skus.some(_ => _.prop[propType].valId === prop.valId &&  
100 - _.storage >= this.minBuyNum);  
101 - let $block = $(`.block[data-prop-id="${propType}"][data-value-id="${prop.valId}"]`);  
102 -  
103 - if (zeroStock) { 98 + noStorageSkus.forEach(item => {
  99 + let $block = $(`.block[data-sku='${item.product_sku}']`);
  100 +
104 $block.addClass('zero-stock'); 101 $block.addClass('zero-stock');
105 - } else {  
106 - $block.removeClass('zero-stock');  
107 - }  
108 - }  
109 - } 102 +
110 }); 103 });
111 } 104 }
112 105
113 - _setVariable() { 106 + _setSelector() {
114 $chosePanel = $('.chose-panel'); 107 $chosePanel = $('.chose-panel');
115 $choseArea = $('.chose-panel .main .chose-items'); 108 $choseArea = $('.chose-panel .main .chose-items');
116 $goodNum = $('#good-num'); 109 $goodNum = $('#good-num');
117 $btnMinus = $('.btn-minus'); 110 $btnMinus = $('.btn-minus');
  111 + $btnPlus = $('.btn-plus');
118 $thumbImg = $('.thumb-img'); 112 $thumbImg = $('.thumb-img');
119 - $choseBtnSure = $('#chose-btn-sure');  
120 - $noChoose = $('.not-choose');  
121 - $chooseInfo = $('.choosed-info'); 113 + $choseBtnSure = $('.btn-sure-buynow');
122 } 114 }
123 115
124 _regEvents() { 116 _regEvents() {
@@ -163,7 +155,7 @@ class ChosePanel { @@ -163,7 +155,7 @@ class ChosePanel {
163 let $block = $(e.currentTarget); 155 let $block = $(e.currentTarget);
164 156
165 if ($block.hasClass('chosed')) { 157 if ($block.hasClass('chosed')) {
166 - $block.removeClass('chosed'); 158 + return;
167 } else { 159 } else {
168 $block.addClass('chosed').siblings().removeClass('chosed'); 160 $block.addClass('chosed').siblings().removeClass('chosed');
169 } 161 }
@@ -176,20 +168,18 @@ class ChosePanel { @@ -176,20 +168,18 @@ class ChosePanel {
176 _numClick(e) { 168 _numClick(e) {
177 let buyNum; 169 let buyNum;
178 170
179 - if (this.modes.disableNum) { 171 + buyNum = $(e.currentTarget).hasClass('btn-minus') ? this.data.buyNumber - 1 : this.data.buyNumber + 1;
  172 + if (buyNum < 1) {
  173 + $btnMinus.find('.operator').addClass('disabled');
180 return; 174 return;
181 - }  
182 - buyNum = $(e.currentTarget).hasClass('btn-minus') ? this.buyNum - 1 : this.buyNum + 1;  
183 - if (this._checkSku(buyNum)) {  
184 - this.buyNum = buyNum;  
185 - $goodNum.val(this.buyNum);  
186 - if (this.modes.discount) {  
187 - if (buyNum <= this.minBuyNum) {  
188 - $('.btn-minus').addClass('discount-gray'); 175 + } else if (buyNum === 1) {
  176 + $btnMinus.find('.operator').addClass('disabled');
189 } else { 177 } else {
190 - $('.btn-minus').removeClass('discount-gray');  
191 - } 178 + $btnMinus.find('.operator').removeClass('disabled');
192 } 179 }
  180 + if (this._checkSku(buyNum)) {
  181 + this.data.buyNumber = buyNum;
  182 + $goodNum.val(buyNum);
193 } 183 }
194 } 184 }
195 185
@@ -208,218 +198,82 @@ class ChosePanel { @@ -208,218 +198,82 @@ class ChosePanel {
208 * 点击确定 198 * 点击确定
209 */ 199 */
210 _choseBtnSureClick() { 200 _choseBtnSureClick() {
211 - // let selectSku = this._checkSku(this.buyNum);  
212 - //  
213 - // if (selectSku) {  
214 - // this.close();  
215 - // this._resolve && this._resolve({  
216 - // sku: selectSku,  
217 - // buyNum: this.buyNum,  
218 - // buyNow: buyNow  
219 - // });  
220 - // return false;  
221 - // }  
222 -  
223 - // todo mock  
224 - this.close(); 201 + let skuId = this._checkSku();
  202 +
  203 + if (skuId) {
225 this._resolve && this._resolve({ 204 this._resolve && this._resolve({
226 - sku: {skuId: 693031},  
227 - buyNum: 1, 205 + sku: {skuId},
  206 + buyNum: this.data.buy_number || 1,
228 buyNow: true 207 buyNow: true
229 }); 208 });
230 - 209 + }
231 } 210 }
232 211
233 /** 212 /**
234 - * 验证选择sku的购买数量是否通过 213 + * 验证选择是否通过
235 */ 214 */
236 - _checkSku(buyNum) {  
237 - if ($('.block.chosed.zero-stock').length) {  
238 - return false;  
239 - }  
240 - let validSelects = this.props  
241 - .filter(prop => !$(`.block[data-prop-id="${prop.type}"]`).hasClass('chosed'))  
242 - .map(prop => {  
243 - return prop.name;  
244 - }); 215 + _checkSku() {
  216 + let skcChosed = $('.size-row.skc').find('.block.chosed');
  217 + let skuChosed = $('.size-row.sku').find('.block.chosed');
245 218
246 - if (validSelects.length) {  
247 - tip.show(`请选择${validSelects.join('和')}~`); 219 + if (!skcChosed.length) {
  220 + tip.show(`请选择${ this.data._fullData.skcTitle || '颜色'}`);
248 return false; 221 return false;
249 } 222 }
250 - let selectSku = this._getSelectSku();  
251 -  
252 - if (!selectSku) {  
253 - tip.show('无法选择该属性的商品'); 223 + if (!skuChosed.length) {
  224 + tip.show(`请选择${ this.data._fullData.skuTitle || '尺码'}`);
254 return false; 225 return false;
255 } 226 }
256 - if (this.modes.limit && buyNum > this.maxBuyNum) {  
257 - tip.show('您选择数量大于限购数量~'); 227 + if (skuChosed.length && skuChosed.hasClass('zero-stock')) {
258 return false; 228 return false;
259 } 229 }
260 - if (buyNum > selectSku.storage) {  
261 - tip.show('您选择的数量超过了最大库存量~');  
262 - return false;  
263 - }  
264 - return selectSku; 230 +
  231 + let skuId = skuChosed.data('sku');
  232 +
  233 + return skuId;
265 } 234 }
266 235
267 /** 236 /**
268 * 选择属性 237 * 选择属性
269 */ 238 */
270 _selectBlock($selectBlock) { 239 _selectBlock($selectBlock) {
271 - let that = this;  
272 - let propId = $selectBlock.data('prop-id'),  
273 - valueId = $selectBlock.data('value-id');  
274 - let chosed = $($selectBlock).hasClass('chosed'); 240 + let prop = $selectBlock.data('prop');
275 241
276 if ($('.block.chosed').length === 0) { 242 if ($('.block.chosed').length === 0) {
277 - this._initBlockStatus();  
278 - } else {  
279 - // 根据选择的属性值筛选出符合条件的sku列表，然后遍历其他属性如果在sku列表中不存在该属性值，则灰色  
280 - let filterSkus = this.skus.filter(sku => (!chosed || sku.prop[propId].valId === valueId) &&  
281 - sku.storage >= this.minBuyNum);  
282 - let filterProps = this.props.filter(prop => prop.type !== propId);  
283 -  
284 - filterProps.forEach(prop => {  
285 - $(`.block[data-prop-id="${prop.type}"]`).each((i, ele) => {  
286 - let $block = $(ele);  
287 - let valId = $block.data('value-id');  
288 - let existsSku = filterSkus.some(sku => sku.prop[prop.type].valId === valId);  
289 - let fsku = that.skus.filter(sku => sku.prop[propId].valId === valueId &&  
290 - sku.prop[prop.type].valId === valId);  
291 - let limitTip = '';  
292 -  
293 - if (!existsSku) {  
294 - $block.addClass('zero-stock');  
295 - if (fsku.length && fsku[0].limitBuyTip) {  
296 - limitTip = fsku[0].limitBuyTip;  
297 - }  
298 - } else {  
299 - $block.removeClass('zero-stock'); 243 + return this._initBlockStatus();
300 } 244 }
301 245
302 - $block.data('limittip', limitTip);  
303 - }); 246 + if (prop === 'skc') {
  247 + let id = $selectBlock.data('id');
  248 + let goods = this._goodsList.filter(item => {
  249 + return item.goods_id === id;
304 }); 250 });
305 - }  
306 -  
307 - // this._refreshBlockStatus();  
308 - }  
309 -  
310 - /**  
311 - * 选择属性后刷新其他属性的状态  
312 - */  
313 - _refreshBlockStatus() {  
314 - let selectSku = this._getSelectSku();  
315 - let $zeroChose = $('.block.chosed.zero-stock');  
316 -  
317 - // 设置底部按钮文字  
318 - if ($zeroChose.length) {  
319 - let tipText = '已售罄';  
320 251
321 - if ($zeroChose.data('limittip')) {  
322 - tipText = $zeroChose.data('limittip');  
323 - }  
324 -  
325 - $choseBtnSure.css('background-color', '#c0c0c0').text(tipText);  
326 - } else {  
327 - $choseBtnSure.css('background-color', '#eb0313').text(this.setting.buttonText.text);  
328 - }  
329 -  
330 - // 设置默认购买数量  
331 - this.buyNum = this._defaultBuyNum();  
332 - $goodNum.val(this.buyNum);  
333 - if (this.modes.discount) {  
334 - $btnMinus.addClass('discount-gray');  
335 - }  
336 -  
337 - // 根据颜色属性设置缩略图  
338 - let $colorBlock = $('.block.chosed[data-prop-id="color"]');  
339 -  
340 - if ($colorBlock.length) {  
341 - let colorSkus = this.skus.filter(sku => sku.prop.color &&  
342 - sku.prop.color.valId === $colorBlock.data('value-id'));  
343 -  
344 - if (colorSkus.length) {  
345 - let thumb = colorSkus[0].thumb;  
346 -  
347 - if (!thumb) {  
348 - thumb = this.data.cartInfo.defaultThumb;  
349 - }  
350 - $chosePanel.find('.thumb').attr('src', thumb);  
351 - }  
352 - } 252 + let frag = '';
353 253
354 - // 设置选择属性提示  
355 - let valueList = Array.from($('.block.chosed').map((index, ele) => {  
356 - return $(ele).text();  
357 - })); 254 + goods[0].size_list.forEach(item => {
  255 + frag += `<li class='block ${item.storage_number < 1 ? 'zero-stock' : ''}'
  256 + data-sku='${item.product_sku}' data-prop='sku'>${item.size_name}</li>`;
  257 + });
  258 + $('.size-row.sku').html(frag);
358 259
359 - if (valueList.length) {  
360 - $noChoose.addClass('hide');  
361 - $chooseInfo.removeClass('hide');  
362 - $chooseInfo.text(`已选：${valueList.join('、')}`);  
363 - } else {  
364 - $noChoose.removeClass('hide');  
365 - $chooseInfo.addClass('hide'); 260 + // todo 颜色图修改
  261 + $goodNum.val(1);
  262 + this.data.buy_number = 1;
  263 + $choseBtnSure.css('background-color', '#d0021b').text('确定');
366 } 264 }
367 265
368 - if (selectSku) {  
369 - let numText;  
370 -  
371 - if (selectSku.limitNum) {  
372 - if (selectSku.limitNum) {  
373 - numText = `限购${selectSku.limitNum}件`; 266 + if (prop === 'sku') {
  267 + if ($selectBlock.hasClass('zero-stock')) {
  268 + $choseBtnSure.css('background-color', '#c0c0c0').text('已售罄');
374 } else { 269 } else {
375 - numText = ''; 270 + $goodNum.val(1);
  271 + this.data.buy_number = 1;
  272 + $btnMinus.find('.operator').addClass('disabled');
  273 + $btnPlus.find('.operator').removeClass('disabled');
  274 + $choseBtnSure.css('background-color', '#d0021b').text('确定');
376 } 275 }
377 - } else if (this.modes.soonSoldOut) {  
378 - numText = '即将售罄';  
379 - } else if (selectSku.storage < 4 && selectSku.storage > 0) {  
380 - numText = `剩余${selectSku.storage}件`;  
381 - } else {  
382 - numText = '';  
383 } 276 }
384 - $chosePanel.find('.left-num').text(numText);  
385 - $chosePanel.find('.size-info').text(selectSku.sizeInfo).removeClass('hide');  
386 - $chosePanel.find('.size-rec').text(selectSku.sizeRec || '').removeClass('hide');  
387 - } else {  
388 - $chosePanel.find('.left-num').text('');  
389 - $chosePanel.find('.size-info').text('').addClass('hide');  
390 - $chosePanel.find('.size-rec').text('').addClass('hide');  
391 - }  
392 - }  
393 -  
394 - /**  
395 - * 根据已选择的属性值获得符合条件的sku  
396 - */  
397 - _getSelectSku() {  
398 - let selectValues,  
399 - selectSku;  
400 -  
401 - if ($('.block.chosed').length !== this.props.length) {  
402 - return;  
403 - }  
404 - selectValues = Array.from($('.block.chosed').map((index, ele) => {  
405 - let $block = $(ele);  
406 -  
407 - return {  
408 - propId: $block.data('prop-id'),  
409 - valueId: $block.data('value-id')  
410 - };  
411 - }));  
412 - selectSku = this.skus.filter(sku => {  
413 - return selectValues  
414 - .map(value => {  
415 - return sku.prop[value.propId].valId === value.valueId;  
416 - })  
417 - .filter(match => match).length === this.props.length;  
418 - });  
419 - if (selectSku.length >= 1) {  
420 - return selectSku[0];  
421 - }  
422 - return;  
423 } 277 }
424 } 278 }
425 279