cart-color-panel.js 5.19 KB
/**
 * Created by yoho on 2017-01-05.
 */

var $ = require('yoho-jquery'),
    capi = require('./cart-api'),
    dialog = require('../common/dialog'),
    selColorWinTpl = require('hbs/cart/select-color-panel.hbs');

var Alert = dialog.Alert,
    $cartListWrap = $('#Y_CartListWrap'),
    ColorPanelAction;

$(document).bind('click', function(e) {
    var target = $(e.target);

    if (target.closest('.pay-pro-detail').length === 0 && target.closest('.goods-choose-box').length === 0) {
        $('.goods-choose-box').hide();
        $('.pay-pro-detail').removeClass('active');
        e.stopPropagation();
    }
});

function renderAndShowSelWin($item, pinfo) {
    $item.find('.goods-choose-box').remove();
    $(selColorWinTpl(pinfo)).appendTo($item).show();
}

ColorPanelAction = {
    showColorSizePanel: function() {

        var $this = $(this);
        var $item = $this.closest('li[data-role="pitem"]');
        var pinfo = $this.data('_p_info');
        var $selWin = $item.find('.goods-choose-box');
        var pid = $item.data('pid');
        var skn = $item.data('skn');
        var sku = $item.data('id');
        var defaultInfo = {
            color: $item.data('color'),
            size: $item.data('size'),
            pid: pid,
            sku: sku,
            skn: skn
        };

        $cartListWrap.find('.pay-pro-detail').removeClass('active');

        if ($selWin && $selWin.length && $selWin.is(':visible')) {
            $selWin.hide();
            return;
        }

        $item.find('.pay-pro-detail').addClass('active');
        $cartListWrap.find('.goods-choose-box').hide();

        if (!pinfo) {
            capi.getProductInfo(pid, skn).done(function(productInfo) {

                pinfo = capi.parseProductInfo(productInfo, defaultInfo);

                $this.data('_p_info', pinfo);
                renderAndShowSelWin($item, pinfo);
            }).fail(function() {
                new Alert('此商品无法编辑颜色和尺寸').show();
            });
            return;
        }

        renderAndShowSelWin($item, pinfo);
    },
    editColorOrSize: function() {

        var $this = $(this);
        var $item = $this.closest('li[data-role="pitem"]');

        // var pid = $item.data('pid');
        var swapData = {};
        var oldSku = $item.data('id');
        var $size = $this.closest('.goods-choose-box').find('.choose-size .dt.active');
        var newSku = $size.data('sku');
        var newSkn = $this.closest('.goods-info').data('skn');
        var promotionId = $item.data('promotionid');
        var poolId = $item.data('pool-id');
        var batchNo = $item.data('batch-no');

        // 没有重新选择颜色-尺码,则不用重新请求显示
        if (!oldSku || !newSku || oldSku === newSku) {
            ColorPanelAction._hideColorSizePanel($item);
            return false;
        }

        // 加价购更换
        if ($item.data('isgift') || $item.data('ispricegift')) {
            return capi.updateCartGiftItem(promotionId, newSkn, newSku);
        }

        swapData = {
            buy_number: '1',
            selected: 'Y',
            new_product_sku: newSku,
            old_product_sku: oldSku
        };

        // 套餐编辑尺码
        if (poolId) {
            $.extend(swapData, {
                activity_id: poolId,
                batch_no: batchNo
            });
        }

        capi.updateCartItem(swapData);
    },
    _hideColorSizePanel: function($item) {
        $item.find('.goods-choose-box').hide();
        $item.find('.pay-pro-detail').removeClass('active');
    },
    hideColorSizePanel: function(event) {
        var $this = $(this);

        event.stopPropagation();
        ColorPanelAction._hideColorSizePanel($this.closest('li[data-role="pitem"]'));
    },
    selectColor: function() {
        var $this = $(this);
        var index = $this.parent().find('.dt').index($this);
        var $srows = $this.closest('.goods-info').find('.choose-size .size-row');
        var $bigImgs = $this.closest('.goods-choose-box').find('.goods-info-bigimg .big-img');

        if ($this.hasClass('active') || $this.hasClass('disabled')) {
            return;
        }

        $this.siblings('.dt').removeClass('active');
        $this.addClass('active');

        $srows.find('.dt').removeClass('active');
        $srows.addClass('hide');
        $srows.eq(index).removeClass('hide');

        $bigImgs.addClass('hide');
        $bigImgs.eq(index).removeClass('hide');
    },
    selectSize: function() {

        var $this = $(this);

        if ($this.hasClass('disabled')) {
            return;
        }
        $this.siblings('.dt').removeClass('active');
        $this.addClass('active');
    }
};

/** 重新选择商品颜色尺码 **/
$cartListWrap.on('click', 'li[data-role="pitem"] .pay-pro-detail', ColorPanelAction.showColorSizePanel);
$cartListWrap.on('click', 'li[data-role="pitem"] .button-cancel', ColorPanelAction.hideColorSizePanel);
$cartListWrap.on('click', 'li[data-role="pitem"] .button-sure', ColorPanelAction.editColorOrSize);
$cartListWrap.on('click', 'li[data-role="pitem"] .goods-choose-box .choose-color .dt', ColorPanelAction.selectColor);
$cartListWrap.on('click', 'li[data-role="pitem"] .goods-choose-box .choose-size .dt', ColorPanelAction.selectSize);