App.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template lang="pug">
  2. .purchases
  3. form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='isProcessing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createPurchase' ref='wizard')
  4. tab-content(title='Cuál es su proveedor?' :before-change='checkSupplier')
  5. supplier-step
  6. tab-content(title='Qué productos comprarás?' :before-change='checkCart')
  7. product-step
  8. tab-content(title='Cómo quieres pagar?')
  9. payment-method-step
  10. tab-content(title='Qué monto vas a pagar?' :before-change='checkAmountReceived')
  11. payment-amount-step
  12. </template>
  13. <script>
  14. import { mapGetters, mapActions } from 'vuex'
  15. import { FormWizard, TabContent } from 'vue-form-wizard'
  16. import 'vue-form-wizard/dist/vue-form-wizard.min.css'
  17. import SupplierStep from '@/components/steps/Supplier'
  18. import ProductStep from '@/components/steps/Product'
  19. import PaymentMethodStep from '@/components/steps/PaymentMethod'
  20. import PaymentAmountStep from '@/components/steps/PaymentAmount'
  21. export default {
  22. components: {
  23. FormWizard,
  24. TabContent,
  25. SupplierStep,
  26. ProductStep,
  27. PaymentMethodStep,
  28. PaymentAmountStep
  29. },
  30. computed: mapGetters([
  31. 'isProcessing',
  32. 'state'
  33. ]),
  34. methods: {
  35. ...mapActions([
  36. 'initPurchase',
  37. 'checkSupplier',
  38. 'checkCart',
  39. 'checkAmountReceived',
  40. 'createPurchase'
  41. ])
  42. },
  43. watch: {
  44. state(value) {
  45. if (value === 'done') {
  46. this.$refs.wizard.changeTab(3, 0, false)
  47. }
  48. }
  49. },
  50. mounted() {
  51. this.initPurchase(this.$root.mode)
  52. }
  53. }
  54. </script>
  55. <style lang="sass">
  56. @import './assets/variables'
  57. .purchases
  58. width: 100%
  59. height: 100%
  60. position: absolute
  61. .vue-form-wizard
  62. width: 100%
  63. height: 100%
  64. padding-bottom: 0
  65. .wizard-header
  66. display: none
  67. .wizard-navigation
  68. width: 100%
  69. height: 100%
  70. .wizard-progress-with-circle
  71. top: 35px
  72. .wizard-icon-circle
  73. width: 60px
  74. height: 60px
  75. .wizard-tab-content
  76. width: 100%
  77. height: calc(100% - 82px)
  78. padding: 0
  79. overflow: hidden
  80. .wizard-tab-container
  81. width: calc(100% - 20px)
  82. height: calc(100% - 20px)
  83. margin: 10px
  84. .purchase-step
  85. width: 100%
  86. height: 100%
  87. background: $app-bg-color
  88. .wizard-card-footer
  89. width: 100%
  90. height: 50px
  91. position: absolute
  92. bottom: 10px
  93. .wizard-btn
  94. width: 160px
  95. height: 40px
  96. border-radius: 0
  97. box-shadow: none
  98. border: none
  99. &:hover, &:focus
  100. background: $app-main-color
  101. </style>