97 lines
2.9 KiB
Vue
97 lines
2.9 KiB
Vue
<template>
|
|
<slide-template
|
|
title="price__title"
|
|
subtitle="price__subtitle"
|
|
>
|
|
<custom-tabs
|
|
v-bind="$attrs"
|
|
:tabItems
|
|
:useTabsNoCaps
|
|
>
|
|
<template #default="{ item }">
|
|
<div
|
|
class="fit row q-pb-lg"
|
|
>
|
|
<div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
|
|
v-for="(tariff, idx) in tariffs"
|
|
:key="idx"
|
|
>
|
|
<price-section-item
|
|
:name="tariff.name"
|
|
:chats-qty="tariff.chatsQty ?? 0"
|
|
:price="item.name === 'legal' ? tariff.price_rub : tariff.price"
|
|
:price_unit="item.name === 'legal' ? 'rub' : 'stars'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-card
|
|
flat
|
|
class="bg-white rounded-card"
|
|
>
|
|
<q-item v-if="item.name === 'legal'">
|
|
<q-item-section avatar>
|
|
<span class="text-h4 text-grey q-px-sm">
|
|
₽
|
|
</span>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey">
|
|
{{ $t('price__rub_pay') }}
|
|
</q-item-label>
|
|
<q-item-label class="text-h6">
|
|
{{ $t('price__rub_resident') }}
|
|
</q-item-label>
|
|
<q-item-label class="text-grey">
|
|
{{ $t('price__rub_closing_documents') }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="item.name === 'individual'">
|
|
<q-item-section avatar>
|
|
<telegram-star color="gold" size="48px"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey">
|
|
{{ $t('price__stars_pay') }}
|
|
</q-item-label>
|
|
<q-item-label class="text-h6">
|
|
Telegram Stars
|
|
</q-item-label>
|
|
<q-item-label class="text-grey">
|
|
{{ $t('price__stars_description') }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-card>
|
|
</template>
|
|
</custom-tabs>
|
|
</slide-template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SlideTemplate from 'components/SlideTemplate.vue'
|
|
import CustomTabs from 'components/CustomTabs.vue'
|
|
import PriceSectionItem from 'components/PriceSectionItem.vue'
|
|
import TelegramStar from 'components/TelegramStar.vue'
|
|
|
|
defineProps({
|
|
useTabsNoCaps: Boolean
|
|
})
|
|
|
|
const tabItems = [
|
|
{ name: 'legal', label: 'price__legal'},
|
|
{ name: 'individual', label: 'price__individual'}
|
|
]
|
|
|
|
const tariffs = [
|
|
{ id: 1, name: 'TEST', price: 0, price_rub: 0, chatsQty: 5 },
|
|
{ id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
|
|
{ id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
|
|
{ id: 4, name: 'VIP', price: 12000, price_rub: null, chatsQty: null }
|
|
]
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|