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

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

var checkedInvoiceTpl = hbs.compile($('#checked-invoice-show-tpl').html());

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

var $invoiceTitleInput,
    $invoiceTip,
    $invoceTab,
    $invoiceEntity,
    invoiceDialog;

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

    var phoneRegx = [
        {
            noEmpty: true,
            err: '请填写手机号码'
        },
        {
            regx: /\d{11}/,
            err: '手机号码不正确'
        }
    ];

    var key,
        vaRegx;

    // 电子发票
    if ($el.find('.paper-invoice').hasClass('no-focus')) {

        for (key = 0; key < phoneRegx.length; key++) {
            vaRegx = phoneRegx[key];

            if (vaRegx.noEmpty && phone === '' ||
                vaRegx.regx && !vaRegx.regx.test(phone)) {
                pass = false;
                $el.find('.invoice-phone-tip').removeClass('hide').find('em').text(vaRegx.err);
                break;
            }
        }
    }

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

    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;
                    var invoiceType;

                    if (validateInvoice($el)) {
                        invoiceType = $invoceTab.children().not('no-focus').hasClass('el-invoice') ? 1 : 2;
                        $invoiceContent.html(checkedInvoiceTpl({
                            type: invoiceType,
                            invoiceTypeText: invoiceType === 2 ? '电子发票' : '纸质发票',
                            invoiceTitle: $el.invoiceTitleType === 1 ? '个人' : $invoiceTitleInput.val(),
                            content: $el.invoiceContent,
                            invoiceContent: $el.find('.invoice-content-radio .checked').next('label').text(),
                            phone: $el.find('.receiver-phone').val(),
                            checked: true // 发票开具radio选中
                        }));

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

    return invoice;
}

invoiceDialog = invoiceDialogFactory();

// 存储发票参数
$.extend(invoiceDialog.$el, {
    invoiceTitleType: 1,
    invoiceContent: $('.invoice-content-radio .checked').parent().data('value') // 默认选中项的值
});

$invoiceTitleInput = $('.yoho-dialog.invoice .invoice-title-input');
$invoiceTip = $('.yoho-dialog.invoice .input-tip');
$invoceTab = $('.invoice-tab');
$invoiceEntity = $('.invoice-entity');

// 初始化发票抬头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'); // 切换时隐藏提示
            invoiceDialog.$el.invoiceTitleType = value; // 1-个人;2-单位
        }
    }
});

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

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

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

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

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

// 纸质发票和电子发票的切换
$invoceTab.on('click', '.btn', function() {
    var $this = $(this);

    if ($this.hasClass('no-focus')) {
        $invoceTab.children('.btn').toggleClass('no-focus');

        if ($this.hasClass('el-invoice')) {
            $invoiceEntity.addClass('el');
        } else {
            $invoiceEntity.removeClass('el');
        }
    }
});