You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
6.7 KiB
245 lines
6.7 KiB
<template>
|
|
<v-container fluid>
|
|
<div class="Tile Shadowed Padd-0 WM-Margin-B-10">
|
|
<wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
|
|
</div>
|
|
<div class="Tile Shadowed">
|
|
<WM-PageTitle
|
|
titleFaClass="black--text"
|
|
color="black"
|
|
titleFa=" افزودن بخش جدید "
|
|
titleEn=" Add a New Section "
|
|
></WM-PageTitle>
|
|
<div v-for="(module, index) in allModules" :key="index">
|
|
<div :class="'ModuleItem '+module.color_class+'Border'">
|
|
<div :class="'itrator En '+module.color_class+'--text'">{{index+1}}</div>
|
|
<v-layout row wrap class="WM-Margin-0">
|
|
<v-flex lg4 class="Title">
|
|
<div class="Fa">{{ module.title_fa }}</div>
|
|
<div class="En">{{ module.title_en }}</div>
|
|
</v-flex>
|
|
<v-flex lg4 class="Price">
|
|
<div class="Old En" v-if="module.old_price">{{ Intl.NumberFormat().format(module.old_price) }}</div>
|
|
<div class="Main En">
|
|
{{ Intl.NumberFormat().format(module.price) }}
|
|
<span class="Unit">IRT</span>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex lg4 class="WM-Align-L" >
|
|
<v-tooltip top transition="slide-x-transition" color="black" v-if="module.has_module == 'no'" >
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
v-on="on"
|
|
small
|
|
@click.native="$_openModalStack({ name: 'rolePermission_trialConfirm', model: module})"
|
|
slot="activator"
|
|
fab
|
|
:color="module.color_class"
|
|
>
|
|
<v-icon dark>WMi-history</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>فعالسازی نسخه ی 15 روزه، آزمایشی</span>
|
|
</v-tooltip>
|
|
<!-- <v-tooltip top transition="slide-x-transition" color="black" v-if="module.has_module == 'no' || module.is_trial == 'yes'">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
@click.native="$_openModalStack({ name: 'rolePermission_paymentConfirm', model: module})"
|
|
slot="activator"
|
|
fab
|
|
:color="module.color_class"
|
|
dark
|
|
v-on="on"
|
|
>
|
|
<v-icon dark> WMi-plus </v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span> خرید </span>
|
|
</v-tooltip> -->
|
|
</v-flex>
|
|
<v-flex lg12 class="description RTL" v-if="module.description_title">
|
|
<v-expansion-panel popout style="margin-bottom:0px;">
|
|
<v-expansion-panel-content>
|
|
<template v-slot:header>
|
|
<v-flex lg12 class="text-lg-right Title">
|
|
<v-icon>WMi-align-right</v-icon>
|
|
{{ module.description_title }}
|
|
</v-flex>
|
|
</template>
|
|
<v-card>
|
|
<v-card-text style="padding:0px 40px 10px 40px">
|
|
<div class="WM-Tile">
|
|
<v-layout row wrap class="WM-Margin-0">
|
|
<v-flex lg12 class="text-lg-right zIndex99 Text" v-html="module.description"></v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- --------------------------------------------------------------------
|
|
Modals :: BEGIN
|
|
---------------------------------------------------------------------->
|
|
<template>
|
|
<div class="text-xs-center">
|
|
<!-- <wm-payment-confirmation></wm-payment-confirmation> -->
|
|
<wm-trial-confirmation></wm-trial-confirmation>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- --------------------------------------------------------------------
|
|
Modals :: END
|
|
---------------------------------------------------------------------->
|
|
</v-container>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
// import PaymentConfirmation from "@Home/components/Modules/PaymentConfirmation.vue";
|
|
import TrialConfirmation from "@Home/components/Modules/TrialConfirmation.vue";
|
|
import { mapGetters, mapActions, mapMutations } from "vuex";
|
|
export default {
|
|
components: {
|
|
// "wm-payment-confirmation": PaymentConfirmation,
|
|
"wm-trial-confirmation": TrialConfirmation
|
|
},
|
|
data() {
|
|
return {
|
|
breadcrumbItems: [
|
|
{
|
|
text: "",
|
|
disabled: false,
|
|
routeName: "Home",
|
|
icon: "home"
|
|
},
|
|
{
|
|
text: " افزودن بخش جدید ",
|
|
disabled: true
|
|
}
|
|
],
|
|
allModules: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters("rolePermission", ["getAllModules", "getModules"])
|
|
},
|
|
methods: {
|
|
...mapActions("rolePermission", ["loadAllModules", "loadModules"]),
|
|
async loadPage() {
|
|
await this.loadAllModules({ home_page: true });
|
|
await this.loadModules({ home_page: true });
|
|
for (const allModule of this.getAllModules) {
|
|
let module = this.getModules.find(x => x.id == allModule.id);
|
|
if (module) {
|
|
allModule['has_module'] = 'yes';
|
|
allModule['is_trial'] = module.is_trial;
|
|
} else {
|
|
allModule['has_module'] = 'no';
|
|
}
|
|
}
|
|
this.allModules = this.getAllModules;
|
|
}
|
|
},
|
|
beforeMount() {
|
|
this.loadPage();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ModuleItem {
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 1px solid #eeeeee;
|
|
margin-bottom: 10px;
|
|
}
|
|
.ModuleItem.redBorder {
|
|
border-right: 2px solid #ee3552;
|
|
}
|
|
.ModuleItem.orangeBorder {
|
|
border-right: 2px solid #ff6b57;
|
|
}
|
|
.ModuleItem.cyanBorder {
|
|
border-right: 2px solid #32c5d2;
|
|
}
|
|
.ModuleItem.purpleBorder {
|
|
border-right: 2px solid #ac3773;
|
|
}
|
|
.ModuleItem .itrator {
|
|
position: absolute;
|
|
font-size: 60px;
|
|
right: -5px;
|
|
bottom: -25px;
|
|
opacity: 0.1;
|
|
font-family: "Montserrat-ExtraBold";
|
|
z-index: 100;
|
|
}
|
|
.ModuleItem .Title {
|
|
text-align: right;
|
|
}
|
|
.ModuleItem .Fa {
|
|
font-size: 22px;
|
|
}
|
|
.ModuleItem .En {
|
|
font-size: 12px;
|
|
letter-spacing: 5px;
|
|
text-transform: uppercase;
|
|
color: #9a9a9a;
|
|
}
|
|
.ModuleItem .Price {
|
|
text-align: left;
|
|
padding-top: 10px;
|
|
}
|
|
.ModuleItem .Price .Main {
|
|
font-size: 26px;
|
|
// font-family: "Montserrat-ExtraBold";
|
|
}
|
|
.ModuleItem .Price .Old {
|
|
font-size: 12px;
|
|
color: #ee3552;
|
|
text-decoration: line-through;
|
|
margin-bottom: -10px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.v-expansion-panel--inset .v-expansion-panel__container--active,
|
|
.v-expansion-panel--popout .v-expansion-panel__container--active {
|
|
border: 1px solid #eeeeee !important;
|
|
border-right: 2px solid #000 !important;
|
|
box-shadow: none;
|
|
}
|
|
.v-expansion-panel__container {
|
|
transition: 0.2s;
|
|
border: 1px solid transparent !important;
|
|
border-right: 2px solid transparent !important;
|
|
}
|
|
.v-expansion-panel__container:hover {
|
|
border: 1px solid #eeeeee !important;
|
|
border-right: 2px solid #000 !important;
|
|
}
|
|
|
|
.ModuleItem .description .Title {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
.ModuleItem .description .v-icon {
|
|
margin-left: 5px;
|
|
line-height: 27px;
|
|
}
|
|
.ModuleItem .description .Text {
|
|
font-size: 14px;
|
|
color: #6d6d6d;
|
|
}
|
|
|
|
.v-btn--round .v-btn__content .v-icon {
|
|
color: #fff;
|
|
}
|
|
</style>
|