eiru_purchases/src/components/payment/PaymentStep.vue

<template lang="pug">
    .purchase-step
        .payment-wrapper
            form.payment-form
                .form-separator
                    h3 Detalles del Pago
                    hr
                    .cash-payment(v-if="selectedJournal.type === 'cash'")
                        .form-item
                            label.form-label Monto a pagar
                            input.form-input(:value='cartTotal' readonly)
                        .form-item
                            label.form-label Total recibido
                            input.form-input(:value='amount' v-model='amount' autofocus)
                        hr
                        .form-item
                            label.form-label Total a devolver
                            input.form-input(:value='amountResidual' readonly)
</template>


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

    export default {
        computed: {
            amount: {
                get() {
                    return this.amountPaid
                },
                set(value) {
                    this.changeAmountPaid(value)
                }
            },
            ...mapGetters([
                'selectedJournal',
                'cartTotal',
                'amountPaid',
                'amountResidual'
            ])
        },
        methods: mapActions([
            'changeAmountPaid'
        ])
    }

</script>

<style lang="sass">
    .purchase-step
        .payment-wrapper
            width: 100%
            height: 100%
            display: flex
            align-items: center
            justify-content: center
            .payment-form
                width: 600px
                height: 100%
                background: #f5f5f5
                padding: 25px
                .form-separator
                    h3
                        color: #9e9e9e
                        font-size: 8pt
                    hr
                        margin-top: 5px
                .form-item
                    width: 100%
                    height: 45px
                    margin-bottom: 15px
                    .form-label
                        width: 200px
                        height: 45px
                        font-size: 14pt
                    .form-input
                        width: 350px
                        height: 45px
                        font-size: 14pt
                        border-radius: 0
</style>