Дмитрий
87 lines
2.6 KiB
Vue
87 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* TierPricesPanel — свёрнутый по умолчанию блок с ценами 7 ступеней.
|
||
* Подсвечивает текущую ступень чипом «вы здесь». Источник данных —
|
||
* GET /api/billing/wallet → tiers_preview + current_tier.no.
|
||
*
|
||
* Billing v2 Spec A §3.4.8.
|
||
*/
|
||
interface TierPreview {
|
||
tier_no: number;
|
||
leads_in_tier: number | null;
|
||
price_rub: string;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
tiers: TierPreview[];
|
||
currentTierNo: number | null;
|
||
}>();
|
||
|
||
function rangeText(idx: number): string {
|
||
let start = 1;
|
||
for (let i = 0; i < idx; i++) {
|
||
const cap = props.tiers[i].leads_in_tier;
|
||
if (cap !== null) start += cap;
|
||
}
|
||
const cap = props.tiers[idx].leads_in_tier;
|
||
if (cap === null) return `${start}+`;
|
||
return `${start}–${start + cap - 1}`;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<v-expansion-panels class="mt-4 tier-prices">
|
||
<v-expansion-panel title="Цены за лид (7 ступеней)" eager>
|
||
<template #text>
|
||
<ul class="tier-list">
|
||
<li
|
||
v-for="(t, i) in tiers"
|
||
:key="t.tier_no"
|
||
data-test="tier-row"
|
||
:data-test-row="`tier-row-${t.tier_no}`"
|
||
class="tier-row"
|
||
:class="{ 'tier-row--current': t.tier_no === currentTierNo }"
|
||
>
|
||
<span class="tier-no num">№{{ t.tier_no }}</span>
|
||
<span class="tier-range">{{ rangeText(i) }} лидов</span>
|
||
<span class="tier-price num">{{ t.price_rub }} ₽</span>
|
||
<v-chip
|
||
v-if="t.tier_no === currentTierNo"
|
||
size="x-small"
|
||
color="primary"
|
||
variant="elevated"
|
||
>вы здесь</v-chip>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
</v-expansion-panel>
|
||
</v-expansion-panels>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tier-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.tier-row {
|
||
display: grid;
|
||
grid-template-columns: 60px 1fr auto auto;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
}
|
||
.tier-row--current {
|
||
background: rgba(15, 110, 86, 0.07);
|
||
border-left: 3px solid #0f6e56;
|
||
}
|
||
.num {
|
||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||
font-feature-settings: 'tnum';
|
||
}
|
||
.tier-price {
|
||
color: #0f6e56;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|