120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<template>
|
|
<div class="w100">
|
|
<div class="w100 column items-center text-center text-grey q-px-md">
|
|
<div class="text-caption">
|
|
{{ $t('subscribe_tariffs__description') }}
|
|
</div>
|
|
</div>
|
|
<q-list separator>
|
|
<q-item
|
|
v-for="item in tariffs"
|
|
:key="item.id"
|
|
clickable
|
|
v-ripple
|
|
tag="label"
|
|
:disable="disableTestTariff(item.id)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-radio
|
|
v-model="selectedTariff"
|
|
:val="item.id"
|
|
:disable="disableTestTariff(item.id)"
|
|
:keep-color="disableTestTariff(item.id)"
|
|
:color="disableTestTariff(item.id) ? 'grey-5' : ''"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div class="column">
|
|
<span class="text-bold">
|
|
{{ item.name }}
|
|
</span>
|
|
<div class="flex no-wrap items-center text-caption" style="line-height: 1em;">
|
|
<span v-if="item.chat_limit">
|
|
{{ $t('subscribe_tariffs__chats_max') + ' ' + item.chat_limit }}
|
|
</span>
|
|
<q-icon v-else name="mdi-all-inclusive" size="sm"/>
|
|
<span class="q-pl-xs">
|
|
{{ $t('subscribe_tariffs__chats')}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</q-item-section>
|
|
<q-item-section
|
|
class="text-left"
|
|
:style="{ width: `${maxWidthStarsSection}px` }"
|
|
>
|
|
<q-resize-observer @resize="updateMaxWidthStarsSection" />
|
|
<div v-if="item.price" class="flex column justify-start">
|
|
<div class="flex no-wrap items-center">
|
|
<telegram-star color="gold" size="18px" class="q-mr-xs"/>
|
|
<span class="text-h6">{{ formatNumber(item.price) }}</span>
|
|
<span class="text-caption q-pl-xs">{{ $t('subscribe_tariffs__per_month') }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="text-bold self-center">
|
|
{{ $t('subscribe_tariffs__free_tax') }}
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import telegramStar from 'components/TelegramStar.vue'
|
|
import { formatNumber } from 'utils/helpers'
|
|
import type { Tariff } from 'types/Tariff'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
tariffs: Tariff[]
|
|
currentTariffId?: number
|
|
disable?: boolean
|
|
}>(),
|
|
{
|
|
disable: false
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits(['update:selected'])
|
|
|
|
const selectedTariff = ref<number>()
|
|
|
|
const testTariffId = computed(() => props.tariffs.find(el => el.price === 0)?.id)
|
|
|
|
watch(() => props.tariffs, () => {
|
|
if (props.currentTariffId !== undefined) {
|
|
selectedTariff.value = props.currentTariffId
|
|
} else if (testTariffId.value) {
|
|
selectedTariff.value = testTariffId.value
|
|
} else if (props.tariffs.length > 0) {
|
|
selectedTariff.value = props.tariffs[0]?.id
|
|
}
|
|
}, { immediate: true })
|
|
|
|
watch(() => props.currentTariffId, (newId) => {
|
|
if (newId !== undefined) selectedTariff.value = newId
|
|
})
|
|
|
|
watch(selectedTariff, (newVal) => {
|
|
if (newVal !== undefined) emit('update:selected', newVal)
|
|
}, { immediate: true })
|
|
|
|
function disableTestTariff (tariffId: number) {
|
|
if (props.disable) return true
|
|
if (!testTariffId.value) return false
|
|
return props.currentTariffId === testTariffId.value || tariffId === testTariffId.value
|
|
}
|
|
|
|
const maxWidthStarsSection = ref(0)
|
|
|
|
function updateMaxWidthStarsSection(size: { width: number, height: number }) {
|
|
if (size.width > maxWidthStarsSection.value) {
|
|
maxWidthStarsSection.value = size.width
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|