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">{{ getCurrentModule.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="$_closeModal('role_permission/trial_confirmation')">
                    <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 {
    methods: {
        async register() {
            let response = await this.actviveTrial(this.getCurrentModule.id);
            if (response.status == 200) {
                this.$_closeModal('role_permission/trial_confirmation')
            }
        },
        ...mapActions("role_permission", ["actviveTrial"])
    },
    computed: {
        ...mapGetters("modal", ["isModal"]),
        ...mapGetters("role_permission", ["getCurrentModule"]),
        modal: {
            get() {
                return this.isModal("role_permission/trial_confirmation");
            },
            set(value) {
                if (value) {
                    this.$_openModal("role_permission/trial_confirmation");
                } else {
                    this.$_closeModal("role_permission/trial_confirmation");
                }
            }
        },
        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>