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

<template>
    <v-dialog v-model="$store.state.TrialConfirmation"  max-width="900" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class="grey lighten-3" primary-title>
                <WM-PartTitle
                    TitleFa=" شروع مدت آزمایشی "
                    TitleEn=" Start Trial "
                    color="black"
                ></WM-PartTitle>
            </v-card-title>
            <v-card-text>
                <v-row :class="`module-item section-bordered theme-${module.color} ma-0 mb-2 mt-2`">
                    <v-col xl="9" class="flex-justified-right">
                        <v-icon class="ml-2 text--32" :color="module.color">WMi-{{ module.icon }}</v-icon>
                        <name-block class="ltr-3 en-mt-3" :name_fa="module.title_fa" :name_en="module.title_en" />
                    </v-col>
                    <v-col xl="3" class="flex-justified-left">
                        <price-block :price="module.price" :original_price="((module.old_price) ? module.old_price : '')" label="تومان - خرید یک باره" />
                    </v-col>
                </v-row>
                <v-row :class="`ma-0 mb-2 mt-2`">
                    <v-col xl="6" class="flex-justified-center">
                        <info-block label="زمان شروع" value="امروز، 27-05-1399" icon="clock"/>
                    </v-col>
                    <v-col xl="6" class="flex-justified-center">
                        <number-block class="xxl label-left theme-cyan" label="روز  باقی <br> مــــــــــانده" number="30"/>
                    </v-col>
                </v-row>


            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions class="flex-justified-space-between">
                <link-button theme="theme-red" prepend_icon="cancel" title_fa="فعلا نه، بخواهم دوباره خبر میدم" title_en="Changed my mind" />
                <slide-button theme="theme-black" append_icon="emo-laugh" title_fa="آغاز زمان آزمایشی" title_en="Start the Trial" />
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
    name: "modal_rolePermission_trialConfirm",
    data() {
        return {
            'module': {
                title_fa: 'مدیریت ارتباط با مشتری',
                title_en: 'Customer Relationship Management - CRM',
                color: 'cyan',
                icon: 'users',
                price: 3500000,
                monthly_price: 120000,
                remain_days: '251',
            },
        }
    },
    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.$_closeModal();
                }
            }
        },
        ...mapActions("rolePermission", ["actviveTrial"])
    },
    computed: {
        ...mapGetters("modal", ["isModal", "getModal"]),
        modal: {
            get() {
                return this.isModal(this.$options.name);
            },
            set(value) {
                if (!value) {
                    this.$_closeModal();
                }
            }
        },
        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>