invoice.js 4.35 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;

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

    // 发票抬头为单位
    if ($el.invoiceTitleType === 2 && 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;

                    if (validateInvoice($el)) {
                        $invoiceContent.html(checkedInvoiceTpl({
                            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;

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

    if (isEditInvoice) {
        title = $invoceDetail.data('title');

        invoiceTitleType = title === '个人' ? 1 : 2;
        invoiceContent = $invoceDetail.data('content');

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

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


    // 存储发票参数
    $.extend(dialog.$el, {
        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;
            }
        }
    });

    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();
});