/** * 购物车选择尺寸、颜色和数量面板 * 显示时构造当前商品信息的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'), // 门票 限购数量 ticketsLimit = $('#limitNum').val() || 0, single = $('#single').val() || 0, $productSku = $('#productSku'), $buyNumber = $('#buyNumber'), $buyNowForm = $('#buyNowForm'); // 购物车编辑标相关变量 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 checkTickets() { if (!hasChooseColor && !hasChooseSize) { if (single) { tip.show('请选择日期~'); } else { tip.show('请选择日期和区域~'); } return false; } else if (!hasChooseColor) { tip.show('请选择日期~'); return false; } else if (!hasChooseSize && !single) { tip.show('请选择区域~'); return false; } return true; } function checkColorSizeNum() { if (ticketsLimit) { // 门票 if (!checkTickets()) { return; } } 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); init(); } if ($('#promotionId').val() !== '') { disableNumEdit(); } $('.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(); } } // 修改加入购物车的文字和背景 var isSeckill = $('.limit-num-text').length; var isSecKills = 0; function updateConformButtonClassAndText() { if (isSeckill > 0) { $chosed = $allChoseItems.find('.chosed'); if ($chosed.closest('.zero-stock').length === 2) { $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄'); } else if (limitProductCode || ticketsLimit) { $('#chose-btn-sure').css('background-color', '#eb0313').html('立即购买'); } else { $('#chose-btn-sure').css('background-color', '#eb0313').html(isEdit ? '确认' : '立即购买'); } } else { $chosed = $allChoseItems.find('.chosed'); if ($chosed.closest('.zero-stock').length === 2) { $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄'); } else if (limitProductCode || ticketsLimit) { $('#chose-btn-sure').css('background-color', '#eb0313').html('立即购买'); } else if ($('.seckill-time').length >= 1) { $('#chose-btn-sure').css('background-color', '#eb0313').html(isEdit ? '确认' : '立即购买'); } else { $('#chose-btn-sure').css('background-color', '#eb0313').html(isEdit ? '确认' : '加入购物车'); } } } // 显示剩余件数 function displayGoodNum(curGoodNum) { // 门票限购 if (ticketsLimit) { $allChoseItems.find('.num .left-num').html('限购' + ticketsLimit + '件'); $leftNum.val(curGoodNum); return; } // 数量大于 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, queryString, 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; } // 添加门票 function addTickets(productSku, buyNumber) { var data = { productSku: productSku, buyNumber: buyNumber }; // 校验电子票 $.ajax({ url: '/cart/index/checkTickets', dataType: 'json', data: data, type: 'post', success: function(addRestult) { if (addRestult.code !== 200) { if (addRestult.code === 401) { window.location.href = '//m.yohobuy.com/signin.html?refer=' + window.location.href; } tip.show(addRestult.message); } else { $productSku.val(productSku); $buyNumber.val(buyNumber); $buyNowForm.submit(); } }, error: function() { tip.show('网络异常~'); } }); } 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(); // 展览票 if (ticketsLimit && single) { // 选中日期 $curSizeBlock = $('.size-list .size-row .block').eq(index + 1); $curSizeBlock.addClass('chosed'); // 显示剩余数量 displayGoodNum($curColorBlock.data('num')); hasChooseSize = true; return false; } }).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), maxTips = ticketsLimit ? '每人只可购买' + ticketsLimit + '张当日门票' : '您选择的数量超过了最大库存量~'; leftNum = ticketsLimit || $('#left-num').val(); if (!checkColorSizeNum()) { return; } if (num - 0 === leftNum || leftNum === 0) { return; } // TODO:库存数验证 if (num > leftNum - 1) { tip.show(maxTips); 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) { isSecKills = $('.seckill-time').length; // 秒杀标记 productSku = $curSizeBlock.data('skuid'); promotionId = $('#promotionId').val(); if (confirming) { return false; } if (!ticketsLimit) { confirming = true; } if (!isSecKills) { loading.showLoadingMask(); } // 立即购买门票 if (ticketsLimit) { addTickets(productSku, buyNumber); return; } // 针对是否处于编辑模式设置不同的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) { isSecKills = $('.seckill-time').length; // 秒杀标记 $(this).css('background-color', '#ccc').removeAttr('id'); // 当前面板选择的是限购商品 url = $('#limitProductPay').val() + '?limitproductcode=' + limitProductCode + '&sku=' + productSku + '&skn=' + skn + '&buy_number=' + buyNumber; removePannel(); if (!isSecKills) { 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'; } if (!isSecKills) { $.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(); } } else { // 调秒杀详情页,待修改状态码 window.location.href = '/product/seckill/show_' + $('#productSkn').val() + '.html'; } 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; }); } else { $('#chose-btn-sure').click( function() { var thisSkn = $('#productSkn').val(); var thisSku = ''; thisSku = $('.size-list').find('.chosed').attr('data-skuid'); window.location.href = '/cart/index/seckill?skn=' + thisSkn + '&sku=' + thisSku; } ); } } }); exports.init = init; exports.show = show; exports.remove = removePannel; exports.setEditModeWithSknId = setEditModeWithSknId; exports.disableNumEdit = disableNumEdit; exports.setLimitGoodModeWithSknId = setLimitGoodModeWithSknId;