eiru_pos/src/components/modals/BankPaymentModal.vue

<template lang="pug">
    modal(
        name='payment-bank-modal'
        adaptive='true'
        width='800px'
        height='500px'
        transition='nice-modal-fade'
        :classes="['v--modal', 'payment-bank-modal']"
        @before-close='beforeClose'
    )
        form-wizard(
            title='Pago Bancario'
            subtitle=''
            next-button-text='Continuar'
            back-button-text='Volver'
            finish-button-text='Completar'
            color='#7c7bad'
        )
            tab-content(
                title='Qué tipo de operación es?'
            )
                form.journal-form
                    ul
                        li
                            input.form-input(
                                type='radio'
                                id='cash'
                            )
                            label Banco (PYG)
                        li
                            input.form-input(
                                type='radio'
                                id='cash'
                            )
                            label Cheques (PYG)
                        li
                            input.form-input(
                                type='radio'
                                id='cash'
                            )
                            label Tarjeta de crédito (PYG)
                        li
                            input.form-input(
                                type='radio'
                                id='cash'
                            )
                            label Tarjeta de débito (PYG)
                        li
                            input.form-input(
                                type='radio'
                                id='cash'
                            )
                            label Billera Tigo (PYG)
            tab-content(
                title='Qué detalles necesita?'
            )
            tab-content(
                title='De qué monto es la operación?'
            )

</template>

<script>
    import { FormWizard, TabContent } from 'vue-form-wizard'

    export default {
        props: {
            show: {
                type: Boolean,
                required: true
            }
        },
        components: {
            FormWizard,
            TabContent
        },
        watch: {
            show(value) {
                if (!value) {
                    this.$modal.hide('payment-bank-modal')
                    return
                }

                this.$modal.show('payment-bank-modal')
            }
        },
        methods: {
            beforeClose(e) {
                if (this.show) {
                    e.stop()
                }

                console.log(this.show)
            },
            onFinalize() {
                this.$emit('onFinalize')
            },
            onCancel() {
                this.$emit('onCancel')
            }
        }
    }
</script>

<style lang="sass">
    .payment-bank-modal
        padding: 0 !important
        &::before
            content: ''
            display: block
            position: absolute
            background-size: cover
            filter: blur(3px)
            z-index: -1
        .wizard-tab-container
            display: flex !important
            justify-content: center !important
            align-items: center !important
            .journal-form
                width: 400px
                background: #fff
                ul
                    list-style: none
                    li
                        margin-bottom: 3px
                        input
                            width: 20px
                            height: 20px
                        label
                            font-size: 12pt
                            margin: 0 35px 15px 5px
</style>