123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <template lang="pug">
- .purchases
- form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='isProcessing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createPurchase' ref='wizard')
- tab-content(title='Cuál es su proveedor?' :before-change='checkSupplier')
- supplier-step
- tab-content(title='Qué productos comprarás?' :before-change='checkCart')
- product-step
- tab-content(title='Cómo quieres pagar?')
- payment-method-step
- tab-content(title='Qué monto vas a pagar?' :before-change='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 SupplierStep from '@/components/steps/Supplier'
- import ProductStep from '@/components/steps/Product'
- import PaymentMethodStep from '@/components/steps/PaymentMethod'
- import PaymentAmountStep from '@/components/steps/PaymentAmount'
- export default {
- components: {
- FormWizard,
- TabContent,
- SupplierStep,
- ProductStep,
- PaymentMethodStep,
- PaymentAmountStep
- },
- computed: mapGetters([
- 'isProcessing',
- 'state'
- ]),
- methods: {
- ...mapActions([
- 'initPurchase',
- 'checkSupplier',
- 'checkCart',
- 'checkAmountReceived',
- 'createPurchase'
- ])
- },
- watch: {
- state(value) {
- if (value === 'done') {
- this.$refs.wizard.changeTab(3, 0, false)
- }
- }
- },
- mounted() {
- this.initPurchase(this.$root.mode)
- }
- }
- </script>
- <style lang="sass">
- @import './assets/variables'
-
- .purchases
- 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
- .purchase-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>
|