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.
willaengine/resources/js/Home/components/Modules/PaymentConfirmation.vue

86 lines
3.7 KiB

<template>
<v-dialog v-model="$store.state.PaymentConfirmation" width="40%" transition="slide-x-transition">
<v-card class="RTL">
<v-card-title class="cyan lighten-5" primary-title>
<WM-PartTitle
TitleFa=" تایید پرداخت "
TitleEn=" Payment Confirmation "
color="cyan"
></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="12" 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-row>
<v-row :class="`ma-0 mb-2 mt-2`">
<v-col xl="12" class="pb-0 pr-0 pl-0">
<we-radio-group v-model="radioValue" class="sm-pad" :items="shoppingTypes" name="shopping_type" @changeState="changeModuleState"/>
</v-col>
<v-col xl="7" :class="`flex-justified-center ${(getModuleState.shopping_type == 'licence') ? '' : 'has-blur'}`">
<price-block class="lg" :price="module.price" :original_price="((module.old_price) ? module.old_price : '')" label="تومان - خرید یک باره" />
</v-col>
<v-col xl="5" :class="`flex-justified-center ${(getModuleState.shopping_type == 'subscription') ? '' : 'has-blur'}`">
<price-block :price="module.monthly_price" :original_price="((module.old_price) ? module.old_price : '')" label="تومان - ماهانه" />
</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-cyan" append_icon="emo-laugh" title_fa="خریــــد مــــــــاژول" title_en="Shall we Begin" />
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
name: "modal_rolePermission_paymentConfirm",
data() {
return {
radioValue: 1,
module: {
title_fa: 'مدیریت ارتباط با مشتری',
title_en: 'Customer Relationship Management - CRM',
color: 'cyan',
icon: 'users',
price: 3500000,
monthly_price: 120000,
remain_days: '251',
},
shoppingTypes: [
{ id:1, size:'7', theme:'right text-right theme-cyan', customIconClass:'ml-2', icon:'diamond', title_fa:' خرید لایسنس ', title_en:'Licence', value: 'licence'},
{ id:2, size:'5', theme:'left text-right theme-cyan', icon:'clock', title_fa:' خرید اشتراک ', title_en:'Subscription', value: 'subscription' },
],
}
},
computed: {
...mapGetters([
'getModuleState'
]),
},
methods: {
...mapMutations([
'changeModuleState'
]),
},
}
</script>
<style lang="scss" scoped>
.table .Itrator {
font-family: "Montserrat-ExtraBold";
}
.table .Title {
text-align: right;
}
.table .Price {
font-size: 18px;
}
</style>