Skip to content

Instantly share code, notes, and snippets.

@elinardo10

elinardo10/PaymentModal.vue

Last active November 20, 2021 17:59
Show Gist options
  • Save elinardo10/58dd45093c0f88f4953651500ea15fe8 to your computer and use it in GitHub Desktop.
Save elinardo10/58dd45093c0f88f4953651500ea15fe8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
indexPayment.vue
<template>
<div class="col-sm-12 col-md-2">
<label class="col-form-label col-form-label-sm">&nbsp; </label>
<button
id="btnSolicitar"
class="btn btn-primary btn-sm btn-block"
type="button"
data-toggle="modal"
data-target="#modalPagamentoChancela"
@click.prevent="toggleModal()"
>
<span class="glyphicon " />Solicitar
</button>
<ClientOnly>
<PaymentModal
ref="mPagamento"
:show-modal="showModalNow"
@close="closeModal"
/>
</ClientOnly>
</div>
</template>
<script>
import PaymentModal from '@/components/Payment/PaymentModal';
export default {
components: {
PaymentModal,
},
data() {
return {
showModalNow: false,
productToModal: {},
};
},
methods: {
// matendo sua logica so remover a minha do vue
openModalPayment() {
// this.openModal = true;
$('#modalPagamentoChancela').modal('toggle');
},
// tentatica de abrir modal no estilo vue... mas foi como consegui testar bem a aplicação.
toggleModal() {
this.showModalNow = !this.showModalNow;
},
closeModal() {
this.showModalNow = false;
},
},
};
</script>
Raw
PaymentModal.vue
<template>
<div
id="exampleModal"
ref="modal"
class="modal fade"
:class="{ show: active, 'd-block': active }"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-hidden="true"
data-bs-target="#staticBackdrop"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Pagamento de chancela
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="$emit('close')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="container-fluid">
<div class="modal-body">
<ValidationObserver
ref="storePayment"
tag="form"
@submit.stop.prevent="store()"
>
<div class="row form-group mt-2">
<div class="form-group col-md-4">
<label for="valorUnitario" class="col-form-label col-form-label-sm">Valor unitário</label>
<input id="valorUnitario" :placeholder="currency(vlChancela)" type="text" class="form-control form-control-sm" disabled>
</div>
<div class="form-group col-md-2">
<label class="col-form-label col-form-label-sm" for="quantidade">Quantidade</label>
<div class="input-group input-group-sm ">
<span class="input-group-prepend ">
<button
type="button"
class="btn btn-sm btn-outline-secondary btn-number"
:disabled="qty === 1"
data-type="minus"
@click.stop.prevent="removeQty"
>
-
</button>
</span>
<input
v-model="qty"
style="text-align: center;"
type="number"
class="form-control input-number"
min="1"
>
<span class="input-group-append">
<button
type="button"
class="btn btn-sm btn-outline-secondary btn-number"
data-type="plus"
@click.stop.prevent="addQty"
>
+
</button>
</span>
</div>
</div>
<div class="form-group col-md-4">
<label for="total" class="col-form-label col-form-label-sm">Total</label>
<input id="total" type="text" class="form-control form-control-sm" :placeholder="currency(total)" disabled>
</div>
</div>
<div class="row form-group">
<div class="col-sm-12">
<label
class="col-form-label col-form-label-sm"
for="formaPgto"
>
Forma de pagamento
</label>
</div>
<ValidationProvider
v-slot="{ errors }"
name="Forma de pagamento"
rules="required"
>
<input
v-model="paymentSelected.id"
type="hidden"
>
<div class="text-danger" v-html="errors[0]" />
</ValidationProvider>
<div
v-for="payment in paymentTypes"
:key="payment.value"
:class="payment.value === 'credit_card' ? 'col-sm-3' : 'col-sm-2'"
>
<ValidationProvider
v-slot="{ errors }"
rules="required"
>
<div class="form-check form-check-inline">
<input
v-model="paymentSelected"
:class="errors[0] ? 'is-invalid' : ''"
required
class="form-check-input"
type="radio"
name="inlineRadioOptions"
:value="payment"
>
<label
class="form-check-label"
for="validationCustom05"
>
{{ payment.text }}
</label>
</div>
</ValidationProvider>
</div>
</div>
<div
class="row form-group mt-4"
>
<div
v-if="paymentSelected.value === 'credit_card'"
class="col-md-3"
>
<ValidationProvider
v-slot="{ errors }"
rules="required"
>
<label
class="col-form-label col-form-label-sm"
for="parcelas"
>
Parcela
</label>
<input
v-model="parcelaSelected"
type="hidden"
>
<select
id="parcelas"
v-model="portionSelected"
:class="errors[0] ? 'is-invalid' : '' || parcelaSelected ? 'is-valid' : 'is-invalid'"
class="form-control form-control-sm"
>
<option :value="{}" disabled selected>
Selecione...
</option>
<option
v-for="portion in installments"
:key="portion.value"
:value="portion"
>
{{ portion.text }}
</option>
</select>
</ValidationProvider>
</div>
<div class="col-md-3">
<label
class="col-form-label col-form-label-sm"
for="vencimento"
>
Vencimento
</label>
<input
id="vencimento"
disabled
type="text"
class="form-control form-control-sm"
:placeholder="exibeDate"
>
<input
:placeholder="setDateDue(currentDate)"
type="hidden"
>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" aria-label="Close">
Cancelar
</button>
<button type="button" class="btn btn-primary" @click.prevent="store">
<i class="fa fa-check" aria-hidden="true" /> Confirmar pagamento
</button>
</div>
</ValidationObserver>
</div>
</div>
{{ exibeDate }}
data atualizada para salvar: {{ dateDue }}
</div>
</div>
</div>
</template>
<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import moment from 'moment';
export default {
name: 'PaymentModal',
components: {
ValidationObserver,
ValidationProvider,
},
props: {
showModal: {
type: Boolean,
default: () => false,
},
},
data() {
return {
active: this.showModal,
vlChancela: 100,
addDaysToDateDue: 5,
qty: 1,
currentDate: '2021-11-04',
dateDue: '',
portionSelected: {},
paymentSelected: {},
paymentTypes: [
{ id: 1, text: 'Boleto', value: 'boleto' },
{ id: 2, text: 'Cartão de crédito', value: 'credit_card' },
{ id: 3, text: 'Pix', value: 'pix' },
],
limit_installments: 8,
};
},
computed: {
total() {
return this.vlChancela * this.qty;
},
installments() {
const instalments = [];
for (let i = 1; i <= this.limit_installments; i++) {
instalments.push(
{ text: `${i}x de ${Number((this.total / i)).toFixed(2)}`, value: i, vl_parcela: Number((this.total / i)) },
);
}
return instalments;
},
addMonthsRealTime() {
return this.setMonths();
},
exibeDate() {
let date = this.currentDate;
date = moment(date, 'YYYY-MM-DD').add(this.addDaysToDateDue, 'days').format('DD/MM/YYYY');
return date;
},
parcelaSelected() {
return this.paymentSelected.value === 'boleto' || this.paymentSelected.value === 'pix'
? 1
: this.portionSelected.value;
},
parcelaSelectedValue() {
return this.paymentSelected.value !== 'credit_card' ? this.vlChancela : this.portionSelected.vl_parcela;
},
},
watch: {
showModal: {
handler(newVal) {
this.active = newVal;
const body = document.querySelector('body');
this.showModal ? body.classList.add('modal-open') : body.classList.remove('modal-open');
},
immediate: true,
deep: true,
},
},
methods: {
addQty() {
this.qty++;
},
removeQty() {
this.qty--;
},
currency(amount) {
if (amount) {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(amount);
}
},
async store() {
const validator = await this.$refs.storePayment.validate();
if (!validator) {
return false;
}
// esse payload vc tbm pode configurar na pagina q chama o modal usando ref q ele pega esses
// dados todos pra vc. tipo. this.$refs.mPagamento (ref definido no pai)
// ai so vc ir setando assim: {preco: this.$refs.mPagamento.amount. ele pega o dado q aqui q ta na modal q é o filho.
const payload = {
preco: this.vlChancela,
quantidade: this.qty,
vencimento: this.dateDue,
payment_id_selected: this.paymentSelected.id, // pagamendo ID
valor_selecionado_parcela: this.parcelaSelectedValue, // VALOR DA PARCELA SELECIONADA
parcela_selecionada: this.parcelaSelected, // PARCELA SELECIONADA
total: this.total,
};
console.log(payload);
},
setDateDue(date) {
if (date) {
this.dateDue = moment(date, 'YYYY-MM-DD').add(this.addDaysToDateDue, 'days').add(this.addMonthsRealTime, 'M').format('DD/MM/YYYY');
return this.dateDue;
}
},
setMonths() {
let addMonths;
if (this.parcelaSelected === 2) {
addMonths = 1;
}
if (this.parcelaSelected === 3) {
addMonths = 2;
}
if (this.parcelaSelected === 4) {
addMonths = 3;
}
if (this.parcelaSelected === 5) {
addMonths = 4;
}
if (this.parcelaSelected === 6) {
addMonths = 5;
}
if (this.parcelaSelected === 7) {
addMonths = 6;
}
if (this.parcelaSelected === 8) {
addMonths = 7;
}
if (this.parcelaSelected === 9) {
addMonths = 8;
}
if (this.parcelaSelected === 10) {
addMonths = 9;
}
if (this.parcelaSelected === 11) {
addMonths = 10;
}
if (this.parcelaSelected === 12) {
addMonths = 11;
}
return addMonths;
},
resetFields() {
this.addDaysToDateDue = null;
this.vlChancela = null;
this.dateDue = null;
this.portionSelected = null;
},
},
};
</script>
<style scoped>
.form-control.is-valid,
.form-control.is-invalid {
background-image: none;
padding-right: inherit;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment