58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex column items-center bg-white rounded-card q-pa-md">
|
|
<div class="text-h5 text-primary text-bold">
|
|
{{ name }}
|
|
</div>
|
|
|
|
<div class="flex items-center" style="min-height: 50px;">
|
|
<div v-if="price" class="flex column items-center">
|
|
<div class="flex no-wrap items-center">
|
|
<span
|
|
v-if="price_unit === 'rub'"
|
|
class="text-h4 text-grey q-pr-xs">
|
|
₽
|
|
</span>
|
|
<telegram-star
|
|
v-if="price_unit === 'stars'"
|
|
color="gold"
|
|
size="24px"
|
|
class="q-mr-xs"
|
|
/>
|
|
|
|
<span class="text-h4">{{ price.toLocaleString(locale) }}</span>
|
|
</div>
|
|
<span class="text-caption">{{ $t('price__per_month') }}</span>
|
|
</div>
|
|
<div v-else class="text-bold text-h5">
|
|
{{ $t('price__free_tax') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center q-pt-md" style="min-height: 50px;">
|
|
<div class="flex no-wrap items-center">
|
|
<span v-if="chatsQty" class="text-amber-8 text-bold text-h5">
|
|
{{ chatsQty }}
|
|
</span>
|
|
<q-icon v-else name="mdi-all-inclusive" size="md" color="amber-8"/>
|
|
<span class="q-pl-sm">
|
|
{{ $t('price__chats')}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import telegramStar from 'components/TelegramStar.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { locale } = useI18n({ useScope: 'global' })
|
|
|
|
defineProps({
|
|
name: String,
|
|
price: Number,
|
|
chatsQty: Number,
|
|
price_unit: String
|
|
})
|
|
</script>
|