fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 90f4935fd6e8e22404f736f03e4148a239af0d7c 2 parents 7fda80a2 df096e84

Merge branch 'feature/shoppingCart' of http://git.yoho.cn/fe/yohobuy-node into feature/shoppingCart

Inline Side-by-side
Showing 7 changed files with 331 additions and 104 deletions
... ... @@ -116,7 +116,7 @@ const orderSubmitAsync = (uid, cartType, addressId, deliveryTime, deliveryWay, p
if (other.invoicesType) {
Object.assign(param, {
invoices_type: other.invoicesType,
invoices_itle: other.invoicesTitle,
invoices_title: other.invoicesTitle,
invoice_content: other.invoicesContent,
receiverMobile: other.receiverMobile
});
... ...
... ... @@ -330,7 +330,7 @@
{{#if cart.isEmpty}}
<div class="bottom-tab bottom-tab-slide">
<span class="bottom-title cur {{#unless cart.deleteShop}}none{{/unless}}">凑单商品</span>
<span class="bottom-title {{#if cart.deleteShop}}cur{{/if}} {{#unless cart.deleteShop}}none{{/unless}}">凑单商品</span>
<span class="bottom-title {{#unless cart.deleteShop}}cur{{/unless}}">为您优选</span>
<span class="bottom-title">最近浏览</span>
<span class="change">换一批
... ... @@ -345,8 +345,8 @@
{{>individual-slide}}
</ul>
<div class="img-brand-switch">
<a class="prev iconfont" href="javascript:;">&#xe609;</a>
<a class="next iconfont" href="javascript:;">&#xe608;</a>
<a class="prev iconfont" href="javascript:;"></a>
<a class="next iconfont" href="javascript:;"></a>
</div>
</div>
<div class="individual-item individual-item-recommendGoods {{#if cart.deleteShop}}none{{/if}}">
... ... @@ -359,14 +359,14 @@
<a class="next iconfont" href="javascript:;"></a>
</div>
</div>
<div class="individual-item individual-item-latestWalk none">
<div class="individual-item individual-item-latestWalk">
<input id="latest-walk-count" type="hidden" value="">
<ul id="latest-walk-goods" class="goods clearfix img-list">
{{>individual-slide}}
</ul>
<div class="img-brand-switch">
<a class="prev iconfont" href="javascript:;">&#xe609;</a>
<a class="next iconfont" href="javascript:;">&#xe608;</a>
<a class="prev iconfont" href="javascript:;"></a>
<a class="next iconfont" href="javascript:;"></a>
</div>
</div>
</div>
... ...
... ... @@ -71,7 +71,43 @@
</div>
<div class="goods-wrap">
<div class="block-title">订单商品信息<span class="right">返回购物车修改 ></span></div>
<div class="block-title">订单商品信息<a href="/cart" class="right">返回购物车修改 ></a></div>
{{#with shoppingCartData}}
{{#isY is_multi_package}}
<div class="multi-package-row">
温馨提示：您购买的商品<em class="red">分属不同仓库</em>，需要调拨，将被拆分成多个包裹送达
<span class="iconfont show-package">&#xe628;</span>
<div class="package-list hide">
<div class="package-up-icon"></div>
{{#each ../package_list}}
<div class="package-item">
<p class="package-title bold">包裹{{math @index '+' 1}}:{{#if @first}}总仓发货{{^}}异地调拨{{/if}}</p>
<div class="toggle-btns">
<span class="iconfont toggle-icon left-icon">&#xe609;</span>
<span class="iconfont toggle-icon right-icon">&#xe608;</span>
</div>
<div class="package-goods-wrap">
<ul class="package-goods clearfix">
{{#each goods_list}}
<li class="left">
<img class="lazy package-goods-img" data-original="{{image goods_images 68 90}}">
{{#isEqual goods_type 'gift'}}
<span>赠品</span>
{{/isEqual}}
{{#isEqual goods_type 'price_gift'}}
<span>加价购</span>
{{/isEqual}}
</li>
{{/each}}
</ul>
</div>
<p class="package-shipping">运费：¥{{shopping_cost}}元（原价{{shopping_orig_cost}}元，优惠{{shopping_cut_cost}}元）</p>
</div>
{{/each}}
</div>
</div>
{{/isY}}
{{/with}}
<table class="goods-table">
<thead>
<tr>
... ... @@ -91,12 +127,12 @@
<a class="image" href="{{linkToGoods}}">
<img src="{{image goods_images 64 85}}" class="thumb">
<p class="name">
{{#if gift}}
{{#isEqual goods_type 'gift'}}
<span>赠品</span>
{{/if}}
{{#if markupBuy}}
{{/isEqual}}
{{#isEqual goods_type 'price_gift'}}
<span>加价购</span>
{{/if}}
{{/isEqual}}
{{product_name}}
</p>
</a>
... ...
... ... @@ -46,6 +46,11 @@ $('.sale-info').mouseenter(function() {
$(this).removeClass('active').children('ul').addClass('none');
});
$('.side-img-dd').slider2({
shownum: 5,
isCircle: true
});
// 删除购物车商品，把删除的商品移入cookie中
function cartDel(data, delUrl, cookieList) {
$.ajax({
... ... @@ -106,116 +111,98 @@ var togetherDialog = {};
lazyLoad($('#details-html img'));
// 凑单 顶部 轮播
$('.side-img-dd').slider2({
isCircle: true,
shownum: 5
});
// 店铺推荐
function loadTogetherGoods() {
// $.ajax({
// type: 'GET',
// url: '',
// data: {
// // skn: skn,
// size: 20,
// num: 1
// }
// }).then(function(data) {
// var pro = data.data.products;
// if (data.code === 200) {
// if (pro.length === 0) {
// return;
// }
// $('.individual-comment').find('.block-title .title').eq(0).removeClass('hide').addClass('cur');
// $('.individual-comment').find('.block-title .title').eq(1).removeClass('cur');
// $('.individual-comment').find('.block-title').find('.sep').removeClass('hide');
//
// $('#recommend-shop').removeClass('hide');
$('.side-img-dd').slider2({
shownum: 5,
isCircle: true
});
// } else {
// $('.individual-comment').find('.block-title .title:first-child').addClass('hide');
// $('.individual-comment').find('.block-title').find('.title').addClass('cur').prev('.sep').addClass('hide');
// $('#recommend-shop').detach();
// }
// });
}
loadTogetherGoods();
// ----------------底部 为你优选,最近浏览 begin--------------
// 推荐、优选、浏览切换
$('.bottom-tab-slide').on('click', '.bottom-title', function() {
var $this = $(this),
index = $this.index();
console.log(index);
$(function() {
var $togetherGoods = $('.individual-item-togetherGoods'),
$latestWalk = $('.individual-item-latestWalk'),
$recommendGoods = $('.individual-item-recommendGoods');
$recommendGoods = $('.individual-item-recommendGoods'),
$latestWalk = $('.individual-item-latestWalk');
if ($this.hasClass('cur')) {
return;
if ($togetherGoods.hasClass('none')) {
$recommendGoods.show();
}
$this.addClass('cur');
$this.siblings('.cur').removeClass('cur');
switch (index) {
case 0: {
$('.bottom-tab-slide').on('click', '.bottom-title', function() {
var $this = $(this),
index = $this.index();
console.log(index);
$togetherGoods.hide();
$recommendGoods.hide();
$togetherGoods.removeClass('none');
$recommendGoods.addClass('none');
$latestWalk.addClass('none');
break;
if ($this.hasClass('change')) {
return;
}
case 1: {
$togetherGoods.addClass('none');
$recommendGoods.removeClass('none');
$latestWalk.addClass('none');
break;
}
case 2: {
$togetherGoods.addClass('none');
$recommendGoods.addClass('none');
$latestWalk.removeClass('none');
break;
if ($this.hasClass('cur')) {
return;
}
}
$this.addClass('cur');
$this.siblings('.cur').removeClass('cur');
switch (index) {
case 0: {
$togetherGoods.slideDown();
$recommendGoods.hide();
$latestWalk.hide();
break;
}
case 1: {
$togetherGoods.hide();
$recommendGoods.slideDown();
$latestWalk.hide();
break;
}
case 2: {
$togetherGoods.hide();
$recommendGoods.hide();
$latestWalk.slideDown();
break;
}
}
});
});
// 凑单 底部 轮播
function loadSlideGoods() {
// $.ajax({
// type: 'GET',
// url: '',
// data: {
// // skn: skn,
// size: 20,
// num: 1
// }
// }).then(function(data) {
// var pro = data.data.products;
$.ajax({
type: 'GET',
url: '',
data: {
// skn: skn,
size: 20,
num: 1
}
}).then(function(data) {
// var pro = data.data.products;
// if (data.code === 200) {
// if (pro.length === 0) {
// return;
// }
// if (data.code === 200) {
// if (pro.length === 0) {
// return;
// }
$('#recommend-shop').removeClass('none');
$('.individual-item ').slider2({
shownum: 5,
isCircle: true
});
$('.individual-item').slider2({
shownum: 5,
isCircle: true
// } else {
// $('.bottom-title').filter('.change').addClass('none');
// }
});
}
loadSlideGoods();
$(function() {
$('.bottom-tab .change').click(function() {
$('.img-brand-switch .next').trigger('click');
});
});
// ----------------底部 为你优选,最近浏览 end--------------
// 凑单弹框 详情切换
$('body').on('click', '.piclist li', function() {
... ... @@ -240,6 +227,7 @@ $('body').on('click', '.pre, .next', function() {
$(this).siblings('.con').find('li').removeClass('active').eq(pacList).addClass('active');
$('.detail-bigpic:not(.none) .bigpic').hide().eq(pacList).show();
});
$('body').on('click', '.color', function() {
pacList = 0;
$('.color').find('p').removeClass('active');
... ... @@ -503,7 +491,7 @@ $paySum.on('click', '.btn-account', function() {
// $('.togethor').show();
// $('.cart-togetherGoods').show();
$('.cart-togetherGoods').show();
});
... ...
... ... @@ -20,8 +20,10 @@ var order = {
var payWay,
deliveryWay,
multiPackage,
coupon,
yohoCoin;
var address = require('./order-new/address'),
invoice = require('./order-new/invoice');
... ... @@ -272,6 +274,82 @@ deliveryWay = {
}
};
multiPackage = {
$el: $('.multi-package-row'),
init: function() {
var that = this;
if (!this.$el.length) {
return;
}
this.$pkgList = $('.package-list', this.$el);
// 初始化数据
that.pkgCache = {};
$('.package-item', this.$el).each(function() {
var $this = $(this);
var $list = $this.find('.package-goods'),
num = $list.children('li').length;
$list.width(num * 86 + 4);
if (num > 5) {
$this.find('.toggle-btns').show();
}
that.pkgCache[$(this).index()] = {
total: num
};
});
this.eventBind();
},
eventBind: function() {
var that = this;
this.$el.on('click', '.show-package', function(e) {
that.$pkgList.toggleClass('hide');
e.stopPropagation();
}).on('click', '.toggle-icon', function() {
var $this = $(this);
var flag = $this.hasClass('left-icon') ? -1 : 1;
that.pkgPageControl($this.closest('.package-item'), flag);
});
// 绑定document事件，去触发面板关闭
$(document).on('click', function(e) {
if (that.$pkgList.hasClass('hide') || $(e.target).closest('.package-list').length > 0) {
return;
}
that.$pkgList.addClass('hide');
});
},
pkgPageControl: function($el, flag) {
var id = $el.index(),
$ul = $el.find('.package-goods'),
theCache = this.pkgCache[id],
curPage = theCache.cur ? theCache.cur : 1,
page = Math.ceil(theCache.total / 5);
curPage += flag;
// 第一页或最后一页
if (curPage < 1 || curPage > page) {
return;
}
$ul.animate({
marginLeft: -(curPage - 1) * ($ul.parent('.package-goods-wrap').width() + 20)
}, 200);
theCache.cur = curPage;
}
};
coupon = {
$el: $('#use-coupons'),
init: function() {
... ... @@ -493,6 +571,7 @@ $('#order-submit').click(function() {
if (invoiceInfo) {
$.extend(order, invoiceInfo);
}
$.ajax({
type: 'POST',
url: '/cart/ensure/submit',
... ... @@ -506,5 +585,6 @@ $('#order-submit').click(function() {
payWay.init();
deliveryWay.init();
multiPackage.init();
coupon.init();
yohoCoin.init();
... ...
... ... @@ -1385,12 +1385,18 @@
width: 990px;
height: 368px;
overflow: hidden;
.individual-item-recommendGoods{
display: none;
}
.individual-item-latestWalk{
display: none;
}
.individual-item {
position: relative;
width:100%;
overflow: hidden;
font-size: 12px;
.goods {
width: 990px;
height: 338px;
... ...
... ... @@ -414,6 +414,123 @@
.goods-wrap {
border: 1px solid $borderColor;
.block-title {
overflow: hidden;
}
}
/* 拆单 */
.multi-package-row {
position: relative;
height: 40px;
font-size: 14px;
line-height: 40px;
text-align: center;
background: #fefbd5;
border-bottom: 1px solid $borderColor;
.red {
color: $red;
}
.show-package {
font-size: 16px;
cursor: pointer;
}
.package-up-icon {
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -10px;
left: 248px;
+ .package-item .package-title {
border-top: none;
}
}
.package-list {
position: absolute;
background: #fff;
border: 1px solid #000;
width: 410px;
right: 0;
padding: 0 50px;
text-align: left;
}
.package-item {
position: relative;
padding: 10px 0;
border-top: 1px solid $borderColor;
.toggle-btns {
display: none;
}
.toggle-icon {
position: absolute;
font-size: 26px;
top: 76px;
cursor: pointer;
font-weight: bold;
}
.left-icon {
left: -34px;
}
.right-icon {
right: -34px;
}
}
.package-title {
line-height: 40px;
}
.package-goods-wrap {
height: 92px;
overflow: hidden;
li {
width: 64px;
height: 90px;
border: 1px solid $borderColor;
margin-right: 20px;
overflow: hidden;
position: relative;
}
li > span {
width: 100%;
height: 16px;
line-height: 17px;
font-size: 12px;
color: #fff;
background: #ff5660;
text-align: center;
position: absolute;
bottom: 0;
}
.package-goods-img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
}
}
.package-shipping {
color: #595959;
line-height: 30px;
}
}
.goods-table {
... ... @@ -457,7 +574,7 @@
text-align: center;
background: #ff5660;
color: #fff;
vertical-align: middle;
vertical-align: text-bottom;
}
}
... ...