eiru_pos/src/App.vue

<template lang="pug">
    .pos
        form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" nextButtonText="Continuar" backButtonText="Volver" @on-complete="completeSale()")
            tab-content(title="Qué productos necesita?" :before-change="checkCart")
                cart-step
            tab-content(title="Quién es el cliente?" :before-change="checkCustomer")
                customer-step
            tab-content(title="Cómo quieres pagar?")
                payment-method-step
            tab-content(v-if="payment === 'cash'" title="Qué monto quieres pagar?" :before-change="checkAmountPaid")
                payment-cash-step
            tab-content(v-else title="Quieres hacer alguna entrega?")
                payment-credit-step
        loader
</template>

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

    import CartStep from '@/components/cart/CartStep'
    import CustomerStep from '@/components/customer/CustomerStep'
    import PaymentMethodStep from '@/components/payment/method/PaymentMethodStep'
    import PaymentCashStep from '@/components/payment/cash/PaymentCashStep'
    import PaymentCreditStep from '@/components/payment/credit/PaymentCreditStep'

    import Loader from '@/components/Loader'

    import { mapActions, mapGetters } from 'vuex'
    import Vuex from 'vuex'

    export default {
        components: {
            TabContent,
            FormWizard,
            WizardButton,
            CartStep,
            CustomerStep,
            PaymentMethodStep,
            PaymentCashStep,
            PaymentCreditStep,
            Loader,
        },
        computed: mapGetters([
            'payment'
        ]),
        methods: mapActions([
            'initSale',
            'checkCart',
            'checkCustomer',
            'checkAmountPaid',
            'completeSale'
        ]),
        mounted() {
            this.initSale(this.$root.pos_instance)
        }
    }
</script>

<style lang="sass">
    .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: #fff

            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 0

                .wizard-btn
                    width: 160px
                    height: 40px
                    border-radius: 0
                    box-shadow: none
                    border: none
                    &:hover, &:focus
                        background: #7c7bad
</style>