willaengine/resources/js/Home/components/Modules/PaymentConfirmation.vue

<template>
    <v-dialog
        v-model="modal" 
        width="40%"
        transition="slide-x-transition"
    >
        <v-card class="RTL">
            <v-card-title class="cyan lighten-5" primary-title>
                <WM-PartTitle
                    class="WM-Margin-T-20"
                    TitleFa=" تایید پرداخت "
                    TitleEn=" Payment Confirmation "
                    color="cyan"
                ></WM-PartTitle>
            </v-card-title>
            <v-card-text>
                <div
                    class="WM-Align-R WM-Margin-T-10"
                >شما در حال انتقال به درگاه پرداخت برای خرید آیتم زیر هستید...</div>
                <table class="table table-striped RTL WM-Align-C WM-Margin-T-20">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col" class="Title">نام آیتم</th>
                            <th scope="col">قیمت - تومان</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="LTR">
                            <td class="Itrator">1</td>
                            <td class="Title">سیستم مدیریت ارتباط با مشتری</td>
                            <td class="Price En">3.500.000</td>
                        </tr>
                    </tbody>
                </table>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" depressed dark>
                    <v-icon dark right>fas fa-times</v-icon>انصراف
                </v-btn>
                <v-btn
                    color="cyan"
                    depressed
                    dark
                    @click="$store.state.PaymentConfirmation = false"
                >
                    <v-icon dark right>fas fa-credit-card</v-icon>پرداخت
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
    computed: {
        ...mapGetters("modal", ["isModal"]),
        modal: {
            get() {
                return this.isModal("role_permission/payment_confirmation");
            },
            set(value) {
                if (value) {
                    this.$_openModal("role_permission/payment_confirmation");
                } else {
                    this.$_closeModal("role_permission/payment_confirmation");
                }
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.table .Itrator {
    font-family: "Montserrat-ExtraBold";
}
.table .Title {
    text-align: right;
}
.table .Price {
    font-size: 18px;
}
</style>