123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- <template lang="pug">
- modal(
- name='product-discount'
- transition='nice-modal-fade'
- :classes="['v--modal', 'product-discount']"
- @before-close='beforeClose'
- )
- form
- .discount-item
- label.discount-label Precio unitario
- input.discount-input(
- readonly
- :value='(!item || item.price) | currency(...options)'
- )
- .discount-item
- label.discount-label Precio mínimo
- input.discount-input(
- readonly
- :value='(!item || item.minimumPrice) | currency(...options)'
- )
- .discount-item
- label.discount-label Precio máximo
- input.discount-input(
- readonly
- :value='(!item || item.maximumPrice) | currency(...options)'
- )
- hr
- .discount-item
- label.discount-label Precio aplicado
- input.discount-input(
- autofocus
- v-model='formattedAmmount'
- :class="{'discount-input-invalid': !isValid()}"
- )
- .discount-item
- label.discount-label {{ discount < 0 ? 'Ganancia' : 'Descuento' }}
- input.discount-input(
- readonly
- :value='discount | absolute | currency(...options)'
- )
- .discount-options
- button.discount-button(
- :disabled='isValid() === false'
- @click.prevent='onAccept'
- ) Aceptar
- button.discount-button(@click.prevent='onCancel') Cancelar
- </template>
- <script>
- export default {
- props: {
- item: {
- type: Object,
- default: {
- price: 0,
- minimumPrice: 0,
- maximumPrice: 0
- }
- },
- options: {
- type: Object,
- default: {
- symbol: '$',
- position: 'before',
- thousandsSeparator: '.',
- decimalPlaces: 2,
- decimalSeparator: ','
- }
- },
- show: {
- type: Boolean,
- default: false
- }
- },
- computed: {
- formattedAmmount: {
- get() {
- let formatted = this.$options.filters.currency(this.ammount, {...this.options})
- return this.ammount !== 0 ? 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.ammount = value
- this.computeDiscount()
- }
- }
- },
- watch: {
- show(value) {
- if (value) {
- this.$modal.show('product-discount')
- } else {
- this.ammount = 0
- this.discount = 0
- this.$modal.hide('product-discount')
- }
- }
- },
- methods: {
- beforeClose(e) {
- if (this.show) {
- e.stop()
- }
- },
- onAccept(e) {
- this.$emit('onAccept', this.ammount)
- },
- onCancel() {
- this.$emit('onCancel')
- },
- computeDiscount() {
- if (this.ammount !== 0) {
- this.discount = this.item.price - this.ammount
- } else {
- this.discount = 0
- }
- },
- isValid() {
- if (!this.item) {
- return false
- }
- if (this.ammount === 0) {
- return false
- }
- if (this.item.minimumPrice === 0 && this.item.maximumPrice === 0) {
- return true
- }
- if (this.ammount >= this.item.minimumPrice && this.ammount <= this.item.maximumPrice) {
- return true
- }
- return false
- }
- },
- data() {
- return {
- discount: 0,
- ammount: 0
- }
- }
- }
- </script>
- <style lang="sass">
- @import '../../assets/variables'
- .product-discount
- width: 600px
- height: 340px !important
- form
- width: 100%
- height: 290px
- padding: 15px
- .discount-item
- width: 100%
- height: 45px
- margin-bottom: 10px
- &:nth-child(1)
- .discount-input
- border: none
- &:nth-child(2), &:nth-child(3), &:nth-child(6)
- height: 35px
- margin-bottom: 5px
- .discount-label
- width: 30%
- height: 35px
- font-size: 10pt
- color: $app-dark-color
- .discount-input
- width: 70%
- height: 35px
- font-size: 18pt
- text-align: right
- border: none
- .discount-label
- width: 30%
- height: 45px
- font-size: 14pt
- .discount-input
- width: 70%
- height: 45px
- font-size: 28pt
- text-align: right
- border-radius: 0
- &.discount-input-invalid
- border-color: $app-error-color
- box-shadow: 1px 1px 2px $app-error-color, -1px -1px 2px $app-error-color
- &:focus
- outline: none
- .discount-options
- float: right
- .discount-button
- width: 160px
- height: 40px
- border: none
- box-shadow: none
- border-radius: 0
- margin-right: 5px
- background: $app-main-color
- color: $app-bg-color
- </style>
|