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>

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>