Authored by 郭成尧

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuywap-node into develop

 the commit.
/**
* 购物车Logic
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/20
*/
var $ = require('jquery'),
ellipsis = require('mlellipsis'),
Hammer = require('yoho.hammer');
var chosePanel = require('./chose-panel'),
dialog = require('../me/dialog'),
loading = require('../plugin/loading'),
tip = require('../plugin/tip');
var $cartContent = $('.cart-content'),
cartType = $('#cartType').val(),
$cartNav = $('.cart-nav'),
$cartPage = $('.shopping-cart-page'),
hasShowCartPresellTip = false;
var navHammer,
advanceBuyHammer,
freebieHammer,
switchChose = false;
var isRefreshByDelete = window.cookie('_yoho-cart-refreshByDelete') === 'true' ? true : false;
var lowStockCount = 0;
loading.showLoadingMask();
function needLoadRecommandForYou() {
return window.isCookiesEnabled() ?
$('.cart-goods').length <= 0 && !isRefreshByDelete :
$('.cart-goods').length <= 0;
}
if (needLoadRecommandForYou()) {
require('../product/recommend-for-you');
} else {
if (isRefreshByDelete) {
$('body').css('background-color', '#f0f0f0');
}
require('./good');
}
$cartPage.css('display', 'block');
loading.hideLoadingMask();
window.setCookie('_yoho-cart-refreshByDelete', false);
ellipsis.init();
function cartContentShow() {
return $cartContent.not('.hide');
}
function mlellipsisHiddenNames() {
cartContentShow().find('.shopping-cart-good .name').each(function() {
this.mlellipsis(2);
});
switchChose = true;
}
function hasChecked() {
return cartContentShow().find('.cart-goods .icon-cb-checked').length > 0 ? true : false;
}
function shouldSelectGift() {
var $freebie = cartContentShow().find('.freebie');
if ($freebie.length <= 0) {
return false;
}
return true;
}
function shouldLowStocks() {
var $lowStocks,
result = false;
if (cartType === 'ordinary') {
$lowStocks = $('.common .low-stocks');
} else if (cartType === 'advance') {
$lowStocks = $('.presell .low-stocks');
}
if ($lowStocks.length <= 0) {
return result;
}
$lowStocks.each(function(idx, item) {
if ($(item).parent().parent().parent().siblings('.checkbox').hasClass('icon-cb-checked')) {
lowStockCount += 1;
result = true;
}
});
return result;
}
function showChooseGifDialog() {
dialog.showDialog({
dialogText: '您还未选择赠品,是否去选择赠品',
hasFooter: {
leftBtnText: '我不要赠品',
rightBtnText: '去选择'
}
}, function() {
window.location.href = cartContentShow().find('.freebie > a').attr('href');
}, function() {
var info = window.cookie('order-info');
if (info) {
window.setCookie('order-info', '');
}
window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
});
}
if (typeof window.cookie === 'function' && window.cookie('_hasShowCartPresellTip') === 'y') {
$('#presell-tip').removeClass('show').addClass('hide');
hasShowCartPresellTip = true;
} else {
$('#presell-tip').removeClass('hide').addClass('show');
}
if (cartType === 'advance') {
$cartContent.toggleClass('hide');
$('#common-cart-nav').removeClass('active');
$('#presell-cart-nav').addClass('active');
mlellipsisHiddenNames();
$(window).trigger('scroll');
}
if ($cartNav.length > 0) {
navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
navHammer.on('tap', function(e) {
var $this = $(e.target).closest('li');
if ($this.hasClass('active')) {
return;
}
if (cartType === 'ordinary') {
cartType = 'advance';
$('#cartType').val('advance');
} else {
cartType = 'ordinary';
$('#cartType').val('ordinary');
}
$this.siblings('.active').removeClass('active');
$this.addClass('active');
// 切换普通商品和预售商品购物车显示
$cartContent.toggleClass('hide');
if (switchChose === false) {
mlellipsisHiddenNames();
}
// trigger lazyload
$(window).trigger('scroll');
});
if (!hasShowCartPresellTip) {
setTimeout(function() {
$('#presell-tip').removeClass('show').addClass('hide');
window.setCookie('_hasShowCartPresellTip', 'y');
}, 3000);
}
}
if ($('.advance-buy').length > 0) {
advanceBuyHammer = new Hammer(document.getElementsByClassName('advance-buy')[0]);
advanceBuyHammer.on('tap', function() {
window.location.href = '/cart/index/advanceBuy?cartType=' + cartType;
});
}
if ($('.freebie').length > 0) {
freebieHammer = new Hammer(document.getElementsByClassName('freebie')[0]);
freebieHammer.on('tap', function() {
window.location.href = '/cart/index/gift?cartType=' + cartType;
});
}
$('.btn-balance').on('touchend', function() {
var info = window.cookie('order-info');
lowStockCount = 0;
if (shouldLowStocks()) {
tip.show('所选商品中有' + lowStockCount + '种库存不足的商品');
return false;
}
if (shouldSelectGift()) {
showChooseGifDialog();
return false;
}
if (hasChecked()) {
if (info) {
window.setCookie('order-info', '');
}
window.location.href = '/cart/index/orderEnsure?cartType=' + cartType;
} else {
tip.show('请先勾选商品');
}
});
$('.off-shell-goods').on('touchstart touchend', function(e) {
var $this = $(e.target).closest('span');
if ($this.hasClass('icon-del')) {
return;
}
tip.show('商品已下架');
return false;
});
$('.chose').on('touchend', function() {
chosePanel.show();
});
$cartNav.on('touchstart', 'li', function() {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$cartNav.find('li').removeClass('bytouch');
});
// 提前触发lazyload
$(window).scrollTop(1).scrollTop(0);
... ...
/**
* 赠品/加价购
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/23
*/
var $ = require('jquery'),
ellipsis = require('mlellipsis'),
lazyLoad = require('yoho.lazyload'),
Hammer = require('yoho.hammer'),
tip = require('../plugin/tip'),
loading = require('../plugin/loading'),
chosePanel = require('./chose-panel');
var $page = $('.gift-advance-page'),
queryString = $.queryString();
require('../common');
lazyLoad($('.lazy'));
ellipsis.init();
function getProductInfo(skn, promotionId) {
loading.showLoadingMask();
$.get('/cart/index/giftinfo', {
skn: skn,
promotionId: promotionId
}).then(function(html) {
if (!html) {
tip.show('网络错误');
return;
}
chosePanel.show(html, function() {
window.location.href = '/cart/index/index?cartType=' + queryString.cartType;
});
}, function() {
tip.show('网络错误');
}).always(function() {
loading.hideLoadingMask();
});
}
$page.find('.chose').each(function(i, elem) {
var choseHammer = new Hammer(elem);
choseHammer.on('tap', function(e) {
var $this = $(e.target),
id = $this.closest('.gift-advance-good').data('id'),
promotionId = $this.closest('.advance-block').data('promotion-id');
getProductInfo(id, promotionId);
});
});
setTimeout(function() {
$('.gift-advance-good .name').each(function() {
this.mlellipsis(2);
});
}, 0);
... ...
/**
* 购物车商品
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/20
*/
var $ = require('jquery'),
ellipsis = require('mlellipsis'),
chosePanel = require('../cart/chose-panel'),
loading = require('../plugin/loading'),
lazyLoad = require('yoho.lazyload');
var dialog = require('../me/dialog'),
tip = require('../plugin/tip');
var $selectAllBtn = $('.balance .checkbox'),
requesting = false;
// 上次编辑的商品skn
var previousEditSkn;
ellipsis.init();
lazyLoad({
try_again_css: 'order-failure'
});
setTimeout(function() {
$('.shopping-cart-good .name').each(function() {
this.mlellipsis(2);
});
}, 0);
function GoodInfo(properties) {
this.goods_type = properties.goods_type;
this.buy_number = properties.buy_number;
this.product_sku = properties.product_sku;
this.selected = properties.selected;
}
// TIP:事件委托在.cart-goods,商品列表的容器统一需要有.cart-goods
$('.cart-goods').on('touchstart', '.checkbox', function() {
var $this = $(this),
$good = $this.closest('.shopping-cart-good'),
id = $good.data('id');
var goodsList = [],
goodInfo = {};
if (!$this.hasClass('icon-cb-checked') && $this.siblings('.info').find('.low-stocks').length > 0) {
tip.show('库存不足,无法购买');
return false;
}
goodInfo.goods_type = $('#cartType').val();
goodInfo.selected = $this.hasClass('icon-cb-checked') ? 'N' : 'Y';
goodInfo.product_sku = id;
goodInfo.buy_number = $good.find('.count').eq(0).text().trim().replace('×', '');
goodsList.push(new GoodInfo(goodInfo));
$.ajax({
type: 'post',
url: 'select',
data: {
skuList: JSON.stringify(goodsList)
}
}).then(function(data) {
if (data.code === 200) {
if ($this.hasClass('icon-cb-checked')) {
$this.removeClass('icon-cb-checked').addClass('icon-checkbox');
} else {
$this.removeClass('icon-checkbox').addClass('icon-cb-checked');
}
window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
} else if (data.code === 400) {
tip.show('网络异常');
}
}, function() {
tip.show('网络异常');
});
});
/*
* 显示购物车编辑面板。
*
* @param {String} html. chose-pannel模板,由服务端返回
*
* @param {String} id. 商品skuid
*
* @param {Bool} isSelected. 所要编辑的商品是否被选中
*
* @param {Bool} isEditNum. 所要编辑的商品是否被选中
*
* @return false or undefined
*
*/
function showEditPannelWithSku(html, id, isSelected, isEditNum) {
if (html.length < 2) {
tip.show('出错啦!');
return false;
}
// 删掉页面上原有的pannel
chosePanel.remove();
$(html).appendTo('#mainCart');
chosePanel.init();
chosePanel.setEditModeWithSknId(id, isSelected);
if (!isEditNum) {
chosePanel.disableNumEdit();
}
chosePanel.show();
}
$('.icon-edit').on('touchstart', function(e) {
var $this = $(this),
skn = $this.closest('.shopping-cart-good').data('skn');
var $checkBox,
$tag;
var id,
count,
canEditNum;
if ($this.parents('.off-shell-goods').length) {
tip.show('商品已下架');
return false;
}
// 如果点击的是上次编辑的商品,直接显示chose-pannel
if (skn === previousEditSkn) {
chosePanel.show();
return;
}
previousEditSkn = skn;
$checkBox = $this.closest('.info').siblings('.checkbox');
$tag = $this.closest('.deps').siblings('.few-tag');
id = $this.closest('.shopping-cart-good').data('id');
count = $this.data('count');
// 加价购或者赠品不能编辑数量
canEditNum = $tag.hasClass('gift-tag') || $tag.hasClass('plus-tag') ? false : true;
e.stopPropagation();
loading.showLoadingMask();
$.ajax({
url: '/cart/index/goodinfo',
data: {
skn: skn,
buy_num: count
},
success: function(res) {
showEditPannelWithSku(res, id, $checkBox.hasClass('icon-cb-checked'), canEditNum);
},
error: function() {
tip.show('网络异常');
window.location.reload();
},
complete: function() {
loading.hideLoadingMask();
}
});
});
$('.icon-del').on('touchstart', function(e) {
var $this = $(this);
e.stopPropagation();
dialog.showDialog({
dialogText: '您确定要从购物车中删除吗?',
hasFooter: {
leftBtnText: '取消',
rightBtnText: '确定'
}
}, function() {
var $shoppingCartGood = $this.closest('.shopping-cart-good'),
count = $this.data('count');
$.ajax({
method: 'post',
url: '/cart/index/del',
data: {
sku: $shoppingCartGood.data('id'),
count: count,
promotionId: $shoppingCartGood.data('promotion')
}
}).then(function(data) {
if (data.code === 200) {
dialog.showDialog({
dialogText: '删除成功',
autoHide: true,
fast: true
});
window.setCookie('_yoho-cart-refreshByDelete', true);
window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
} else {
tip.show(data.message);
}
}, function() {
tip.show('网络异常');
window.location.reload();
});
});
});
function requestUpdateAllGoodsCheckStatus(theGoods, successHandeler) {
if (requesting) {
return;
}
requesting = true;
$.ajax({
url: 'select',
type: 'post',
data: {
skuList: JSON.stringify(theGoods)
},
success: function(res) {
if (res.code === 200) {
successHandeler();
} else {
tip.show(res.message);
}
},
error: function() {
tip.show('网络异常');
},
complete: function() {
requesting = false;
}
});
}
function didUpdateAllGoodsCheckStatus() {
var $checkedBoxs = $('.shopping-cart-good .icon-cb-checked'),
$uncheckedBoxs = $('.shopping-cart-good .icon-checkbox');
var shouldSelectAll;
if ($selectAllBtn.hasClass('icon-cb-checked')) {
$selectAllBtn.removeClass('icon-cb-checked').addClass('icon-checkbox');
shouldSelectAll = true;
} else {
$selectAllBtn.removeClass('icon-checkbox').addClass('icon-cb-checked');
shouldSelectAll = false;
}
if (!shouldSelectAll) {
$uncheckedBoxs.each(function(idx, uncheckedBox) {
$(uncheckedBox).removeClass('icon-checkbox').addClass('icon-cb-checked');
});
} else {
$checkedBoxs.each(function(idx, checkedBox) {
$(checkedBox).removeClass('icon-cb-checked').addClass('icon-checkbox');
});
}
window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
}
function bottomCheckBoxHandeler(isSelected, type, handlerAfterTouch) {
var goodInfo = {},
$goods = $('.cart-content:not(.hide) .shopping-cart-good'),
$good = null,
goodsList = [];
goodInfo.goods_type = type;
goodInfo.selected = isSelected ? 'N' : 'Y';
$goods.each(function(idx, good) {
$good = $(good);
goodInfo.product_sku = $(good).data('id');
goodInfo.hasPromotion = $(good).data('promotion');
goodInfo.buy_number = $good.find('.count').eq(0).text().trim().replace('×', '');
goodsList.push(new GoodInfo(goodInfo));
});
requestUpdateAllGoodsCheckStatus(goodsList, handlerAfterTouch);
}
// 全选按钮点击事件
$selectAllBtn.on('touchend', function() {
var cartType = $('#cartType').val(),
isSelect = $(this).hasClass('icon-cb-checked');
if (cartType === 'ordinary') {
if (!isSelect && $('.common .low-stocks').length > 0) {
tip.show('所选商品中含有库存不足的商品');
return false;
}
} else if (cartType === 'advance') {
if (!isSelect && $('.presell .low-stocks').length > 0) {
tip.show('所选商品中含有库存不足的商品');
return false;
}
}
bottomCheckBoxHandeler(isSelect, cartType, didUpdateAllGoodsCheckStatus);
});
$('.down').on('touchend', function() {
chosePanel.show();
});
... ...
... ... @@ -6,7 +6,8 @@
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
Hammer = require('yoho-hammer'),
lazyLoad = require('yoho-jquery-lazyload');
lazyLoad = require('yoho-jquery-lazyload'),
commonJS = require('../common');
var goodsSwiper,
$discountFolder = $('.goodsDiscount .discount-folder'),
... ... @@ -60,14 +61,14 @@ goodsSwiper = new Swiper('.banner-swiper', {
// 初始化goods-discount
if (0 === $discountFolder.children().length) {
if ($discountFolder.children().length === 0) {
$discountFolder.css('display', 'none');
$discountArrow.html('');
}
// goods-discount下拉按钮点击事件
if (goodsDiscountHammer && $discountFolder.children().length > 0) {
goodsDiscountHammer.on('tap', function(e) {
goodsDiscountHammer.on('tap', function() {
if ($discountFolder.is(':hidden')) {
$discountFirstItem.removeClass('short-text');
$discountArrow.removeClass('icon-down').addClass('icon-up').html('&#xe608;');
... ...
.chose-panel {
position: fixed;
display: none;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 3;
.main {
position: absolute;
height: 610px;
bottom: 0;
left: 0;
right: 0;
background: #fff;
}
.infos {
height: 460px;
padding: 0 22px;
}
.chose-items {
height: 325px;
overflow: auto;
}
.basic-info {
overflow: hidden;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
}
.thumb {
float: left;
width: 100px;
margin-right: 20px;
}
.text-info {
height: auto;
.name {
font-size: 28px;
height: 74px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price {
font-size: 24px;
display: inline;
}
.sale-price {
color: #e10;
margin-right: 15px;
&.no-price {
color: #000;
}
}
.market-price {
color: #b0b0b0;
text-decoration: line-through;
}
}
.color-list,
.size-list,
.num {
position: relative;
font-size: 28px;
padding-left: 80px;
input.disabled {
background-color: #fff;
color: #000;
opacity: 1;
border-radius: 0;
-webkit-appearance: none;
}
> span {
position: absolute;
left: 0;
top: 20px;
}
> span.left-num {
position: absolute;
left: 380px;
top: 20px;
}
span.disabled {
color: #e6e6e6;
}
}
.size-list li.hide {
display: none;
}
.block {
float: left;
display: block;
box-sizing: border-box;
padding: 0 20px;
min-width: 80px;
height: 80px;
border: 1px solid #000;
margin-right: 30px;
margin-bottom: 30px;
line-height: 80px;
text-align: center;
&.chosed {
border-color: #e10;
background: resolve('shopping-cart/right.png') no-repeat;
background-size: 38px;
background-position: bottom right;
color: #e10;
}
&.zero-stock {
color: #e0e0e0;
border-color: #e0e0e0;
}
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
color: #e0e0e0;
background-color: #c0c0c0;
}
}
.num {
margin-bottom: 20px;
}
.num .btn {
float: left;
display: block;
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
border: 1px solid #e6e6e6;
&.disable {
color: #e6e6e6;
}
}
.good-num {
float: left;
width: 106px;
height: 80px;
line-height: 80px;
padding: 0;
border: 1px solid #e6e6e6;
text-align: center;
margin-left: -1px;
}
.btn-plus {
margin-left: -1px;
}
.btn-wrap {
position: relative;
height: 120px;
border-top: 1px solid #e6e6e6;
padding: 20px;
text-align: center;
background: #fff;
box-sizing: border-box;
.btn-sure {
width: 260px;
height: 80px;
background: #e10;
color: #fff;
font-size: 32px;
border: none;
}
}
}
... ...
... ... @@ -9,3 +9,5 @@
@import "product/detail";
@import "product/comments-consults";
@import "product/product-description";
@import "product/recommend-for-you";
@import "cart/chose-panel";
... ...
.recommend-for-you {
padding: 30px 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.title {
font-size: 32px;
line-height: 88px;
text-align: center;
color: #444;
}
.swiper-container {
padding: 30px 0 20px;
width: 100%;
.swiper-slide {
padding: 0 10px;
float: left;
width: 156px;
&:first-child {
padding-left: 30px;
}
&:last-child {
padding-right: 30px;
}
img {
width: 100%;
height: 208px;
}
}
}
.sale-name {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
margin-top: 20px;
color: #444;
}
.price {
position: relative;
margin-top: 8px;
font-size: 24px;
line-height: 1;
.sale-price {
display: block;
color: #d9134f;
margin-right: 8px;
}
.old-price {
display: block;
color: #b0b0b0;
text-decoration: line-through;
}
.no-price {
color: #444;
}
}
}
... ...