feat: implement dynamic pricing from remnawave-minishop API #4

2026-06-15T01:09:33+03:00

austnv commented

2026-06-15 01:09:33 +03:00

🧩 Связанная задача

Closes #2 — Динамическая загрузка тарифов

📝 Описание

В рамках выполнения задачи #2 полностью переработан блок с тарифами. Ранее статичные данные теперь динамически загружаются через API remnawave-minishop. Изменения позволили адаптировать верстку под новые данные, улучшить отображение на всех типах устройств и повысить удобство работы с ценами.

✨ Основные изменения

1. Динамическая загрузка тарифов

API-интеграция: Данные о тарифах, их стоимости и доступных подписках загружаются с бэкенда вместо встроенных в код статичных массивов.
Компонент цен: В компоненте секции цен реализована обработка состояний загрузки (loading), ошибки (error) и отображения актуальных данных.

2. Обновление интерфейса

Адаптивная верстка: Гибкая сетка для карточек тарифов корректно отображается на мобильных устройствах, планшетах и десктопах.
Визуальные акценты: Для популярного тарифика добавлен соответствующий визуальный бейдж.
Контроль выбора: Кнопка выбора тарифа всегда ведет к оформлению подписки, даже если данных временно нет.

3. Качество и поддержка

Обработка ошибок: Добавлена информативная заглушка Нет доступных тарифов для выбранного периода, отображаемая при отсутствии данных.
Сопроводительные правки: Обновлен скрипт выкладки (postbuild) для корректной работы обновленной сборки.

📂 Список затронутых файлов

Файл	Изменения
`package.json`	Версия проекта обновлена до `0.7.2`
`src/components/PricingSection.vue`	Полностью переписана логика компонента для работы с новым API
`src/views/HomeView.vue`	Обновлена интеграция с компонентом цен и обработка данных
`vite.config.js`	Оптимизирована конфигурация сборщика
`postbuild.sh`	Скорректирован путь для деплоя билда на сервер

🧪 Как тестировать

Запуск: Выполните npm run dev и перейдите на главную страницу.
Проверка загрузки: Убедитесь, что при загрузке страницы отображается состояние загрузки, а затем — блок с тарифами.
Работа с тарифами: Нажмите на карточку тарифа, выберите период подписки и проверьте переход на страницу оформления.
Тест ошибок: Отключите сеть или измените URL API, чтобы увидеть сообщение Нет доступных тарифов для выбранного периода.
Адаптивность: Проверьте отображение на разных разрешениях экрана — от 320px до 1920px.

⚠️ Breaking Changes & Migration

Зависимости: Убедитесь, что в вашем окружении настроен доступ к API remnawave-minishop и он возвращает данные в ожидаемом формате.
Сборка: Путь для деплоя после сборки изменён с /opt/uvpn.shop на /opt/uvpn.shop/frontend. При развертывании учитывайте этот момент.

### 🧩 Связанная задача Closes #2 — Динамическая загрузка тарифов ### 📝 Описание В рамках выполнения задачи #2 полностью переработан блок с тарифами. Ранее статичные данные теперь динамически загружаются через API `remnawave-minishop`. Изменения позволили адаптировать верстку под новые данные, улучшить отображение на всех типах устройств и повысить удобство работы с ценами. ### ✨ Основные изменения #### 1. Динамическая загрузка тарифов * **API-интеграция**: Данные о тарифах, их стоимости и доступных подписках загружаются с бэкенда вместо встроенных в код статичных массивов. * **Компонент цен**: В компоненте секции цен реализована обработка состояний загрузки (`loading`), ошибки (`error`) и отображения актуальных данных. #### 2. Обновление интерфейса * **Адаптивная верстка**: Гибкая сетка для карточек тарифов корректно отображается на мобильных устройствах, планшетах и десктопах. * **Визуальные акценты**: Для популярного тарифика добавлен соответствующий визуальный бейдж. * **Контроль выбора**: Кнопка выбора тарифа всегда ведет к оформлению подписки, даже если данных временно нет. #### 3. Качество и поддержка * **Обработка ошибок**: Добавлена информативная заглушка `Нет доступных тарифов для выбранного периода`, отображаемая при отсутствии данных. * **Сопроводительные правки**: Обновлен скрипт выкладки (postbuild) для корректной работы обновленной сборки. ### 📂 Список затронутых файлов | Файл | Изменения | | :--- | :--- | | `package.json` | Версия проекта обновлена до `0.7.2` | | `src/components/PricingSection.vue` | Полностью переписана логика компонента для работы с новым API | | `src/views/HomeView.vue` | Обновлена интеграция с компонентом цен и обработка данных | | `vite.config.js` | Оптимизирована конфигурация сборщика | | `postbuild.sh` | Скорректирован путь для деплоя билда на сервер | ### 🧪 Как тестировать 1. **Запуск**: Выполните `npm run dev` и перейдите на главную страницу. 2. **Проверка загрузки**: Убедитесь, что при загрузке страницы отображается состояние загрузки, а затем — блок с тарифами. 3. **Работа с тарифами**: Нажмите на карточку тарифа, выберите период подписки и проверьте переход на страницу оформления. 4. **Тест ошибок**: Отключите сеть или измените URL API, чтобы увидеть сообщение `Нет доступных тарифов для выбранного периода`. 5. **Адаптивность**: Проверьте отображение на разных разрешениях экрана — от 320px до 1920px. ### ⚠️ Breaking Changes & Migration * **Зависимости**: Убедитесь, что в вашем окружении настроен доступ к API `remnawave-minishop` и он возвращает данные в ожидаемом формате. * **Сборка**: Путь для деплоя после сборки изменён с `/opt/uvpn.shop` на `/opt/uvpn.shop/frontend`. При развертывании учитывайте этот момент.

austnv added the enhancement label 2026-06-15 01:09:33 +03:00

austnv self-assigned this 2026-06-15 01:09:33 +03:00

austnv added 4 commits 2026-06-15 01:09:34 +03:00

update pricing to new api 7b7d58f61f

update pricing section to issue #2 c8486ca001

update flags flagcdn -> jsdelivr (unavaluable from Russia) bf9b095b27

update postbuild script 3c0891fe94

austnv requested review from Ghost 2026-06-15 01:09:34 +03:00

austnv merged commit bb5b8cf012 into main

2026-06-15 01:10:12 +03:00

austnv deleted branch dev

2026-06-15 01:13:51 +03:00