Nikita Kiselev
3cc82e45f0
Some checks are pending
Telegram Mini App Shop Builder / Compute version metadata (push) Waiting to run
Telegram Mini App Shop Builder / Run Frontend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run Backend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Waiting to run
Telegram Mini App Shop Builder / Build module. (push) Blocked by required conditions
Telegram Mini App Shop Builder / release (push) Blocked by required conditions
181 lines
7.7 KiB
Vue
181 lines
7.7 KiB
Vue
<template>
|
||
<div class="tw:space-y-6">
|
||
<div class="acmeshop-pulse-info">
|
||
<h3>🚀 Расширьте возможности вашего магазина с <strong><a href="https://acmeshop.pro/" target="_blank">AcmeShop Pulse</a>!</strong></h3>
|
||
|
||
<p>
|
||
Если вы хотите не только показывать товары в Telegram, но и активно общаться с клиентами,
|
||
рассылать новости, акции и уведомления — для этого есть <strong>AcmeShop Pulse</strong>.
|
||
Это <strong>SaaS-платформа с месячной подпиской</strong>, которая полностью интегрируется
|
||
с вашим ECommerce-магазином и витриной AcmeShop.
|
||
</p>
|
||
|
||
<p><strong>С AcmeShop Pulse вы сможете:</strong></p>
|
||
|
||
<ul>
|
||
<li>📣 Делать массовые рассылки сообщений покупателям прямо в Telegram</li>
|
||
<li>📊 Анализировать эффективность сообщений и взаимодействие клиентов</li>
|
||
<li>🔗 Легко синхронизироваться с вашей витриной AcmeShop — все данные остаются в одном месте</li>
|
||
</ul>
|
||
|
||
<p>
|
||
🧪 Платформа <strong>AcmeShop Pulse находится на ранней стадии тестирования</strong>.
|
||
Если вам интересно и вы хотите принять участи в тестировании интересно, свяжитесь со мной через
|
||
<a href="https://t.me/acmeshop3" target="_blank">официальную группу AcmeShop в Telegram</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<SettingsItem v-if="settings.items.pulse.api_key" label="Статистика за 7 дней">
|
||
<template #default>
|
||
<div v-if="stats" class="tw:space-y-4">
|
||
<div class="tw:flex tw:gap-3 tw:max-w-2xl">
|
||
<div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
|
||
<div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
|
||
<div class="tw:text-xs tw:font-medium tw:text-gray-700">В очереди</div>
|
||
<div
|
||
class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-yellow-400 tw:to-yellow-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
|
||
<i class="fa fa-clock-o tw:text-white tw:text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
|
||
stats.pending
|
||
}}
|
||
</div>
|
||
<div class="tw:text-xs tw:text-gray-500">Ожидают отправки</div>
|
||
</div>
|
||
<div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
|
||
<div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
|
||
<div class="tw:text-xs tw:font-medium tw:text-gray-700">Отправлено</div>
|
||
<div
|
||
class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-green-400 tw:to-green-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
|
||
<i class="fa fa-check-circle tw:text-white tw:text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
|
||
stats.sent
|
||
}}
|
||
</div>
|
||
<div class="tw:text-xs tw:text-gray-500">Успешно доставлено</div>
|
||
</div>
|
||
<div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
|
||
<div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
|
||
<div class="tw:text-xs tw:font-medium tw:text-gray-700">Ошибки</div>
|
||
<div
|
||
class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-red-400 tw:to-red-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
|
||
<i class="fa fa-exclamation-circle tw:text-white tw:text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
|
||
stats.failed
|
||
}}
|
||
</div>
|
||
<div class="tw:text-xs tw:text-gray-500">Требуют внимания</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #help>
|
||
Статистика обновляется 1 раз в час
|
||
</template>
|
||
</SettingsItem>
|
||
|
||
<ItemInput label="API ключ"
|
||
v-model="settings.items.pulse.api_key"
|
||
placeholder="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE"
|
||
>
|
||
Используется для обмена информацией по кампаниям, рассылкам, сбору метрик.
|
||
</ItemInput>
|
||
|
||
<ItemInput label="Размер пакета обработки"
|
||
v-model.number="settings.items.pulse.batch_size"
|
||
type="number"
|
||
placeholder="50"
|
||
>
|
||
Определяет, сколько событий отправляется в AcmeShop Pulse за один запуск фоновой задачи.
|
||
При большом значении события обрабатываются быстрее, но увеличивается нагрузка на сервер.
|
||
При малом значении нагрузка ниже, но обработка занимает больше времени.
|
||
Рекомендуемое значение: 50.
|
||
</ItemInput>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, ref} from "vue";
|
||
import {useSettingsStore} from "@/stores/settings.js";
|
||
import ItemInput from "@/components/Settings/ItemInput.vue";
|
||
import {apiGet} from "@/utils/http.js";
|
||
import SettingsItem from "@/components/SettingsItem.vue";
|
||
|
||
const settings = useSettingsStore();
|
||
const stats = ref(null);
|
||
|
||
const loadStats = async () => {
|
||
const response = await apiGet('getAcmeShopPulseStats');
|
||
if (response.success) {
|
||
stats.value = response.data;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
loadStats();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.acmeshop-pulse-info {
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.acmeshop-pulse-info h3 {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
color: #212529;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.acmeshop-pulse-info h3 a {
|
||
color: #dc3545;
|
||
font-weight: 700;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.acmeshop-pulse-info h3 a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.acmeshop-pulse-info p {
|
||
margin-bottom: 16px;
|
||
line-height: 1.6;
|
||
color: #495057;
|
||
}
|
||
|
||
.acmeshop-pulse-info p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.acmeshop-pulse-info p strong {
|
||
color: #212529;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.acmeshop-pulse-info ul {
|
||
margin: 16px 0;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.acmeshop-pulse-info ul li {
|
||
color: #495057;
|
||
position: relative;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.acmeshop-pulse-info ul li:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|