wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit da6af19f9ee3ea4be477a7d155ee29ef5d62010f 1 parent 4c666bbe

加入购物车选尺码颜色的功能修改

Inline Side-by-side
Showing 6 changed files with 230 additions and 88 deletions
@@ -19,8 +19,9 @@ require('./good'); @@ -19,8 +19,9 @@ require('./good');
19 19
20 lazyLoad($('img.lazy')); 20 lazyLoad($('img.lazy'));
21 21
22 -navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);  
23 -navHammer.on('tap', function(e) { 22 +if ($('.cart-nav').length > 0) {
  23 + navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
  24 + navHammer.on('tap', function(e) {
24 var $this = $(e.target).closest('li'); 25 var $this = $(e.target).closest('li');
25 26
26 if ($this.hasClass('active')) { 27 if ($this.hasClass('active')) {
@@ -41,7 +42,8 @@ navHammer.on('tap', function(e) { @@ -41,7 +42,8 @@ navHammer.on('tap', function(e) {
41 42
42 //trigger lazyload 43 //trigger lazyload
43 $(window).trigger('scroll'); 44 $(window).trigger('scroll');
44 -}); 45 + });
  46 +}
45 47
46 $('.btn-balance').on('touchend', function() { 48 $('.btn-balance').on('touchend', function() {
47 window.location.href = '/cart/index/orderEnsure?cartType=' + cartType; 49 window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
@@ -24,7 +24,13 @@ var panelTmpl, @@ -24,7 +24,13 @@ var panelTmpl,
24 $sizeList, 24 $sizeList,
25 firstColorId, 25 firstColorId,
26 colorIndex, 26 colorIndex,
27 - confirming; 27 + confirming,
  28 + hasChooseColor = false,
  29 + hasChooseSize = false,
  30 + curColorIndex,
  31 + curSizeIndex,
  32 + $curSizeRow,
  33 + $sizeRowList = $('.size-list ul');
28 34
29 // 读取模板 35 // 读取模板
30 $.get('/cart/index/giftinfoTpl', function(html) { 36 $.get('/cart/index/giftinfoTpl', function(html) {
@@ -39,45 +45,40 @@ $.get('/cart/index/giftinfoTpl', function(html) { @@ -39,45 +45,40 @@ $.get('/cart/index/giftinfoTpl', function(html) {
39 45
40 //初始化购物车面板显示 46 //初始化购物车面板显示
41 function init() { 47 function init() {
42 - $colorList = $('.chose-panel .color-list ul>li');  
43 - $sizeList = $('.chose-panel .size-list ul>li');  
44 - firstColorId = $colorList.eq(0).data('id');  
45 - $sizeList.each(function() {  
46 - colorIndex = $(this).data('colorid');  
47 -  
48 - if (colorIndex === firstColorId) {  
49 - $(this).removeClass('hide');  
50 - }  
51 - }); 48 + //$colorList = $('.chose-panel .color-list ul>li');
  49 + //$sizeList = $('.chose-panel .size-list ul>li');
  50 + //firstColorId = $colorList.eq(0).data('id');
  51 + //$sizeList.each(function() {
  52 + // colorIndex = $(this).data('colorid');
  53 + //
  54 + // if (colorIndex === firstColorId) {
  55 + // $(this).removeClass('hide');
  56 + // }
  57 + //});
  58 + var $firstRow = $sizeRowList.eq(0);
  59 + //$firstRow.toggleClass('hide');
  60 + $curSizeRow = $firstRow;
52 } 61 }
53 62
54 init(); 63 init();
55 64
56 -//显示  
57 -// function show(data) {  
58 -// // var html = tpl(data);  
59 -// $('.chose-panel').show();  
60 -// // $page.append(html);  
61 -// $('.chose-panel')  
62 -// $num = $('#good-num');  
63 -// }  
64 -  
65 -  
66 -  
67 function show(data) { 65 function show(data) {
68 if (data) { 66 if (data) {
69 $chosePanel.html(panelTmpl(data)); 67 $chosePanel.html(panelTmpl(data));
70 init(); 68 init();
71 } 69 }
  70 +}
72 71
  72 +//显示当前Panel
  73 +function show() {
73 $('.chose-panel').show(); 74 $('.chose-panel').show();
74 75
75 $('body').css('overflow', 'hidden'); 76 $('body').css('overflow', 'hidden');
76 $num = $('#good-num'); 77 $num = $('#good-num');
77 } 78 }
78 79
79 -//移除当前Panel  
80 -function remove() { 80 +//隐藏当前Panel
  81 +function hide() {
81 $('.chose-panel').hide(); 82 $('.chose-panel').hide();
82 $('body').css('overflow', 'auto'); 83 $('body').css('overflow', 'auto');
83 } 84 }
@@ -90,57 +91,130 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -90,57 +91,130 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
90 } 91 }
91 92
92 //点击蒙版消失 93 //点击蒙版消失
93 - remove();  
94 -}).on('touchstart', '#chose-btn-sure', function() { 94 + hide();
  95 +});
95 96
96 - var productSku,  
97 - buyNumber = $('#good-num').val() - 0, 97 +$('.color-list').on('touchstart', '.block', function(e) {
  98 + var $this = $(this),
  99 + $that = $(e.target).closest('.chose-items'),
  100 + numArray,
  101 + index,
  102 + curSelectedSizeBlock,
  103 + i;
98 104
99 - promotionId,  
100 - isEdit = 0,  
101 - numInCart = $('.num-tag').html() - 0; 105 + var $siblingBlock = $this.closest('.block-list').siblings(':first'),
  106 + currentNumArray = ($this.data('numstr') + '').split('/');
102 107
103 - // goodsType,  
104 - // isEdit; 108 + $this.siblings('.chosed').removeClass('chosed');
  109 + index = $this.index();
105 110
106 - $chosed = $('.block-list>ul>li.chosed'); 111 + var $sizeChosed = $siblingBlock.find('.chosed');
  112 + var scindex = $sizeChosed.index();
  113 + $curSizeRow = $sizeRowList.eq(index);
107 114
108 - if (2 === $chosed.length && 0 === $chosed.closest('.zero-stock').length) {  
109 - productSku = $sizeList.closest('.chosed').data('skuid');  
110 - promotionId = $('[data-id="' + productSku + '"]').closest('.advance-block').data('promotion-id');  
111 - if (confirming) {  
112 - return false; 115 + // 当前颜色已经是选中状态,再点击时
  116 + if ($this.hasClass('chosed')) {
  117 +
  118 + //颜色原来已经是勾选时，要清空剩余件数的提示
  119 + $that.find('.num .left-num').html('');
  120 + hasChooseColor = false;
  121 +
  122 + // 当前颜色不是选中状态,选中时
  123 + } else {
  124 + hasChooseColor = true;
  125 +
  126 + //根据颜色切换图片
  127 + if ($this.closest('.block-list').hasClass('color-list')) {
  128 + $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide');
113 } 129 }
114 130
115 - confirming = true;  
116 - loading.showLoadingMask();  
117 - $.ajax({  
118 - method: 'POST',  
119 - url: '/cart/index/add',  
120 - data: {  
121 - productSku: productSku,  
122 - buyNumber: buyNumber,  
123 - promotionId: promotionId,  
124 - isEdit: isEdit 131 + //把当前选中颜色对应的尺码那一行显示出来
  132 + //$sizeRowList.addClass('hide');
  133 + //$curSizeRow.toggleClass('hide');
  134 +
  135 + //之前选中行 对应的尺码去掉勾选样式
  136 + $sizeChosed.removeClass('chosed');
  137 +
  138 + // 当前选中颜色对应的尺码行，其对应的尺码加上 (前提是要判断下这个尺码是否存在)
  139 + curSelectedSizeBlock = $curSizeRow.children().get(scindex);
  140 + if (curSelectedSizeBlock) {
  141 + $(curSelectedSizeBlock).addClass('chosed');
125 } 142 }
126 - }).done(function(res) {  
127 - loading.hideLoadingMask();  
128 - if (res.code === 200) {  
129 - $('.num-tag').html(numInCart + buyNumber);  
130 - $('.num-tag').removeClass('hide');  
131 - remove();  
132 } 143 }
133 - if (res.message) {  
134 - tip.show(res.message); 144 +
  145 + $this.toggleClass('chosed');
  146 + curColorIndex = index;
  147 +
  148 + $chosed = $('.chose-items').find('.chosed');
  149 +
  150 +
  151 + if ($chosed.length === 0) {
  152 + $this.closest('ul>li').each(function() {
  153 + $(this).removeClass('zero-stock');
  154 + if ('0' === $(this).data('num')) {
  155 + $(this).addClass('zero-stock');
  156 + }
  157 + });
  158 +
  159 + $siblingBlock.find('ul>li').each(function() {
  160 + $(this).removeClass('zero-stock');
  161 + if ('0' === $(this).data('num')) {
  162 + $(this).addClass('zero-stock');
135 } 163 }
136 - }).fail(function() {  
137 - tip.show('网络出了点问题~');  
138 - }).always(function() {  
139 - confirming = false;  
140 }); 164 });
  165 + } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
  166 + //if ($this.closest('.block-list').hasClass('color-list')) {
  167 +
  168 + $sizeList.addClass('hide');
  169 +
  170 + //切换尺码信息
  171 + $sizeList.each(function() {
  172 + colorIndex = $(this).data('colorid');
  173 + if (colorIndex === $this.data('id')) {
  174 + $(this).removeClass('hide');
141 } 175 }
  176 + });
  177 + //}
142 178
143 -}).on('touchstart', '.block', function(e) { 179 + numArray = ($chosed.data('numstr') + '').split('/');
  180 + $siblingBlock.find('.block').removeClass('zero-stock');
  181 + for (i = 0; i < numArray.length; i++) {
  182 + if ('0' === numArray[i]) {
  183 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  184 + }
  185 + }
  186 + } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
  187 + $('#chose-btn-sure').css('background-color', '#eb0313');
  188 + $('#chose-btn-sure').html('确定');
  189 +
  190 + $siblingBlock.find('ul>li').each(function() {
  191 + $(this).removeClass('zero-stock');
  192 + if ('0' === $(this).data('num')) {
  193 + $(this).addClass('zero-stock');
  194 + }
  195 + });
  196 + $that.find('.num .left-num').html('');
  197 + } else if ($chosed.length === 2) {
  198 + $siblingBlock.find('.block').removeClass('zero-stock');
  199 + for (i = 0; i < currentNumArray.length; i++) {
  200 + if ('0' === currentNumArray[i]) {
  201 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  202 + }
  203 + }
  204 + numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');
  205 + $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
  206 + if (2 === $chosed.closest('.zero-stock').length) {
  207 + $('#chose-btn-sure').css('background-color', '#c0c0c0');
  208 + $('#chose-btn-sure').html('已售罄');
  209 + } else {
  210 + $('#chose-btn-sure').css('background-color', '#eb0313');
  211 + $('#chose-btn-sure').html('确定');
  212 + }
  213 + }
  214 +
  215 +});
  216 +
  217 +$('.size-list').on('touchstart', '.block', function(e) {
144 var $this = $(this), 218 var $this = $(this),
145 $that = $(e.target).closest('.chose-items'), 219 $that = $(e.target).closest('.chose-items'),
146 numArray, 220 numArray,
@@ -151,26 +225,33 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -151,26 +225,33 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
151 currentNumArray = ($this.data('numstr') + '').split('/'); 225 currentNumArray = ($this.data('numstr') + '').split('/');
152 226
153 $this.siblings('.chosed').removeClass('chosed'); 227 $this.siblings('.chosed').removeClass('chosed');
154 - $this.toggleClass('chosed');  
155 index = $this.index(); 228 index = $this.index();
156 - $chosed = $('.block-list>ul>li.chosed');  
157 229
158 - //根据颜色切换图片  
159 - if ($this.closest('.block-list').hasClass('color-list')) {  
160 - $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide'); 230 + if ($this.hasClass('chosed')) {
  231 +
  232 + //尺码原来已经是勾选时，要清空剩余件数的提示
  233 + $that.find('.num .left-num').html('');
  234 + hasChooseSize = false;
  235 + } else {
  236 + hasChooseSize = true;
161 } 237 }
162 238
  239 + $this.toggleClass('chosed');
  240 + curSizeIndex = index;
  241 +
  242 + $chosed = $('.chose-items').find('.chosed');
  243 +
163 if ($chosed.length === 0) { 244 if ($chosed.length === 0) {
164 $this.closest('ul>li').each(function() { 245 $this.closest('ul>li').each(function() {
165 $(this).removeClass('zero-stock'); 246 $(this).removeClass('zero-stock');
166 - if (0 === $(this).data('num') - 0) { 247 + if ('0' === $(this).data('num')) {
167 $(this).addClass('zero-stock'); 248 $(this).addClass('zero-stock');
168 } 249 }
169 }); 250 });
170 251
171 $siblingBlock.find('ul>li').each(function() { 252 $siblingBlock.find('ul>li').each(function() {
172 $(this).removeClass('zero-stock'); 253 $(this).removeClass('zero-stock');
173 - if (0 === $(this).data('num') - 0) { 254 + if ('0' === $(this).data('num')) {
174 $(this).addClass('zero-stock'); 255 $(this).addClass('zero-stock');
175 } 256 }
176 }); 257 });
@@ -191,7 +272,7 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -191,7 +272,7 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
191 numArray = ($chosed.data('numstr') + '').split('/'); 272 numArray = ($chosed.data('numstr') + '').split('/');
192 $siblingBlock.find('.block').removeClass('zero-stock'); 273 $siblingBlock.find('.block').removeClass('zero-stock');
193 for (i = 0; i < numArray.length; i++) { 274 for (i = 0; i < numArray.length; i++) {
194 - if (0 === numArray[i] - 0) { 275 + if ('0' === numArray[i]) {
195 $siblingBlock.find('.block').eq(i).addClass('zero-stock'); 276 $siblingBlock.find('.block').eq(i).addClass('zero-stock');
196 } 277 }
197 } 278 }
@@ -199,17 +280,17 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -199,17 +280,17 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
199 $('#chose-btn-sure').css('background-color', '#eb0313'); 280 $('#chose-btn-sure').css('background-color', '#eb0313');
200 $('#chose-btn-sure').html('确定'); 281 $('#chose-btn-sure').html('确定');
201 282
202 - $siblingBlock.find('ul>li').each(function() { 283 + /**$siblingBlock.find('ul>li').each(function() {
203 $(this).removeClass('zero-stock'); 284 $(this).removeClass('zero-stock');
204 - if (0 === $(this).data('num') - 0) { 285 + if ('0' === $(this).data('num')) {
205 $(this).addClass('zero-stock'); 286 $(this).addClass('zero-stock');
206 } 287 }
207 }); 288 });
208 - $that.find('.num .left-num').html(''); 289 + $that.find('.num .left-num').html('');*/
209 } else if ($chosed.length === 2) { 290 } else if ($chosed.length === 2) {
210 $siblingBlock.find('.block').removeClass('zero-stock'); 291 $siblingBlock.find('.block').removeClass('zero-stock');
211 for (i = 0; i < currentNumArray.length; i++) { 292 for (i = 0; i < currentNumArray.length; i++) {
212 - if (0 === currentNumArray[i] - 0) { 293 + if ('0' === currentNumArray[i]) {
213 $siblingBlock.find('.block').eq(i).addClass('zero-stock'); 294 $siblingBlock.find('.block').eq(i).addClass('zero-stock');
214 } 295 }
215 } 296 }
@@ -224,8 +305,10 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -224,8 +305,10 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
224 } 305 }
225 } 306 }
226 307
227 -}).on('touchstart', '.btn-minus', function() {  
228 - var num = +$num.val(), 308 +});
  309 +
  310 +$('.btn-minus').on('touchstart', function() {
  311 + var num = $num.val(),
229 $chosed = $('.block-list>ul>li.chosed'), 312 $chosed = $('.block-list>ul>li.chosed'),
230 leftNum = re.exec($('.num .left-num').html()); 313 leftNum = re.exec($('.num .left-num').html());
231 314
@@ -239,11 +322,14 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -239,11 +322,14 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
239 } 322 }
240 323
241 $num.val(num - 1); 324 $num.val(num - 1);
242 -}).on('touchstart', '.btn-plus', function() {  
243 - var num = +$num.val(); 325 +});
  326 +
  327 +$('.btn-plus').on('touchstart', function() {
  328 + var num = $num.val();
244 329
245 //若颜色和尺码没有被同时选中，则不能点击 330 //若颜色和尺码没有被同时选中，则不能点击
246 if ($('.block-list>ul>li.chosed').length < 2) { 331 if ($('.block-list>ul>li.chosed').length < 2) {
  332 + tip.show('请选择颜色和尺码~');
247 return; 333 return;
248 } 334 }
249 leftNum = re.exec($('.num .left-num').html()); 335 leftNum = re.exec($('.num .left-num').html());
@@ -255,5 +341,57 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -255,5 +341,57 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
255 $num.val(num + 1); 341 $num.val(num + 1);
256 }); 342 });
257 343
  344 +$('#chose-btn-sure').on('touchend', function() {
  345 +
  346 + var productSku,
  347 + buyNumber = $('#good-num').val() - 0,
  348 +
  349 + promotionId,
  350 + isEdit = 0,
  351 + numInCart = $('.num-tag').html() - 0;
  352 +
  353 + // goodsType,
  354 + // isEdit;
  355 +
  356 + $chosed = $('.block-list>ul>li.chosed');
  357 +
  358 + if (2 === $chosed.length && 0 === $chosed.closest('.zero-stock').length) {
  359 + productSku = $sizeList.closest('.chosed').data('skuid');
  360 + promotionId = $('[data-id="' + productSku + '"]').closest('.advance-block').data('promotion-id');
  361 + if (confirming) {
  362 + return false;
  363 + }
  364 +
  365 + confirming = true;
  366 + loading.showLoadingMask();
  367 + $.ajax({
  368 + method: 'POST',
  369 + url: '/cart/index/add',
  370 + data: {
  371 + productSku: productSku,
  372 + buyNumber: buyNumber,
  373 + promotionId: promotionId,
  374 + isEdit: isEdit
  375 + }
  376 + }).done(function(res) {
  377 + loading.hideLoadingMask();
  378 + if (res.code === 200) {
  379 + $('.num-tag').html(numInCart + buyNumber);
  380 + $('.num-tag').removeClass('hide');
  381 + confirming = false;
  382 + hide();
  383 + }
  384 + if (res.message) {
  385 + tip.show(res.message);
  386 + }
  387 + }).fail(function() {
  388 + tip.show('网络出了点问题~');
  389 + }).always(function() {
  390 + confirming = false;
  391 + });
  392 + }
  393 +
  394 +});
  395 +
258 exports.init = init; 396 exports.init = init;
259 exports.show = show; 397 exports.show = show;
@@ -124,6 +124,7 @@ $loginBtn.on('touchstart', function() { @@ -124,6 +124,7 @@ $loginBtn.on('touchstart', function() {
124 }); 124 });
125 } else { 125 } else {
126 showErrTip('账号或密码有错误，请重新输入'); 126 showErrTip('账号或密码有错误，请重新输入');
  127 + $loginBtn.text('登录').removeClass('disable');
127 } 128 }
128 }); 129 });
129 130
@@ -126,6 +126,7 @@ $loginBtn.on('touchstart', function() { @@ -126,6 +126,7 @@ $loginBtn.on('touchstart', function() {
126 }); 126 });
127 } else { 127 } else {
128 showErrTip('账号或密码有错误，请重新输入'); 128 showErrTip('账号或密码有错误，请重新输入');
  129 + $loginBtn.text('登录').removeClass('disable');
129 } 130 }
130 }); 131 });
131 132
@@ -33,14 +33,15 @@ @@ -33,14 +33,15 @@
33 </div> 33 </div>
34 <div class="size-list block-list"> 34 <div class="size-list block-list">
35 <span>尺码</span> 35 <span>尺码</span>
36 -  
37 - <ul class="clearfix" data-type="size" >  
38 {{# sizes}} 36 {{# sizes}}
39 - <li class="block hide {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-colorid="{{colorId}}" data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}" data-skuid="{{skuId}}" data-goodid="{{goodsId}}"> 37 + {{# size}}
  38 + <ul class="size-row clearfix" data-type="size" >
  39 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-colorid="{{colorId}}" data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}" data-skuid="{{skuId}}" data-goodid="{{goodsId}}">
40 {{name}} 40 {{name}}
41 </li> 41 </li>
42 - {{/ sizes}}  
43 </ul> 42 </ul>
  43 + {{/ size}}
  44 + {{/ sizes}}
44 </div> 45 </div>
45 <div class="num"> 46 <div class="num">
46 <span>数量</span> 47 <span>数量</span>
@@ -60,6 +61,6 @@ @@ -60,6 +61,6 @@
60 <div class="btn-wrap"> 61 <div class="btn-wrap">
61 <button id="chose-btn-sure" class="btn btn-sure">确定</button> 62 <button id="chose-btn-sure" class="btn btn-sure">确定</button>
62 </div> 63 </div>
63 - </div>  
64 </div> 64 </div>
65 -{{/cartInfo}}  
  65 + </div>
  66 + {{/cartInfo}}
@@ -44,7 +44,6 @@ class DetailController extends AbstractAction @@ -44,7 +44,6 @@ class DetailController extends AbstractAction
44 $this->setTitle($data['goodsName']); 44 $this->setTitle($data['goodsName']);
45 } 45 }
46 $this->setNavHeader('商品详情'); 46 $this->setNavHeader('商品详情');
47 -  
48 // 渲染模板 47 // 渲染模板
49 $this->_view->display('index', $data); 48 $this->_view->display('index', $data);
50 } 49 }