/** * 套餐购物车选择尺寸、颜色和数量面板 * 显示时构造当前商品信息的HTML插入yoho-page;消失则是直接清除HTML * @author: xuqi<qi.xu@yoho.cn> * @date: 2015/10/21 */ // bikai // 增加init函数,异步请求的接口需要重新初始化一下选择列表 // 异步渲染的模板统一插入 #chose-panel ,兼容页面多个选择框 let $ = require('yoho-jquery'), tip = require('js/plugin/tip'), loading = require('js/plugin/loading'); let innerScroll = require('js/plugin/inner-scroll'); let $chosePanel = $('.chose-panel'), $num, $chosed, $imgsThumb, $leftNum, leftNum, confirming, curColorIndex, curSizeIndex, hasChooseColor, hasChooseSize, $curSizeBlock, $sizeRowList, $curColorBlock, $colorRowList, $allChoseItems, queryString, $choseArea, $cartBar, $soonSoldOut = $('.soonSoldOut-tag'), $yohoPage = $('.yoho-page'), single = $('#single').val() || 0, $thumbImg; let productSkn; /* 为套装调整样式 */ function disableShowNum() { $('.num').css('display', 'none'); } // 禁用数字编辑 function disableNumEdit() { let $numBtn = $chosePanel.find('.num .btn>.iconfont'); // 添加disabled样式 $numBtn.hasClass('disabled') ? null : $numBtn.addClass('disabled'); $yohoPage.off('touchstart', '.btn-minus'); $yohoPage.off('touchstart', '.btn-plus'); } // 初始化 chose pannel function init(sknId) { $('#chose-btn-sure').html('确认'); 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; productSkn = sknId; disableShowNum(); $thumbImg = $('.thumb-img'); } // 删除面板 function removePannel() { let $promotionId = $('#promotionId'); if ($chosePanel) { $chosePanel.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() { $chosePanel.show(); $num = $('#good-num'); innerScroll.disableScroll($choseArea); } // 隐藏当前Panel function hide() { $chosePanel.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 { $('#chose-btn-sure').css('background-color', '#eb0313').html('确认'); } if ($chosed.closest('.zero-stock').length === 2) { $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄'); } } // 显示剩余件数 function displayGoodNum(curGoodNum) { // 数量大于 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) { let 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; } /** * 设置用户选择的 sku */ function choseEnsure(skn, sku, color, size) { let product = $('#gskn-' + skn); product.data('sku', sku); product.html('颜色:' + color + " 尺码:" + size); } init(); $yohoPage.on('touchstart', '.chose-panel', function (e) { let $cur = $(e.target); if ($cur.closest('.main').length > 0) { return; } // 点击蒙版消失 hide(); return false; }); $yohoPage.on('touchstart', '.color-list .block', function () { let $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 () { let $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 () { let 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 () { let num = parseInt($num.val(), 10); leftNum = $('#left-num').val(); if (!checkColorSizeNum()) { return; } if (num - 0 === leftNum || leftNum === 0) { return; } if (num > 0) { tip.show('套餐商品只能购买一件~'); return; } $num.val(num + 1); }).on('touchstart', '#chose-btn-sure', function () { let promotionId, 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) { promotionId = $('#promotionId').val(); if (confirming) { return false; } $('#chose-btn-sure').click( function () { let sizeChose = $('.size-list').find('.chosed'), productSku = sizeChose.data('skuid'), color = $('.color-list').find('.chosed').html().substring(0,4) + '...', size = sizeChose.html(); choseEnsure(productSkn, productSku, color, size); hide(); } ); } }); $yohoPage.on('click', '.close', function() { hide(); }); $yohoPage.on('touchstart', '.thumb-img', function() { if ($thumbImg.hasClass('hover')) { $thumbImg.removeClass('hover'); } else { $thumbImg.addClass('hover'); } }); exports.init = init; exports.show = show; exports.remove = removePannel; exports.disableNumEdit = disableNumEdit;