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="payment") 
                label(for="cash") Contado
            .form-item-option
                input.form-input(type="radio" id="credit" value="credit" v-model="payment")
                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 } from 'vuex'

    export default {
        computed: mapGetters([
            'hasSelectedCustomer',
            'selectedCustomer',
            '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
            }
        },
        data() {
            return {
                payment: 'cash'
            }
        }
    }
</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
            .form-label
                width: 200px
                height: 30px

            .form-input
                width: 300px
                height: 30px

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

            .form-item-option
                display: inline-block

                input
                    width: 20px
                    height: 20px

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