fe / YOHOBUYWAP · Commits

Go to a project

Authored by Lynnic
Commit a0be6faf7732f46dd0bf21708448d1ac646ef5c8 1 parent 70ccd4c3

商品详情页购物车功能 -- code reviewd by LZF

Inline Side-by-side
Showing 6 changed files with 99 additions and 35 deletions
@@ -1242,11 +1242,45 @@ @@ -1242,11 +1242,45 @@
1242 'cartUrl':'购物车url', 1242 'cartUrl':'购物车url',
1243 'addToCartUrl':'添加购物车url', 1243 'addToCartUrl':'添加购物车url',
1244 'soldOut':'已售罄', 1244 'soldOut':'已售罄',
1245 - 'notForSale':'非卖品' 1245 + 'notForSale':'非卖品',
  1246 +
  1247 +
  1248 + thumb: [
  1249 + {
  1250 + id:1,
  1251 + url : ''
  1252 + },
  1253 + ...
  1254 + ],
  1255 + name: '',
  1256 + price: '',
  1257 + salePrice: '',
  1258 + colors: [
  1259 + {
  1260 + id: 1,
  1261 + chosed: true,
  1262 + name: '黄色'，
  1263 + colorNum：10，
  1264 + shortUrl：'',
  1265 +
  1266 + },
  1267 + ...
  1268 + ],
  1269 + sizes: [
  1270 + {
  1271 + id: 2,
  1272 + chosed: true,
  1273 + name: 'X',
  1274 + sizeNum: 2
  1275 + },
  1276 + ...
  1277 + ],
  1278 +
  1279 + totalNum: 20
1246 }, 1280 },
1247 'introUrl' : '', 1281 'introUrl' : '',
1248 'id' : '', 1282 'id' : '',
1249 - 'preferenceUrl' :'' 1283 + 'preferenceUrl' :'',
1250 } 1284 }
1251 ### 评价列表页面 1285 ### 评价列表页面
1252 { 1286 {
@@ -7,7 +7,8 @@ @@ -7,7 +7,8 @@
7 7
8 var $ = require('jquery'), 8 var $ = require('jquery'),
9 Hammer = require('yoho.hammer'), 9 Hammer = require('yoho.hammer'),
10 - tip = require('../../plugin/tip'); 10 + tip = require('../../plugin/tip'),
  11 + chosePanel = require('../../shopping-cart/chose-panel');
11 12
12 var likeEle = document.getElementById('likeBtn'), 13 var likeEle = document.getElementById('likeBtn'),
13 likeHammer = likeEle && new Hammer(likeEle); 14 likeHammer = likeEle && new Hammer(likeEle);
@@ -70,14 +71,17 @@ if (likeHammer) { @@ -70,14 +71,17 @@ if (likeHammer) {
70 71
71 if (addToCartHammer) { 72 if (addToCartHammer) {
72 addToCartHammer.on('tap', function(e) { 73 addToCartHammer.on('tap', function(e) {
  74 + chosePanel.show();
73 75
74 // 统计代码：用于统计用户加入购物车的动作 76 // 统计代码：用于统计用户加入购物车的动作
75 - if (window._yas) {  
76 - window._yas.sendCustomInfo({  
77 - pd: productId,  
78 - by: 1  
79 - }, false);  
80 - } 77 + // if (window._yas) {
  78 + // window._yas.sendCustomInfo({
  79 + // pd: productId,
  80 + // by: 1
  81 + // }, false);
  82 + // }
  83 +
  84 +
81 }); 85 });
82 } 86 }
83 87
@@ -5,36 +5,45 @@ @@ -5,36 +5,45 @@
5 * @date: 2015/10/21 5 * @date: 2015/10/21
6 */ 6 */
7 7
8 -var $ = require('jquery'),  
9 - Handlebars = require('yoho.handlebars'); 8 +var $ = require('jquery');
10 9
11 -var $page = $('.yoho-page'); 10 +// Handlebars = require('yoho.handlebars');
  11 +
  12 +// var $page = $('.yoho-page');
12 13
13 var $num; 14 var $num;
14 15
15 -var tpl; 16 +// var tpl;
16 17
17 //读取partials 18 //读取partials
18 -$.ajax({  
19 - type: 'GET',  
20 - url: '/shoppingCart/tpl',  
21 - success: function(data) {  
22 - tpl = Handlebars.compile(data);  
23 - }  
24 -}); 19 +// $.ajax({
  20 +// type: 'GET',
  21 +// url: '/shoppingCart/tpl',
  22 +// success: function(data) {
  23 +// tpl = Handlebars.compile(data);
  24 +// }
  25 +// });
25 26
26 -//显示  
27 -function show(data) {  
28 - var html = tpl(data);  
29 -  
30 - $page.append(html);  
31 27
  28 +//显示
  29 +// function show(data) {
  30 +// // var html = tpl(data);
  31 +// $('.chose-panel').show();
  32 +// // $page.append(html);
  33 +// $('.chose-panel')
  34 +// $num = $('#good-num');
  35 +// }
  36 +
  37 +function show() {
  38 + $('.chose-panel').show();
  39 + $('body').css('overflow', 'hidden');
32 $num = $('#good-num'); 40 $num = $('#good-num');
33 } 41 }
34 42
35 //移除当前Panel 43 //移除当前Panel
36 function remove() { 44 function remove() {
37 - $('.chose-panel').remove(); 45 + $('.chose-panel').hide();
  46 + $('body').css('overflow', 'auto');
38 } 47 }
39 48
40 $('.yoho-page').on('touchstart', '.chose-panel', function(e) { 49 $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
@@ -75,4 +84,5 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -75,4 +84,5 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
75 $num.val(num + 1); 84 $num.val(num + 1);
76 }); 85 });
77 86
  87 +
78 exports.show = show; 88 exports.show = show;
1 .chose-panel { 1 .chose-panel {
2 - position: absolute; 2 + position: fixed;
  3 + display: none;
  4 + height: 100%;
3 top: 0; 5 top: 0;
4 bottom: 0; 6 bottom: 0;
5 left: 0; 7 left: 0;
6 right: 0; 8 right: 0;
7 background: rgba(0,0,0,.3); 9 background: rgba(0,0,0,.3);
  10 + z-index:3;
8 11
9 .main { 12 .main {
10 position: absolute; 13 position: absolute;
11 - height: 610rem / $pxConvertRem; 14 + height: pxToRem(610px);
12 bottom: 0; 15 bottom: 0;
13 left: 0; 16 left: 0;
14 right: 0; 17 right: 0;
@@ -18,7 +21,7 @@ @@ -18,7 +21,7 @@
18 .infos { 21 .infos {
19 height: 460rem / $pxConvertRem; 22 height: 460rem / $pxConvertRem;
20 padding: 0 22rem / $pxConvertRem; 23 padding: 0 22rem / $pxConvertRem;
21 - padding-top: 30rem / $pxConvertRem; 24 + // padding-top: 30rem / $pxConvertRem;
22 } 25 }
23 26
24 .chose-items { 27 .chose-items {
@@ -27,7 +30,10 @@ @@ -27,7 +30,10 @@
27 } 30 }
28 31
29 .basic-info { 32 .basic-info {
30 - margin-bottom: 30rem / $pxConvertRem; 33 + overflow: hidden;
  34 + position: relative;
  35 + margin-bottom: pxToRem(30px);
  36 + margin-top: pxToRem(30px);
31 } 37 }
32 38
33 .thumb { 39 .thumb {
@@ -37,12 +43,18 @@ @@ -37,12 +43,18 @@
37 } 43 }
38 44
39 .text-info { 45 .text-info {
40 - margin-left: 102rem / $pxConvertRem;  
41 - 46 + position: absolute;
  47 + height: auto;
  48 + left: pxToRem(95px);
  49 + top:50%;
  50 + transform: translateY(-50%);
42 .name { 51 .name {
43 font-size: 28rem / $pxConvertRem; 52 font-size: 28rem / $pxConvertRem;
44 } 53 }
45 54
  55 + .price{
  56 + font-size: pxToRem(24px);
  57 + }
46 .sale-price { 58 .sale-price {
47 color: #e10; 59 color: #e10;
48 60
@@ -114,6 +114,7 @@ @@ -114,6 +114,7 @@
114 114
115 <div id="productDesc"> </div> 115 <div id="productDesc"> </div>
116 {{> product/recommend-for-you}} 116 {{> product/recommend-for-you}}
  117 + {{> shopping-cart/chose-panel}}
117 118
118 {{#cartInfo}} 119 {{#cartInfo}}
119 <div class="cart-bar"> 120 <div class="cart-bar">
@@ -121,7 +122,8 @@ @@ -121,7 +122,8 @@
121 <a href="{{cartUrl}}" class="num-incart iconfont">&#xe62c;</a> 122 <a href="{{cartUrl}}" class="num-incart iconfont">&#xe62c;</a>
122 123
123 {{#if addToCartUrl}} 124 {{#if addToCartUrl}}
124 - <a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a> 125 + <!-- <a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a> -->
  126 + <a id="addtoCart" href="javascript:;" class="addto-cart">加入购物车</a>
125 {{/if}} 127 {{/if}}
126 128
127 {{#if soldOut}} 129 {{#if soldOut}}
  1 +{{#cartInfo}}
1 <div class="chose-panel"> 2 <div class="chose-panel">
2 <div class="main"> 3 <div class="main">
3 <div class="infos"> 4 <div class="infos">
@@ -26,7 +27,7 @@ @@ -26,7 +27,7 @@
26 </div> 27 </div>
27 <div class="size-list"> 28 <div class="size-list">
28 <span>尺码</span> 29 <span>尺码</span>
29 - <ul class="clearfix" data-type="size"> 30 + <ul class="clearfix {{#if @first}}{{^}}hide{{/if}}" data-type="size" >
30 {{# sizes}} 31 {{# sizes}}
31 <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}> 32 <li class="block {{#if chosed}}chosed{{/if}}" data-id={{id}}>
32 {{name}} 33 {{name}}
@@ -49,7 +50,8 @@ @@ -49,7 +50,8 @@
49 </div> 50 </div>
50 </div> 51 </div>
51 <div class="btn-wrap"> 52 <div class="btn-wrap">
52 - <button id="chose-btn-sure" class="btn btn-sure">确定</button> 53 + <button id="chose-btn-sure" class="btn btn-sure">加入购物车</button>
53 </div> 54 </div>
54 </div> 55 </div>
55 </div> 56 </div>
  57 +{{/cartInfo}}