eiru_pos/src/components/payment/PaymentDetails.vue

<template lang="pug">
    form.payment-details
        .form-separator
            h3 Detalles del Cliente
            hr
        .form-item
                label.form-label Cliente
                input.form-input(readonly :value="getCustomerName()")
        transition(name="fade")
            .form-item(v-if="payment === 'credit'")
                    label.form-label Crédito
                    input.form-input(readonly :value="getCustomerCredit()")
        .form-separator
            h3 Detalles del Pago
            hr
        .form-item
            label.form-label Forma de pago
            .form-item-option
                input.form-input(type="radio" id="cash" value="cash" v-model="payIn") 
                label(for="cash") Contado
            .form-item-option
                input.form-input(type="radio" id="credit" value="credit" v-model="payIn")
                label(for="credit") Crédito
        transition(name="fade")
            .form-item(v-if="payment === 'credit'")
                select.form-input.input-only
                    option(v-for="term in paymentTerms" v-bind:value="term.id" v-if="term.lines.length > 0 && term.lines[0].days !== 0") {{ term.display_name }}
            .form-item(v-else)
                label.form-label Método de Pago
                select.form-input
                    option(v-for="journal in journals" v-bind:value="journal.id") {{ journal.display_name }}
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: {
            payIn: {
                get() {
                    return this.payment
                },
                set(value) {
                    this.togglePayment(value)
                }
            },
            ...mapGetters([
                'hasSelectedCustomer',
                'selectedCustomer',
                'payment',
                'paymentTerms',
                'journals',
                'selectedJournal',
                'selectedPaymentTerm'
            ])
        },
        methods: {
            getCustomerName() {
                return this.hasSelectedCustomer ? this.selectedCustomer.display_name : ''
            },
            getCustomerCredit() {
                return this.hasSelectedCustomer && this.selectedCustomer.credit_limit >= this.selectedCustomer.credit ? this.selectedCustomer.credit_limit - this.selectedCustomer.credit : 0
            },
            ...mapActions([
                'togglePayment'
            ]) 
        }
    }
</script>

<style lang="sass">
    .payment-details
        width: calc(100% - 450px)
        height: 100%
        margin-right: 50px
        padding: 35px
        background: #f5f5f5

        .form-separator
            h3
                color: #9e9e9e
                font-size: 8pt
            hr
                margin-top: 5px

        .form-item
            width: 100%
            height: 45px
            margin-bottom: 15px

            .form-label
                width: 250px
                height: 45px
                font-size: 14pt

            .form-input
                width: 350px
                height: 45px
                font-size: 14pt
                border-radius: 0

                &.input-only
                    margin-left: 250px
                    margin-bottom: 15px

            .form-item-option
                display: inline-block

                input
                    width: 20px
                    height: 20px

                label
                    font-size: 12pt
                    margin: 0 45px 15px 5px
</style>