|
|
/**
|
|
|
* 购物车选择尺寸、颜色和数量面板
|
|
|
* 显示时构造当前商品信息的HTML插入yoho-page;消失则是直接清除HTML
|
|
|
* @author: xuqi<qi.xu@yoho.cn>
|
|
|
* @date: 2015/10/21
|
|
|
*/
|
|
|
|
|
|
|
|
|
// bikai
|
|
|
// 增加init函数,异步请求的接口需要重新初始化一下选择列表
|
|
|
// 异步渲染的模板统一插入 #chose-panel ,兼容页面多个选择框
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
tip = require('../plugin/tip'),
|
|
|
loading = require('../plugin/loading');
|
|
|
|
|
|
var innerScroll = require('../plugin/inner-scroll');
|
|
|
|
|
|
var $chosePanel = $('#chose-panel'),
|
|
|
$num,
|
|
|
$chosed,
|
|
|
$imgsThumb,
|
|
|
$leftNum,
|
|
|
leftNum,
|
|
|
confirming,
|
|
|
curColorIndex,
|
|
|
curSizeIndex,
|
|
|
hasChooseColor,
|
|
|
hasChooseSize,
|
|
|
$curSizeBlock,
|
|
|
$sizeRowList,
|
|
|
$curColorBlock,
|
|
|
$colorRowList,
|
|
|
cbFn,
|
|
|
$allChoseItems,
|
|
|
queryString,
|
|
|
$choseArea,
|
|
|
$cartBar,
|
|
|
$soonSoldOut = $('.soonSoldOut-tag'),
|
|
|
$yohoPage = $('.yoho-page');
|
|
|
|
|
|
// 购物车编辑标相关变量
|
|
|
var isEdit,
|
|
|
isSelected,
|
|
|
oldSknId;
|
|
|
|
|
|
// 限购商品的商品码。只有限购商品时才会设置。
|
|
|
var limitProductCode,
|
|
|
|
|
|
// 限购商品的skn。只有限购商品时才会设置。
|
|
|
skn;
|
|
|
|
|
|
// 禁用数字编辑
|
|
|
function disableNumEdit() {
|
|
|
var $numBtn = $('.chose-panel').find('.num .btn>.iconfont');
|
|
|
|
|
|
// 添加disabled样式
|
|
|
$numBtn.hasClass('disabled') ? null : $numBtn.addClass('disabled');
|
|
|
|
|
|
$yohoPage.off('touchstart', '.btn-minus');
|
|
|
$yohoPage.off('touchstart', '.btn-plus');
|
|
|
}
|
|
|
|
|
|
// 初始化购物车面板显示
|
|
|
function init() {
|
|
|
hasChooseColor = false;
|
|
|
hasChooseSize = false;
|
|
|
$curSizeBlock = null;
|
|
|
|
|
|
queryString = $.queryString();
|
|
|
$imgsThumb = $('.chose-panel').find('.thumb');
|
|
|
$choseArea = $('.chose-panel .main .chose-items');
|
|
|
$allChoseItems = $('.chose-items');
|
|
|
$sizeRowList = $('.size-list ul');
|
|
|
$colorRowList = $('.color-list ul');
|
|
|
$leftNum = $('#left-num');
|
|
|
$cartBar = $('.cart-bar');
|
|
|
curColorIndex = 0;
|
|
|
curSizeIndex = 0;
|
|
|
isEdit = 0;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 设置当前面板为编辑模式
|
|
|
*
|
|
|
* @param {String} sknId. 当前编辑商品的sknId
|
|
|
*
|
|
|
* @param {Bool} isThisGoodSelected. 当前编辑商品的在购物车中是否被选中
|
|
|
*
|
|
|
* @return {undefined}
|
|
|
*/
|
|
|
function setEditModeWithSknId(sknId, isThisGoodSelected) {
|
|
|
$('#chose-btn-sure').html('确认');
|
|
|
isEdit = 1;
|
|
|
oldSknId = sknId;
|
|
|
isSelected = isThisGoodSelected;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 设置当前面板为限购商品模式
|
|
|
*
|
|
|
* @param {String} code 当前限购商品的商品码
|
|
|
*
|
|
|
* @param {String} sknId. 当前限购商品的sknId
|
|
|
*
|
|
|
* @return {undefined}
|
|
|
*/
|
|
|
function setLimitGoodModeWithSknId(code, sknId) {
|
|
|
disableNumEdit();
|
|
|
$('#chose-btn-sure').html('立即购买');
|
|
|
limitProductCode = code;
|
|
|
skn = sknId;
|
|
|
}
|
|
|
|
|
|
// 删除面板
|
|
|
function removePannel() {
|
|
|
var $pannel = $('.chose-panel'),
|
|
|
$promotionId = $('#promotionId');
|
|
|
|
|
|
if ($pannel) {
|
|
|
$pannel.remove();
|
|
|
}
|
|
|
|
|
|
if ($promotionId) {
|
|
|
$promotionId.remove();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function checkColorSizeNum() {
|
|
|
if (!hasChooseColor && !hasChooseSize) {
|
|
|
tip.show('请选择颜色和尺码~');
|
|
|
return false;
|
|
|
} else if (!hasChooseColor) {
|
|
|
tip.show('请选择颜色~');
|
|
|
return false;
|
|
|
} else if (!hasChooseSize) {
|
|
|
tip.show('请选择尺码~');
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function show(html, cb) {
|
|
|
if (html) {
|
|
|
$chosePanel.html(html);
|
|
|
if ($('#promotionId').val() !== '') {
|
|
|
disableNumEdit();
|
|
|
}
|
|
|
init();
|
|
|
}
|
|
|
|
|
|
$('.chose-panel').show();
|
|
|
$num = $('#good-num');
|
|
|
cbFn = cb;
|
|
|
|
|
|
|
|
|
innerScroll.disableScroll($choseArea);
|
|
|
}
|
|
|
|
|
|
// 隐藏当前Panel
|
|
|
function hide() {
|
|
|
$('.chose-panel').hide();
|
|
|
innerScroll.enableScroll($choseArea);
|
|
|
|
|
|
if ($cartBar.length > 0) {
|
|
|
$cartBar.show();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 修改加入购物车的文字和背景
|
|
|
function updateConformButtonClassAndText() {
|
|
|
$chosed = $allChoseItems.find('.chosed');
|
|
|
if ($chosed.closest('.zero-stock').length === 2) {
|
|
|
$('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄');
|
|
|
} else if (limitProductCode) {
|
|
|
$('#chose-btn-sure').css('background-color', '#eb0313').html('立即购买');
|
|
|
} else {
|
|
|
$('#chose-btn-sure').css('background-color', '#eb0313').html(isEdit ? '确认' : '加入购物车');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 显示剩余件数
|
|
|
function displayGoodNum(curGoodNum) {
|
|
|
|
|
|
// 数量大于0
|
|
|
if (curGoodNum > 0) {
|
|
|
if ($soonSoldOut.length > 0) {
|
|
|
$allChoseItems.find('.num .left-num').html('即将售罄');
|
|
|
} else {
|
|
|
$allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
}
|
|
|
|
|
|
$leftNum.val(curGoodNum);
|
|
|
|
|
|
// 数量小于0
|
|
|
} else {
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$leftNum.val(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
function changeSizeChosed(newSizeIndex) {
|
|
|
var sizes,
|
|
|
i;
|
|
|
|
|
|
if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {
|
|
|
$curSizeBlock.removeClass('chosed');
|
|
|
sizes = $sizeRowList.eq(newSizeIndex).children();
|
|
|
for (i = 0; i < sizes.length; i++) {
|
|
|
if ($(sizes[i]).data('id') === $curSizeBlock.data('id')) {
|
|
|
$curSizeBlock = $(sizes[i]);
|
|
|
queryString = '#' + $curSizeBlock.data('id');
|
|
|
curColorIndex = $(queryString).data('index');
|
|
|
$curSizeBlock.addClass('chosed');
|
|
|
return $curSizeBlock.data('num');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述1,2,3
|
|
|
// 1.重置尺码选择的标志变量.
|
|
|
$curSizeBlock = null;
|
|
|
hasChooseSize = false;
|
|
|
|
|
|
// 2.当前颜色行隐藏
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
// 3.目标颜色行第一行显示
|
|
|
$colorRowList.eq(0).removeClass('hide');
|
|
|
curColorIndex = 0;
|
|
|
|
|
|
return -1;
|
|
|
}
|
|
|
return 0;
|
|
|
}
|
|
|
|
|
|
// 老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
function changeColorChosed(newColorIndex) {
|
|
|
if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {
|
|
|
$curColorBlock.removeClass('chosed');
|
|
|
$curColorBlock = $($colorRowList.eq(newColorIndex).children().get(curSizeIndex - 1));
|
|
|
$curColorBlock.addClass('chosed');
|
|
|
return $curColorBlock.data('num');
|
|
|
}
|
|
|
return 0;
|
|
|
}
|
|
|
|
|
|
init();
|
|
|
|
|
|
|
|
|
$yohoPage.on('touchstart', '.chose-panel', function(e) {
|
|
|
var $cur = $(e.target);
|
|
|
|
|
|
if ($cur.closest('.main').length > 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 点击蒙版消失
|
|
|
hide();
|
|
|
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
$yohoPage.on('touchstart', '.color-list .block', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index(),
|
|
|
curGoodNum;
|
|
|
|
|
|
// 当前颜色已经是选中状态,再点击时
|
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
// 清空剩余件数的提示
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$leftNum.val(0);
|
|
|
hasChooseColor = false;
|
|
|
|
|
|
// 当前尺码行隐藏
|
|
|
$sizeRowList.eq(curSizeIndex).addClass('hide');
|
|
|
|
|
|
// 目标尺码行显示
|
|
|
$sizeRowList.eq(0).removeClass('hide');
|
|
|
|
|
|
curSizeIndex = 0;
|
|
|
|
|
|
// 老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
changeSizeChosed(0);
|
|
|
|
|
|
// 当前颜色不是选中状态,选中时
|
|
|
} else {
|
|
|
hasChooseColor = true;
|
|
|
|
|
|
// 尺码行当前行隐藏
|
|
|
$sizeRowList.eq(curSizeIndex).addClass('hide');
|
|
|
|
|
|
// 老的选中尺码去掉勾选,新的选中尺码加上勾选
|
|
|
curGoodNum = changeSizeChosed(index + 1);
|
|
|
|
|
|
// 显示剩余数量
|
|
|
displayGoodNum(curGoodNum);
|
|
|
|
|
|
// 尺码对应行显示
|
|
|
$sizeRowList.eq(index + 1).removeClass('hide');
|
|
|
|
|
|
curSizeIndex = index + 1;
|
|
|
$curColorBlock = $this;
|
|
|
|
|
|
// 修改颜色时修改商品图片
|
|
|
$imgsThumb.addClass('hide').eq(index).removeClass('hide');
|
|
|
}
|
|
|
|
|
|
// 颜色块切换勾选样式
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
|
|
|
// 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在, 需要将颜色的第一行对应的颜色块加上勾选样式.
|
|
|
if (curGoodNum === -1) {
|
|
|
$curColorBlock = $($colorRowList.eq(0).children().get(index));
|
|
|
$curColorBlock.addClass('chosed');
|
|
|
|
|
|
// 当前选择的颜色块,加上勾选样式
|
|
|
} else {
|
|
|
$this.toggleClass('chosed');
|
|
|
}
|
|
|
|
|
|
$('#good-num').val(1);
|
|
|
|
|
|
// 设置按钮的样式和文字
|
|
|
updateConformButtonClassAndText();
|
|
|
}).on('touchstart', '.size-list .block', function() {
|
|
|
var $this = $(this),
|
|
|
index,
|
|
|
curGoodNum;
|
|
|
|
|
|
// 当前尺码已经是选中状态,再点击时
|
|
|
if ($this.hasClass('chosed')) {
|
|
|
|
|
|
// 清空剩余件数的提示
|
|
|
$allChoseItems.find('.num .left-num').html('');
|
|
|
$leftNum.val(0);
|
|
|
hasChooseSize = false;
|
|
|
|
|
|
// 当前颜色行隐藏
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
// 目标颜色行显示
|
|
|
$colorRowList.eq(0).removeClass('hide');
|
|
|
|
|
|
curColorIndex = 0;
|
|
|
|
|
|
// 老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
changeColorChosed(0);
|
|
|
|
|
|
// 当前尺码不是选中状态,选中时
|
|
|
} else {
|
|
|
hasChooseSize = true;
|
|
|
|
|
|
index = $('#' + $this.data('id')).data('index') - 1;
|
|
|
|
|
|
// 颜色当前行隐藏
|
|
|
$colorRowList.eq(curColorIndex).addClass('hide');
|
|
|
|
|
|
// 老的选中颜色去掉勾选,新的选中颜色加上勾选
|
|
|
curGoodNum = changeColorChosed(index + 1);
|
|
|
|
|
|
// 显示剩余数量
|
|
|
displayGoodNum(curGoodNum);
|
|
|
|
|
|
// 颜色对应行显示
|
|
|
$colorRowList.eq(index + 1).removeClass('hide');
|
|
|
|
|
|
curColorIndex = index + 1;
|
|
|
$curSizeBlock = $this;
|
|
|
}
|
|
|
|
|
|
// 颜色块切换勾选样式
|
|
|
$this.siblings('.chosed').removeClass('chosed');
|
|
|
$this.toggleClass('chosed');
|
|
|
$('#good-num').val(1);
|
|
|
|
|
|
// 设置按钮的样式和文字
|
|
|
updateConformButtonClassAndText();
|
|
|
});
|
|
|
|
|
|
$yohoPage.on('touchstart', '.btn-minus', function() {
|
|
|
var num = parseInt($num.val(), 10);
|
|
|
|
|
|
leftNum = $('#left-num').val();
|
|
|
|
|
|
if (!checkColorSizeNum()) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (num === 1 || (leftNum - 0) === 0) {
|
|
|
tip.show('您选择的数量不能为零~');
|
|
|
return;
|
|
|
}
|
|
|
if (num < 0) {
|
|
|
tip.show('您选择的数量不能为负数~');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$num.val(num - 1);
|
|
|
}).on('touchstart', '.btn-plus', function() {
|
|
|
var num = parseInt($num.val(), 10);
|
|
|
|
|
|
leftNum = $('#left-num').val();
|
|
|
|
|
|
if (!checkColorSizeNum()) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (num - 0 === leftNum || leftNum === 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// TODO:库存数验证
|
|
|
if (num > leftNum - 1) {
|
|
|
tip.show('您选择的数量超过了最大库存量~');
|
|
|
return;
|
|
|
}
|
|
|
$num.val(num + 1);
|
|
|
}).on('touchstart', '#chose-btn-sure', function() {
|
|
|
|
|
|
var productSku,
|
|
|
buyNumber = $('#good-num').val() - 0,
|
|
|
|
|
|
promotionId,
|
|
|
cartGoodData,
|
|
|
url,
|
|
|
num = parseInt($num.val(), 10);
|
|
|
|
|
|
// 颜色尺码没有选择
|
|
|
if (!checkColorSizeNum()) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if ($('#chose-btn-sure').html() === '已售罄') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
leftNum = $('#left-num').val() - 0;
|
|
|
|
|
|
if (num > leftNum) {
|
|
|
tip.show('您选择的数量超过了最大库存量~');
|
|
|
return;
|
|
|
}
|
|
|
if (num < 0) {
|
|
|
tip.show('您选择的数量小于一件~');
|
|
|
return;
|
|
|
}
|
|
|
$chosed = $('.block-list>ul>li.chosed');
|
|
|
|
|
|
if ($chosed.length === 2 && $chosed.closest('.zero-stock').length === 0) {
|
|
|
productSku = $curSizeBlock.data('skuid');
|
|
|
promotionId = $('#promotionId').val();
|
|
|
if (confirming) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
confirming = true;
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
// 针对是否处于编辑模式设置不同的url和需要post的数据
|
|
|
if (isEdit) {
|
|
|
cartGoodData = {
|
|
|
new_product_sku: productSku,
|
|
|
old_product_sku: oldSknId,
|
|
|
buy_number: buyNumber,
|
|
|
selected: isSelected
|
|
|
};
|
|
|
|
|
|
url = '/cart/index/modify';
|
|
|
|
|
|
} else if (limitProductCode) {
|
|
|
|
|
|
$(this).css('background-color', '#ccc').removeAttr('id');
|
|
|
|
|
|
// 当前面板选择的是限购商品
|
|
|
url = $('#limitProductPay').val() + '?limitproductcode=' + limitProductCode + '&sku=' +
|
|
|
productSku + '&skn=' + skn + '&buy_number=' + buyNumber;
|
|
|
|
|
|
removePannel();
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
// 调用接口判断商品是否可以购买
|
|
|
$.ajax({
|
|
|
url: url
|
|
|
}).then(function(res) {
|
|
|
|
|
|
// 如果有错,则商品不可购买,执行页面刷新,否则跳到结算页面
|
|
|
if (res.error) {
|
|
|
tip.show(res.message);
|
|
|
setTimeout(function() {
|
|
|
location.reload();
|
|
|
}, 2000);
|
|
|
} else {
|
|
|
location.href = url;
|
|
|
}
|
|
|
}).fail(function() {
|
|
|
tip.show('网络异常!');
|
|
|
setTimeout(function() {
|
|
|
location.reload();
|
|
|
}, 2000);
|
|
|
});
|
|
|
|
|
|
return false;
|
|
|
|
|
|
} else {
|
|
|
cartGoodData = {
|
|
|
productSku: productSku,
|
|
|
buyNumber: buyNumber,
|
|
|
promotionId: promotionId,
|
|
|
isEdit: isEdit,
|
|
|
cartType: queryString.cartType
|
|
|
};
|
|
|
|
|
|
url = '/cart/index/add';
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
method: 'POST',
|
|
|
url: url,
|
|
|
data: cartGoodData
|
|
|
}).done(function(res) {
|
|
|
var cartNum;
|
|
|
|
|
|
loading.hideLoadingMask();
|
|
|
if (res.code === 200 && !isEdit) {
|
|
|
cartNum = res.data.goods_count;
|
|
|
if (cartNum > 99) {
|
|
|
cartNum = '99+';
|
|
|
}
|
|
|
$('.num-tag').html(cartNum).removeClass('hide');
|
|
|
confirming = false;
|
|
|
|
|
|
if (cbFn) {
|
|
|
cbFn();
|
|
|
}
|
|
|
}
|
|
|
if (res.message && !isEdit) {
|
|
|
tip.show(res.message);
|
|
|
}
|
|
|
|
|
|
hide();
|
|
|
|
|
|
if (isEdit) {
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
// 延迟刷新,否则面板可能无法隐藏
|
|
|
setTimeout(function() {
|
|
|
|
|
|
// 获取当前页面商品类型:普通商品/预售商品
|
|
|
window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
|
|
|
}, 1);
|
|
|
}
|
|
|
}).fail(function() {
|
|
|
tip.show('网络出了点问题~');
|
|
|
}).always(function() {
|
|
|
confirming = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
exports.init = init;
|
|
|
exports.show = show;
|
|
|
exports.remove = removePannel;
|
|
|
exports.setEditModeWithSknId = setEditModeWithSknId;
|
|
|
exports.disableNumEdit = disableNumEdit;
|
|
|
exports.setLimitGoodModeWithSknId = setLimitGoodModeWithSknId; |
...
|
...
|
|