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 243 additions and 61 deletions
... ... @@ -114,7 +114,7 @@ function search() {
}
function scrollHandler() {
if (!end || $(window).scrollTop() + winH >= $(document).height() - 50) {
if (!end || $(window).scrollTop() + winH >= $(document).height() - 200) {
search();
}
}
... ...
... ... @@ -18,11 +18,6 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'),
var $cart = $('.cart-bar');
require('./desc');
require('./comments-consults');
require('../recommend-for-you-product-desc');
//add extra marign-bottom for footer to show the yoho copyright
function showFooter() {
var $cartBar = $('.cart-bar');
... ... @@ -74,6 +69,10 @@ if (goodsDiscountHammer && $discountFolder.children().length > 0) {
});
}
require('./desc');
require('./comments-consults');
require('../recommend-for-you-product-desc');
//购物车商品数量
$.ajax({
type: 'GET',
... ...
... ... @@ -73,14 +73,13 @@ if (addToCartHammer) {
addToCartHammer.on('tap', function(e) {
chosePanel.show();
// 统计代码：用于统计用户加入购物车的动作
// if (window._yas) {
// window._yas.sendCustomInfo({
// pd: productId,
// by: 1
// }, false);
// }
//统计代码：用于统计用户加入购物车的动作
if (window._yas) {
window._yas.sendCustomInfo({
pd: productId,
by: 1
}, true);
}
});
}
... ...
... ... @@ -11,7 +11,8 @@ var $ = require('jquery');
// var $page = $('.yoho-page');
var $num;
var $num,
$chosed;
// var tpl;
... ... @@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
var $this = $(this),
$that = $(e.target).closest('.chose-items'),
numArray,
index;
index,
i;
var $siblingBlock = $this.closest('.block-list').siblings(':first'),
currentNumArray = $this.data('numstr').split('/');
if ($this.hasClass('chosed')) {
$this.parent().find('.block').removeClass('chosed');
$that.find('.num .left-num').html('');
} else if ($this.hasClass('disable')) {
$this.css('background-color', '#000');
return;
} else if (!$this.hasClass('chosed')) {
$this.siblings('.chosed').removeClass('chosed');
$this.addClass('chosed');
$this.toggleClass('chosed');
index = $this.index();
$chosed = $('.block-list>ul>li.chosed');
//根据颜色切换图片
if ($this.closest('.block-list').hasClass('color-list')) {
$('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
}
//剩余的商品数
if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {
numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');
$that.find('.num .left-num').html('剩余' + numArray[index] + '件');
} else {
$that.find('.num .left-num').html('');
if ($chosed.length === 0) {
$this.closest('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
//点击切换
$siblingBlock.find('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
} else if ($chosed.length === 1 && $this.hasClass('chosed')) {
numArray = $chosed.data('numstr').split('/');
$siblingBlock.find('.block').removeClass('zero-stock');
for (i = 0; i < numArray.length; i++) {
if (0 === numArray[i] - 0) {
$siblingBlock.find('.block').eq(i).addClass('zero-stock');
}
}
} else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
$siblingBlock.find('ul>li').each(function() {
$(this).removeClass('zero-stock');
if (0 === $(this).data('num') - 0) {
$(this).addClass('zero-stock');
}
});
$that.find('.num .left-num').html('');
} else if ($chosed.length === 2) {
$siblingBlock.find('.block').removeClass('zero-stock');
for (i = 0; i < currentNumArray.length; i++) {
if (0 === currentNumArray[i] - 0) {
$siblingBlock.find('.block').eq(i).addClass('zero-stock');
}
}
numArray = $siblingBlock.find('.chosed').data('numstr').split('/');
$that.find('.num .left-num').html('剩余' + numArray[index] + '件');
}
}).on('touchstart', '.btn-minus', function() {
var num = +$num.val();
var num = +$num.val(),
$chosed = $('.block-list>ul>li.chosed');
//若颜色和尺码没有被同时选中，则不能点击
if ($('.block-list>ul>li.chosed').length < 2) {
if ($chosed.length < 2) {
return;
}
... ...
... ... @@ -7,23 +7,23 @@
var $ = require('jquery'),
lazyLoad = require('yoho.lazyload');
var chosePanel = require('./chose-panel');
//var chosePanel = require('./chose-panel');
lazyLoad($('.lazy'));
$('.gift-advance-page').on('touchstart', '.chose', function() {
var id = $(this).closest('.gift-advance-good').data('id');
$.ajax({
type: 'GET',
url: '/shoppingCart/goodinfo',
data: {
id: id
},
success: function(data) {
if (data.code === 200) {
chosePanel.show(data.data);
}
}
});
});
\ No newline at end of file
//$('.gift-advance-page').on('touchstart', '.chose', function() {
// var id = $(this).closest('.gift-advance-good').data('id');
//
// $.ajax({
// type: 'GET',
// url: '/shoppingCart/goodinfo',
// data: {
// id: id
// },
// success: function(data) {
// if (data.code === 200) {
// chosePanel.show(data.data);
// }
// }
// });
//});
\ No newline at end of file
... ...
... ... @@ -9,7 +9,8 @@ var $ = require('jquery'),
lazyLoad = require('yoho.lazyload');
var dialog = require('../me/dialog'),
tip = require('../plugin/tip');
tip = require('../plugin/tip'),
chosePanel = require('./chose-panel');
var $names;
... ... @@ -156,4 +157,23 @@ $('.btn-balance').on('touchend', function() {
window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
});
$('.advance-buy').on('touchend', function() {
var $advanceBuy = $('#advanceBuy'),
$mainCart = $('#mainCart');
if ($advanceBuy.hasClass('hide')) {
$mainCart.removeClass('show').addClass('hide');
$advanceBuy.removeClass('hide').addClass('show');
} else {
$advanceBuy.removeClass('show').addClass('hide');
$mainCart.removeClass('hide').addClass('show');
}
});
$('.chose').on('touchend', function() {
//var id = $(this).closest('.gift-advance-good').data('id');
chosePanel.show();
});
... ...
... ... @@ -21,7 +21,7 @@
"yoho.iswiper": "3.0.1",
"iscroll": "5.1.2",
"import-style": "1.0.0",
"yoho.lazyload": "1.1.3",
"yoho.lazyload": "1.1.4",
"yoho.handlebars": "3.0.3",
"yoho.hammer": "2.0.4"
},
... ...
... ... @@ -105,10 +105,16 @@
color: #e10;
}
&.disable {
&.zero-stock {
color: #e0e0e0;
border-color: #e0e0e0;
}
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
color: #e0e0e0;
background-color: #f0f0f0;
}
}
.num {
... ...
... ... @@ -177,6 +177,117 @@
font-size: 28rem / $pxConvertRem;
}
}
.gift-advance-good {
position: relative;
padding: 20rem / $pxConvertRem 0;
margin-left: 34rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
&:last-child {
border-bottom: none;
}
}
.advance-block .gift-advance-good:last-child {
border-bottom: none;
}
.advance-block:last-child .gift-advance-good:last-child {
border-bottom: 1px solid #e0e0e0;
}
.thumb-wrap {
position: relative;
float: left;
width: 120rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
.thumb {
width: 100%;
height: 100%;
}
}
.tag {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25rem / $pxConvertRem;
color: #fff;
text-align: center;
background: #a1ce4e;
&:before {
content: '赠品';
}
}
.deps {
margin-left: 135rem / $pxConvertRem;
}
.name {
font-size: 28rem / $pxConvertRem;
}
.row:nth-child(2) {
font-size: 22rem / $pxConvertRem;
height: 45rem / $pxConvertRem;
line-height: 45rem / $pxConvertRem;
> span {
margin-right: 15rem / $pxConvertRem;
}
}
.row:nth-child(3) {
position: relative;
}
.color, .size {
color: #b6b6b6;
}
.price {
font-size: 24rem / $pxConvertRem;
color: #000;
}
.count {
font-size: 20rem / $pxConvertRem;
color: #999;
margin-left: 22rem / $pxConvertRem;
}
.chose {
position: absolute;
width: 88rem / $pxConvertRem;
height: 58rem / $pxConvertRem;
background: #f8f8f8;
border: 1px solid #ccc;
right: 20rem / $pxConvertRem;
top: 71rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
}
.title {
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
padding-left: 20rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
background: #f8f8f8;
}
.advance-block .tag {
background: #eb76aa;
&:before {
content: '加价购';
}
}
}
.shopping-cart-zero{
.cart-zero{
... ...
{{> layout/header}}
<div class="shopping-cart-page yoho-page" style="display: none;">
<div id="mainCart" class="shopping-cart-page yoho-page">
{{# shoppingCart}}
{{#if cartNav}}
<ul class="cart-nav clearfix">
... ... @@ -44,7 +45,23 @@
{{/ shoppingCart}}
</div>
<div class="shopping-cart-zero yoho-page">
<div id="advanceBuy" class="shopping-cart-page yoho-page hide">
{{# shoppingCart}}
{{# commonCart}}
{{# advanceBuy}}
<span>
{{promotionTitle}}
</span>
{{# goods}}
{{> shopping-cart/gift-advance-good}}
{{/ goods}}
{{/ advanceBuy}}
{{/ commonCart}}
{{/ shoppingCart}}
</div>
<div class="shopping-cart-zero yoho-page hide">
<div class="cart-zero">
<i class="iconfont">&#xe62c</i>
<p>您的购物车暂无商品</p>
... ... @@ -52,4 +69,5 @@
</div>
{{> product/recommend-for-you}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -16,16 +16,16 @@
</a>
</li>
{{/ freebie}}
{{# advanceBuy}}
{{#if advanceBuy}}
<li class="advance-buy">
<span class="iconfont">&#xe61b;</span>
加价购
<a href={{url}}>
<a>
<span class="count">{{count}}</span>
<span class="iconfont icon-right-arrow">&#xe614;</span>
</a>
</li>
{{/ advanceBuy}}
{{/if}}
</ul>
{{/if}}
... ...
... ... @@ -25,7 +25,7 @@
<span>颜色</span>
<ul class="clearfix" data-type="color">
{{# colors}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}">
<li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-numstr="{{sizeNumStr}}">
{{name}}
</li>
{{/ colors}}
... ... @@ -35,7 +35,7 @@
<span>尺码</span>
<ul class="clearfix" data-type="size" >
{{# sizes}}
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}">
<li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}">
{{name}}
</li>
{{/ sizes}}
... ...