fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 714d8db89ca733d55946169c5e5a6872a7469dab 1 parent c982608c

good detail logic

Inline Side-by-side
Showing 9 changed files with 727 additions and 111 deletions
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="product-detail-page yoho-page"> 2 <div class="product-detail-page yoho-page">
3 {{# detail}} 3 {{# detail}}
4 -  
5 {{# banner}} 4 {{# banner}}
6 <div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}"> 5 <div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}">
7 <div class="center-content clearfix"> 6 <div class="center-content clearfix">
@@ -25,7 +24,7 @@ @@ -25,7 +24,7 @@
25 {{> layout/path-nav}} 24 {{> layout/path-nav}}
26 25
27 {{# goodInfo}} 26 {{# goodInfo}}
28 - <div class="main clearfix"> 27 + <div class="main clearfix" data-skn="{{skn}}">
29 <div class="pull-left imgs clearfix"> 28 <div class="pull-left imgs clearfix">
30 <div class="pull-left img"> 29 <div class="pull-left img">
31 <div class="tags clearfix"> 30 <div class="tags clearfix">
@@ -56,14 +55,26 @@ @@ -56,14 +55,26 @@
56 {{/ isFew}} 55 {{/ isFew}}
57 {{/ tags}} 56 {{/ tags}}
58 </div> 57 </div>
59 - <img class="img-show" src="{{img}}"> 58 + <img id="img-show" class="img-show" src="{{img}}">
60 </div> 59 </div>
61 - <div class="pull-right thumbs">  
62 - {{# thumbs}}  
63 - <a href="{{url}}">  
64 - <img class="thumb" src="{{img}}">  
65 - </a>  
66 - {{/ thumbs}} 60 + <div id="thumbs" class="pull-right thumbs">
  61 + {{# colors}}
  62 + <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
  63 + {{#if focus}}
  64 + {{# thumbs}}
  65 + <a href="{{url}}">
  66 + <img class="thumb" src="{{img}}" data-shower="{{shower}}">
  67 + </a>
  68 + {{/ thumbs}}
  69 + {{^}}
  70 + {{# thumbs}}
  71 + <a href="{{url}}">
  72 + <img class="thumb lazy" data-original="{{img}}" data-shower="{{shower}}">
  73 + </a>
  74 + {{/ thumbs}}
  75 + {{/if}}
  76 + </div>
  77 + {{/ colors}}
67 </div> 78 </div>
68 </div> 79 </div>
69 <div class="pull-right infos"> 80 <div class="pull-right infos">
@@ -99,83 +110,106 @@ @@ -99,83 +110,106 @@
99 </ul> 110 </ul>
100 {{/if}} 111 {{/if}}
101 112
102 - <div class="chose-color row clearfix">  
103 - <span class="title pull-left">选颜色：</span>  
104 - <ul class="colors pull-left">  
105 - {{#each colors}}  
106 - <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}}" title="{{title}}">  
107 - <img src="{{src}}">  
108 - </li>  
109 - {{/each}}  
110 - </ul>  
111 - </div> 113 + <div class="trade-content">
  114 + <div id="type-chose" class="type-chose">
  115 + <div class="chose-color row clearfix">
  116 + <span class="title pull-left">选颜色：</span>
  117 + <ul class="colors pull-left clearfix">
  118 + {{#each colors}}
  119 + <li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left" title="{{title}}">
  120 + <img src="{{src}}">
  121 + </li>
  122 + {{/each}}
  123 + </ul>
  124 + </div>
112 125
113 - <div class="chose-size row clearfix">  
114 - <span class="title pull-left">选尺码：</span> 126 + <div class="chose-size row clearfix">
  127 + <span class="title pull-left">选尺码：</span>
115 128
116 - <div class="size-wrapper pull-left">  
117 - {{#each colors}}  
118 - <ul class="size {{#unless focus}}hide{{/unless}} clearfix">  
119 - {{#each size}}  
120 - <li {{#if disable}}class="disable"{{/if}} data-title="{{title}}" data-sku="{{sku}}">{{name}}</li> 129 + <div id="sizes" class="size-wrapper pull-left clearfix">
  130 + {{#each colors}}
  131 + <ul class="size {{#unless focus}}hide{{/unless}} clearfix">
  132 + {{#each size}}
  133 + <li {{#unless num}}class="disable"{{/unless}} data-title="{{title}}" data-sku="{{sku}}" data-num="{{num}}">{{name}}</li>
  134 + {{/each}}
  135 + </ul>
121 {{/each}} 136 {{/each}}
122 - </ul>  
123 - {{/each}}  
124 - <span class="size-ruler"></span> 137 + <span class="size-ruler"></span>
125 138
126 - <span class="size-warn hide">  
127 - <i></i>  
128 - 请选择尺码  
129 - </span> 139 + <span class="size-warn hide">
  140 + <i class="iconfont">&#xe62c;</i>
  141 + 请选择尺码
  142 + </span>
130 143
131 - <span class="color-size-tip hide"></span>  
132 - </div>  
133 - </div> 144 + <p class="color-size-tip hide"></p>
  145 + </div>
  146 + </div>
134 147
135 - <div class="chose-count row clearfix">  
136 - <span class="title pull-left">选数量：</span>  
137 - <div class="num-wraper pull-left clearfix">  
138 - <span id="num" class="num pull-left">1</span>  
139 - <span class="minus-plus pull-left">  
140 - <i class="plus iconfont">&#xe610;</i>  
141 - <i class="minus iconfont">&#xe600;</i>  
142 - </span>  
143 - <span class="num-warn hide">  
144 - <i></i>  
145 - 库存不足  
146 - </span>  
147 - </div>  
148 - </div> 148 + <div class="chose-count row clearfix">
  149 + <span class="title pull-left">选数量：</span>
  150 + <div class="num-wraper pull-left clearfix">
  151 + <span id="num" class="num pull-left">1</span>
  152 + <span class="minus-plus pull-left">
  153 + <i id="plus-num" class="plus iconfont">&#xe610;</i>
  154 + <i id="minus-num" class="minus iconfont">&#xe600;</i>
  155 + </span>
  156 + <span id="num-warn" class="num-warn hide">
  157 + <i class="iconfont">&#xe62c;</i>
  158 + 库存不足
  159 + </span>
  160 + </div>
  161 + </div>
149 162
150 - <p class="row">  
151 - <span id="add-to-cart" class="add-to-cart">  
152 - <i class="iconfont">&#xe628;</i>  
153 - 添加到购物车  
154 - </span> 163 + <p class="row">
  164 + <span id="add-to-cart" class="add-to-cart">
  165 + <i class="iconfont">&#xe628;</i>
  166 + 添加到购物车
  167 + </span>
155 168
156 - <span id="collect-product" class="collect-product">  
157 - {{#if coled}}  
158 - <i class="coled iconfont">&#xe616;</i>  
159 - 已收藏  
160 - {{^}}  
161 - <i class="iconfont">&#xe616;</i>  
162 - 收藏商品  
163 - {{/if}}  
164 - </span>  
165 - </p> 169 + <span id="sold-out" class="sold-out hide">
  170 + <i class="iconfont">&#xe62d;</i>
  171 + 已售罄
  172 + </span>
166 173
167 - <p class="share-row">  
168 - <span class="title pull-left">分享商品：</span>  
169 - <span class="share-wrapper pull-left clearfix">  
170 - <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>  
171 - <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>  
172 - <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>  
173 - <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>  
174 - <i class="qq" data-type="qq" title="分享到QQ好友"></i>  
175 - <i class="renren" data-type="renren" title="分享到人人"></i>  
176 - <i class="douban" data-type="douban" class="分享到豆瓣"></i>  
177 - </span>  
178 - </p> 174 + <span id="collect-product" class="{{#if coled}}coled {{/if}}collect-product">
  175 + <i class="iconfont">&#xe616;</i>
  176 + {{#if coled}}
  177 + <em>已收藏</em>
  178 + {{^}}
  179 + <em>收藏商品</em>
  180 + {{/if}}
  181 + </span>
  182 + </p>
  183 +
  184 + <p class="share-row">
  185 + <span class="title pull-left">分享商品：</span>
  186 + <span class="share-wrapper pull-left clearfix">
  187 + <i class="weibo" data-type="weibo" title="分享到新浪微博"></i>
  188 + <i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>
  189 + <i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>
  190 + <i class="qzone" data-type="qzone" title="分享到QQ空间"></i>
  191 + <i class="qq" data-type="qq" title="分享到QQ好友"></i>
  192 + <i class="renren" data-type="renren" title="分享到人人"></i>
  193 + <i class="douban" data-type="douban" class="分享到豆瓣"></i>
  194 + </span>
  195 + </p>
  196 + </div>
  197 +
  198 + <div id="balance" class="balance">
  199 + <p class="success-tip">商品已成功添加到购物车！</p>
  200 + <p class="cart-total">购物车一共有<span id="cart-num">0</span>件商品</p>
  201 + <p class="balance-btns">
  202 + <a class="go-cart" href="{{goCartUrl}}">
  203 + 去购物车结算
  204 + <i class="iconfont">&#xe601;</i>
  205 + </a>
  206 +
  207 + <span id="keep-shopping" class="keep-shopping">
  208 + 继续购物
  209 + </span>
  210 + </p>
  211 + </div>
  212 + </div>
179 </div> 213 </div>
180 </div> 214 </div>
181 {{/ goodInfo}} 215 {{/ goodInfo}}
@@ -212,7 +246,7 @@ @@ -212,7 +246,7 @@
212 {{/if}} 246 {{/if}}
213 {{/ description}} 247 {{/ description}}
214 </div> 248 </div>
215 - <div class="material-content hide"> 249 + <div class="material-content">
216 {{# material}} 250 {{# material}}
217 {{#if detail}} 251 {{#if detail}}
218 <ul class="material-detail clearfix"> 252 <ul class="material-detail clearfix">
@@ -345,23 +379,25 @@ @@ -345,23 +379,25 @@
345 </li> 379 </li>
346 {{/ comments}} 380 {{/ comments}}
347 </ul> 381 </ul>
348 - <p class="more-wrap">  
349 - <span id="load-more-comments" class="load-more">  
350 - 加载更多  
351 - <i class="iconfont">&#xe61d;</i>  
352 - </span>  
353 - </p> 382 + {{#if hasMoreComments}}
  383 + <p class="more-wrap">
  384 + <span class="load-more-comments load-more">
  385 + 加载更多
  386 + <i class="iconfont">&#xe61d;</i>
  387 + </span>
  388 + </p>
  389 + {{/if}}
354 <p class="btn-wrap"> 390 <p class="btn-wrap">
355 - <span id="comment-btn" class="btn"> 391 + <a class="btn" href="{{commentUrl}}" target="_blank">
356 <i class="iconfont">&#xe62a;</i> 392 <i class="iconfont">&#xe62a;</i>
357 我要评论 393 我要评论
358 - </span> 394 + </a>
359 </p> 395 </p>
360 </div> 396 </div>
361 397
362 - <div class="consults content hide"> 398 + <div class="consults content">
363 <h2>顾客咨询（{{consultNum}}）</h2> 399 <h2>顾客咨询（{{consultNum}}）</h2>
364 - <ul id="consult-ul"> 400 + <ul id="consults-ul">
365 {{# consults}} 401 {{# consults}}
366 <li> 402 <li>
367 <div class="user-info clearfix"> 403 <div class="user-info clearfix">
@@ -376,18 +412,36 @@ @@ -376,18 +412,36 @@
376 </li> 412 </li>
377 {{/ consults}} 413 {{/ consults}}
378 </ul> 414 </ul>
379 - <p class="more-wrap">  
380 - <span id="load-more-consults" class="load-more">  
381 - 加载更多  
382 - <i class="iconfont">&#xe61d;</i>  
383 - </span>  
384 - </p> 415 + {{#if hasMoreConsults}}
  416 + <p class="more-wrap">
  417 + <span class="load-more-consults load-more">
  418 + 加载更多
  419 + <i class="iconfont">&#xe61d;</i>
  420 + </span>
  421 + </p>
  422 + {{/if}}
385 <p class="btn-wrap"> 423 <p class="btn-wrap">
386 <span id="consults-btn" class="btn"> 424 <span id="consults-btn" class="btn">
387 <i class="iconfont">&#xe62a;</i> 425 <i class="iconfont">&#xe62a;</i>
388 我要咨询 426 我要咨询
389 </span> 427 </span>
390 </p> 428 </p>
  429 + <div class="new-consult hide">
  430 + <textarea class="my-consult"></textarea>
  431 + <span class="warn-tip">
  432 + <i class="iconfont">&#xe62c;</i>
  433 + 请输入咨询内容
  434 + </span>
  435 + <div class="captcha-row">
  436 + <input class="captcha" type="text">
  437 + <img class="captcha-img" src="http://www.yohobuy.com/passport/images?g=consult">
  438 + <span class="warn-tip">
  439 + <i class="iconfont">&#xe62c;</i>
  440 + 请输入验证码
  441 + </span>
  442 + </div>
  443 + <span id="submit-consult" class="btn submit-consult">提交咨询</span>
  444 + </div>
391 </div> 445 </div>
392 </div> 446 </div>
393 {{/ consultComment}} 447 {{/ consultComment}}
@@ -26,6 +26,13 @@ @@ -26,6 +26,13 @@
26 </script> 26 </script>
27 {{/if}} 27 {{/if}}
28 28
  29 +{{!-- 商品详情页 --}}
  30 +{{#if productDetailPage}}
  31 + <script>
  32 + seajs.use('js/product/item');
  33 + </script>
  34 +{{/if}}
  35 +
29 {{!-- 逛 --}} 36 {{!-- 逛 --}}
30 {{#if guangIndexPage}} 37 {{#if guangIndexPage}}
31 <script> 38 <script>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Mon Dec 21 21:30:54 2015 5 +Created by FontForge 20120731 at Wed Dec 23 15:19:53 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Dec 21 21:30:54 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Dec 21 21:30:54 2015
19 bbox="0 -214 1172.1 864" 19 bbox="0 -214 1172.1 864"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E62B" 22 + unicode-range="U+0078-E62E"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -150,5 +150,14 @@ q-82 0 -156 -32t-127.5 -85.5t-85.5 -127.5t-32 -155q0 -109 54 -201.5t146 -146t200 @@ -150,5 +150,14 @@ q-82 0 -156 -32t-127.5 -85.5t-85.5 -127.5t-32 -155q0 -109 54 -201.5t146 -146t200
150 q10 12 24 26l35 33q15 13 25.5 29.5t10.5 39.5q0 15 -5 27.5t-14 23.5q-5 5 -10.5 8.5t-12.5 6.5t-14.5 4t-16.5 1q-18 0 -32 -6q-5 -3 -9 -5.5t-8 -5.5t-8 -7q-1 -2 -2.5 -3.5t-3 -3.5t-2.5 -3.5t-2 -3.5l-2 -4l-2 -4l-2 -4q-1 -5 -2.5 -10t-2.5 -10t-1 -10l-95 8 150 q10 12 24 26l35 33q15 13 25.5 29.5t10.5 39.5q0 15 -5 27.5t-14 23.5q-5 5 -10.5 8.5t-12.5 6.5t-14.5 4t-16.5 1q-18 0 -32 -6q-5 -3 -9 -5.5t-8 -5.5t-8 -7q-1 -2 -2.5 -3.5t-3 -3.5t-2.5 -3.5t-2 -3.5l-2 -4l-2 -4l-2 -4q-1 -5 -2.5 -10t-2.5 -10t-1 -10l-95 8
151 q5 37 20 66t39 49q12 10 25.5 18t29.5 13q31 10 66 10q33 0 63 -9.5t53 -28.5q6 -5 11 -10t9.5 -11t8 -12.5t7.5 -13.5q13 -27 13 -64q0 -12 -1.5 -23t-3.5 -20q-2 -4 -3 -7.5t-3 -7.5l-2 -6q-2 -4 -4 -7l-4 -6q-10 -16 -24 -30q-5 -5 -10 -9.5t-11 -10t-11 -10.5 151 q5 37 20 66t39 49q12 10 25.5 18t29.5 13q31 10 66 10q33 0 63 -9.5t53 -28.5q6 -5 11 -10t9.5 -11t8 -12.5t7.5 -13.5q13 -27 13 -64q0 -12 -1.5 -23t-3.5 -20q-2 -4 -3 -7.5t-3 -7.5l-2 -6q-2 -4 -4 -7l-4 -6q-10 -16 -24 -30q-5 -5 -10 -9.5t-11 -10t-11 -10.5
152 q-16 -13 -25.5 -23t-15.5 -20t-8 -22q-1 -5 -1.5 -12.5t-0.5 -15.5v-20h-92zM450 56q0 25 18 43t44 18q24 0 43 -17q18 -18 19 -42q0 -13 -5 -23.5t-14 -19.5q-18 -17 -43 -17q-12 0 -23.5 4.5t-20.5 12.5q-8 7 -13 18t-5 23z" /> 152 q-16 -13 -25.5 -23t-15.5 -20t-8 -22q-1 -5 -1.5 -12.5t-0.5 -15.5v-20h-92zM450 56q0 25 18 43t44 18q24 0 43 -17q18 -18 19 -42q0 -13 -5 -23.5t-14 -19.5q-18 -17 -43 -17q-12 0 -23.5 4.5t-20.5 12.5q-8 7 -13 18t-5 23z" />
  153 + <glyph glyph-name="uniE62C" unicode="&#xe62c;"
  154 +d="M505 776q77 0 148.5 -23.5t129 -67t101 -101.5t67.5 -129.5t24 -147.5q0 -64 -17 -125t-47.5 -112t-74 -94.5t-94.5 -74t-112 -47.5t-125 -17q-95 0 -182 37.5t-150 100.5t-100 150t-37 182t37 182t100 150t150 100t182 37zM505 -104q112 0 206.5 55t149.5 149.5
  155 +t55 206.5q0 37 -6.5 73.5t-19.5 69.5t-30.5 64t-40.5 57.5t-49.5 49.5t-57.5 40.5t-64 30t-69.5 19t-73.5 6.5q-111 0 -205.5 -55t-149.5 -149.5t-55 -206t55 -206t149.5 -149.5t205.5 -55zM528 138v-59h-58v59h58zM470 564h58v-349h-58v349z" />
  156 + <glyph glyph-name="uniE62D" unicode="&#xe62d;"
  157 +d="M828 618q65 -65 98 -148t33 -169t-33 -169t-98 -148q-66 -66 -149 -99q-16 -6 -33 -11.5t-33.5 -9t-33.5 -6.5t-34 -4t-35 -1q-43 0 -85 8t-84 24q-82 33 -148 98q-66 66 -98.5 149t-32.5 169t32.5 169t98.5 149q66 65 148.5 97.5t168.5 32.5q15 0 29 -0.5t28 -2.5
  158 +t28.5 -4.5t28.5 -6.5t27.5 -8.5t27.5 -9.5q83 -33 149 -99v0zM258 49q53 -53 118.5 -79t134.5 -26q34 0 68 6.5t67 19.5q65 26 117.5 78.5t78.5 118t26 134.5q0 35 -6.5 68.5t-19.5 66.5q-26 65 -78 118q-53 53 -119 79t-135 26q-23 0 -45.5 -3t-44.5 -9t-44 -14
  159 +q-66 -26 -118 -78.5t-78.5 -118t-26.5 -134.5t26.5 -134.5t78.5 -118.5v0zM748 602l69 -72l-531 -530l-70 70zM748 602z" />
  160 + <glyph glyph-name="uniE62E" unicode="&#xe62e;" horiz-adv-x="1025"
  161 +d="M491 6q9 -10 21.5 -10t21.5 10l357 407q4 5 5.5 9.5t0 8t-6 5.5t-11.5 2h-133q-14 0 -23.5 9.5t-9.5 22.5v261q0 9 -4.5 16.5t-12.5 11.5t-17 4h-333q-14 0 -24 -9.5t-10 -22.5v-261q0 -13 -9.5 -22.5t-23.5 -9.5h-133q-14 0 -17.5 -7.5t5.5 -17.5z" />
153 </font> 162 </font>
154 </defs></svg> 163 </defs></svg>
  1 +/**
  2 + * 商品详情页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/12/23
  5 + */
  6 +
  7 +var $ = require('yoho.jquery'),
  8 + lazyLoad = require('yoho.lazyload');
  9 +
  10 +var $imgShow = $('#img-show'),
  11 + $thumbs = $('#thumbs > .thumb-wrap');
  12 +
  13 +var $size = $('#sizes'),
  14 + $sizes = $size.children('.size'),
  15 + $sizeWarn = $size.children('.size-warn'),
  16 + $colorSizeTip = $size.children('.color-size-tip');
  17 +
  18 +var $num = $('#num'),
  19 + $plusNum = $('#plus-num'),
  20 + $minusNum = $('#minus-num'),
  21 + $numWarn = $('#num-warn');
  22 +
  23 +var $addToCart = $('#add-to-cart'),
  24 + $soldOut = $('#sold-out');
  25 +
  26 +var thumbsLoaded = {};
  27 +
  28 +var skn = $('.main').data('skn');
  29 +
  30 +var maxStock = -1; //记录当前选中的颜色-尺码的库存量，若为-1，代表未选择尺码
  31 +
  32 +var SLIDETIME = 200;
  33 +
  34 +var colTxt = {
  35 + default: '收藏商品',
  36 + coled: '已收藏',
  37 + hover: '取消收藏'
  38 +};
  39 +
  40 +//咨询和评价页数
  41 +var page = {
  42 + comments: 1,
  43 + consults: 1
  44 +};
  45 +
  46 +function imgShow(src) {
  47 + $imgShow.attr('src', src);
  48 +}
  49 +
  50 +/**
  51 + * 获取当前选择的商品数目
  52 + * @return [Number]
  53 + */
  54 +function getNum() {
  55 + return +$num.text();
  56 +}
  57 +
  58 +//重置Num显示为1
  59 +function resetNum() {
  60 + $num.text('1');
  61 +
  62 + $numWarn.addClass('hide');
  63 +}
  64 +
  65 +//加入购物车和已售罄状态控制
  66 +function switchBtnStatus() {
  67 + if (maxStock === 0) {
  68 + $addToCart.addClass('hide');
  69 + $soldOut.removeClass('hide');
  70 + } else {
  71 +
  72 + //包括默认的-1情况下
  73 + $addToCart.removeClass('hide');
  74 + $soldOut.addClass('hide');
  75 + }
  76 +}
  77 +
  78 +//初始化thumbsLoaded
  79 +thumbsLoaded[$('.colors .focus').index()] = true;
  80 +
  81 +//颜色
  82 +$('.colors').on('click', 'li', function() {
  83 + var $this = $(this),
  84 + index = $this.index();
  85 +
  86 + var $imgs;
  87 +
  88 + if ($this.hasClass('focus')) {
  89 + return;
  90 + }
  91 +
  92 + $this.siblings('.focus').removeClass('focus');
  93 + $this.addClass('focus');
  94 +
  95 + //切换图片显示
  96 + $thumbs.not('.hide').addClass('hide');
  97 + $imgs = $thumbs.eq(index).removeClass('hide').find('img');
  98 +
  99 + if (typeof thumbsLoaded[index] === 'undefined') {
  100 +
  101 + //trigger layLoad
  102 + lazyLoad($imgs, {
  103 + event: 'sporty'
  104 + });
  105 +
  106 + $imgs.trigger('sporty');
  107 +
  108 + thumbsLoaded[index] = true;
  109 + }
  110 +
  111 + imgShow($imgs.first().data('shower'));
  112 +
  113 + //切换尺码显示
  114 + $sizes.not('.hide').addClass('hide');
  115 + $sizes.eq(index).removeClass('hide').children('li').removeClass('focus');
  116 +
  117 + $colorSizeTip.addClass('hide');
  118 +
  119 + maxStock = -1;
  120 +
  121 + resetNum();
  122 +
  123 + switchBtnStatus();
  124 +});
  125 +
  126 +//尺码
  127 +$size.on('click', 'li', function() {
  128 + var $this = $(this);
  129 +
  130 + if ($this.hasClass('focus')) {
  131 + return;
  132 + }
  133 +
  134 + maxStock = +$this.data('num');
  135 +
  136 + $this.siblings('.focus').removeClass('focus');
  137 + $this.addClass('focus');
  138 +
  139 + $colorSizeTip.html($this.data('title')).removeClass('hide');
  140 +
  141 + $sizeWarn.addClass('hide');
  142 +
  143 + switchBtnStatus();
  144 +
  145 + resetNum();
  146 +}).on('click', '.size-ruler', function() {
  147 +
  148 + //尺码帮助
  149 +
  150 +});
  151 +
  152 +//数量
  153 +$plusNum.click(function() {
  154 + var num = getNum();
  155 +
  156 + if (maxStock === -1) {
  157 + $sizeWarn.removeClass('hide');//显示选择尺码提示
  158 + return;
  159 + }
  160 +
  161 + //已售罄
  162 + if (maxStock === 0) {
  163 + return;
  164 + }
  165 +
  166 + if (num >= maxStock) {
  167 + $numWarn.removeClass('hide');
  168 + } else {
  169 + $num.text(num + 1);
  170 + }
  171 +});
  172 +
  173 +$minusNum.click(function() {
  174 + var num = getNum();
  175 +
  176 + if (num === 1) {
  177 + return;
  178 + }
  179 +
  180 + if (num <= maxStock) {
  181 + $numWarn.addClass('hide');
  182 + }
  183 +
  184 + $num.text(num - 1);
  185 +});
  186 +
  187 +//加入购物车
  188 +$addToCart.click(function() {
  189 + if (maxStock === -1) {
  190 + $sizeWarn.removeClass('hide');
  191 + return;
  192 + }
  193 +
  194 + $.ajax({
  195 + type: 'GET',
  196 + url: '/product/item/addToCart',
  197 + data: {
  198 + skn: skn
  199 + }
  200 + }).then(function(data) {
  201 + var code = data.code;
  202 +
  203 + if (code === 200) {
  204 + $('#type-chose').slideUp(SLIDETIME);
  205 + $('#balance').slideDown(SLIDETIME);
  206 +
  207 + $('#cart-num').text(data.num); //更新数目
  208 + }
  209 + });
  210 +});
  211 +
  212 +//收藏
  213 +$('#collect-product').click(function() {
  214 + var $this = $(this),
  215 + status = 'collect';
  216 +
  217 + if ($this.hasClass('coled')) {
  218 + status = 'cancel';
  219 + }
  220 +
  221 + $.ajax({
  222 + type: 'GET',
  223 + url: '/product/item/collect',
  224 + data: {
  225 + skn: skn,
  226 + status: status
  227 + }
  228 + }).then(function(data) {
  229 + var code = data.code;
  230 +
  231 + if (code === 200) {
  232 +
  233 + $this.toggleClass('coled');
  234 +
  235 + if (status === 'cancel') {
  236 + $this.find('em').text(colTxt.default);
  237 + } else {
  238 + $this.find('em').text(colTxt.coled);
  239 + }
  240 + } else if (code === 400) {
  241 + window.location.href = data.data;
  242 + }
  243 + });
  244 +}).hover(function() {
  245 + var $this = $(this);
  246 +
  247 + if ($this.hasClass('coled')) {
  248 + $this.find('em').text(colTxt.hover);
  249 + }
  250 +}, function() {
  251 + var $this = $(this);
  252 +
  253 + if ($this.hasClass('coled')) {
  254 + $this.find('em').text(colTxt.coled);
  255 + }
  256 +});
  257 +
  258 +//继续购物
  259 +$('#keep-shopping').click(function() {
  260 + $('#type-chose').slideDown(SLIDETIME);
  261 + $('#balance').slideUp(SLIDETIME);
  262 +});
  263 +
  264 +//商品详情/材质洗涤切换
  265 +$('.description-material').on('click', '.title', function() {
  266 + var $this = $(this),
  267 + index = $this.index();
  268 +
  269 + var $description = $('.description-content'),
  270 + $material = $('.material-content');
  271 +
  272 + if ($this.hasClass('cur')) {
  273 + return;
  274 + }
  275 +
  276 + $this.addClass('cur');
  277 + $this.siblings('.cur').removeClass('cur');
  278 +
  279 + if (index === 0) {
  280 +
  281 + //商品信息
  282 + $description.slideDown(SLIDETIME);
  283 + $material.slideUp(SLIDETIME);
  284 + } else {
  285 + $description.slideUp(SLIDETIME);
  286 + $material.slideDown(SLIDETIME);
  287 + }
  288 +});
  289 +
  290 +//评价和咨询切换
  291 +$('.consult-comment').on('click', '.title', function() {
  292 + var $this = $(this),
  293 + index = $this.index();
  294 +
  295 + var $comments = $('.comments'),
  296 + $consults = $('.consults');
  297 +
  298 + if ($this.hasClass('cur')) {
  299 + return;
  300 + }
  301 +
  302 + $this.addClass('cur');
  303 + $this.siblings('.cur').removeClass('cur');
  304 +
  305 + if (index === 0) {
  306 +
  307 + //咨询
  308 + $consults.slideDown(SLIDETIME);
  309 + $comments.slideUp(SLIDETIME);
  310 + } else {
  311 + $consults.slideUp(SLIDETIME);
  312 + $comments.slideDown(SLIDETIME);
  313 + }
  314 +}).on('click', '.load-more', function() {
  315 + var $this = $(this),
  316 + type;
  317 +
  318 + if ($this.hasClass('load-more-comments')) {
  319 + type = 'comments';
  320 + } else {
  321 + type = 'consults';
  322 + }
  323 +
  324 + $.ajax({
  325 + type: 'GET',
  326 + url: '/product/item/' + type,
  327 + data: {
  328 + page: page[type] + 1
  329 + }
  330 + }).then(function(html) {
  331 + if (html === ' ') {
  332 + $this.closest('.more-wrap').addClass('hide');
  333 + } else {
  334 + $(type + '-ul').append(html);
  335 + page[type]++;
  336 + }
  337 + });
  338 +});
  339 +
  340 +//我要咨询
  341 +$('#consults-btn').click(function() {
  342 + $('.new-consult').removeClass('hide');
  343 +});
  344 +
  345 +//售后服务
  346 +$('.after-service-switch').click(function() {
  347 + var $this = $(this),
  348 + $content = $this.next('.after-service-content');
  349 +
  350 + var html = {
  351 + default: '&#xe604;',
  352 + spread: '&#xe603;'
  353 + };
  354 +
  355 + if ($content.css('display') === 'none') {
  356 + $content.slideDown(SLIDETIME);
  357 +
  358 + $this.find('.triangle').html(html.spread);
  359 + } else {
  360 + $content.slideUp(SLIDETIME);
  361 +
  362 + $this.find('.triangle').html(html.default);
  363 + }
  364 +});
@@ -173,10 +173,14 @@ @@ -173,10 +173,14 @@
173 margin-top: 10px; 173 margin-top: 10px;
174 } 174 }
175 175
176 - .chose-color { 176 + .trade-content {
177 padding-top: 20px; 177 padding-top: 20px;
178 margin-top: 20px; 178 margin-top: 20px;
179 border-top: 1px solid #eaeceb; 179 border-top: 1px solid #eaeceb;
  180 + }
  181 +
  182 + .chose-color {
  183 + font-size: 12px;
180 184
181 .title { 185 .title {
182 margin-top: 14px; 186 margin-top: 14px;
@@ -192,6 +196,12 @@ @@ -192,6 +196,12 @@
192 .focus img { 196 .focus img {
193 border-color: #222; 197 border-color: #222;
194 } 198 }
  199 +
  200 + li {
  201 + margin-right: 5px;
  202 + margin-bottom: 5px;
  203 + cursor: pointer;
  204 + }
195 } 205 }
196 206
197 .chose-size { 207 .chose-size {
@@ -207,10 +217,11 @@ @@ -207,10 +217,11 @@
207 height: 22px; 217 height: 22px;
208 line-height: 22px; 218 line-height: 22px;
209 width: 38px; 219 width: 38px;
210 - padding-top: 0 5px;  
211 margin-right: 5px; 220 margin-right: 5px;
  221 + margin-bottom: 5px;
212 border: 1px solid #eaeceb; 222 border: 1px solid #eaeceb;
213 text-align: center; 223 text-align: center;
  224 + cursor: pointer;
214 225
215 &.disable { 226 &.disable {
216 opacity: 0.5; 227 opacity: 0.5;
@@ -225,14 +236,35 @@ @@ -225,14 +236,35 @@
225 } 236 }
226 237
227 .size { 238 .size {
228 - display: inline-block; 239 + float: left;
  240 + color: #666;
229 } 241 }
230 242
231 .size-ruler { 243 .size-ruler {
232 - display: inline-block; 244 + float: left;
  245 + display: block;
233 width: 57px; 246 width: 57px;
234 height: 24px; 247 height: 24px;
235 background: image-url('product/size-ruler.jpg'); 248 background: image-url('product/size-ruler.jpg');
  249 + margin-bottom: 5px;
  250 + cursor: pointer;
  251 + }
  252 +
  253 + .size-warn, .num-warn {
  254 + display: inline-block;
  255 + height: 24px;
  256 + line-height: 24px;
  257 + color: #e01;
  258 + margin-left: 7px;
  259 + font-size: 12px;
  260 +
  261 + i {
  262 + font-size: 14px;
  263 + }
  264 + }
  265 +
  266 + .color-size-tip {
  267 + color: #999;
236 } 268 }
237 269
238 .chose-count .title { 270 .chose-count .title {
@@ -246,6 +278,9 @@ @@ -246,6 +278,9 @@
246 line-height: 23px; 278 line-height: 23px;
247 text-align: center; 279 text-align: center;
248 border: 1px solid #eaeceb; 280 border: 1px solid #eaeceb;
  281 + color: #333;
  282 + font-size: 12px;
  283 + background: #ebebe4;
249 } 284 }
250 285
251 .minus-plus { 286 .minus-plus {
@@ -255,6 +290,7 @@ @@ -255,6 +290,7 @@
255 border: 1px solid #eaeceb; 290 border: 1px solid #eaeceb;
256 border-left: none; 291 border-left: none;
257 text-align: center; 292 text-align: center;
  293 + cursor: pointer;
258 294
259 i { 295 i {
260 display: block; 296 display: block;
@@ -270,7 +306,7 @@ @@ -270,7 +306,7 @@
270 font-size: 13px; 306 font-size: 13px;
271 } 307 }
272 308
273 - .add-to-cart { 309 + .add-to-cart, .sold-out, .go-cart {
274 display: inline-block; 310 display: inline-block;
275 margin-right: 10px; 311 margin-right: 10px;
276 height: 48px; 312 height: 48px;
@@ -280,9 +316,14 @@ @@ -280,9 +316,14 @@
280 color: #fff; 316 color: #fff;
281 background: #e92601; 317 background: #e92601;
282 font-size: 14px; 318 font-size: 14px;
  319 + cursor: pointer;
  320 + }
  321 +
  322 + .sold-out {
  323 + background: #ccc;
283 } 324 }
284 325
285 - .collect-product { 326 + .collect-product, .keep-shopping {
286 display: inline-block; 327 display: inline-block;
287 width: 127px; 328 width: 127px;
288 height: 48px; 329 height: 48px;
@@ -293,13 +334,14 @@ @@ -293,13 +334,14 @@
293 border: 1px solid #ccc; 334 border: 1px solid #ccc;
294 font-weight: bold; 335 font-weight: bold;
295 font-size: 12px; 336 font-size: 12px;
  337 + cursor: pointer;
296 338
297 .iconfont { 339 .iconfont {
298 color: #ccc; 340 color: #ccc;
299 font-size: 12px; 341 font-size: 12px;
300 } 342 }
301 343
302 - .coled { 344 + &.coled .iconfont{
303 color: #fa5252; 345 color: #fa5252;
304 } 346 }
305 } 347 }
@@ -329,6 +371,25 @@ @@ -329,6 +371,25 @@
329 $left: $left - 16px; 371 $left: $left - 16px;
330 } 372 }
331 } 373 }
  374 +
  375 + .balance {
  376 + display: none;
  377 +
  378 + .success-tip {
  379 + color: #222;
  380 + font-size: 18px;
  381 + margin-bottom: 10px;
  382 + }
  383 +
  384 + .cart-total {
  385 + color: #999;
  386 + font-size: 12px;
  387 + }
  388 +
  389 + .balance-btns {
  390 + margin-top: 20px;
  391 + }
  392 + }
332 } 393 }
333 394
334 .other-infos { 395 .other-infos {
@@ -403,6 +464,10 @@ @@ -403,6 +464,10 @@
403 font-weight: bold; 464 font-weight: bold;
404 } 465 }
405 } 466 }
  467 +
  468 + .material-content {
  469 + display: none;
  470 + }
406 471
407 .material-detail { 472 .material-detail {
408 width: 860px; 473 width: 860px;
@@ -506,6 +571,10 @@ @@ -506,6 +571,10 @@
506 } 571 }
507 } 572 }
508 573
  574 + .consults {
  575 + display: none;
  576 + }
  577 +
509 .consult-comment .title { 578 .consult-comment .title {
510 color: #666; 579 color: #666;
511 580
@@ -573,6 +642,10 @@ @@ -573,6 +642,10 @@
573 border-top: 1px solid #eaeceb; 642 border-top: 1px solid #eaeceb;
574 } 643 }
575 644
  645 + .load-more {
  646 + cursor: pointer;
  647 + }
  648 +
576 .btn { 649 .btn {
577 display: block; 650 display: block;
578 width: 140px; 651 width: 140px;
@@ -583,6 +656,7 @@ @@ -583,6 +656,7 @@
583 text-align: center; 656 text-align: center;
584 font-size: 12px; 657 font-size: 12px;
585 margin: 0 auto; 658 margin: 0 auto;
  659 + cursor: pointer;
586 660
587 .iconfont { 661 .iconfont {
588 font-size: 14px; 662 font-size: 14px;
@@ -592,12 +666,62 @@ @@ -592,12 +666,62 @@
592 .comment, .consult { 666 .comment, .consult {
593 margin-top: 10px; 667 margin-top: 10px;
594 } 668 }
  669 +
  670 + .consults {
  671 + display: none;
  672 + }
  673 +
  674 + .new-consult {
  675 + padding: 20px 0;
  676 + border-top: 1px solid #eaeceb;
  677 +
  678 + textarea {
  679 + width: 590px;
  680 + height: 80px;
  681 + margin-top: 8px;
  682 + padding: 5px;
  683 + color: #ccc;
  684 + }
  685 +
  686 + .captcha-row {
  687 + margin: 10px 0;
  688 + }
  689 +
  690 + .captcha {
  691 + width: 70px;
  692 + height: 20px;
  693 + line-height: 20px;
  694 + border: 1px solid #ccc;
  695 + margin-right: 5px;
  696 + padding: 5px;
  697 + color: #ccc;
  698 + }
  699 +
  700 + .captcha-img {
  701 + border: 0;
  702 + height: 32px;
  703 + width: 96px;
  704 + vertical-align: middle;
  705 + }
  706 +
  707 + .submit-consult {
  708 + display: block;
  709 + width: 140px;
  710 + height: 32px;
  711 + line-height: 32px;
  712 + margin: 0;
  713 + }
  714 + }
595 } 715 }
596 716
597 .after-service { 717 .after-service {
598 text-align: center; 718 text-align: center;
599 margin-top: 30px; 719 margin-top: 30px;
600 720
  721 + .after-service-content {
  722 + display: none;
  723 + }
  724 +
601 .after-service-switch { 725 .after-service-switch {
602 height: 44px; 726 height: 44px;
603 line-height: 44px; 727 line-height: 44px;
@@ -37,18 +37,13 @@ class ItemController extends AbstractAction @@ -37,18 +37,13 @@ class ItemController extends AbstractAction
37 ) 37 )
38 ), 38 ),
39 'goodInfo' => array( 39 'goodInfo' => array(
  40 + 'skn' => '',
40 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90', 41 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90',
41 'tags' => array( 42 'tags' => array(
42 'isNew' => true, 43 'isNew' => true,
43 'isLimit' => true, 44 'isLimit' => true,
44 'isNewFestival' => true 45 'isNewFestival' => true
45 ), 46 ),
46 - 'thumbs' => array(  
47 - array(  
48 - 'url' => '',  
49 - 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'  
50 - )  
51 - ),  
52 'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘', 47 'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘',
53 'brandUrl' => '', 48 'brandUrl' => '',
54 'brandName' => 'BRISTON', 49 'brandName' => 'BRISTON',
@@ -76,9 +71,50 @@ class ItemController extends AbstractAction @@ -76,9 +71,50 @@ class ItemController extends AbstractAction
76 'focus' => true, 71 'focus' => true,
77 'title' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 黑色', 72 'title' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 黑色',
78 'src' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90', 73 'src' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90',
  74 + 'thumbs' => array(
  75 + array(
  76 + 'url' => '',
  77 + 'shower' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90',
  78 + 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
  79 + )
  80 + ),
  81 + 'size' => array(
  82 + array(
  83 + 'name' => 'F',
  84 + 'title' => '胸围 106cm / 肩宽 43cm',
  85 + 'sku' => '956638',
  86 + 'num' => 5
  87 + ),
  88 + array(
  89 + 'name' => 'L',
  90 + 'title' => '胸围 110cm / 肩宽 45cm',
  91 + 'sku' => '956634',
  92 + 'num' => 2, //num为数字0或者不传则售罄
  93 + )
  94 + )
  95 + ),
  96 + array(
  97 + 'title' => 'GOGO HARRIS 圆圈手势套头卫衣 灰色',
  98 + 'src' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/25/03/02b0d2195e1f1a285c4473a581e03f2e79.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90',
  99 + 'thumbs' => array(
  100 + array(
  101 + 'url' => '',
  102 + 'shower' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/25/03/02b0d2195e1f1a285c4473a581e03f2e79.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90',
  103 + 'img' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/25/03/02b0d2195e1f1a285c4473a581e03f2e79.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
  104 + )
  105 + ),
79 'size' => array( 106 'size' => array(
80 array( 107 array(
81 - 'name' => 'F' 108 + 'name' => 'L',
  109 + 'title' => '胸围 106cm / 肩宽 43cm',
  110 + 'sku' => '956638',
  111 + 'num' => 0
  112 + ),
  113 + array(
  114 + 'name' => 'XL',
  115 + 'title' => '胸围 110cm / 肩宽 45cm',
  116 + 'sku' => '956634',
  117 + 'num' => 2,
82 ) 118 )
83 ) 119 )
84 ) 120 )
@@ -277,6 +313,8 @@ class ItemController extends AbstractAction @@ -277,6 +313,8 @@ class ItemController extends AbstractAction
277 'consultComment' => array( 313 'consultComment' => array(
278 'consultNum' => 125, 314 'consultNum' => 125,
279 'commentNum' => 122, 315 'commentNum' => 122,
  316 + 'commentUrl' => '',
  317 + 'hasMoreComments' => true,
280 'comments' => array( 318 'comments' => array(
281 array( 319 array(
282 'avatar' => 'http://static.yohobuy.com/images/v3/boy.jpg', 320 'avatar' => 'http://static.yohobuy.com/images/v3/boy.jpg',
@@ -315,5 +353,25 @@ class ItemController extends AbstractAction @@ -315,5 +353,25 @@ class ItemController extends AbstractAction
315 ); 353 );
316 354
317 $this->_view->display('index', $data); 355 $this->_view->display('index', $data);
318 - } 356 + }
  357 +
  358 + public function collectAction()
  359 + {
  360 + $this->echoJson(array(
  361 + 'code' => 200
  362 + ));
  363 + }
  364 +
  365 + public function addToCartAction()
  366 + {
  367 + $this->echoJson(array(
  368 + 'code' => 200,
  369 + 'num' => 5
  370 + ));
  371 + }
  372 +
  373 + public function commentsAction()
  374 + {
  375 + echo(' ');
  376 + }
319 } 377 }