Authored by yyq

cart fixed

... ... @@ -200,42 +200,32 @@
{{#stat}}
<!-- 总价计算 -->
<div class="cartnew-sum">
{{#unless ../isEmpty}}
<div class="left">
<a href="javascript:void(0);" class="btn_h"
style="display:none;"><span>清空商品</span></a>
<i class="cart-item-check iconfont" id="cbSelAllGoods"></i>
<span class="check-all-sum">全选</span>
<a class="delAll delete-all-sel" href="javascript:void(0);">删除选中商品</a>
<a class="removeAll remove-all-2fav" href="javascript:void(0);">移入收藏夹</a>
<a class="emptyDisabled clean-all-disable"
href="javascript:void(0);">清空失效商品</a>
<div class="cart-fixed-submit">
<div class="cart-fixed-wrap">
<div class="center-content clearfix">
{{#unless ../isEmpty}}
<div class="fixed-option">
<i class="cart-item-check iconfont" id="cbSelAllGoods"></i>
<span class="check-all-sum">全选</span>
<a class="delAll delete-all-sel" href="javascript:void(0);">删除选中商品</a>
<a class="removeAll remove-all-2fav" href="javascript:void(0);">移入收藏夹</a>
<a class="emptyDisabled clean-all-disable"
href="javascript:void(0);">清空失效商品</a>
</div>
{{/unless}}
<p class="select-num">已选商品<strong class="ins">{{selectedGoodsCount}}</strong></p>
<div class="price-sum">
<p class="sum">应付金额(不含邮费):<strong><kbd>¥</kbd> {{lastOrderAmount}}</strong></p>
{{#if discountAmount}}
<p class="offer">活动优惠:¥ {{discountAmount}}</p>
{{/if}}
</div>
<a href="javascript:void(0);" id="Y_SubmitBtn" class="btn-account right"
{{#if mix}} data-mix="true"{{/if}}{{#if ensureUrl}} data-ensureurl="{{ensureUrl}}"{{/if}}
{{#if noSelectGiftTip}} data-noSelectGiftTip="true"{{/if}}>去结算</a>
</div>
{{/unless}}
<div class="right">
<p>
{{#if gainYohoCoin}}
<a href="/help/?category_id=87" class="yoho-coin" target="_blank"></a>
共返有货币:{{gainYohoCoin}}&#12288;&#12288;{{/if}}
已选商品<strong class="ins">{{selectedGoodsCount}}</strong>&#12288;&#12288;
商品金额:<b>¥&nbsp;{{orderAmount}}</b>
</p>
{{#if discountAmount}}<p>活动优惠:<b>-&nbsp;¥&nbsp;{{discountAmount}}</b></p>{{/if}}
<!--<p>优惠码/优惠券:<b>¥&nbsp;8888.00</b></p>-->
<p class="sum">
应付金额(不含邮费):<strong><kbd>¥&nbsp;</kbd>{{lastOrderAmount}}</strong></p>
</div>
</div>
<div class="cartnew-submit" id="pay-sum">
<!--<span>添加礼品袋</span>-->
<a href="javascript:void(0);"
id="Y_SubmitBtn"
class="btn-account"
{{#if mix}}data-mix="true"{{/if}}
{{#if ensureUrl}}data-ensureurl="{{ensureUrl}}"{{/if}}
{{#if noSelectGiftTip}}data-noSelectGiftTip="true"{{/if}}>去结算</a>
</div>
{{/stat}}
{{> mix/cart/cart-pre-sell-tpl }}
... ...
... ... @@ -7,7 +7,7 @@ var $ = require('yoho-jquery'), // eslint-disable-line
RAlert = rDialog.RAlert,
capi = require('./cart-api'),
yas = require('../common/data-yas'),
Cart;
Cart, cartScroll;
var $cartnewTips = $('.cartnew-tips'),
$cartListWrap = $('#Y_CartListWrap');
... ... @@ -114,6 +114,43 @@ function toggleAll(obj, roleType) {
capi.choiceOut(selectArray);
}
}
cartScroll = {
init: function() {
this.$listWrap = $cartListWrap;
this.$win = $(window);
this.resetWindowHeight();
this.resetFixedWrapInfo();
this.onScroll();
this.$win.resize(this.resetWindowHeight.bind(this));
this.$win.scroll(this.onScroll.bind(this));
this.$listWrap.on('reset-wrap', this.resetFixedWrapInfo.bind(this));
},
resetWindowHeight: function() {
this.wh = this.$win.height();
},
resetFixedWrapInfo: function() {
var $fixedWrap = this.$listWrap.find('.cart-fixed-wrap');
this.fh = $fixedWrap.height() + $fixedWrap.offset().top;
},
onScroll: function() {
var num = this.$win.scrollTop() + this.wh;
if (num > this.fh) {
if (this.$listWrap.hasClass('fixed')) {
this.$listWrap.removeClass('fixed');
}
} else {
if (!this.$listWrap.hasClass('fixed')) {
this.$listWrap.addClass('fixed');
}
}
}
};
Cart = {
toggleSelectOne: function() { // 单选
... ... @@ -545,17 +582,19 @@ Cart = {
}
};
cartScroll.init(); // 购物车页面滚动
$cartListWrap.on('click', 'li[data-role="pitem"] .cart-item-check', Cart.toggleSelectOne); // 单选
$cartListWrap.on('click', '[data-role=cart-del-btn]', Cart.del); // 删除商品
$cartListWrap.on('click', '[data-role=cart-mov2fav-btn]', Cart.toFav); // 移入收藏夹
$cartListWrap.on('click', '.minus, .plus', Cart.modNum); // 修改购物车数量
$cartListWrap.on('click', '.cart-title .cart-item-check', Cart.toggleSelectAll); // 全选
$cartListWrap.on('click', '.cartnew-sum .cart-item-check', Cart.toggleSelectAll); // 全选
$cartListWrap.on('click', '#cbSelAllGoods', Cart.toggleSelectAll); // 全选
$cartListWrap.on('click', '.pre-sell-title .cart-item-check', Cart.togglePreAll); // 预售全选
$cartListWrap.on('click', '.ord-sell-title .cart-item-check', Cart.toggleOrdAll); // 预售全选
$cartListWrap.on('click', '.cartnew-sum .delete-all-sel', Cart.delAll); // 批量删除商品
$cartListWrap.on('click', '.cartnew-sum .remove-all-2fav', Cart.toFavAll); // 批量移入收藏夹商品
$cartListWrap.on('click', '.cartnew-sum .clean-all-disable', Cart.cleanAllDisable);
$cartListWrap.on('click', '.cart-fixed-submit .delete-all-sel', Cart.delAll); // 批量删除商品
$cartListWrap.on('click', '.cart-fixed-submit .remove-all-2fav', Cart.toFavAll); // 批量移入收藏夹商品
$cartListWrap.on('click', '.cart-fixed-submit .clean-all-disable', Cart.cleanAllDisable);
$cartListWrap.on('click', '#Y_SubmitBtn', Cart.submit); // 结算
$cartListWrap.on('click', '#Y_CartSelectDialog .btn-account', Cart.submitSingle);
... ...
... ... @@ -134,7 +134,7 @@ function cartInit() {
}
function refreshCart(data) {
$('#Y_CartListWrap').html(cartListTpl(data));
$('#Y_CartListWrap').html(cartListTpl(data)).trigger('reset-wrap');
cartInit();
}
... ...
... ... @@ -23,9 +23,9 @@ var payWay,
coupon,
yohoCoin;
var address = require('./order-new/address'),
invoice = require('./order-new/invoice'),
esaypayInfo = require('./order-new/easypay');
var address = require('./order/address'),
invoice = require('./order/invoice'),
esaypayInfo = require('./order/easypay');
var coinTpl = Hbs.compile($('#yoho-coin-tpl').html());
var promotionTpl = Hbs.compile($('#promotion-list-tpl').html());
... ...
... ... @@ -1356,88 +1356,6 @@
margin-right: 4px;
}
.cartnew-sum {
position: relative;
background: #fff;
border: 1px solid #e0e0e0;
padding: 20px 30px 20px 50px;
zoom: 1;
margin-top: 20px;
height: auto;
overflow: hidden;
font-size: 14px;
font-weight: 300;
.check-all-sum {
font-size: 16px;
color: #444;
}
.cart-item-check {
margin-top: 0;
}
.left {
float: left;
a {
color: #017cf8;
margin-left: 20px;
&:hover {
color: #d0021b;
}
}
input {
position: relative;
top: 2px;
}
}
.right {
float: right;
text-align: right;
p {
height: 30px;
line-height: 30px;
}
strong {
color: #d0021b;
font-size: 20px;
font-weight: 300;
&.ins {
font-size: 14px;
width: initial;
font-weight: normal;
}
}
b,
strong {
display: inline-block;
font-style: normal;
width: 110px;
text-align: right;
}
}
.sum {
color: #333;
strong {
font-weight: 800;
kbd {
font-weight: normal;
}
}
}
}
.cart-item-check {
position: absolute;
left: 15px;
... ... @@ -1490,19 +1408,81 @@
}
}
.cartnew-submit {
.cart-fixed-submit {
height: 50px;
line-height: 50px;
position: relative;
background-color: #e0e0e0;
margin-top: -1px;
font-weight: 300;
font-size: 14px;
margin-top: 20px;
span {
display: inline-block;
margin-left: 30px;
font-size: 14px;
font-weight: 300;
color: #000;
.cart-fixed-wrap {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #e0e0e0;
}
.center-content {
width: 990px;
position: relative;
padding-left: 50px;
box-sizing: border-box;
> * {
display: inline-block;
}
}
.cart-item-check:before {
content: "\e6f2";
color: #fff;
}
.cart-item-checked:before {
content: "\e6cb";
color: #3a3a3a;
}
strong {
color: #d0021b;
}
.fixed-option {
margin-right: 60px;
> a {
color: #017cf8;
margin-left: 20px;
}
}
.select-num {
margin-right: 26px;
}
.price-sum {
width: 264px;
line-height: 1.3;
vertical-align: middle;
.sum {
position: relative;
> strong {
line-height: 1;
font-size: 20px;
font-weight: bold;
position: absolute;
right: 0;
}
kbd {
font-weight: normal;
}
}
.offer {
color: #afafaf;
}
}
.btn-account {
... ... @@ -1519,14 +1499,21 @@
background-color: #d0021b;
cursor: pointer;
float: right;
}
.btn-account-disable {
background-color: #b0b0b0;
cursor: not-allowed;
&.btn-account-disable {
background-color: #b0b0b0;
cursor: not-allowed;
}
}
}
.fixed .cart-fixed-wrap {
position: fixed;
left: 0;
bottom: 0;
z-index: 1;
}
.shop-cart-empty {
padding-top: 110px;
padding-bottom: 30px;
... ...