eiru_pos/src/App.vue

<template lang="pug">
    .pos
        form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='processing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale' ref='wizard')
            tab-content(title="Qué productos necesita?" :beforeChange="checkCart")
                product-step
            tab-content(title="Quién es el cliente?" :beforeChange="checkCustomer")
                customer-step
            tab-content(v-if='isSale' title="Cómo quieres pagar?" :beforeChange="checkPaymentMethod")
                payment-method-step
            tab-content(v-if='isSale' title="Qué monto vas a entregar?" :beforeChange="checkAmountReceived")
                payment-amount-step
</template>

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

    import { FormWizard, TabContent } from 'vue-form-wizard'
    import 'vue-form-wizard/dist/vue-form-wizard.min.css'

    import ProductStep from '@@/steps/Product'
    import CustomerStep from '@@/steps/Customer'
    import PaymentMethodStep from '@@/steps/PaymentMethod'
    import PaymentAmountStep from '@@/steps/PaymentAmount'

    export default {
        components: {
            FormWizard,
            TabContent,
            ProductStep,
            CustomerStep,
            PaymentMethodStep,
            PaymentAmountStep
        },
        computed: mapGetters([
            'isSale',
            'selectedBank',
            'processing',
            'completed'
        ]),
        methods: mapActions([
            'initSale',
            'checkCart',
            'checkCustomer',
            'checkPaymentMethod',
            'checkAmountReceived',
            'createSale',
            'resetSale'
        ]),
        watch: {
            selectedBank(value) {
                if (!value) {
                    return
                }

                this.$refs.wizard.changeTab(2, 3, false)
            },
            completed(value) {
                if (!value) {
                    return
                }
                
                this.$refs.wizard.changeTab(3, 0, false)

                this.resetSale()
            }
        },
        mounted() {
            this.initSale(this.$root.mode)
        }
    }
</script>

<style lang="sass">
    @import './assets/variables'
    .pos
        width: 100%
        height: 100%
        position: absolute
        .vue-form-wizard
            width: 100%
            height: 100%
            padding-bottom: 0
            .wizard-header
                display: none
            .wizard-navigation
                width: 100%
                height: 100%
                .wizard-progress-with-circle
                    top: 35px
                .wizard-icon-circle
                    width: 60px
                    height: 60px
                .wizard-tab-content
                    width: 100%
                    height: calc(100% - 82px)
                    padding: 0
                    overflow: hidden
                    .wizard-tab-container
                        width: calc(100% - 20px)
                        height: calc(100% - 20px)
                        margin: 10px
                        .pos-step
                            width: 100%
                            height: 100%
                            background: $app-bg-color
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 10px
                .wizard-btn
                    width: 160px
                    height: 40px
                    border-radius: 0
                    box-shadow: none
                    border: none
                    &:hover, &:focus
                        background: $app-main-color
</style>