wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit 88d6cc349f8b714dbad4cd3a09c04f95dc724cd6 1 parent 8fdd7852

颜色尺码代码回滚

Inline Side-by-side
Showing 2 changed files with 117 additions and 131 deletions
@@ -18,6 +18,7 @@ var $chosePanel = $('#chose-panel'), @@ -18,6 +18,7 @@ var $chosePanel = $('#chose-panel'),
18 $chosed, 18 $chosed,
19 $imgsThumb, 19 $imgsThumb,
20 $leftNum, 20 $leftNum,
  21 + $leftNumHtml,
21 leftNum, 22 leftNum,
22 confirming, 23 confirming,
23 curColorIndex, 24 curColorIndex,
@@ -26,14 +27,12 @@ var $chosePanel = $('#chose-panel'), @@ -26,14 +27,12 @@ var $chosePanel = $('#chose-panel'),
26 hasChooseSize, 27 hasChooseSize,
27 $curSizeBlock, 28 $curSizeBlock,
28 $sizeRowList, 29 $sizeRowList,
29 - $curColorBlock,  
30 - $colorRowList,  
31 cbFn, 30 cbFn,
32 $allChoseItems, 31 $allChoseItems,
33 queryString, 32 queryString,
34 - $soonSoldOut = $('.soonSoldOut-tag'),  
35 $yohoPage = $('.yoho-page'); 33 $yohoPage = $('.yoho-page');
36 34
  35 +
37 //初始化购物车面板显示 36 //初始化购物车面板显示
38 function init() { 37 function init() {
39 hasChooseColor = false; 38 hasChooseColor = false;
@@ -43,10 +42,9 @@ function init() { @@ -43,10 +42,9 @@ function init() {
43 $imgsThumb = $('.chose-panel').find('.thumb'); 42 $imgsThumb = $('.chose-panel').find('.thumb');
44 $allChoseItems = $('.chose-items'); 43 $allChoseItems = $('.chose-items');
45 $sizeRowList = $('.size-list ul'); 44 $sizeRowList = $('.size-list ul');
46 - $colorRowList = $('.color-list ul');  
47 $leftNum = $('#left-num'); 45 $leftNum = $('#left-num');
48 - curColorIndex = 0;  
49 - curSizeIndex = 0; 46 + $leftNumHtml =
  47 + $sizeRowList.eq(0).toggleClass('hide');
50 } 48 }
51 49
52 function checkColorSizeNum() { 50 function checkColorSizeNum() {
@@ -112,71 +110,37 @@ function updateConformButtonClassAndText() { @@ -112,71 +110,37 @@ function updateConformButtonClassAndText() {
112 } 110 }
113 } 111 }
114 112
115 -//显示剩余件数  
116 -function displayGoodNum(curGoodNum) { 113 +//重置颜色块的库存为0的样式
  114 +function resetColorZeroStock($siblingBlock) {
  115 + var numArray,
  116 + i;
117 117
118 - //数量大于0  
119 - if (curGoodNum > 0) {  
120 - if ($soonSoldOut.length > 0) {  
121 - $allChoseItems.find('.num .left-num').html('即将售罄'); 118 + if (!hasChooseSize) {
  119 + $siblingBlock.find('ul>li').each(function() {
  120 + if (0 === $(this).data('num')) {
  121 + $(this).addClass('zero-stock');
122 } else { 122 } else {
123 - $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件'); 123 + $(this).removeClass('zero-stock');
124 } 124 }
  125 + });
125 126
126 - $leftNum.val(curGoodNum);  
127 -  
128 - //数量小于0  
129 } else { 127 } else {
130 - $allChoseItems.find('.num .left-num').html('');  
131 - $leftNum.val(0);  
132 - }  
133 -}  
134 -  
135 -//老的选中尺码去掉勾选,新的选中尺码加上勾选  
136 -function changeSizeChosed(newSizeIndex) {  
137 - var sizes,  
138 - queryString,  
139 - i;  
140 -  
141 - if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {  
142 - $curSizeBlock.removeClass('chosed');  
143 - sizes = $sizeRowList.eq(newSizeIndex).children();  
144 - for (i = 0; i < sizes.length; i++) {  
145 - if ($(sizes[i]).data('name') === $curSizeBlock.data('name')) {  
146 - $curSizeBlock = $(sizes[i]);  
147 - queryString = '#' + $curSizeBlock.data('name');  
148 - curColorIndex = $(queryString).data('index');  
149 - $curSizeBlock.addClass('chosed');  
150 - return $curSizeBlock.data('num'); 128 + numArray = ($curSizeBlock.data('numstr') + '').split('/');
  129 + for (i = 0; i < numArray.length; i++) {
  130 + if ('0' === numArray[i]) {
  131 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  132 + } else {
  133 + $siblingBlock.find('.block').eq(i).removeClass('zero-stock');
151 } 134 }
152 } 135 }
153 -  
154 - //特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述1,2,3  
155 - // 1.重置尺码选择的标志变量.  
156 - $curSizeBlock = null;  
157 - hasChooseSize = false;  
158 -  
159 - // 2.当前颜色行隐藏  
160 - $colorRowList.eq(curColorIndex).addClass('hide');  
161 -  
162 - // 3.目标颜色行第一行显示  
163 - $colorRowList.eq(0).removeClass('hide');  
164 - curColorIndex = 0;  
165 -  
166 - return -1;  
167 } 136 }
168 - return 0;  
169 } 137 }
170 138
171 -//老的选中颜色去掉勾选,新的选中颜色加上勾选  
172 -function changeColorChosed(newColorIndex) {  
173 - if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {  
174 - $curColorBlock.removeClass('chosed');  
175 - $curColorBlock = $($colorRowList.eq(newColorIndex).children().get(curSizeIndex - 1));  
176 - $curColorBlock.addClass('chosed');  
177 - return $curColorBlock.data('num'); 139 +// 选择了颜色切换商品图片
  140 +function changeGoodImgWhenClickColor() {
  141 + if (hasChooseColor && curColorIndex >= 0) {
  142 + $imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
178 } 143 }
179 - return 0;  
180 } 144 }
181 145
182 init(); 146 init();
@@ -194,117 +158,135 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) { @@ -194,117 +158,135 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) {
194 158
195 $yohoPage.on('touchstart', '.color-list .block', function() { 159 $yohoPage.on('touchstart', '.color-list .block', function() {
196 var $this = $(this), 160 var $this = $(this),
197 - index = $this.index(), 161 + index,
  162 + curSizeBlock,
  163 + $preSiblingBlock,
  164 + $curSizeRow,
  165 + numArray,
  166 + i,
198 curGoodNum; 167 curGoodNum;
199 168
  169 + var $siblingBlock = $this.closest('.block-list').siblings(':first');
  170 +
  171 + $this.siblings('.chosed').removeClass('chosed');
  172 + index = $this.index();
  173 +
  174 + $preSiblingBlock = $siblingBlock.find('.chosed');
  175 + $curSizeRow = $sizeRowList.eq(index);
  176 +
200 // 当前颜色已经是选中状态,再点击时 177 // 当前颜色已经是选中状态,再点击时
201 if ($this.hasClass('chosed')) { 178 if ($this.hasClass('chosed')) {
202 179
203 - //清空剩余件数的提示 180 + //颜色原来已经是勾选时，要清空剩余件数的提示
204 $allChoseItems.find('.num .left-num').html(''); 181 $allChoseItems.find('.num .left-num').html('');
205 $leftNum.val(0); 182 $leftNum.val(0);
206 hasChooseColor = false; 183 hasChooseColor = false;
207 184
208 - //当前尺码行隐藏  
209 - $sizeRowList.eq(curSizeIndex).addClass('hide');  
210 -  
211 - //目标尺码行显示  
212 - $sizeRowList.eq(0).removeClass('hide');  
213 -  
214 - curSizeIndex = 0;  
215 -  
216 - //老的选中尺码去掉勾选,新的选中尺码加上勾选  
217 - changeSizeChosed(0); 185 + $this.removeClass('zero-stock');
  186 + if ($curSizeBlock) {
  187 + numArray = ($curSizeBlock.data('numstr') + '').split('/');
  188 + for (i = 0; i < numArray.length; i++) {
  189 + if ('0' === numArray[i]) {
  190 + $('.color-list .block').eq(i).addClass('zero-stock');
  191 + }
  192 + }
  193 + }
218 194
219 // 当前颜色不是选中状态,选中时 195 // 当前颜色不是选中状态,选中时
220 } else { 196 } else {
221 hasChooseColor = true; 197 hasChooseColor = true;
222 198
223 - // 尺码行当前行隐藏  
224 - $sizeRowList.eq(curSizeIndex).addClass('hide');  
225 -  
226 - //老的选中尺码去掉勾选,新的选中尺码加上勾选  
227 - curGoodNum = changeSizeChosed(index + 1);  
228 -  
229 - // 显示剩余数量  
230 - displayGoodNum(curGoodNum); 199 + //把当前选中颜色对应的尺码那一行显示出来
  200 + $sizeRowList.addClass('hide');
  201 + $curSizeRow.removeClass('hide').addClass('show');
231 202
232 - //尺码对应行显示  
233 - $sizeRowList.eq(index + 1).removeClass('hide');  
234 -  
235 - curSizeIndex = index + 1;  
236 - $curColorBlock = $this;  
237 -  
238 - // 修改颜色时修改商品图片  
239 - $imgsThumb.addClass('hide').eq(index).removeClass('hide'); 203 + // 之前选中的尺码去掉勾选样式
  204 + if ($preSiblingBlock.length > 0) {
  205 + $preSiblingBlock.removeClass('chosed');
  206 + curSizeBlock = $curSizeRow.children().get(curSizeIndex);
  207 + $curSizeBlock = $(curSizeBlock);
240 } 208 }
241 209
242 - // 颜色块切换勾选样式  
243 - $this.siblings('.chosed').removeClass('chosed'); 210 + // 当前选中颜色对应的尺码行，其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
  211 + if (curSizeBlock) {
  212 + curGoodNum = $(curSizeBlock).data('num');
  213 + $(curSizeBlock).addClass('chosed');
244 214
245 - // 特殊处理  
246 - if (-1 === curGoodNum) {  
247 - $curColorBlock = $($colorRowList.eq(0).children().get(index));  
248 - $curColorBlock.addClass('chosed'); 215 + //如果当前有尺码被选中，且数量等于0,则颜色块添加数量为0的样式
  216 + if (curGoodNum > 0) {
  217 + $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
  218 + $leftNum.val(curGoodNum);
249 } else { 219 } else {
250 - $this.toggleClass('chosed'); 220 + $allChoseItems.find('.num .left-num').html('');
  221 + $leftNum.val(0);
  222 + }
  223 + }
251 } 224 }
252 225
  226 + // 当前颜色块 切换勾选样式
  227 + $this.toggleClass('chosed');
  228 + curColorIndex = index;
253 $('#good-num').val(1); 229 $('#good-num').val(1);
254 230
  231 + // 修改颜色时修改商品图片
  232 + changeGoodImgWhenClickColor();
  233 +
255 // 设置按钮的样式和文字 234 // 设置按钮的样式和文字
256 updateConformButtonClassAndText(); 235 updateConformButtonClassAndText();
257 }).on('touchstart', '.size-list .block', function() { 236 }).on('touchstart', '.size-list .block', function() {
258 var $this = $(this), 237 var $this = $(this),
259 index, 238 index,
  239 + $curSizeRow,
260 curGoodNum; 240 curGoodNum;
261 241
  242 + var $siblingBlock = $this.closest('.block-list').siblings(':first');
  243 +
  244 + $this.siblings('.chosed').removeClass('chosed');
  245 + index = $this.index();
  246 + $curSizeRow = $sizeRowList.eq(index);
  247 +
262 // 当前尺码已经是选中状态,再点击时 248 // 当前尺码已经是选中状态,再点击时
263 if ($this.hasClass('chosed')) { 249 if ($this.hasClass('chosed')) {
264 250
265 - //清空剩余件数的提示 251 + //尺码原来已经是勾选时，要清空剩余件数的提示
266 $allChoseItems.find('.num .left-num').html(''); 252 $allChoseItems.find('.num .left-num').html('');
267 - $leftNum.val(0); 253 + $('#left-num').val(0);
268 hasChooseSize = false; 254 hasChooseSize = false;
269 -  
270 - //当前颜色行隐藏  
271 - $colorRowList.eq(curColorIndex).addClass('hide');  
272 -  
273 - //目标颜色行显示  
274 - $colorRowList.eq(0).removeClass('hide');  
275 -  
276 - curColorIndex = 0;  
277 -  
278 - //老的选中颜色去掉勾选,新的选中颜色加上勾选  
279 - changeColorChosed(0); 255 + curSizeIndex = null;
  256 + $curSizeBlock = null;
280 257
281 // 当前尺码不是选中状态,选中时 258 // 当前尺码不是选中状态,选中时
282 } else { 259 } else {
283 hasChooseSize = true; 260 hasChooseSize = true;
  261 + curGoodNum = $this.data('num');
284 262
285 - index = $('#' + $this.data('name')).data('index') - 1;  
286 -  
287 - // 颜色当前行隐藏  
288 - $colorRowList.eq(curColorIndex).addClass('hide');  
289 -  
290 - //老的选中颜色去掉勾选,新的选中颜色加上勾选  
291 - curGoodNum = changeColorChosed(index + 1);  
292 -  
293 - // 显示剩余数量  
294 - displayGoodNum(curGoodNum); 263 + // 之前选中的尺码去掉勾选样式
  264 + if ($curSizeBlock) {
  265 + $curSizeBlock.removeClass('chosed');
  266 + }
295 267
296 - //颜色对应行显示  
297 - $colorRowList.eq(index + 1).removeClass('hide'); 268 + // 如果当前有尺码被选中，且数量等于0, 否则显示剩余件数
  269 + if (curGoodNum > 0 && hasChooseColor) {
  270 + $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
  271 + $('#left-num').val(curGoodNum);
  272 + } else {
  273 + $allChoseItems.find('.num .left-num').html('');
  274 + $('#left-num').val(0);
  275 + }
298 276
299 - curColorIndex = index + 1; 277 + if (curGoodNum === 0 && hasChooseColor) {
  278 + $this.addClass('zero-stock');
  279 + }
  280 + curSizeIndex = index;
300 $curSizeBlock = $this; 281 $curSizeBlock = $this;
301 } 282 }
302 283
303 - // 颜色块切换勾选样式  
304 - $this.siblings('.chosed').removeClass('chosed');  
305 $this.toggleClass('chosed'); 284 $this.toggleClass('chosed');
306 $('#good-num').val(1); 285 $('#good-num').val(1);
307 286
  287 + // 重置颜色块的样式
  288 + resetColorZeroStock($siblingBlock);
  289 +
308 // 设置按钮的样式和文字 290 // 设置按钮的样式和文字
309 updateConformButtonClassAndText(); 291 updateConformButtonClassAndText();
310 }); 292 });
@@ -4,7 +4,11 @@ @@ -4,7 +4,11 @@
4 <div class="infos"> 4 <div class="infos">
5 <div class="basic-info" > 5 <div class="basic-info" >
6 {{#thumbs}} 6 {{#thumbs}}
7 - <img class="thumb {{#unless @first}}hide{{/if}}" src={{img}}> 7 + {{#if @first}}
  8 + <img class="thumb" src={{img}}>
  9 + {{else}}
  10 + <img class="thumb hide" src={{img}}>
  11 + {{/if}}
8 {{/thumbs}} 12 {{/thumbs}}
9 <div class="text-info"> 13 <div class="text-info">
10 <p class="name">{{name}}</p> 14 <p class="name">{{name}}</p>
@@ -19,26 +23,26 @@ @@ -19,26 +23,26 @@
19 <div class="chose-items"> 23 <div class="chose-items">
20 <div class="color-list block-list"> 24 <div class="color-list block-list">
21 <span>颜色</span> 25 <span>颜色</span>
  26 + <ul class="clearfix" data-type="color">
22 {{# colors}} 27 {{# colors}}
23 - <ul id="{{sizeName}}" data-index="{{@index}}" class="size-row clearfix {{#unless @first}}hide{{/if}}">  
24 - {{# color}}  
25 - <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}"> 28 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-id="{{id}}" data-numstr="{{sizeNumStr}}" data-skcid="{{skcId}}">
26 {{name}} 29 {{name}}
27 </li> 30 </li>
28 - {{/ color}}  
29 - </ul>  
30 {{/ colors}} 31 {{/ colors}}
  32 + </ul>
31 </div> 33 </div>
32 <div class="size-list block-list"> 34 <div class="size-list block-list">
33 <span>尺码</span> 35 <span>尺码</span>
34 {{# sizes}} 36 {{# sizes}}
35 - <ul id="{{sizeName}}" data-index="{{@index}}" class="size-row clearfix {{#unless @first}}hide{{/if}}"> 37 +
  38 + <ul class="size-row clearfix hide">
36 {{# size}} 39 {{# size}}
37 - <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-num="{{sizeNum}}" data-name="{{name}}" data-skuid="{{skuId}}"> 40 + <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}}">
38 {{name}} 41 {{name}}
39 </li> 42 </li>
40 {{/ size}} 43 {{/ size}}
41 </ul> 44 </ul>
  45 +
42 {{/ sizes}} 46 {{/ sizes}}
43 </div> 47 </div>
44 <p> 48 <p>