chose-panel.js 11.6 KB
/**
 * 购物车选择尺寸、颜色和数量面板
 * 显示时构造当前商品信息的HTML插入yoho-page;消失则是直接清除HTML
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/21
 */

// bikai
// 增加init函数,异步请求的接口需要重新初始化一下选择列表
// 异步渲染的模板统一插入 #chose-panel ,兼容页面多个选择框

var $ = require('jquery'),
    Handlebars = require('yoho.handlebars'),
    tip = require('../plugin/tip'),
    loading = require('../plugin/loading');

var panelTmpl,
    $chosePanel = $('#chose-panel'),
    $num,
    $chosed,
    re = /\d+/,
    leftNum,
    $sizeList,
    colorIndex,
    confirming,
    hasChooseColor = false,
    hasChooseSize = false,
    curColorIndex,
    curSizeIndex,
    $curSizeRow,
    $sizeRowList = $('.size-list ul');

// 读取模板
$.get('/cart/index/giftinfoTpl', function(html) {
    if (!html) {
        tip.show('网络错误');
        return;
    }
    panelTmpl = Handlebars.compile(html);
}).fail(function() {
    tip.show('网络错误');
});

//初始化购物车面板显示
function init() {

    //$colorList = $('.chose-panel .color-list ul>li');
    //$sizeList = $('.chose-panel .size-list ul>li');
    //firstColorId = $colorList.eq(0).data('id');
    //$sizeList.each(function() {
    //    colorIndex = $(this).data('colorid');
    //
    //    if (colorIndex === firstColorId) {
    //        $(this).removeClass('hide');
    //    }
    //});

    var $firstRow = $sizeRowList.eq(0);

    $firstRow.toggleClass('hide');
    $curSizeRow = $firstRow;
}

init();

function show(data) {
    if (data) {
        $chosePanel.html(panelTmpl(data));
        init();
    }
}

//显示当前Panel
function show() {
    $('.chose-panel').show();

    $('body').css('overflow', 'hidden');
    $num = $('#good-num');
}

//隐藏当前Panel
function hide() {
    $('.chose-panel').hide();
    $('body').css('overflow', 'auto');
}

$('.yoho-page').on('touchstart', '.chose-panel', function(e) {
    var $cur = $(e.target);

    if ($cur.closest('.main').length > 0) {
        return;
    }

    //点击蒙版消失
    hide();
});

$('.color-list').on('touchstart', '.block', function(e) {
    var $this = $(this),
        $that = $(e.target).closest('.chose-items'),
        numArray,
        index,
        curSelectedSizeBlock,
        $sizeChosed,
        scindex,
        i;

    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
        currentNumArray = ($this.data('numstr') + '').split('/');

    $this.siblings('.chosed').removeClass('chosed');
    index = $this.index();

    $sizeChosed = $siblingBlock.find('.chosed');
    scindex = $sizeChosed.index();
    $curSizeRow = $sizeRowList.eq(index);

    // 当前颜色已经是选中状态,再点击时
    if ($this.hasClass('chosed')) {

        //颜色原来已经是勾选时,要清空剩余件数的提示
        $that.find('.num .left-num').html('');
        hasChooseColor = false;

        // 当前颜色不是选中状态,选中时
    } else {
        hasChooseColor = true;

        //根据颜色切换图片
        if ($this.closest('.block-list').hasClass('color-list')) {
            $('.chose-panel').find('.thumb').addClass('hide').eq(index).removeClass('hide');
        }

        //把当前选中颜色对应的尺码那一行显示出来
        //$sizeRowList.addClass('hide');
        //$curSizeRow.toggleClass('hide');

        //之前选中行 对应的尺码去掉勾选样式
        $sizeChosed.removeClass('chosed');

        // 当前选中颜色对应的尺码行,其对应的尺码加上 (前提是要判断下这个尺码是否存在)
        curSelectedSizeBlock = $curSizeRow.children().get(scindex);
        if (curSelectedSizeBlock) {
            $(curSelectedSizeBlock).addClass('chosed');
        }
    }

    $this.toggleClass('chosed');
    curColorIndex = index;

    $chosed = $('.chose-items').find('.chosed');


    if ($chosed.length === 0) {
        $this.closest('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(this).addClass('zero-stock');
            }
        });

        $siblingBlock.find('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(this).addClass('zero-stock');
            }
        });
    } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
        $sizeList.addClass('hide');

        //切换尺码信息
        $sizeList.each(function() {
            colorIndex = $(this).data('colorid');
            if (colorIndex === $this.data('id')) {
                $(this).removeClass('hide');
            }
        });

        numArray = ($chosed.data('numstr') + '').split('/');
        $siblingBlock.find('.block').removeClass('zero-stock');
        for (i = 0; i < numArray.length; i++) {
            if ('0' === numArray[i]) {
                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
            }
        }
    } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
        $('#chose-btn-sure').css('background-color', '#eb0313');
        $('#chose-btn-sure').html('确定');

        $siblingBlock.find('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(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]) {
                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
            }
        }
        numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');
        $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
        if (2 === $chosed.closest('.zero-stock').length) {
            $('#chose-btn-sure').css('background-color', '#c0c0c0');
            $('#chose-btn-sure').html('已售罄');
        } else {
            $('#chose-btn-sure').css('background-color', '#eb0313');
            $('#chose-btn-sure').html('确定');
        }
    }

});

$('.size-list').on('touchstart', '.block', function(e) {
    var $this = $(this),
        $that = $(e.target).closest('.chose-items'),
        numArray,
        index,
        i;

    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
        currentNumArray = ($this.data('numstr') + '').split('/');

    $this.siblings('.chosed').removeClass('chosed');
    index = $this.index();

    if ($this.hasClass('chosed')) {

        //尺码原来已经是勾选时,要清空剩余件数的提示
        $that.find('.num .left-num').html('');
        hasChooseSize = false;
    } else {
        hasChooseSize = true;
    }

    $this.toggleClass('chosed');
    curSizeIndex = index;

    $chosed = $('.chose-items').find('.chosed');

    if ($chosed.length === 0) {
        $this.closest('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(this).addClass('zero-stock');
            }
        });

        $siblingBlock.find('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(this).addClass('zero-stock');
            }
        });
    } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
        if ($this.closest('.block-list').hasClass('color-list')) {

            $sizeList.addClass('hide');

            //切换尺码信息
            $sizeList.each(function() {
                colorIndex = $(this).data('colorid');
                if (colorIndex === $this.data('id')) {
                    $(this).removeClass('hide');
                }
            });
        }

        numArray = ($chosed.data('numstr') + '').split('/');
        $siblingBlock.find('.block').removeClass('zero-stock');
        for (i = 0; i < numArray.length; i++) {
            if ('0' === numArray[i]) {
                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
            }
        }
    } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
        $('#chose-btn-sure').css('background-color', '#eb0313');
        $('#chose-btn-sure').html('确定');

        /**$siblingBlock.find('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if ('0' === $(this).data('num')) {
                $(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]) {
                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
            }
        }
        numArray = ($siblingBlock.find('.chosed').data('numstr') + '').split('/');
        $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
        if (2 === $chosed.closest('.zero-stock').length) {
            $('#chose-btn-sure').css('background-color', '#c0c0c0');
            $('#chose-btn-sure').html('已售罄');
        } else {
            $('#chose-btn-sure').css('background-color', '#eb0313');
            $('#chose-btn-sure').html('确定');
        }
    }

});

$('.btn-minus').on('touchstart', function() {
    var num = $num.val(),
        $chosed = $('.block-list>ul>li.chosed'),
        leftNum = re.exec($('.num .left-num').html());

    //若颜色和尺码没有被同时选中,则不能点击
    if ($chosed.length < 2) {
        return;
    }

    if (num === 1 || 0 === leftNum - 0) {
        return;
    }

    $num.val(num - 1);
});

$('.btn-plus').on('touchstart', function() {
    var num = $num.val();

    //若颜色和尺码没有被同时选中,则不能点击
    if ($('.block-list>ul>li.chosed').length < 2) {
        tip.show('请选择颜色和尺码~');
        return;
    }
    leftNum = re.exec($('.num .left-num').html());
    if (num - 0 === leftNum - 0 || 0 === leftNum - 0) {
        return;
    }

    //TODO:库存数验证
    $num.val(num + 1);
});

$('#chose-btn-sure').on('touchend', function() {

    var productSku,
        buyNumber = $('#good-num').val() - 0,

        promotionId,
        isEdit = 0,
        numInCart = $('.num-tag').html() - 0;

    //  goodsType,
    // isEdit;

    $chosed = $('.block-list>ul>li.chosed');

    if (2 === $chosed.length && 0 === $chosed.closest('.zero-stock').length) {
        productSku = $sizeList.closest('.chosed').data('skuid');
        promotionId = $('[data-id="' + productSku + '"]').closest('.advance-block').data('promotion-id');
        if (confirming) {
            return false;
        }

        confirming = true;
        loading.showLoadingMask();
        $.ajax({
            method: 'POST',
            url: '/cart/index/add',
            data: {
                productSku: productSku,
                buyNumber: buyNumber,
                promotionId: promotionId,
                isEdit: isEdit
            }
        }).done(function(res) {
            loading.hideLoadingMask();
            if (res.code === 200) {
                $('.num-tag').html(numInCart + buyNumber);
                $('.num-tag').removeClass('hide');
                confirming = false;
                hide();
            }
            if (res.message) {
                tip.show(res.message);
            }
        }).fail(function() {
            tip.show('网络出了点问题~');
        }).always(function() {
            confirming = false;
        });
    }

});

exports.init = init;
exports.show = show;