Дмитрий
80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* Публичная страница цен. Показывает текущую 7-ступенчатую тарифную сетку
|
||
* из /api/public/pricing (single source — pricing_tiers). Требование ЮKassa:
|
||
* цены должны быть публично доступны на сайте.
|
||
*/
|
||
import { onMounted, ref } from 'vue';
|
||
import { fetchPublicPricing, type PricingTierDto } from '../api/public';
|
||
|
||
const tiers = ref<PricingTierDto[]>([]);
|
||
const error = ref(false);
|
||
|
||
function bandLabel(t: PricingTierDto, idx: number): string {
|
||
if (t.leads_in_tier === null) return 'свыше';
|
||
const from = tiers.value.slice(0, idx).reduce((s, x) => s + (x.leads_in_tier ?? 0), 0) + 1;
|
||
const to = from + t.leads_in_tier - 1;
|
||
return `${from}–${to}`;
|
||
}
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
tiers.value = await fetchPublicPricing();
|
||
} catch {
|
||
error.value = true;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<section class="pricing">
|
||
<h1 class="text-h4 mb-2">Цены</h1>
|
||
<p class="text-body-1 text-medium-emphasis mb-1">
|
||
Лидерра — сервис получения лидов с оплатой за результат (pay-per-lead).
|
||
Вы пополняете баланс и платите только за переданных лидов.
|
||
</p>
|
||
<p class="text-body-2 text-medium-emphasis mb-6">
|
||
Чем больше лидов за месяц — тем ниже цена за лид. Оплата картой или СБП через ЮKassa.
|
||
</p>
|
||
|
||
<v-alert v-if="error" type="warning" variant="tonal" density="compact">
|
||
Не удалось загрузить актуальные тарифы. Обновите страницу.
|
||
</v-alert>
|
||
|
||
<v-table v-else class="pricing-table" data-testid="pricing-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Ступень</th>
|
||
<th>Лидов в месяц</th>
|
||
<th class="text-right">Цена за лид</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(t, i) in tiers" :key="t.tier_no">
|
||
<td>{{ t.tier_no }}</td>
|
||
<td>{{ bandLabel(t, i) }}</td>
|
||
<td class="text-right pricing-num">{{ t.price_rub }} ₽</td>
|
||
</tr>
|
||
</tbody>
|
||
</v-table>
|
||
|
||
<p class="text-caption text-medium-emphasis mt-4">
|
||
Цены указаны в рублях за одного лида. Тарифные ступени применяются накопительно в течение месяца.
|
||
</p>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.pricing {
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
}
|
||
.pricing-num {
|
||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.pricing-table :deep(th) {
|
||
font-weight: 600;
|
||
}
|
||
</style>
|