eiru_pos/src/components/steps/PaymentMethod.vue

<template lang="pug">
    .pos-step
        ticket(:customerName='selectedCustomer && selectedCustomer.name' :total='cartTotal' :items='cartItems')
        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
                        option(v-for='term in paymentTerms' :value='term' 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
                        option(v-for='journal in journals') {{ journal.displayName }}
</template>

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

    import Ticket from '@@/common/Ticket'

    import { CHANGE_PAYMENT_TYPE } from '@/constants/actionTypes'

    export default {
        components: {
            Ticket
        },
        watch: {
            payment(value) {
                this.changePaymentType(value)
            }
        },
        computed: mapGetters([
            'selectedCustomer',
            'cartItems',
            'cartTotal',
            'customerCredit',
            'paymentTerms',
            'journals'
        ]),
        methods: mapActions([
            CHANGE_PAYMENT_TYPE
        ]),
        data() {
            return {
                payment: 'cash'
            }
        }
    }
</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>