willaengine/resources/js/Home/views/AddModule.vue

<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 getAllModules" :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 color="black">
								<v-btn
									small
									outline
									@click.native="$_openModal('role_permission/trial_confirmation'), SET_CURRENT_MODULE(module)"
									slot="activator"
									fab
									:color="module.color_class"
								>
									<v-icon dark>fas fa-history</v-icon>
								</v-btn>
								<span>فعالسازی نسخه ی 15 روزه، آزمایشی</span>
							</v-tooltip>
							<!-- <v-tooltip top color="black">
                                <v-btn
                                    @click.native="$_openModal('role_permission/payment_confirmation'), SET_CURRENT_ALL_MODULE(module)"
                                    slot="activator"
                                    fab
                                    :color="module.color_class"
                                    dark
                                >
                                    <v-icon dark> fas fa-plus </v-icon>
                                </v-btn>
                                <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>fas fa-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 "@Common/components/Misc/PaymentConfirmation.vue";
import TrialConfirmation from "@Common/components/Misc/TrialConfirmation.vue";
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
	components: {
		// "wm-payment-confirmation": PaymentConfirmation,
		"wm-trial-confirmation": TrialConfirmation
	},
	props: {
		color: { default: "grey darken-4" }
	},
	data() {
		return {
			breadcrumbItems: [
				{
					text: "",
					disabled: false,
					routeName: "Home",
					icon: "home"
				},
				{
					text: " افزودن بخش جدید ",
					disabled: true
				}
			],
			modules: [
				{
					nameFa: " باشگاه مشتریان ",
					nameEn: " Members Club ",
					price: "1,500,000",
					id: 1,
					color: "red",
					descriptionTitle:
						" باشگاه مشتریان در واقع بستری است برای اینکه بتوانید مشتریان خود را ثبت، آنها را مدیریت و با آنها ارتباط بر قرار کنید. ",
					descriptionText:
						' امکانات مشتریان به طور خلاصه به شرح زیر می باشد: <div class="WM-Margin-R-10"> 1. ثبت و ویرایش اعضای باشگاه  <br> 2. امکان ثبت تاریخ تولد و ازدواج</div>   '
				},
				{
					nameFa: " مدیریت ارتباط با مشتری ",
					nameEn: " Customers Relationship Management ",
					price: "3,500,000",
					oldPrice: "3,000,000",
					id: 2,
					color: "orange"
				},
				{
					nameFa: " مدیریت فروشگاه ",
					nameEn: " Store Management ",
					price: "2,500,000",
					id: 3,
					color: "cyan"
				},
				{
					nameFa: " سیستم رزرو وقت ",
					nameEn: " Reservations System ",
					price: "1,000,000",
					id: 4,
					color: "purple"
				}
			]
		};
	},
	computed: {
        ...mapGetters("role_permission", ["getAllModules"])
    },
    methods: {
        ...mapActions("role_permission", ["loadAllModules"]),
        ...mapMutations("role_permission", ["SET_CURRENT_MODULE"]),
    },
    created() {
        this.loadAllModules({ home_page: true });
    }
};
</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: 26px;
}
.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;
}
</style>