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

var $ = require('jquery');

//    Handlebars = require('yoho.handlebars');

// var $page = $('.yoho-page');

var $num,
    $chosed,
    re = /\d+/,
    leftNum,
    $colorList = $('.color-list ul>li'),
    $sizeList = $('.size-list ul>li'),
    firstColorId = $colorList.eq(0).data('id'),
    colorIndex;

//初始化购物车面板显示
$sizeList.each(function() {
    colorIndex = $(this).data('colorid');


    if (colorIndex === firstColorId) {
        $(this).removeClass('hide');
    }
});

// confirm;

// var tpl;

//读取partials
// $.ajax({
//     type: 'GET',
//     url: '/shoppingCart/tpl',
//     success: function(data) {
//         tpl = Handlebars.compile(data);
//     }
// });


//显示
// function show(data) {
//     // var html = tpl(data);
//     $('.chose-panel').show();
//     // $page.append(html);
//     $('.chose-panel')
//     $num = $('#good-num');
// }



function show() {
    $('.chose-panel').show();

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

//移除当前Panel
function remove() {
    $('.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;
    }

    //点击蒙版消失
    remove();
}).on('touchstart', '#chose-btn-sure', function() {

    // var productSku,
    //     buyNumber = $('#good-num') - 0;
    //     promotionId,
    //     goodsType,
    //     isEdit;

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

    // if (2 === $chosed.length && 2 !== $chosed.closest('.zero-stock').length) {

    //     if (confirm) {
    //         return false;
    //     }

    //     confirm = true;
    //     loading.showLoadingMask();
    //     $.ajax({
    //         method: 'POST',
    //         url: '/cart/index/add',
    //         data: {
    //             product_id: productId,
    //             content: content
    //         }
    //     }).done(function(res) {
    //         if (res.code === 200) {
    //             loading.hideLoadingMask();
    //             confirm = false;
    //             remove();
    //         }
    //     }).fail(function() {
    //         tip.show('网络出了点问题~');
    //         confirm = false;
    //     });
    // }

}).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');
    $this.toggleClass('chosed');
    index = $this.index();
    $chosed = $('.block-list>ul>li.chosed');

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

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

        $siblingBlock.find('ul>li').each(function() {
            $(this).removeClass('zero-stock');
            if (0 === $(this).data('num') - 0) {
                $(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] - 0) {
                $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') - 0) {
                $(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] - 0) {
                $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('确定');
        }
    }

}).on('touchstart', '.btn-minus', 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);
}).on('touchstart', '.btn-plus', function() {
    var num = +$num.val();

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

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


exports.show = show;