fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by 梁志锋
Commit 26cb79a77865c97de8938f809d0c9015113a1f78 1 parent 60f943d2

购物车尺码颜色选择

Inline Side-by-side
Showing 2 changed files with 50 additions and 207 deletions
1 -/**  
2 - * 购物车信息读取  
3 - * @author: liangzhifeng<zhifeng.liang@yoho.cn>  
4 - * @date: 2015/12/15  
5 - */  
6 -var info = window.cookie('cart-info');  
7 -  
8 -// info 必须是 JSON 字符串  
9 -try {  
10 - info = JSON.parse(info);  
11 -} catch (e) {  
12 - info = {  
13 - deliveryId: null,  
14 - deliveryTimeId: null,  
15 - paymentTypeId: null,  
16 - yohoCoin: null,  
17 - addressId: null,  
18 - couponCode: null,  
19 - couponValue: null,  
20 - invoice: null,  
21 - invoiceText: null,  
22 - invoiceType: null,  
23 - msg: null  
24 - };  
25 - window.setCookie('cart-info', JSON.stringify(info));  
26 -}  
27 -  
28 -exports.cartInfo = function(key, value) {  
29 - if (value === undefined) {  
30 - return info[key];  
31 - }  
32 - info[key] = value;  
33 - window.setCookie('cart-info', JSON.stringify(info));  
34 -};  
@@ -28,6 +28,7 @@ var panelTmpl, @@ -28,6 +28,7 @@ var panelTmpl,
28 curSizeIndex, 28 curSizeIndex,
29 $curSizeRow, 29 $curSizeRow,
30 $curSizeBlock = null, 30 $curSizeBlock = null,
  31 + firstColorId,
31 $sizeRowList = $('.size-list ul'); 32 $sizeRowList = $('.size-list ul');
32 33
33 // 读取模板 34 // 读取模板
@@ -43,18 +44,6 @@ $.get('/cart/index/giftinfoTpl', function(html) { @@ -43,18 +44,6 @@ $.get('/cart/index/giftinfoTpl', function(html) {
43 44
44 //初始化购物车面板显示 45 //初始化购物车面板显示
45 function init() { 46 function init() {
46 -  
47 - //$colorList = $('.chose-panel .color-list ul>li');  
48 - //$sizeList = $('.chose-panel .size-list ul>li');  
49 - //firstColorId = $colorList.eq(0).data('id');  
50 - //$sizeList.each(function() {  
51 - // colorIndex = $(this).data('colorid');  
52 - //  
53 - // if (colorIndex === firstColorId) {  
54 - // $(this).removeClass('hide');  
55 - // }  
56 - //});  
57 -  
58 var $firstRow = $sizeRowList.eq(0); 47 var $firstRow = $sizeRowList.eq(0);
59 48
60 $firstRow.toggleClass('hide'); 49 $firstRow.toggleClass('hide');
@@ -87,21 +76,53 @@ function show(data) { @@ -87,21 +76,53 @@ function show(data) {
87 $('body').css('overflow', 'hidden'); 76 $('body').css('overflow', 'hidden');
88 $num = $('#good-num'); 77 $num = $('#good-num');
89 } 78 }
90 -  
91 -////显示当前Panel  
92 -//function show() {  
93 -// $('.chose-panel').show();  
94 -//  
95 -// $('body').css('overflow', 'hidden');  
96 -// $num = $('#good-num');  
97 -//}  
98 - 79 +
99 //隐藏当前Panel 80 //隐藏当前Panel
100 function hide() { 81 function hide() {
101 $('.chose-panel').hide(); 82 $('.chose-panel').hide();
102 $('body').css('overflow', 'auto'); 83 $('body').css('overflow', 'auto');
103 } 84 }
104 85
  86 +//修改加入购物车的文字和背景
  87 +function updateConformButtonClassAndText() {
  88 + $chosed = $('.chose-items').find('.chosed');
  89 + if (2 === $chosed.closest('.zero-stock').length) {
  90 + $('#chose-btn-sure').css('background-color', '#c0c0c0');
  91 + $('#chose-btn-sure').html('已售罄');
  92 + } else {
  93 + $('#chose-btn-sure').css('background-color', '#eb0313');
  94 + $('#chose-btn-sure').html('确定');
  95 + }
  96 +}
  97 +
  98 +//重置颜色块的库存为0的样式
  99 +function resetColorZeroStock($siblingBlock) {
  100 +
  101 + var numArray = ($curSizeBlock.data('numstr') + '').split('/');
  102 + if (!hasChooseSize) {
  103 + $siblingBlock.find('ul>li').each(function() {
  104 + $(this).removeClass('zero-stock');
  105 + if ('0' === $(this).data('num')) {
  106 + $(this).addClass('zero-stock');
  107 + }
  108 + });
  109 +
  110 + } else {
  111 + for (var i = 0; i < numArray.length; i++) {
  112 + if ('0' === numArray[i]) {
  113 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  114 + }
  115 + }
  116 + }
  117 +}
  118 +
  119 +// 选择了颜色切换商品图片
  120 +function changeGoodImgWhenClickColor() {
  121 + if (hasChooseColor && curColorIndex) {
  122 + $('.chose-panel').find('.thumb').addClass('hide').eq(curColorIndex).removeClass('hide');
  123 + }
  124 +}
  125 +
105 $('.yoho-page').on('touchstart', '.chose-panel', function(e) { 126 $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
106 var $cur = $(e.target); 127 var $cur = $(e.target);
107 128
@@ -143,11 +164,6 @@ $('.color-list').on('touchstart', '.block', function(e) { @@ -143,11 +164,6 @@ $('.color-list').on('touchstart', '.block', function(e) {
143 } else { 164 } else {
144 hasChooseColor = true; 165 hasChooseColor = true;
145 166
146 - //根据颜色切换图片  
147 - if ($this.closest('.block-list').hasClass('color-list')) {  
148 - $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide');  
149 - }  
150 -  
151 //把当前选中颜色对应的尺码那一行显示出来 167 //把当前选中颜色对应的尺码那一行显示出来
152 $sizeRowList.addClass('hide'); 168 $sizeRowList.addClass('hide');
153 $curSizeRow.removeClass('hide').addClass('show'); 169 $curSizeRow.removeClass('hide').addClass('show');
@@ -180,75 +196,7 @@ $('.color-list').on('touchstart', '.block', function(e) { @@ -180,75 +196,7 @@ $('.color-list').on('touchstart', '.block', function(e) {
180 curColorIndex = index; 196 curColorIndex = index;
181 197
182 // 设置按钮的样式和文字 198 // 设置按钮的样式和文字
183 - $chosed = $('.chose-items').find('.chosed');  
184 - if (2 === $chosed.closest('.zero-stock').length) {  
185 - $('#chose-btn-sure').css('background-color', '#c0c0c0');  
186 - $('#chose-btn-sure').html('已售罄');  
187 - } else {  
188 - $('#chose-btn-sure').css('background-color', '#eb0313');  
189 - $('#chose-btn-sure').html('确定');  
190 - }  
191 -  
192 - /**if ($chosed.length === 0) {  
193 - $this.closest('ul>li').each(function() {  
194 - $(this).removeClass('zero-stock');  
195 - if ('0' === $(this).data('num')) {  
196 - $(this).addClass('zero-stock');  
197 - }  
198 - });  
199 -  
200 - $siblingBlock.find('ul>li').each(function() {  
201 - $(this).removeClass('zero-stock');  
202 - if ('0' === $(this).data('num')) {  
203 - $(this).addClass('zero-stock');  
204 - }  
205 - });  
206 - } else if ($chosed.length === 1 && $this.hasClass('chosed')) {  
207 - $sizeList.addClass('hide');  
208 -  
209 - //切换尺码信息  
210 - $sizeList.each(function() {  
211 - colorIndex = $(this).data('colorid');  
212 - if (colorIndex === $this.data('id')) {  
213 - $(this).removeClass('hide');  
214 - }  
215 - });  
216 -  
217 - numArray = ($chosed.data('numstr') + '').split('/');  
218 - $siblingBlock.find('.block').removeClass('zero-stock');  
219 - for (i = 0; i < numArray.length; i++) {  
220 - if ('0' === numArray[i]) {  
221 - $siblingBlock.find('.block').eq(i).addClass('zero-stock');  
222 - }  
223 - }  
224 - } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {  
225 - $('#chose-btn-sure').css('background-color', '#eb0313');  
226 - $('#chose-btn-sure').html('确定');  
227 -  
228 - $siblingBlock.find('ul>li').each(function() {  
229 - $(this).removeClass('zero-stock');  
230 - if ('0' === $(this).data('num')) {  
231 - $(this).addClass('zero-stock');  
232 - }  
233 - });  
234 - $that.find('.num .left-num').html('');  
235 - } else if ($chosed.length === 2) {  
236 - $siblingBlock.find('.block').removeClass('zero-stock');  
237 - for (i = 0; i < currentNumArray.length; i++) {  
238 - if ('0' === currentNumArray[i]) {  
239 - $siblingBlock.find('.block').eq(i).addClass('zero-stock');  
240 - }  
241 - }  
242 - numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');  
243 - $that.find('.num .left-num').html('剩余' + numArray[index] + '件');  
244 - if (2 === $chosed.closest('.zero-stock').length) {  
245 - $('#chose-btn-sure').css('background-color', '#c0c0c0');  
246 - $('#chose-btn-sure').html('已售罄');  
247 - } else {  
248 - $('#chose-btn-sure').css('background-color', '#eb0313');  
249 - $('#chose-btn-sure').html('确定');  
250 - }  
251 - }**/ 199 + updateConformButtonClassAndText();
252 200
253 }); 201 });
254 202
@@ -264,7 +212,7 @@ $('.size-list').on('touchstart', '.block', function(e) { @@ -264,7 +212,7 @@ $('.size-list').on('touchstart', '.block', function(e) {
264 $this.siblings('.chosed').removeClass('chosed'); 212 $this.siblings('.chosed').removeClass('chosed');
265 index = $this.index(); 213 index = $this.index();
266 214
267 - $colorChosed = $siblingBlock.find('.chosed'); 215 + //$colorChosed = $siblingBlock.find('.chosed');
268 $curSizeRow = $sizeRowList.eq(index); 216 $curSizeRow = $sizeRowList.eq(index);
269 217
270 // 当前尺码已经是选中状态,再点击时 218 // 当前尺码已经是选中状态,再点击时
@@ -275,11 +223,6 @@ $('.size-list').on('touchstart', '.block', function(e) { @@ -275,11 +223,6 @@ $('.size-list').on('touchstart', '.block', function(e) {
275 $('#left-num').val(0); 223 $('#left-num').val(0);
276 hasChooseSize = false; 224 hasChooseSize = false;
277 225
278 - // 去掉已经选中颜色的 数量为0的样式  
279 - if ($colorChosed.length > 0) {  
280 - $colorChosed.removeClass('zero-stock').addClass('zero-stock');  
281 - }  
282 -  
283 // 当前尺码不是选中状态,选中时 226 // 当前尺码不是选中状态,选中时
284 } else { 227 } else {
285 hasChooseSize = true; 228 hasChooseSize = true;
@@ -296,10 +239,12 @@ $('.size-list').on('touchstart', '.block', function(e) { @@ -296,10 +239,12 @@ $('.size-list').on('touchstart', '.block', function(e) {
296 $that.find('.num .left-num').html('剩余' + curGoodNum + '件'); 239 $that.find('.num .left-num').html('剩余' + curGoodNum + '件');
297 $('#left-num').val(curGoodNum); 240 $('#left-num').val(curGoodNum);
298 } else { 241 } else {
299 - $colorChosed.removeClass('zero-stock').addClass('zero-stock'); 242 +
  243 + //$colorChosed.removeClass('zero-stock').addClass('zero-stock');
300 $that.find('.num .left-num').html(''); 244 $that.find('.num .left-num').html('');
301 $('#left-num').val(0); 245 $('#left-num').val(0);
302 } 246 }
  247 +
303 } 248 }
304 249
305 $this.toggleClass('chosed'); 250 $this.toggleClass('chosed');
@@ -307,78 +252,10 @@ $('.size-list').on('touchstart', '.block', function(e) { @@ -307,78 +252,10 @@ $('.size-list').on('touchstart', '.block', function(e) {
307 $curSizeBlock = $this; 252 $curSizeBlock = $this;
308 253
309 // 设置按钮的样式和文字 254 // 设置按钮的样式和文字
310 - $chosed = $('.chose-items').find('.chosed');  
311 - if (2 === $chosed.closest('.zero-stock').length) {  
312 - $('#chose-btn-sure').css('background-color', '#c0c0c0');  
313 - $('#chose-btn-sure').html('已售罄');  
314 - } else {  
315 - $('#chose-btn-sure').css('background-color', '#eb0313');  
316 - $('#chose-btn-sure').html('确定');  
317 - }  
318 -  
319 - /**if ($chosed.length === 0) {  
320 - $this.closest('ul>li').each(function() {  
321 - $(this).removeClass('zero-stock');  
322 - if ('0' === $(this).data('num')) {  
323 - $(this).addClass('zero-stock');  
324 - }  
325 - });  
326 -  
327 - $siblingBlock.find('ul>li').each(function() {  
328 - $(this).removeClass('zero-stock');  
329 - if ('0' === $(this).data('num')) {  
330 - $(this).addClass('zero-stock');  
331 - }  
332 - });  
333 - } else if ($chosed.length === 1 && $this.hasClass('chosed')) {  
334 - if ($this.closest('.block-list').hasClass('color-list')) {  
335 -  
336 - $sizeList.addClass('hide');  
337 -  
338 - //切换尺码信息  
339 - $sizeList.each(function() {  
340 - colorIndex = $(this).data('colorid');  
341 - if (colorIndex === $this.data('id')) {  
342 - $(this).removeClass('hide');  
343 - }  
344 - });  
345 - }  
346 -  
347 - numArray = ($chosed.data('numstr') + '').split('/');  
348 - $siblingBlock.find('.block').removeClass('zero-stock');  
349 - for (i = 0; i < numArray.length; i++) {  
350 - if ('0' === numArray[i]) {  
351 - $siblingBlock.find('.block').eq(i).addClass('zero-stock');  
352 - }  
353 - }  
354 - } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {  
355 - $('#chose-btn-sure').css('background-color', '#eb0313');  
356 - $('#chose-btn-sure').html('确定'); 255 + updateConformButtonClassAndText();
357 256
358 - $siblingBlock.find('ul>li').each(function() {  
359 - $(this).removeClass('zero-stock');  
360 - if ('0' === $(this).data('num')) {  
361 - $(this).addClass('zero-stock');  
362 - }  
363 - });  
364 - $that.find('.num .left-num').html('');  
365 - } else if ($chosed.length === 2) {  
366 - $siblingBlock.find('.block').removeClass('zero-stock');  
367 - for (i = 0; i < currentNumArray.length; i++) {  
368 - if ('0' === currentNumArray[i]) {  
369 - $siblingBlock.find('.block').eq(i).addClass('zero-stock');  
370 - }  
371 - }  
372 - numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');  
373 - $that.find('.num .left-num').html('剩余' + numArray[index] + '件');  
374 - if (2 === $chosed.closest('.zero-stock').length) {  
375 - $('#chose-btn-sure').css('background-color', '#c0c0c0');  
376 - $('#chose-btn-sure').html('已售罄');  
377 - } else {  
378 - $('#chose-btn-sure').css('background-color', '#eb0313');  
379 - $('#chose-btn-sure').html('确定');  
380 - }  
381 - }**/ 257 + // 重置颜色块的样式
  258 + resetColorZeroStock($siblingBlock);
382 259
383 }); 260 });
384 261