fe / yohobuy-node · Commits

Go to a project

Authored by yyq
Commit 522541c724533b8074665b5a5d39d845d303a771 1 parent c0b6f8e1

cart fixed

Inline Side-by-side
Showing 9 changed files with 155 additions and 139 deletions
@@ -200,42 +200,32 @@ @@ -200,42 +200,32 @@
200 200
201 {{#stat}} 201 {{#stat}}
202 <!-- 总价计算 --> 202 <!-- 总价计算 -->
203 - <div class="cartnew-sum">  
204 - {{#unless ../isEmpty}}  
205 - <div class="left">  
206 - <a href="javascript:void(0);" class="btn_h"  
207 - style="display:none;"><span>清空商品</span></a>  
208 - <i class="cart-item-check iconfont" id="cbSelAllGoods"></i>  
209 - <span class="check-all-sum">全选</span>  
210 - <a class="delAll delete-all-sel" href="javascript:void(0);">删除选中商品</a>  
211 - <a class="removeAll remove-all-2fav" href="javascript:void(0);">移入收藏夹</a>  
212 - <a class="emptyDisabled clean-all-disable"  
213 - href="javascript:void(0);">清空失效商品</a> 203 + <div class="cart-fixed-submit">
  204 + <div class="cart-fixed-wrap">
  205 + <div class="center-content clearfix">
  206 + {{#unless ../isEmpty}}
  207 + <div class="fixed-option">
  208 + <i class="cart-item-check iconfont" id="cbSelAllGoods"></i>
  209 + <span class="check-all-sum">全选</span>
  210 + <a class="delAll delete-all-sel" href="javascript:void(0);">删除选中商品</a>
  211 + <a class="removeAll remove-all-2fav" href="javascript:void(0);">移入收藏夹</a>
  212 + <a class="emptyDisabled clean-all-disable"
  213 + href="javascript:void(0);">清空失效商品</a>
  214 + </div>
  215 + {{/unless}}
  216 + <p class="select-num">已选商品<strong class="ins">{{selectedGoodsCount}}</strong>件</p>
  217 + <div class="price-sum">
  218 + <p class="sum">应付金额（不含邮费）：<strong><kbd>¥</kbd> {{lastOrderAmount}}</strong></p>
  219 + {{#if discountAmount}}
  220 + <p class="offer">活动优惠：¥ {{discountAmount}}</p>
  221 + {{/if}}
  222 + </div>
  223 + <a href="javascript:void(0);" id="Y_SubmitBtn" class="btn-account right"
  224 + {{#if mix}} data-mix="true"{{/if}}{{#if ensureUrl}} data-ensureurl="{{ensureUrl}}"{{/if}}
  225 + {{#if noSelectGiftTip}} data-noSelectGiftTip="true"{{/if}}>去结算</a>
214 </div> 226 </div>
215 - {{/unless}}  
216 - <div class="right">  
217 - <p>  
218 - {{#if gainYohoCoin}}  
219 - <a href="/help/?category_id=87" class="yoho-coin" target="_blank"></a>  
220 - 共返有货币：{{gainYohoCoin}}个&#12288;&#12288;{{/if}}  
221 - 已选商品<strong class="ins">{{selectedGoodsCount}}</strong>件&#12288;&#12288;  
222 - 商品金额：<b>¥&nbsp;{{orderAmount}}</b>  
223 - </p>  
224 - {{#if discountAmount}}<p>活动优惠：<b>-&nbsp;¥&nbsp;{{discountAmount}}</b></p>{{/if}}  
225 - <!--<p>优惠码/优惠券：<b>¥&nbsp;8888.00</b></p>-->  
226 - <p class="sum">  
227 - 应付金额（不含邮费）：<strong><kbd>¥&nbsp;</kbd>{{lastOrderAmount}}</strong></p>  
228 </div> 227 </div>
229 </div> 228 </div>
230 - <div class="cartnew-submit" id="pay-sum">  
231 - <!--<span>添加礼品袋</span>-->  
232 - <a href="javascript:void(0);"  
233 - id="Y_SubmitBtn"  
234 - class="btn-account"  
235 - {{#if mix}}data-mix="true"{{/if}}  
236 - {{#if ensureUrl}}data-ensureurl="{{ensureUrl}}"{{/if}}  
237 - {{#if noSelectGiftTip}}data-noSelectGiftTip="true"{{/if}}>去结算</a>  
238 - </div>  
239 {{/stat}} 229 {{/stat}}
240 230
241 {{> mix/cart/cart-pre-sell-tpl }} 231 {{> mix/cart/cart-pre-sell-tpl }}
@@ -7,7 +7,7 @@ var $ = require('yoho-jquery'), // eslint-disable-line @@ -7,7 +7,7 @@ var $ = require('yoho-jquery'), // eslint-disable-line
7 RAlert = rDialog.RAlert, 7 RAlert = rDialog.RAlert,
8 capi = require('./cart-api'), 8 capi = require('./cart-api'),
9 yas = require('../common/data-yas'), 9 yas = require('../common/data-yas'),
10 - Cart; 10 + Cart, cartScroll;
11 11
12 var $cartnewTips = $('.cartnew-tips'), 12 var $cartnewTips = $('.cartnew-tips'),
13 $cartListWrap = $('#Y_CartListWrap'); 13 $cartListWrap = $('#Y_CartListWrap');
@@ -114,6 +114,43 @@ function toggleAll(obj, roleType) { @@ -114,6 +114,43 @@ function toggleAll(obj, roleType) {
114 capi.choiceOut(selectArray); 114 capi.choiceOut(selectArray);
115 } 115 }
116 } 116 }
  117 +
  118 +cartScroll = {
  119 + init: function() {
  120 + this.$listWrap = $cartListWrap;
  121 + this.$win = $(window);
  122 +
  123 + this.resetWindowHeight();
  124 + this.resetFixedWrapInfo();
  125 + this.onScroll();
  126 +
  127 + this.$win.resize(this.resetWindowHeight.bind(this));
  128 + this.$win.scroll(this.onScroll.bind(this));
  129 + this.$listWrap.on('reset-wrap', this.resetFixedWrapInfo.bind(this));
  130 + },
  131 + resetWindowHeight: function() {
  132 + this.wh = this.$win.height();
  133 + },
  134 + resetFixedWrapInfo: function() {
  135 + var $fixedWrap = this.$listWrap.find('.cart-fixed-wrap');
  136 +
  137 + this.fh = $fixedWrap.height() + $fixedWrap.offset().top;
  138 + },
  139 + onScroll: function() {
  140 + var num = this.$win.scrollTop() + this.wh;
  141 +
  142 + if (num > this.fh) {
  143 + if (this.$listWrap.hasClass('fixed')) {
  144 + this.$listWrap.removeClass('fixed');
  145 + }
  146 + } else {
  147 + if (!this.$listWrap.hasClass('fixed')) {
  148 + this.$listWrap.addClass('fixed');
  149 + }
  150 + }
  151 + }
  152 +};
  153 +
117 Cart = { 154 Cart = {
118 155
119 toggleSelectOne: function() { // 单选 156 toggleSelectOne: function() { // 单选
@@ -545,17 +582,19 @@ Cart = { @@ -545,17 +582,19 @@ Cart = {
545 } 582 }
546 }; 583 };
547 584
  585 +cartScroll.init(); // 购物车页面滚动
  586 +
548 $cartListWrap.on('click', 'li[data-role="pitem"] .cart-item-check', Cart.toggleSelectOne); // 单选 587 $cartListWrap.on('click', 'li[data-role="pitem"] .cart-item-check', Cart.toggleSelectOne); // 单选
549 $cartListWrap.on('click', '[data-role=cart-del-btn]', Cart.del); // 删除商品 588 $cartListWrap.on('click', '[data-role=cart-del-btn]', Cart.del); // 删除商品
550 $cartListWrap.on('click', '[data-role=cart-mov2fav-btn]', Cart.toFav); // 移入收藏夹 589 $cartListWrap.on('click', '[data-role=cart-mov2fav-btn]', Cart.toFav); // 移入收藏夹
551 $cartListWrap.on('click', '.minus, .plus', Cart.modNum); // 修改购物车数量 590 $cartListWrap.on('click', '.minus, .plus', Cart.modNum); // 修改购物车数量
552 $cartListWrap.on('click', '.cart-title .cart-item-check', Cart.toggleSelectAll); // 全选 591 $cartListWrap.on('click', '.cart-title .cart-item-check', Cart.toggleSelectAll); // 全选
553 -$cartListWrap.on('click', '.cartnew-sum .cart-item-check', Cart.toggleSelectAll); // 全选 592 +$cartListWrap.on('click', '#cbSelAllGoods', Cart.toggleSelectAll); // 全选
554 $cartListWrap.on('click', '.pre-sell-title .cart-item-check', Cart.togglePreAll); // 预售全选 593 $cartListWrap.on('click', '.pre-sell-title .cart-item-check', Cart.togglePreAll); // 预售全选
555 $cartListWrap.on('click', '.ord-sell-title .cart-item-check', Cart.toggleOrdAll); // 预售全选 594 $cartListWrap.on('click', '.ord-sell-title .cart-item-check', Cart.toggleOrdAll); // 预售全选
556 -$cartListWrap.on('click', '.cartnew-sum .delete-all-sel', Cart.delAll); // 批量删除商品  
557 -$cartListWrap.on('click', '.cartnew-sum .remove-all-2fav', Cart.toFavAll); // 批量移入收藏夹商品  
558 -$cartListWrap.on('click', '.cartnew-sum .clean-all-disable', Cart.cleanAllDisable); 595 +$cartListWrap.on('click', '.cart-fixed-submit .delete-all-sel', Cart.delAll); // 批量删除商品
  596 +$cartListWrap.on('click', '.cart-fixed-submit .remove-all-2fav', Cart.toFavAll); // 批量移入收藏夹商品
  597 +$cartListWrap.on('click', '.cart-fixed-submit .clean-all-disable', Cart.cleanAllDisable);
559 $cartListWrap.on('click', '#Y_SubmitBtn', Cart.submit); // 结算 598 $cartListWrap.on('click', '#Y_SubmitBtn', Cart.submit); // 结算
560 $cartListWrap.on('click', '#Y_CartSelectDialog .btn-account', Cart.submitSingle); 599 $cartListWrap.on('click', '#Y_CartSelectDialog .btn-account', Cart.submitSingle);
561 600
@@ -134,7 +134,7 @@ function cartInit() { @@ -134,7 +134,7 @@ function cartInit() {
134 } 134 }
135 135
136 function refreshCart(data) { 136 function refreshCart(data) {
137 - $('#Y_CartListWrap').html(cartListTpl(data)); 137 + $('#Y_CartListWrap').html(cartListTpl(data)).trigger('reset-wrap');
138 cartInit(); 138 cartInit();
139 } 139 }
140 140
@@ -23,9 +23,9 @@ var payWay, @@ -23,9 +23,9 @@ var payWay,
23 coupon, 23 coupon,
24 yohoCoin; 24 yohoCoin;
25 25
26 -var address = require('./order-new/address'),  
27 - invoice = require('./order-new/invoice'),  
28 - esaypayInfo = require('./order-new/easypay'); 26 +var address = require('./order/address'),
  27 + invoice = require('./order/invoice'),
  28 + esaypayInfo = require('./order/easypay');
29 29
30 var coinTpl = Hbs.compile($('#yoho-coin-tpl').html()); 30 var coinTpl = Hbs.compile($('#yoho-coin-tpl').html());
31 var promotionTpl = Hbs.compile($('#promotion-list-tpl').html()); 31 var promotionTpl = Hbs.compile($('#promotion-list-tpl').html());
@@ -1356,88 +1356,6 @@ @@ -1356,88 +1356,6 @@
1356 margin-right: 4px; 1356 margin-right: 4px;
1357 } 1357 }
1358 1358
1359 - .cartnew-sum {  
1360 - position: relative;  
1361 - background: #fff;  
1362 - border: 1px solid #e0e0e0;  
1363 - padding: 20px 30px 20px 50px;  
1364 - zoom: 1;  
1365 - margin-top: 20px;  
1366 - height: auto;  
1367 - overflow: hidden;  
1368 - font-size: 14px;  
1369 - font-weight: 300;  
1370 -  
1371 - .check-all-sum {  
1372 - font-size: 16px;  
1373 - color: #444;  
1374 - }  
1375 -  
1376 - .cart-item-check {  
1377 - margin-top: 0;  
1378 - }  
1379 -  
1380 - .left {  
1381 - float: left;  
1382 -  
1383 - a {  
1384 - color: #017cf8;  
1385 - margin-left: 20px;  
1386 -  
1387 - &:hover {  
1388 - color: #d0021b;  
1389 - }  
1390 - }  
1391 -  
1392 - input {  
1393 - position: relative;  
1394 - top: 2px;  
1395 - }  
1396 - }  
1397 -  
1398 - .right {  
1399 - float: right;  
1400 - text-align: right;  
1401 -  
1402 - p {  
1403 - height: 30px;  
1404 - line-height: 30px;  
1405 - }  
1406 -  
1407 - strong {  
1408 - color: #d0021b;  
1409 - font-size: 20px;  
1410 - font-weight: 300;  
1411 -  
1412 - &.ins {  
1413 - font-size: 14px;  
1414 - width: initial;  
1415 - font-weight: normal;  
1416 - }  
1417 - }  
1418 -  
1419 - b,  
1420 - strong {  
1421 - display: inline-block;  
1422 - font-style: normal;  
1423 - width: 110px;  
1424 - text-align: right;  
1425 - }  
1426 - }  
1427 -  
1428 - .sum {  
1429 - color: #333;  
1430 -  
1431 - strong {  
1432 - font-weight: 800;  
1433 -  
1434 - kbd {  
1435 - font-weight: normal;  
1436 - }  
1437 - }  
1438 - }  
1439 - }  
1440 -  
1441 .cart-item-check { 1359 .cart-item-check {
1442 position: absolute; 1360 position: absolute;
1443 left: 15px; 1361 left: 15px;
@@ -1490,19 +1408,81 @@ @@ -1490,19 +1408,81 @@
1490 } 1408 }
1491 } 1409 }
1492 1410
1493 - .cartnew-submit { 1411 + .cart-fixed-submit {
1494 height: 50px; 1412 height: 50px;
1495 - line-height: 50px;  
1496 - position: relative;  
1497 - background-color: #e0e0e0;  
1498 - margin-top: -1px; 1413 + font-weight: 300;
  1414 + font-size: 14px;
  1415 + margin-top: 20px;
1499 1416
1500 - span {  
1501 - display: inline-block;  
1502 - margin-left: 30px;  
1503 - font-size: 14px;  
1504 - font-weight: 300;  
1505 - color: #000; 1417 + .cart-fixed-wrap {
  1418 + width: 100%;
  1419 + height: 50px;
  1420 + line-height: 50px;
  1421 + background-color: #e0e0e0;
  1422 + }
  1423 +
  1424 + .center-content {
  1425 + width: 990px;
  1426 + position: relative;
  1427 + padding-left: 50px;
  1428 + box-sizing: border-box;
  1429 +
  1430 + > * {
  1431 + display: inline-block;
  1432 + }
  1433 + }
  1434 +
  1435 + .cart-item-check:before {
  1436 + content: "\e6f2";
  1437 + color: #fff;
  1438 + }
  1439 +
  1440 + .cart-item-checked:before {
  1441 + content: "\e6cb";
  1442 + color: #3a3a3a;
  1443 + }
  1444 +
  1445 + strong {
  1446 + color: #d0021b;
  1447 + }
  1448 +
  1449 + .fixed-option {
  1450 + margin-right: 60px;
  1451 +
  1452 + > a {
  1453 + color: #017cf8;
  1454 + margin-left: 20px;
  1455 + }
  1456 + }
  1457 +
  1458 + .select-num {
  1459 + margin-right: 26px;
  1460 + }
  1461 +
  1462 + .price-sum {
  1463 + width: 264px;
  1464 + line-height: 1.3;
  1465 + vertical-align: middle;
  1466 +
  1467 + .sum {
  1468 + position: relative;
  1469 +
  1470 + > strong {
  1471 + line-height: 1;
  1472 + font-size: 20px;
  1473 + font-weight: bold;
  1474 + position: absolute;
  1475 + right: 0;
  1476 + }
  1477 +
  1478 + kbd {
  1479 + font-weight: normal;
  1480 + }
  1481 + }
  1482 +
  1483 + .offer {
  1484 + color: #afafaf;
  1485 + }
1506 } 1486 }
1507 1487
1508 .btn-account { 1488 .btn-account {
@@ -1519,14 +1499,21 @@ @@ -1519,14 +1499,21 @@
1519 background-color: #d0021b; 1499 background-color: #d0021b;
1520 cursor: pointer; 1500 cursor: pointer;
1521 float: right; 1501 float: right;
1522 - }  
1523 1502
1524 - .btn-account-disable {  
1525 - background-color: #b0b0b0;  
1526 - cursor: not-allowed; 1503 + &.btn-account-disable {
  1504 + background-color: #b0b0b0;
  1505 + cursor: not-allowed;
  1506 + }
1527 } 1507 }
1528 } 1508 }
1529 1509
  1510 + .fixed .cart-fixed-wrap {
  1511 + position: fixed;
  1512 + left: 0;
  1513 + bottom: 0;
  1514 + z-index: 1;
  1515 + }
  1516 +
1530 .shop-cart-empty { 1517 .shop-cart-empty {
1531 padding-top: 110px; 1518 padding-top: 110px;
1532 padding-bottom: 30px; 1519 padding-bottom: 30px;