@ -4,57 +4,68 @@
< wm -breadcrumbs LinkClass = "WM-Link-Cyan" :items ="breadcrumbItems" > < / w m - b r e a d c r u m b s >
< wm -breadcrumbs LinkClass = "WM-Link-Cyan" :items ="breadcrumbItems" > < / w m - b r e a d c r u m b s >
< / div >
< / div >
< div class = "Tile Shadowed" >
< div class = "Tile Shadowed" >
< WM -PageTitle titleFaClass = "black--text" color = "black" titleFa = " افزودن بخش جدید " titleEn = " Add a New Section " > < / W M - P a g e T i t l e >
< WM -PageTitle
< div v-for ="(module, index) in modules" :key ="index" >
titleFaClass = "black--text"
< div : class = "'ModuleItem '+module.color+'Border'" >
color = "black"
< div : class = "'itrator En '+module.color+'--text'" > { { index + 1 } } < / div >
titleFa = " افزودن بخش جدید "
titleEn = " Add a New Section "
> < / W M - P a g e T i t l e >
< 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 -layout row wrap class = "WM-Margin-0" >
< v -flex lg4 class = "Title" >
< v -flex lg4 class = "Title" >
< div class = "FA" > { { module . nameFa } } < / div >
< div class = "FA" > { { module . title _fa } } < / div >
< div class = "EN" > { { module . nameEn } } < / div >
< div class = "EN" > { { module . title _en } } < / div >
< / v - f l e x >
< / v - f l e x >
< v -flex lg4 class = "Price" >
< v -flex lg4 class = "Price" >
< div class = "Old En" v-if ="module.oldPrice" > {{ module.oldPrice }} < / div >
< div class = "Old En" v-if ="module.old_price" > {{ Intl.NumberFormat ( ) .format ( module.old_price ) }} < / div >
< div class = "Main En" > { { module . price } } < span class = "Unit" > IRT < / span > < / div >
< div class = "Main En" >
{ { Intl . NumberFormat ( ) . format ( module . price ) } }
< span class = "Unit" > IRT < / span >
< / div >
< / v - f l e x >
< / v - f l e x >
< v -flex lg4 class = "WM-Align-L" >
< v -flex lg4 class = "WM-Align-L" >
< v -tooltip top color = "black" >
< v -tooltip top color = "black" >
< v -btn
< v -btn
small
small
outline
outline
@ click . native = "$store.state.TrialConfirmation = true "
@ click . native = "$_openModal('role_permission/trial_confirmation'), SET_CURRENT_MODULE(module) "
slot = "activator"
slot = "activator"
fab
fab
: color = "module.color "
: color = "module.color _class "
>
>
< v -icon dark > fas fa - history < / v - i c o n >
< v -icon dark > fas fa - history < / v - i c o n >
< / v - b t n >
< / v - b t n >
< span > فعالسازی نسخه ی 15 روزه ، آزمایشی < / span >
< span > فعالسازی نسخه ی 15 روزه ، آزمایشی < / span >
< / v - t o o l t i p >
< / v - t o o l t i p >
< v -tooltip top color = "black" >
<!-- < v -tooltip top color = "black" >
< v -btn
< v -btn
@ click . native = "$ store.state.PaymentConfirmation = true "
@ click . native = "$ _openModal('role_permission/payment_confirmation'), SET_CURRENT_ALL_MODULE(module) "
slot = "activator"
slot = "activator"
fab
fab
: color = "module.color "
: color = "module.color _class "
dark
dark
>
>
< v -icon dark > fas fa - plus < / v - i c o n >
< v -icon dark > fas fa - plus < / v - i c o n >
< / v - b t n >
< / v - b t n >
< span > خرید < / span >
< span > خرید < / span >
< / v - t o o l t i p >
< / v - t o o l t i p > - - >
< / v - f l e x >
< / v - f l e x >
< v -flex lg12 class = "description RTL" v-if ="module.description T itle">
< v -flex lg12 class = "description RTL" v-if ="module.description _t itle">
< v -expansion -panel popout style = "margin-bottom:0px;" >
< v -expansion -panel popout style = "margin-bottom:0px;" >
< v -expansion -panel -content >
< v -expansion -panel -content >
< template v -slot : header >
< template v -slot : header >
< v -flex lg12 class = "text-lg-right Title" > < v -icon > fas fa - align - right < / v - i c o n > { { m o d u l e . d e s c r i p t i o n T i t l e } } < / v - f l e x >
< v -flex lg12 class = "text-lg-right Title" >
< v -icon > fas fa - align - right < / v - i c o n >
{ { module . description _title } }
< / v - f l e x >
< / template >
< / template >
< v -card >
< v -card >
< v -card -text style = "padding:0px 40px 10px 40px" >
< v -card -text style = "padding:0px 40px 10px 40px" >
< div class = "WM-Tile" >
< div class = "WM-Tile" >
< v -layout row wrap class = "WM-Margin-0" >
< v -layout row wrap class = "WM-Margin-0" >
< v -flex lg12 class = "text-lg-right zIndex99 Text" v-html ="module.description Text "> < / v-flex >
< v -flex lg12 class = "text-lg-right zIndex99 Text" v-html ="module.description "> < / v-flex >
< / v - l a y o u t >
< / v - l a y o u t >
< / div >
< / div >
< / v - c a r d - t e x t >
< / v - c a r d - t e x t >
@ -69,34 +80,33 @@
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Modals : : BEGIN
Modals : : BEGIN
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< template >
< template >
< div class = "text-xs-center" >
< div class = "text-xs-center" >
< wm -payment -confirmation > < / w m - p a y m e n t - c o n f i r m a t i o n >
<!-- < wm -payment -confirmation > < / w m - p a y m e n t - c o n f i r m a t i o n > - - >
< wm -trial -confirmation > < / w m - t r i a l - c o n f i r m a t i o n >
< wm -trial -confirmation > < / w m - t r i a l - c o n f i r m a t i o n >
< / div >
< / div >
< / template >
< / template >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Modals : : END
Modals : : END
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< / v - c o n t a i n e r >
< / v - c o n t a i n e r >
< / template >
< / template >
< script >
< script >
import PaymentConfirmation from "@Common/components/Misc/PaymentConfirmation.vue" ;
/ / i m p o r t P a y m e n t C o n f i r m a t i o n f r o m " @ C o m m o n / c o m p o n e n t s / M i s c / P a y m e n t C o n f i r m a t i o n . v u e " ;
import TrialConfirmation from "@Common/components/Misc/TrialConfirmation.vue" ;
import TrialConfirmation from "@Common/components/Misc/TrialConfirmation.vue" ;
import { mapGetters , mapActions , mapMutations } from "vuex" ;
export default {
export default {
components : {
components : {
'wm-payment-confirmation' : PaymentConfirmation ,
/ / " w m - p a y m e n t - c o n f i r m a t i o n " : P a y m e n t C o n f i r m a t i o n ,
'wm-trial-confirmation' : TrialConfirmation ,
"wm-trial-confirmation" : TrialConfirmation
} ,
} ,
props : {
props : {
color : { default : 'grey darken-4' } ,
color : { default : "grey darken-4" }
} ,
} ,
data ( ) {
data ( ) {
return {
return {
@ -109,44 +119,79 @@
} ,
} ,
{
{
text : " افزودن بخش جدید " ,
text : " افزودن بخش جدید " ,
disabled : true ,
disabled : true
}
}
] ,
] ,
modules : [
modules : [
{ nameFa : ' باشگاه مشتریان ' , nameEn : ' Members Club ' , price : '1,500,000' , id : 1 , color : "red" ,
{
descriptionTitle : ' باشگاه مشتریان در واقع بستری است برای اینکه بتوانید مشتریان خود را ثبت، آنها را مدیریت و با آنها ارتباط بر قرار کنید. ' ,
nameFa : " باشگاه مشتریان " ,
descriptionText : ' امکانات مشتریان به طور خلاصه به شرح زیر می باشد: <div class="WM-Margin-R-10"> 1. ثبت و ویرایش اعضای باشگاه <br> 2. امکان ثبت تاریخ تولد و ازدواج</div> '
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 : " مدیریت ارتباط با مشتری " ,
{ nameFa : ' سیستم رزرو وقت ' , nameEn : ' Reservations System ' , price : '1,000,000' , id : 4 , color : "purple" } ,
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 >
< / script >
< style scoped lang = "scss" >
< style scoped lang = "scss" >
. ModuleItem {
. ModuleItem {
position : relative ;
position : relative ;
padding : 10 px ;
padding : 10 px ;
border : 1 px solid # eeeeee ;
border : 1 px solid # eeeeee ;
margin - bottom : 10 px ;
margin - bottom : 10 px ;
}
}
. ModuleItem . redBorder {
. ModuleItem . redBorder {
border - right : 2 px solid # ee3552 ;
border - right : 2 px solid # ee3552 ;
}
}
. ModuleItem . orangeBorder {
. ModuleItem . orangeBorder {
border - right : 2 px solid # ff6b57 ;
border - right : 2 px solid # ff6b57 ;
}
}
. ModuleItem . cyanBorder {
. ModuleItem . cyanBorder {
border - right : 2 px solid # 32 c5d2 ;
border - right : 2 px solid # 32 c5d2 ;
}
}
. ModuleItem . purpleBorder {
. ModuleItem . purpleBorder {
border - right : 2 px solid # ac3773 ;
border - right : 2 px solid # ac3773 ;
}
}
. ModuleItem . itrator {
. ModuleItem . itrator {
position : absolute ;
position : absolute ;
font - size : 60 px ;
font - size : 60 px ;
right : - 5 px ;
right : - 5 px ;
@ -154,62 +199,61 @@
opacity : 0.1 ;
opacity : 0.1 ;
font - family : "Montserrat-ExtraBold" ;
font - family : "Montserrat-ExtraBold" ;
z - index : 100 ;
z - index : 100 ;
}
}
. ModuleItem . Title {
. ModuleItem . Title {
text - align : right ;
text - align : right ;
}
}
. ModuleItem . FA {
. ModuleItem . FA {
font - size : 26 px ;
font - size : 26 px ;
}
}
. ModuleItem . EN {
. ModuleItem . EN {
font - size : 12 px ;
font - size : 12 px ;
letter - spacing : 5 px ;
letter - spacing : 5 px ;
text - transform : uppercase ;
text - transform : uppercase ;
color : # 9 a9a9a
color : # 9 a9a9a ;
}
}
. ModuleItem . Price {
. ModuleItem . Price {
text - align : left ;
text - align : left ;
padding - top : 10 px ;
padding - top : 10 px ;
}
}
. ModuleItem . Price . Main {
. ModuleItem . Price . Main {
font - size : 26 px ;
font - size : 26 px ;
/ / f o n t - f a m i l y : " M o n t s e r r a t - E x t r a B o l d " ;
/ / f o n t - f a m i l y : " M o n t s e r r a t - E x t r a B o l d " ;
}
}
. ModuleItem . Price . Old {
. ModuleItem . Price . Old {
font - size : 12 px ;
font - size : 12 px ;
color : # ee3552 ;
color : # ee3552 ;
text - decoration : line - through ;
text - decoration : line - through ;
margin - bottom : - 10 px ;
margin - bottom : - 10 px ;
margin - left : 0 px ;
margin - left : 0 px ;
}
}
. v - expansion - panel -- inset . v - expansion - panel _ _container -- active ,
. v - expansion - panel -- inset . v - expansion - panel _ _container -- active ,
. v - expansion - panel -- popout . v - expansion - panel _ _container -- active {
. v - expansion - panel -- popout . v - expansion - panel _ _container -- active {
border : 1 px solid # eeeeee ! important ;
border : 1 px solid # eeeeee ! important ;
border - right : 2 px solid # 000 ! important ;
border - right : 2 px solid # 000 ! important ;
box - shadow : none ;
box - shadow : none ;
}
}
. v - expansion - panel _ _container {
. v - expansion - panel _ _container {
transition : 0.2 s ;
transition : 0.2 s ;
border : 1 px solid transparent ! important ;
border : 1 px solid transparent ! important ;
border - right : 2 px solid transparent ! important ;
border - right : 2 px solid transparent ! important ;
}
}
. v - expansion - panel _ _container : hover {
. v - expansion - panel _ _container : hover {
border : 1 px solid # eeeeee ! important ;
border : 1 px solid # eeeeee ! important ;
border - right : 2 px solid # 000 ! important ;
border - right : 2 px solid # 000 ! important ;
}
}
. ModuleItem . description . Title {
. ModuleItem . description . Title {
font - size : 16 px ;
font - size : 16 px ;
color : # 000 ;
color : # 000 ;
}
}
. ModuleItem . description . v - icon {
. ModuleItem . description . v - icon {
margin - left : 5 px ;
margin - left : 5 px ;
line - height : 27 px ;
line - height : 27 px ;
}
}
. ModuleItem . description . Text {
. ModuleItem . description . Text {
font - size : 14 px ;
font - size : 14 px ;
color : # 6 d6d6d ;
color : # 6 d6d6d ;
}
}
< / style >
< / style >