eiru_pos/src/components/steps/PaymentMethod.vue

<template lang="pug">
    .pos-step
        ticket(:customerName='selectedCustomer && selectedCustomer.name' :companyName='user && user.company.name' :total='cartTotal' :items='cartItems' :defaultCurrency='selectedCurrency')
        form.payment-method
            .form-separator
                h3 Detalles del Cliente
                hr
            .form-item
                label.form-label Cliente
                input.form-input(:value='selectedCustomer && selectedCustomer.name' readonly)
            transition(name='fade')
                .form-item(v-if="payment === 'credit'")
                    label.form-label Crédito
                    input.form-input(:value='customerCredit' readonly)
            .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(v-model='paymentTermId')
                        option(v-for='term in paymentTerms' :value='term.id' v-if="term.lines.length > 0 && (term.lines[0].days !== 0 || term.lines[0].value !==  'balance')") {{ term.displayName }}
                .form-item(v-else)
                    label.form-label Método de Pago
                    select.form-input(v-model='journalId')
                        option(v-for='journal in journals' :value='journal.id') {{ journal.displayName }}
        payment-bank-modal(:show='!!showBankPaymentModal' :banks='banks' :paymentTypes='bankPaymentTypes' @onSubmit='submitBankPayment')
</template>

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

    import Ticket from '@@/common/Ticket'
    import PaymentBankModal from '@@/modals/PaymentBankModal'

    export default {
        components: {
            Ticket,
            PaymentBankModal
        },
        computed: {
            paymentTermId: {
                get() {
                    return (this.selectedPaymentTerm && this.selectedPaymentTerm.id) || -1
                },
                set(value) {
                    this.selectPaymentTerm(value)
                }
            },
            journalId: {
                get() {
                    return (this.selectedJournal && this.selectedJournal.id) || -1
                },
                set(value) {
                   this.selectJournal(value)
                }
            },
            payment: {
                get() {
                    return this.paymentType
                },
                set(value) {
                    this.changePaymentType(value)

                    if (value == 'credit') {
                        this.computePaymentLines()
                    }
                }
            },
            ...mapGetters([
                'user',
                'selectedCustomer',
                'cartItems',
                'cartTotal',
                'customerCredit',
                'paymentTerms',
                'paymentType',
                'selectedPaymentTerm',
                'journals',
                'selectedCurrency',
                'selectedJournal',
                'showBankPaymentModal',
                'banks',
                'bankPaymentTypes'
            ])
        },
        methods: mapActions([
            'changePaymentType',
            'selectJournal',
            'selectPaymentTerm',
            'computePaymentLines',
            'submitBankPayment'
        ])
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .pos-step
        width: 100%
        height: calc(100% - 50px)
        padding-bottom: 50px
        display: flex
        .payment-method
            width: calc(100% - 450px)
            height: 100%
            margin-right: 50px
            padding: 35px
            background: $app-light-color
            .form-separator
                h3
                    color: $app-separator-color
                    font-size: 8pt
                    margin: 0
                hr
                    margin-top: 15px
            .form-item
                width: 100%px
                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>