invoice.js 7.07 KB
/**
 * 结算页发票
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/7/13
 */

var $ = require('yoho-jquery'),
    Dialog = require('../../plugins/dialog').Dialog;

var checkedInvoiceTpl = require('../../../tpl/shopping/checked-invoice-show.hbs');

var $invoiceContent = $('#invoice-content');

var $invoiceTitleInput,
    $invoiceMobile;

require('yoho-jquery-placeholder');

// 发票信息验证
function validateInvoice($el) {
    var pass = true;
    var name = $.trim($el.find('.invoice-title-input').val());
    var mobile = $.trim($invoiceMobile.val());

    //隐藏所有错误提示
    $el.find('.input-tip').addClass('hide');

    // 发票抬头为单位
    if ($el.invoiceTitleType === 2 && name === '') {
        pass = false;
        $el.find('.invoice-title-tip').removeClass('hide');
    }

    if ($el.invoiceType === 2 && (mobile === '' ||
        $('#address-list li.address.focus').data('mobile') !== mobile)) {
        if (mobile === '') {
            pass = false;
            $el.find('.invoice-mobile-tip').removeClass('hide').find('em').html('请填写手机号码');
        } else if (!/[1][34578][0-9]{9}/.test(mobile)) {
            pass = false;
            $el.find('.invoice-mobile-tip').removeClass('hide').find('em').html('手机号码不正确');
        }
    }

    return pass;
}

// 发票弹窗Factory
function invoiceDialogFactory() {
    var invoice = new Dialog({
        className: 'invoice',
        content: $('#invoice-dialog-tpl').html(),
        btns: [
            {
                id: 'save-invoice',
                btnClass: ['save-invoice'],
                name: '保存发票信息',
                cb: function() {
                    var $el = invoice.$el,
                        $addressFocus;

                    var mobile = '',
                        invoiceMobile;

                    if (validateInvoice($el)) {

                        if ($el.invoiceType === 2) {

                            $addressFocus = $('#address-list li.address.focus');
                            invoiceMobile = $invoiceMobile.val();
                            mobile = $addressFocus.data('mobile') !== invoiceMobile ?
                                invoiceMobile : $addressFocus.data('complete-mobile');
                        }

                        $invoiceContent.html(checkedInvoiceTpl({
                            invoiceType: $el.invoiceType,
                            invoiceMobile: mobile,
                            invoiceTypeName: $el.invoiceTypeName,
                            invoiceTitle: $el.invoiceTitleType === 1 ? '个人' : $invoiceTitleInput.val(),
                            content: $el.invoiceContent,
                            invoiceContent: $el.find('.invoice-content-radio .checked').next('label').text(),
                            checked: true // 发票开具radio选中
                        }));

                        // 处理发票信息
                        invoice.close();
                    }
                }
            },
            {
                id: 'cancel-invoice',
                btnClass: ['cancel-invoice', 'white'],
                name: '取消',
                cb: function() {
                    invoice.close();
                }
            }
        ]
    });

    return invoice;
}

function showInvoiceDialog() {
    var $invoceDetail = $invoiceContent.find('.invoice-detail');
    var dialog = invoiceDialogFactory();

    var $invoiceTip = $('.yoho-dialog.invoice .input-tip');

    var isEditInvoice = $invoceDetail.length > 0;

    // radio默认值
    var invoiceTitleType = 1,
        invoiceContent = $('.invoice-content-radio').first().data('value');

    var title,
        mobile = $('#address-list li.address.focus').data('complete-mobile') || '',
        invoiceTypeName = '电子发票',
        invoiceType = 2;

    $invoiceTitleInput = $('.yoho-dialog.invoice .invoice-title-input');
    $invoiceMobile = $('.yoho-dialog.invoice .invoice-mobile');

    // 电子、纸质发票切换
    $('.invoice-tab li').unbind('click').bind('click', function() {
        var $electronGroup = $('.electron-group');

        $(this).removeClass('white').siblings('li').addClass('white');
        dialog.$el.invoiceType = $(this).data('type');
        dialog.$el.invoiceTypeName = $(this).text();

        // 纸质
        if ($(this).data('type') === 1) {
            $electronGroup.addClass('hide');
        } else {
            $electronGroup.removeClass('hide');
        }
    });

    if (isEditInvoice) {
        title = $invoceDetail.data('title');
        invoiceType = $invoceDetail.data('type') || 2;
        invoiceTitleType = title === '个人' ? 1 : 2;
        invoiceContent = $invoceDetail.data('content');

        if (invoiceTitleType === 2) {
            $invoiceTitleInput.removeClass('hide').val(title);
        }

        // 初始化电子、纸质tab
        if (invoiceType === 1) {
            $('.invoice-tab li:eq(1)').trigger('click');
            invoiceType = 1;
            invoiceTypeName = '纸质发票';
        } else {
            $('.invoice-tab li:eq(0)').trigger('click');
            mobile = $invoceDetail.data('mobile');
        }
    }

    // 设置默认收货地址手机号
    if (mobile) {
        $invoiceMobile.val(mobile.toString().substr(0, 3) + '****' + mobile.toString().substr(7));
    }

    // 设置radio选中
    $('[data-value=' + invoiceTitleType + '].invoice-title-radio').find('.radio').addClass('checked');
    $('[data-value=' + invoiceContent + '].invoice-content-radio').find('.radio').addClass('checked');

    // 存储发票参数
    $.extend(dialog.$el, {
        invoiceType: invoiceType,
        invoiceTypeName: invoiceTypeName,
        invoiceTitleType: invoiceTitleType,
        invoiceContent: invoiceContent
    });

    // 初始化发票抬头radio
    $('.invoice-title-radio').check({
        type: 'radio',
        group: 'invoice-title',
        onChange: function(el, checked, value) {

            // 只处理选中的change逻辑
            if (checked) {
                if ($(el).hasClass('personal')) {
                    $invoiceTitleInput.addClass('hide');
                } else {
                    $invoiceTitleInput.removeClass('hide');
                }

                $invoiceTip.addClass('hide'); // 切换时隐藏提示
                dialog.$el.invoiceTitleType = value; // 1-个人;2-单位
            }
        }
    });

    // 初始化发票内容radio
    $('.invoice-content-radio').check({
        type: 'radio',
        group: 'invoice-content',
        onChange: function(el, checked, value) {

            if (checked) {
                dialog.$el.invoiceContent = value;
            }
        }
    });

    // placeholder for title
    $('.invoice-title-input').placeholder();

    dialog.show();
}

$invoiceContent.on('click', '.invoice-radio', function() {
    if ($(this).find('.checked').length > 0) {

        // 取消选中
        $invoiceContent.html(checkedInvoiceTpl({
            checked: false
        }));
    } else {

        // 选中
        showInvoiceDialog();
    }
}).on('click', '.modify-invoice', function() {
    showInvoiceDialog();
});