Мини-приложение на vue для отображения кредитного калькулятора
Исходный код лежит https://github.com/Resetand/finsr-calc
Чтобы отобразить калькулятор нужно вставить в разметку элемент с классом "vue-credit-calc" и описать конфигурацию
<div class='vue-credit-calc'>...</div>
Конфигурация калькулятора описывается с помощью html разметки и настраиваемых атрибутов из которых формируются правила расчета
Разметка состоит из элементов предложений x-offer и опциональных слотов с вложенными категориями x-category
Категории будут наследовать конфигурацию из родительского слота предложения, и могут перетирать родительские правила расчета
Если предложение всего одна, то компонент с выбором предложений показываться не будет, то же самое и для категорий. Таким образом можно показывать только нужное предложение на страницах с продуктом (ипотека, залог и тд)
Наример, вот как выглядит калькулятор с двумя предложениями – Потребительский кредит и Ипотека. и категориями в Ипотеке Квартира, Коммерческая недвижимость
<div class="vue-credit-calc">
<x-offer
data-name="Потребительский кредит"
data-commission="10%"
data-sum-min="500000"
data-sum-max="5000000"
data-years-min="1"
data-years-max="5"
data-rate="12,5%"
data-rate-bank="19%"
data-insurance="0"
data-insurance-bank="9%"
></x-offer>
<x-offer
data-name="Ипотека"
data-commission="2%"
data-categories-label="Вид недвижимости"
data-years-min="5"
data-years-max="30"
data-years-step="5"
data-sum-min="1000000"
data-sum-max="100000000"
>
<x-category
data-name="Квартира"
data-rate="9,2%"
data-rate-bank="11,75%"
data-insurance="0,5%"
data-insurance-bank="0,8%"
></x-category>
<x-category
data-name="Коммерческая недвижимость"
data-rate="8,2%"
data-rate-bank="11,5%"
data-insurance="0,65%"
data-insurance-bank="1%"
></x-category>
</x-offer>
</div>Калькулятор только для потребительского кредита
<div class="vue-credit-calc">
<x-offer
data-name="Потребительский кредит (можно не писать тк не будет отображаться)"
data-commission="10%"
data-sum-min="500000"
data-sum-max="5000000"
data-years-min="1"
data-years-max="5"
data-rate="12,5%"
data-rate-bank="19%"
data-insurance="0"
data-insurance-bank="9%"
></x-offer>
</div>API атрибутов
- data-name - отображаемое название, [текст]
- data-commission - наша комиссия, [процент]
- data-rate - ставка у нас, [процент]
- data-rate-bank - ставка в банке, [процент]
- data-insurance - страховка у нас, [процент]
- data-insurance-bank - страховка в банке, [процент]
- data-years-min - минимальное количество лет, [число]
- data-years-max - максимальное количество лет, [число]
- data-years-step - шаг слайдера выбора лет, [число] !! Должно делится без остатка на data-years-min/max
- data-sum-min - минимальная сумма кредита, [число]
- data-sum-max - максимальная сумма кредита, [число]
- data-categories-label - подпись для категорий (если они есть), [текст]
! Допустимый формат для [процент]: 12,4% или 12.4% или 0,124 или 0.124
Я не придумал более консистентного и автоматизированного способа интегрировать приложение на vue с modx, поэтому если знаете как - действуйте
На данный момент для внесения правок нужно
- Клонировать репозиторий
git clone https://github.com/Resetand/finsr-calc.git - Установить пакеты
npm i - Развернуть локальный сервер
npm run serve - Внести правки в код и, при необходимости, в документацию
- Не забыть запушить изменения, чтобы репозиторий оставался актуальным
- Сделать сборку проекта
npm run build - Заменить содержимое файла в админки
assets/tamplate/js/credit-calc-vue/finsr-calc.jsна получившийся bundle (dist/finsr-calc.js) - При необходимости актуализировать файл с докой
assets/tamplate/js/credit-calc-vue/README.md - PROFIT
Если нужна помощь - t.me/resetand