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

<template>
    <v-dialog v-model="modal"  width="50%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class="grey lighten-3" primary-title>
                <WM-PartTitle
                    class="WM-Margin-T-20"
                    TitleFa=" شروع مدت آزمایشی "
                    TitleEn=" Start Trail "
                    color="black"
                ></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">{{ modal && getModal(this.$options.name).model ? getModal(this.$options.name).model.title_fa : '' }}</td>
                            <td class="Price En">{{  expiredDate | moment("jYYYY-jMM-jDD") }} 24:00</td>
                        </tr>
                    </tbody>
                </table>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" depressed dark @click="$_closeModalStack();">
                    <v-icon dark right>fas fa-times</v-icon>انصراف
                </v-btn>
                <v-btn color="black" depressed dark @click="register">
                    <v-icon dark right>fas fa-check</v-icon>فعالسازی
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
    name: "modal_rolePermission_trialConfirm",
    methods: {
        async register() {
            if (this.modal && this.getModal(this.$options.name).model) {
                let response = await this.actviveTrial(this.getModal(this.$options.name).model.id);
                if (response.status == 200) {
                    this.$_closeModalStack();
                }
            }
        },
        ...mapActions("rolePermission", ["actviveTrial"])
    },
    computed: {
        ...mapGetters("modal", ["isModalStack", "getModal"]),
        modal: {
            get() {
                return this.isModalStack(this.$options.name);
            },
            set(value) {
                if (!value) {
                    this.$_closeModalStack();
                }
            }
        },
        expiredDate() {
            var today = new Date();
            return new Date(today.setDate(today.getDate() + 15));
        }
    },
}
</script>
<style lang="scss" scoped>
.table .Itrator {
    font-family: "Montserrat-ExtraBold";
}
.table .Title {
    text-align: right;
}
.table .Price {
    font-size: 18px;
}
</style>