eiru_payments/src/Payments.vue

<template lang="pug">
	.payments
		form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()" @on-change="(prev, next) => removeMovePaymentsAll(prev > next && prev >= 2)")
			//- form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#8c9bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" @on-complete="completePayment()")
			tab-content(title="Quien es el cliente?")
				Customers
			tab-content(title="Cual es la factura?")
				invoices
			tab-content(title="Que cuota es?")
				move-line
			tab-content(title="Como quieres pagar?" )
				payments
</template>

<script>

	import { mapActions } from 'vuex'
	import { REMOVE_MOVE_PAYMENTS_ALL } from '@/constants/actionTypes'
	import {FormWizard, TabContent } from 'vue-form-wizard'
	import 'vue-form-wizard/dist/vue-form-wizard.min.css'

	import Customers from '@@/steps/Partner'
	import Invoices from '@@/steps/Invoices'
	import MoveLine from '@@/steps/MoveLine'
	import Payments from '@@/steps/MethodPayment'

	export default {
		components: {
			TabContent,
			FormWizard,
			Customers,
			Invoices,
			MoveLine,
			Payments
		},

		methods: mapActions([
			'initPayments',
			REMOVE_MOVE_PAYMENTS_ALL
			// 'notify',
			// 'completePayment',
			// 'removeLineAll',
			// 'checkMoveLine',
			// 'chekPaymentAmount',
			// 'checkPartner',
			// 'checkInvoice'
		]),
		mounted() {
			this.initPayments()
		}
	}
</script>
<style lang="sass">
	@import './assets/variables'
	.payments
		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
						.payments-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: $app-main-color
</style>