|
@@ -1,170 +0,0 @@
|
|
|
-<template lang="pug">
|
|
|
- .purchase-step
|
|
|
- ticket(:customerName='selectedSupplier && selectedSupplier.name' :companyName='user && user.company.name' :total='cartTotal' :items='cartItems' :defaultCurrency='selectedCurrency')
|
|
|
- form.payment-amount
|
|
|
- .form-loading(v-show='isProcessing')
|
|
|
- .form-overlay
|
|
|
- .form-spinner
|
|
|
- spinner(type='wave')
|
|
|
- .form-separator
|
|
|
- h3 Detalles del Pago
|
|
|
- hr
|
|
|
- .form-item(v-show="paymentType === 'cash'")
|
|
|
- label.form-label Monto a Pagar
|
|
|
- input.form-input(:value='cartTotal | currency(...selectedCurrency)' readonly)
|
|
|
- .form-item
|
|
|
- label.form-label Monto Entregado
|
|
|
- input.form-input(v-model='amountReceived' autofocus)
|
|
|
- .form-item(v-show="paymentType === 'cash'")
|
|
|
- hr
|
|
|
- label.form-label Monto a Recibir
|
|
|
- input.form-input(:value='paymentResidual | currency(...selectedCurrency)' readonly)
|
|
|
- .form-item-table(v-show="paymentType === 'credit'")
|
|
|
- table
|
|
|
- thead
|
|
|
- tr
|
|
|
- th Monto a Pagar
|
|
|
- th Fecha de Pago
|
|
|
- tbody
|
|
|
- tr(v-for='line in paymentLines')
|
|
|
- td {{ line.total | currency(...selectedCurrency) }}
|
|
|
- td {{ line.date }}
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { mapGetters, mapActions } from 'vuex'
|
|
|
-
|
|
|
- import { Ticket, Spinner } from '../common'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Ticket,
|
|
|
- Spinner
|
|
|
- },
|
|
|
- computed: {
|
|
|
- amountReceived: {
|
|
|
- get() {
|
|
|
- let formatted = this.$options.filters.currency(this.initialPayment, {...this.selectedCurrency})
|
|
|
-
|
|
|
- return !!this.initialPayment ? formatted : formatted.replace(/\d/, '')
|
|
|
- },
|
|
|
- set(value) {
|
|
|
- value = value.replace(/[\.|,](\d{0,2}$)/, '?$1').split(/\?/)
|
|
|
- value[0] = value[0].replace(/[^0-9]/g, '')
|
|
|
- value = Number.parseFloat(value.join('.')) || 0
|
|
|
-
|
|
|
- this.changeInitialPayment(value)
|
|
|
- this.computePaymentResidual(value)
|
|
|
-
|
|
|
- if (this.paymentType === 'credit') {
|
|
|
- this.computePaymentLines()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- ...mapGetters([
|
|
|
- 'user',
|
|
|
- 'selectedSupplier',
|
|
|
- 'cartItems',
|
|
|
- 'cartTotal',
|
|
|
- 'paymentTerms',
|
|
|
- 'paymentType',
|
|
|
- 'paymentLines',
|
|
|
- 'initialPayment',
|
|
|
- 'selectedCurrency',
|
|
|
- 'isProcessing'
|
|
|
- ])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- computePaymentResidual(value) {
|
|
|
- this.paymentResidual = value < this.cartTotal ? 0 : value - this.cartTotal
|
|
|
- },
|
|
|
- ...mapActions([
|
|
|
- 'changeInitialPayment',
|
|
|
- 'computePaymentLines'
|
|
|
- ])
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- paymentResidual: 0
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="sass">
|
|
|
- @import '../../assets/variables'
|
|
|
- .purchase-step
|
|
|
- width: 100%
|
|
|
- height: calc(100% - 50px)
|
|
|
- padding-bottom: 50px
|
|
|
- display: flex
|
|
|
- .payment-amount
|
|
|
- width: calc(100% - 450px)
|
|
|
- height: 100%
|
|
|
- margin-right: 50px
|
|
|
- padding: 35px
|
|
|
- background: $app-light-color
|
|
|
- position: relative
|
|
|
- .form-loading
|
|
|
- width: 90%
|
|
|
- height: 90%
|
|
|
- position: absolute
|
|
|
- .form-overlay
|
|
|
- width: 100%
|
|
|
- height: 100%
|
|
|
- background: $app-bg-color
|
|
|
- opacity: 0.5
|
|
|
- position: absolute
|
|
|
- .form-spinner
|
|
|
- width: 100%
|
|
|
- height: 100%
|
|
|
- display: flex
|
|
|
- justify-content: center
|
|
|
- align-items: center
|
|
|
- .form-separator
|
|
|
- h3
|
|
|
- color: $app-separator-color
|
|
|
- font-size: 8pt
|
|
|
- margin: 0
|
|
|
- hr
|
|
|
- margin-top: 15px
|
|
|
- .form-item
|
|
|
- width: 100%px
|
|
|
- height: 45px
|
|
|
- margin-bottom: 15px
|
|
|
- .form-label
|
|
|
- width: 250px
|
|
|
- height: 45px
|
|
|
- font-size: 14pt
|
|
|
- .form-input
|
|
|
- width: 350px
|
|
|
- height: 45px
|
|
|
- font-size: 14pt
|
|
|
- border-radius: 0
|
|
|
- &.input-only
|
|
|
- margin-left: 250px
|
|
|
- margin-bottom: 15px
|
|
|
- .form-item-table
|
|
|
- width: 100%
|
|
|
- height: 250px
|
|
|
- border: 1px solid $app-border-color
|
|
|
- overflow-y: auto
|
|
|
- table
|
|
|
- width: 100%
|
|
|
- thead
|
|
|
- th
|
|
|
- line-height: 35px
|
|
|
- padding-left: 10px
|
|
|
- th:nth-child(1)
|
|
|
- width: 200px
|
|
|
- th:nth-child(2)
|
|
|
- width: 200px
|
|
|
- tbody
|
|
|
- td
|
|
|
- height: 35px
|
|
|
- padding-left: 10px
|
|
|
-
|
|
|
- td:nth-child(1)
|
|
|
- width: 200px
|
|
|
- td:nth-child(2)
|
|
|
-</style>
|