cart.js 12.9 KB
/**
 * [购物车] 购物袋
 * @author: jinhu.dong<jinhu.dong@yoho.cn>
 * @date: 2016/07/08
 * @module shopping/cart
 */

var Dialog = require('../../plugins/dialog');
var JSON = require('yoho-json2');
var _confirm = Dialog.Confirm;
var _alert = Dialog.Alert;
var Util = require('./util');
var hbs = require('yoho-handlebars');
var Stepper = require('./stepper');

var Cart = {
    /*
     * 添加到购物车
     * @function [addToCart]
     * @params { String } productSku 购买商品Sku码
     * @params { Number } buyNumber 购买商品数量
     * @params { Function } callback 购买结果回调
     */
    addToCart: function(params, callback) {
        Util.ajax({
            url: '/shopping/cart/add',
            type: 'POST',
            data: params,
            success: function(res) {
                if (res.code === 200) {
                    if (callback) {
                        return callback(res);
                    }
                }
            }
        });
    },

    /*
     * 显示商品库存不足提示
     * @function [toggleNotEnough]
     * @params { Object } target 提示显示在目标DOM对象
     * @params { Object } bCheckAll 显示全选提示还是单个商品提示
     */
    toggleNotEnough: function(target, bCheckAll) {
        var msg = '您勾选的商品库存不足',
            allKlass = '',
            tooltip;

        if (bCheckAll) {
            msg = '您全选的商品中存在库存不足商品,已帮您自动取消勾选';
            allKlass = 'all';
        }

        tooltip = $('<div class="tooltip">' +
            '<div class="content ' + allKlass + '">' + msg + '</div>' +
            '<div class="indicator"></div>' +
          '</div>');

        tooltip.appendTo(target);

        setTimeout(function() {
            tooltip.remove();
        }, 2000);
    },

    /*
     * 取消全选
     * @function [toggleCheckAllPros]
     */
    toggleCheckAllPros: function(checked) {
        var data = [],
            goodInfo;

        $('#cart_content').find('li.chk').each(function() {
            goodInfo = $.parseJSON($(this).attr('data-product_info'));
            goodInfo.selected = checked;
            data.push(goodInfo);
        });

        Cart.resetCheckAllStyle();
        Cart.toggleSelectGoods(data);
    },

    /*
     *  取消全选样式,选择商品数量没有达到
     *  @function [resetCheckAllStyle]
     */
    resetCheckAllStyle: function() {
        $('.chk-all').removeClass('chk-group');
    },

    /*
     *  根据服务端JSON,刷新购物车信息
     *  @function [refreshCart]
     */
    refreshCart: function(data) {
        var template;

        hbs.registerHelper('multiple', function(num1, num2) {
            num1 = typeof num1 === 'number' ? num1 : parseFloat(num1, 10);
            num2 = typeof num2 === 'number' ? num2 : parseFloat(num2, 10);

            if (num1 && num2) {
                return num1 * num2;
            } else {
                console.error('multiplication needs two number parameters');
            }
        });

        hbs.registerHelper('isEqual', function(v1, v2, options) {
            if (v1 === v2) {
                return options.fn(this);
            }
            return options.inverse(this);
        });

        hbs.registerHelper('image', function(url, width, height, mode) {
            mode = parseInt(mode, 10) ? mode : 2;
            url = url || '';
            return url.replace(/{width}/g, width).replace(/{height}/g, height).replace(/{mode}/g, mode);
        });

        template = hbs.compile($('#cart-content-tpl').html());
        $('#cart_content').html(template(data));

        Stepper.init();
    },

    /*
     *  选择与取消选择
     *  @function [toggleSelectGoods]
     */
    toggleSelectGoods: function(data) {
        $.ajax({
            type: 'POST',
            url: '/shopping/cart/toggleSelectGoods',
            data: {skuList: JSON.stringify(data)},
            dataType: 'json'
        }).done(function(res) {
            if (res.code === 200) {
                Util.refreshCart(res, function() {
                    Stepper.init();
                });
            } else {
                new _alert(res.message).show();
            }
        }).fail(function() {

        });
    },

    /*
     *  单选每一个商品判断是否需要全选
     *  @function [toggleCheckAll]
     */
    toggleCheck: function(target) {
        var $this = $(target),
            $checkoutBtn = $('#checkout_btn'),
            checkAll = $this.hasClass('chk-all');

        var goodInfo;
        var data = [];

        if ($this.hasClass('chk-group')) {
            // 取消选择
            $this.removeClass('chk-group');
            $checkoutBtn.addClass('disable');

            if (checkAll) {
                Cart.toggleCheckAllPros('N');
            } else {
                Cart.resetCheckAllStyle();
                goodInfo = $.parseJSON($this.parent().attr('data-product_info'));
                goodInfo.selected = 'N';
                data.push(goodInfo);
                Cart.toggleSelectGoods(data);
            }
        } else {
            // 选择
            if (checkAll) {
                Cart.toggleCheckAllPros('Y');
            } else {
                goodInfo = $.parseJSON($this.parent().attr('data-product_info'));
                goodInfo.selected = 'Y';
                data.push(goodInfo);
                Cart.toggleSelectGoods(data);
            }
        }
    },

    /*
     *  删除商品
     *  @function [removePro]
     *  @params { Array } products 商品列表
     */
    removePro: function(products) {
        var dialog = new _confirm({
            content: '您确定要从购物车中删除该商品吗?',
            cb: function() {
                dialog.close();
                Util.ajax({
                    url: '/shopping/cart/product/remove',
                    data: {skuList: JSON.stringify(products)},
                    type: 'DELETE',
                    success: function(res) {
                        Util.refreshCart(res, function() {
                            Stepper.init();
                        });
                    }
                });
            }
        }).show();
    },

    /*
     *  删除商品
     *  @function [removePro]
     *  @params { Array } products 商品列表
     */
    sendToFavorite: function(products) {
        var msg = '确定要将该商品从购物车中移入收藏吗?<br/>移入收藏后该商品将不在购物车中显示';
        var dialog;

        if (products.length > 1) {
            msg = '确定要将已选中的商品从购物车中移入收藏吗?<br/>移入收藏后已选中的商品将不在购物车中显示';
        }

        dialog = new _confirm({
            content: msg,
            cb: function() {
                dialog.close();
                Util.ajax({
                    url: '/shopping/cart/product/send_to_favorite',
                    type: 'POST',
                    data: {skuList: JSON.stringify(products)},
                    success: function(res) {
                        Util.refreshCart(res, function() {
                            Stepper.init();
                        });
                    }
                });
            }
        }).show();
    },

    // 编辑商品的颜色和尺寸
    editColorOrSize: function(productId, skn, defaultColor, defaultSize) {
        var template;
        var index = 0;
        var colors;
        var colorsLen;
        var color;

        // 前端处理后的集合
        var filterSet = [];
        var defaultImg;
        var editTarget = $('#edit_' + productId);

        // 选择
        var selectColor;

        // sku
        var newProductSku;
        var oldProductSku;

        $.ajax({
            type: 'GET',
            url: '/product/item/getProductInfo',
            data: {
                productId: productId,
                skn: skn
            },
            success: function(res) {
                // 没有res.code
                if (res.colors) {
                    // 获取成功
                    colors = res.colors;
                    colorsLen = colors.length;
                    for (index; index < colorsLen; index++) {
                        color = colors[index];

                        // 迭代每一种颜色
                        filterSet.push({
                            proId: res.id,
                            color: color.color,
                            sizes: color.sizes,
                            pic: color.thumbs[0],
                            selectable: color.total > 0,
                            colorName: color.name
                        });
                        if (color.color === defaultColor) {
                            defaultImg = color.thumbs[0];
                        }
                    }
                }

                // helpers start
                hbs.registerHelper('isEqual', function(v1, v2, options) {
                    if (v1 === v2) {
                        return options.fn(this);
                    }
                    return options.inverse(this);
                });

                hbs.registerHelper('image', function(url, width, height, mode) {
                    mode = parseInt(mode, 10) ? mode : 2;
                    url = url || '';
                    return url.replace(/{width}/g, width).replace(/{height}/g, height).replace(/{mode}/g, mode);
                });

                // helpers end

                template = hbs.compile($('#edit-color-size-tpl').html());


                editTarget.append(
                    template({
                        colors: filterSet,
                        defaultColor: defaultColor,
                        defaultSize: defaultSize,
                        defaultImg: defaultImg
                    })
                );

                oldProductSku = editTarget.find('.current-sizes .current').attr('data-sku');

                editTarget.delegate('#confirm', 'click', function(e) {
                    e.preventDefault();
                    Util.ajax({
                        url: '/shopping/cart/updateProduct',
                        type: 'PUT',
                        data: {
                            swapData: JSON.stringify([{
                                buy_number: '1',
                                selected: 'Y',
                                new_product_sku: newProductSku,
                                old_product_sku: oldProductSku
                            }])
                        },
                        success: function(newCartData) {
                            editTarget.find('.edit-color-size').remove();
                            Util.refreshCart(newCartData);
                        }
                    });
                    return false;
                }).delegate('#cancel', 'click', function(e) {
                    e.preventDefault();
                    editTarget.find('.edit-color-size').remove();
                    return false;
                }).delegate('.edit-color-size', 'click', function(e) {
                    e.preventDefault();
                    return false;
                }).delegate('.color-item', 'click', function(e) {
                    e.preventDefault();
                    selectColor = $(this);
                    if (!selectColor.hasClass('current-color')) {
                        selectColor.addClass('current-color').siblings().removeClass('current-color');
                        selectColor.parent().siblings('.current-sizes').hide().removeClass('current-sizes');
                        editTarget.find('#' + selectColor.attr('data-target')).show().addClass('current-sizes')
                                  .end()
                                  .find('.right img').attr({
                                      src: selectColor.attr('data-imageurl'),
                                      title: selectColor.attr('data-title')
                                  })
                                  .end()
                                  .find('.selected-color').text(selectColor.attr('data-title'));
                    }
                    return false;
                }).delegate('.current-sizes .size-item', 'click', function() {
                    $(this).addClass('current').siblings('.current').removeClass('current');
                    newProductSku = $(this).attr('data-sku');
                });
            },
            fail: function() {
                new _alert('此商品无法编辑颜色和尺寸').show();
            }
        });

    },

    checkStorage: function(callback) {
        Util.ajax({
            url: '/shopping/cart/checkStorage',
            success: function(res) {
                if (!res.noStorage.length) {
                    if (callback) {
                        return callback();
                    }
                } else {
                    new _alert(res.noStorage.join('<br/>') + '<br/>库存不足').show();
                }
            }
        });
    }
};

module.exports = Cart;