fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by Rock Zhang
Commit 6629b988ae9773d9a8df07ce7bc0bdce77e2ea16 2 parents eb3592f7 beb2b021

Merge branch 'feature/cart' of git.dev.yoho.cn:web/yohobuy into feature/cart

Inline Side-by-side
Showing 12 changed files with 250 additions and 68 deletions
@@ -114,7 +114,7 @@ function search() { @@ -114,7 +114,7 @@ function search() {
114 } 114 }
115 115
116 function scrollHandler() { 116 function scrollHandler() {
117 - if (!end || $(window).scrollTop() + winH >= $(document).height() - 50) { 117 + if (!end || $(window).scrollTop() + winH >= $(document).height() - 200) {
118 search(); 118 search();
119 } 119 }
120 } 120 }
@@ -18,11 +18,6 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'), @@ -18,11 +18,6 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'),
18 18
19 var $cart = $('.cart-bar'); 19 var $cart = $('.cart-bar');
20 20
21 -  
22 -require('./desc');  
23 -require('./comments-consults');  
24 -require('../recommend-for-you-product-desc');  
25 -  
26 //add extra marign-bottom for footer to show the yoho copyright 21 //add extra marign-bottom for footer to show the yoho copyright
27 function showFooter() { 22 function showFooter() {
28 var $cartBar = $('.cart-bar'); 23 var $cartBar = $('.cart-bar');
@@ -74,6 +69,10 @@ if (goodsDiscountHammer && $discountFolder.children().length > 0) { @@ -74,6 +69,10 @@ if (goodsDiscountHammer && $discountFolder.children().length > 0) {
74 }); 69 });
75 } 70 }
76 71
  72 +require('./desc');
  73 +require('./comments-consults');
  74 +require('../recommend-for-you-product-desc');
  75 +
77 //购物车商品数量 76 //购物车商品数量
78 $.ajax({ 77 $.ajax({
79 type: 'GET', 78 type: 'GET',
@@ -73,14 +73,13 @@ if (addToCartHammer) { @@ -73,14 +73,13 @@ if (addToCartHammer) {
73 addToCartHammer.on('tap', function(e) { 73 addToCartHammer.on('tap', function(e) {
74 chosePanel.show(); 74 chosePanel.show();
75 75
76 - // 统计代码：用于统计用户加入购物车的动作  
77 - // if (window._yas) {  
78 - // window._yas.sendCustomInfo({  
79 - // pd: productId,  
80 - // by: 1  
81 - // }, false);  
82 - // }  
83 - 76 + //统计代码：用于统计用户加入购物车的动作
  77 + if (window._yas) {
  78 + window._yas.sendCustomInfo({
  79 + pd: productId,
  80 + by: 1
  81 + }, true);
  82 + }
84 83
85 }); 84 });
86 } 85 }
@@ -11,7 +11,8 @@ var $ = require('jquery'); @@ -11,7 +11,8 @@ var $ = require('jquery');
11 11
12 // var $page = $('.yoho-page'); 12 // var $page = $('.yoho-page');
13 13
14 -var $num; 14 +var $num,
  15 + $chosed;
15 16
16 // var tpl; 17 // var tpl;
17 18
@@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) { @@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
64 var $this = $(this), 65 var $this = $(this),
65 $that = $(e.target).closest('.chose-items'), 66 $that = $(e.target).closest('.chose-items'),
66 numArray, 67 numArray,
67 - index; 68 + index,
  69 + i;
68 70
69 - if ($this.hasClass('chosed')) {  
70 - $this.parent().find('.block').removeClass('chosed');  
71 - $that.find('.num .left-num').html('');  
72 - } else if ($this.hasClass('disable')) {  
73 - $this.css('background-color', '#000');  
74 - return;  
75 - } else if (!$this.hasClass('chosed')) {  
76 - $this.siblings('.chosed').removeClass('chosed');  
77 - $this.addClass('chosed');  
78 - index = $this.index(); 71 + var $siblingBlock = $this.closest('.block-list').siblings(':first'),
  72 + currentNumArray = $this.data('numstr').split('/');
79 73
  74 + $this.siblings('.chosed').removeClass('chosed');
  75 + $this.toggleClass('chosed');
  76 + index = $this.index();
  77 + $chosed = $('.block-list>ul>li.chosed');
80 78
81 - //根据颜色切换图片  
82 - if ($this.closest('.block-list').hasClass('color-list')) {  
83 - $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');  
84 - } 79 + //根据颜色切换图片
  80 + if ($this.closest('.block-list').hasClass('color-list')) {
  81 + $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
  82 + }
85 83
86 - //剩余的商品数  
87 - if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {  
88 - numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');  
89 - $that.find('.num .left-num').html('剩余' + numArray[index] + '件');  
90 - } else {  
91 - $that.find('.num .left-num').html(''); 84 + if ($chosed.length === 0) {
  85 + $this.closest('ul>li').each(function() {
  86 + $(this).removeClass('zero-stock');
  87 + if (0 === $(this).data('num') - 0) {
  88 + $(this).addClass('zero-stock');
  89 + }
  90 + });
  91 +
  92 + $siblingBlock.find('ul>li').each(function() {
  93 + $(this).removeClass('zero-stock');
  94 + if (0 === $(this).data('num') - 0) {
  95 + $(this).addClass('zero-stock');
  96 + }
  97 + });
  98 + } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
  99 + numArray = $chosed.data('numstr').split('/');
  100 + $siblingBlock.find('.block').removeClass('zero-stock');
  101 + for (i = 0; i < numArray.length; i++) {
  102 + if (0 === numArray[i] - 0) {
  103 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  104 + }
92 } 105 }
93 -  
94 - //点击切换 106 + } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
  107 + $siblingBlock.find('ul>li').each(function() {
  108 + $(this).removeClass('zero-stock');
  109 + if (0 === $(this).data('num') - 0) {
  110 + $(this).addClass('zero-stock');
  111 + }
  112 + });
  113 + $that.find('.num .left-num').html('');
  114 + } else if ($chosed.length === 2) {
  115 + $siblingBlock.find('.block').removeClass('zero-stock');
  116 + for (i = 0; i < currentNumArray.length; i++) {
  117 + if (0 === currentNumArray[i] - 0) {
  118 + $siblingBlock.find('.block').eq(i).addClass('zero-stock');
  119 + }
  120 + }
  121 + numArray = $siblingBlock.find('.chosed').data('numstr').split('/');
  122 + $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
95 } 123 }
96 124
97 }).on('touchstart', '.btn-minus', function() { 125 }).on('touchstart', '.btn-minus', function() {
98 - var num = +$num.val(); 126 + var num = +$num.val(),
  127 + $chosed = $('.block-list>ul>li.chosed');
99 128
100 //若颜色和尺码没有被同时选中，则不能点击 129 //若颜色和尺码没有被同时选中，则不能点击
101 - if ($('.block-list>ul>li.chosed').length < 2) { 130 + if ($chosed.length < 2) {
102 return; 131 return;
103 } 132 }
104 133
@@ -7,23 +7,23 @@ @@ -7,23 +7,23 @@
7 var $ = require('jquery'), 7 var $ = require('jquery'),
8 lazyLoad = require('yoho.lazyload'); 8 lazyLoad = require('yoho.lazyload');
9 9
10 -var chosePanel = require('./chose-panel'); 10 +//var chosePanel = require('./chose-panel');
11 11
12 lazyLoad($('.lazy')); 12 lazyLoad($('.lazy'));
13 13
14 -$('.gift-advance-page').on('touchstart', '.chose', function() {  
15 - var id = $(this).closest('.gift-advance-good').data('id');  
16 -  
17 - $.ajax({  
18 - type: 'GET',  
19 - url: '/shoppingCart/goodinfo',  
20 - data: {  
21 - id: id  
22 - },  
23 - success: function(data) {  
24 - if (data.code === 200) {  
25 - chosePanel.show(data.data);  
26 - }  
27 - }  
28 - });  
29 -});  
  14 +//$('.gift-advance-page').on('touchstart', '.chose', function() {
  15 +// var id = $(this).closest('.gift-advance-good').data('id');
  16 +//
  17 +// $.ajax({
  18 +// type: 'GET',
  19 +// url: '/shoppingCart/goodinfo',
  20 +// data: {
  21 +// id: id
  22 +// },
  23 +// success: function(data) {
  24 +// if (data.code === 200) {
  25 +// chosePanel.show(data.data);
  26 +// }
  27 +// }
  28 +// });
  29 +//});
@@ -9,7 +9,8 @@ var $ = require('jquery'), @@ -9,7 +9,8 @@ var $ = require('jquery'),
9 lazyLoad = require('yoho.lazyload'); 9 lazyLoad = require('yoho.lazyload');
10 10
11 var dialog = require('../me/dialog'), 11 var dialog = require('../me/dialog'),
12 - tip = require('../plugin/tip'); 12 + tip = require('../plugin/tip'),
  13 + chosePanel = require('./chose-panel');
13 14
14 var $names; 15 var $names;
15 16
@@ -156,4 +157,23 @@ $('.btn-balance').on('touchend', function() { @@ -156,4 +157,23 @@ $('.btn-balance').on('touchend', function() {
156 window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType; 157 window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
157 }); 158 });
158 159
  160 +$('.advance-buy').on('touchend', function() {
  161 + var $advanceBuy = $('#advanceBuy'),
  162 + $mainCart = $('#mainCart');
  163 +
  164 + if ($advanceBuy.hasClass('hide')) {
  165 + $mainCart.removeClass('show').addClass('hide');
  166 + $advanceBuy.removeClass('hide').addClass('show');
  167 + } else {
  168 + $advanceBuy.removeClass('show').addClass('hide');
  169 + $mainCart.removeClass('hide').addClass('show');
  170 + }
  171 +});
  172 +
  173 +
  174 +$('.chose').on('touchend', function() {
  175 +
  176 + //var id = $(this).closest('.gift-advance-good').data('id');
  177 + chosePanel.show();
  178 +});
159 179
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 "yoho.iswiper": "3.0.1", 21 "yoho.iswiper": "3.0.1",
22 "iscroll": "5.1.2", 22 "iscroll": "5.1.2",
23 "import-style": "1.0.0", 23 "import-style": "1.0.0",
24 - "yoho.lazyload": "1.1.3", 24 + "yoho.lazyload": "1.1.4",
25 "yoho.handlebars": "3.0.3", 25 "yoho.handlebars": "3.0.3",
26 "yoho.hammer": "2.0.4" 26 "yoho.hammer": "2.0.4"
27 }, 27 },
@@ -105,10 +105,16 @@ @@ -105,10 +105,16 @@
105 color: #e10; 105 color: #e10;
106 } 106 }
107 107
108 - &.disable { 108 + &.zero-stock {
109 color: #e0e0e0; 109 color: #e0e0e0;
110 border-color: #e0e0e0; 110 border-color: #e0e0e0;
111 } 111 }
  112 + &.zero-stock.chosed {
  113 + border-color: #e0e0e0;
  114 + background: none;
  115 + color: #e0e0e0;
  116 + background-color: #f0f0f0;
  117 + }
112 } 118 }
113 119
114 .num { 120 .num {
@@ -177,6 +177,117 @@ @@ -177,6 +177,117 @@
177 font-size: 28rem / $pxConvertRem; 177 font-size: 28rem / $pxConvertRem;
178 } 178 }
179 } 179 }
  180 +
  181 + .gift-advance-good {
  182 + position: relative;
  183 + padding: 20rem / $pxConvertRem 0;
  184 + margin-left: 34rem / $pxConvertRem;
  185 + height: 160rem / $pxConvertRem;
  186 + border-bottom: 1px solid #e0e0e0;
  187 +
  188 + &:last-child {
  189 + border-bottom: none;
  190 + }
  191 + }
  192 +
  193 +
  194 + .advance-block .gift-advance-good:last-child {
  195 + border-bottom: none;
  196 + }
  197 +
  198 + .advance-block:last-child .gift-advance-good:last-child {
  199 + border-bottom: 1px solid #e0e0e0;
  200 + }
  201 +
  202 + .thumb-wrap {
  203 + position: relative;
  204 + float: left;
  205 + width: 120rem / $pxConvertRem;
  206 + height: 160rem / $pxConvertRem;
  207 +
  208 + .thumb {
  209 + width: 100%;
  210 + height: 100%;
  211 + }
  212 + }
  213 +
  214 + .tag {
  215 + position: absolute;
  216 + bottom: 0;
  217 + left: 0;
  218 + right: 0;
  219 + height: 25rem / $pxConvertRem;
  220 + color: #fff;
  221 + text-align: center;
  222 + background: #a1ce4e;
  223 +
  224 + &:before {
  225 + content: '赠品';
  226 + }
  227 + }
  228 +
  229 + .deps {
  230 + margin-left: 135rem / $pxConvertRem;
  231 + }
  232 +
  233 + .name {
  234 + font-size: 28rem / $pxConvertRem;
  235 + }
  236 +
  237 + .row:nth-child(2) {
  238 + font-size: 22rem / $pxConvertRem;
  239 + height: 45rem / $pxConvertRem;
  240 + line-height: 45rem / $pxConvertRem;
  241 +
  242 + > span {
  243 + margin-right: 15rem / $pxConvertRem;
  244 + }
  245 + }
  246 +
  247 + .row:nth-child(3) {
  248 + position: relative;
  249 + }
  250 +
  251 + .color, .size {
  252 + color: #b6b6b6;
  253 + }
  254 +
  255 + .price {
  256 + font-size: 24rem / $pxConvertRem;
  257 + color: #000;
  258 + }
  259 +
  260 + .count {
  261 + font-size: 20rem / $pxConvertRem;
  262 + color: #999;
  263 + margin-left: 22rem / $pxConvertRem;
  264 + }
  265 +
  266 + .chose {
  267 + position: absolute;
  268 + width: 88rem / $pxConvertRem;
  269 + height: 58rem / $pxConvertRem;
  270 + background: #f8f8f8;
  271 + border: 1px solid #ccc;
  272 + right: 20rem / $pxConvertRem;
  273 + top: 71rem / $pxConvertRem;
  274 + font-size: 26rem / $pxConvertRem;
  275 + }
  276 +
  277 + .title {
  278 + height: 50rem / $pxConvertRem;
  279 + line-height: 50rem / $pxConvertRem;
  280 + padding-left: 20rem / $pxConvertRem;
  281 + font-size: 24rem / $pxConvertRem;
  282 + background: #f8f8f8;
  283 + }
  284 +
  285 + .advance-block .tag {
  286 + background: #eb76aa;
  287 + &:before {
  288 + content: '加价购';
  289 + }
  290 + }
180 } 291 }
181 .shopping-cart-zero{ 292 .shopping-cart-zero{
182 .cart-zero{ 293 .cart-zero{
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="shopping-cart-page yoho-page" style="display: none;"> 2 +<div id="mainCart" class="shopping-cart-page yoho-page">
  3 +
3 {{# shoppingCart}} 4 {{# shoppingCart}}
4 {{#if cartNav}} 5 {{#if cartNav}}
5 <ul class="cart-nav clearfix"> 6 <ul class="cart-nav clearfix">
@@ -44,7 +45,23 @@ @@ -44,7 +45,23 @@
44 45
45 {{/ shoppingCart}} 46 {{/ shoppingCart}}
46 </div> 47 </div>
47 -<div class="shopping-cart-zero yoho-page"> 48 +
  49 +<div id="advanceBuy" class="shopping-cart-page yoho-page hide">
  50 +{{# shoppingCart}}
  51 + {{# commonCart}}
  52 + {{# advanceBuy}}
  53 + <span>
  54 + {{promotionTitle}}
  55 + </span>
  56 + {{# goods}}
  57 + {{> shopping-cart/gift-advance-good}}
  58 + {{/ goods}}
  59 + {{/ advanceBuy}}
  60 + {{/ commonCart}}
  61 +{{/ shoppingCart}}
  62 +</div>
  63 +
  64 +<div class="shopping-cart-zero yoho-page hide">
48 <div class="cart-zero"> 65 <div class="cart-zero">
49 <i class="iconfont">&#xe62c</i> 66 <i class="iconfont">&#xe62c</i>
50 <p>您的购物车暂无商品</p> 67 <p>您的购物车暂无商品</p>
@@ -52,4 +69,5 @@ @@ -52,4 +69,5 @@
52 </div> 69 </div>
53 {{> product/recommend-for-you}} 70 {{> product/recommend-for-you}}
54 </div> 71 </div>
  72 +
55 {{> layout/footer}} 73 {{> layout/footer}}
@@ -16,16 +16,16 @@ @@ -16,16 +16,16 @@
16 </a> 16 </a>
17 </li> 17 </li>
18 {{/ freebie}} 18 {{/ freebie}}
19 - {{# advanceBuy}} 19 + {{#if advanceBuy}}
20 <li class="advance-buy"> 20 <li class="advance-buy">
21 <span class="iconfont">&#xe61b;</span> 21 <span class="iconfont">&#xe61b;</span>
22 加价购 22 加价购
23 - <a href={{url}}> 23 + <a>
24 <span class="count">{{count}}</span> 24 <span class="count">{{count}}</span>
25 <span class="iconfont icon-right-arrow">&#xe614;</span> 25 <span class="iconfont icon-right-arrow">&#xe614;</span>
26 </a> 26 </a>
27 </li> 27 </li>
28 - {{/ advanceBuy}} 28 + {{/if}}
29 </ul> 29 </ul>
30 {{/if}} 30 {{/if}}
31 31
@@ -54,4 +54,4 @@ @@ -54,4 +54,4 @@
54 <a class="btn-balance"> 54 <a class="btn-balance">
55 结算 55 结算
56 </a> 56 </a>
57 -</div>  
  57 +</div>
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 <span>颜色</span> 25 <span>颜色</span>
26 <ul class="clearfix" data-type="color"> 26 <ul class="clearfix" data-type="color">
27 {{# colors}} 27 {{# colors}}
28 - <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}"> 28 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-numstr="{{sizeNumStr}}">
29 {{name}} 29 {{name}}
30 </li> 30 </li>
31 {{/ colors}} 31 {{/ colors}}
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 <span>尺码</span> 35 <span>尺码</span>
36 <ul class="clearfix" data-type="size" > 36 <ul class="clearfix" data-type="size" >
37 {{# sizes}} 37 {{# sizes}}
38 - <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}"> 38 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}">
39 {{name}} 39 {{name}}
40 </li> 40 </li>
41 {{/ sizes}} 41 {{/ sizes}}