modified: main_dc/yalarba/easySite/.env

modified: main_dc/yalarba/easySite/easySite/app/components/layout/Careers.vue new file: main_dc/yalarba/easySite/easySite/app/components/layout/default.vue new file: main_dc/yalarba/easySite/easySite/app/composables/useTelegram.ts modified: main_dc/yalarba/easySite/easySite/nuxt.config.ts send mesage with ui from vocations page easysite
2025-11-01 06:06:47 +05:00
parent fbfcb869ed
commit dcec3c3d32
5 changed files with 160 additions and 20 deletions
@@ -0,0 +1,2 @@
+NUXT_PUBLIC_TELEGRAM_BOT_TOKEN=8470085635:AAEPZcsN3n-3FkMdr7DzxbiQ3q8mXZTGwug
+NUXT_PUBLIC_TELEGRAM_CHAT_ID=559861569
@@ -437,7 +437,7 @@

                <h3>Присоединиться к команде</h3>

-                <form @submit.prevent="submitForm" class="contact-form">
+                <form class="contact-form" @submit.prevent="submitForm">
                    <div class="form-group">
                        <label for="name">Имя *</label>
                        <input id="name" v-model="form.name" type="text" required placeholder="Как к вам обращаться?">
@@ -472,11 +472,8 @@

                    <div class="form-group">
                        <label for="message">Расскажите о себе *</label>
-                        <textarea
-                            id="message"
-                            v-model="form.message"
-                            required rows="5"
-                            placeholder="Ваш опыт, почему хотите присоединиться, что вас вдохновляет..."/>
+                        <textarea id="message" v-model="form.message" required rows="5"
+                            placeholder="Ваш опыт, почему хотите присоединиться, что вас вдохновляет..." />
                    </div>

                    <div class="form-group">
@@ -509,7 +506,7 @@
 <script setup>
 const showContactForm = ref(false)
 const loading = ref(false)
-
+const toast = useToast() 
 const form = ref({
    name: '',
    email: '',
@@ -518,25 +515,100 @@ const form = ref({
    portfolio: ''
 })

+
+// Функция для форматирования сообщения в Telegram
+const formatTelegramMessage = (formData) => {
+    const roleLabels = {
+        'frontend': 'Frontend Developer',
+        'backend': 'Backend Developer', 
+        'analytics': 'Data Analyst',
+        'designer': 'Product Designer',
+        'sales': 'Sales & Strategy',
+        'manager': 'Project Manager',
+        'seo': 'SEO Specialist',
+        'smm': 'SMM Specialist',
+        'copywriter': 'Копирайтер',
+        'seo-copy': 'SEO + Копирайтинг',
+        'smm-copy': 'SMM + Копирайтинг', 
+        'smm-seo': 'SMM + SEO',
+        'digital-marketing': 'Digital Marketing (полный цикл)',
+        'other': 'Другое'
+    };
+
+    const roleName = roleLabels[formData.role] || formData.role;
+    
+    return `🎯 <b>Новая заявка в команду!</b>
+
+👤 <b>Имя:</b> ${formData.name}
+📧 <b>Email:</b> ${formData.email}
+💼 <b>Роль:</b> ${roleName}
+
+📝 <b>Сообщение:</b>
+${formData.message}
+
+${formData.portfolio ? `🔗 <b>Портфолио:</b> ${formData.portfolio}` : '🔗 <b>Портфолио:</b> Не указано'}
+
+⏰ <b>Время:</b> ${new Date().toLocaleString('ru-RU')}
+🌐 <b>Источник:</b> Careers Page`;
+}
+
 const submitForm = async () => {
    loading.value = true

    try {
-        // Здесь будет отправка формы на бэкенд
-        await $fetch('/api/careers/apply', {
-            method: 'POST',
-            body: form.value
-        })
+        // Форматируем сообщение для Telegram
+        const telegramMessage = formatTelegramMessage(form.value);
+        
+        // Отправляем в Telegram
+        const { success, error } = await sendMessageToTelegram(telegramMessage);

-        // Успешная отправка
-        showContactForm.value = false
-        form.value = { name: '', email: '', role: '', message: '', portfolio: '' }
+        if (success) {
+            // Успешная отправка - показываем красивое уведомление
+            toast.add({
+                title: 'Заявка отправлена! 🎉',
+                description: 'Свяжемся с вами в ближайшее время',
+                icon: 'i-heroicons-check-badge',
+                color: 'green',
+                timeout: 5000
+            });

-        // Показать уведомление об успехе
-        alert('Заявка отправлена! Свяжемся с вами в ближайшее время.')
+            // Закрываем модальное окно
+            showContactForm.value = false
+            
+            // Сбрасываем форму
+            form.value = { 
+                name: '', 
+                email: '', 
+                role: '', 
+                message: '', 
+                portfolio: '' 
+            }
+            
+        } else {
+            throw new Error(error || 'Ошибка отправки в Telegram');
+        }
+        
    } catch (error) {
        console.error('Ошибка отправки формы:', error)
-        alert('Произошла ошибка. Попробуйте еще раз или напишите напрямую.')
+        
+        // Показываем уведомление об ошибке
+        if (error.message.includes('Telegram') || error.message.includes('сети')) {
+            toast.add({
+                title: 'Ошибка отправки 🌐',
+                description: 'Проблемы с соединением. Напишите нам напрямую в Telegram или на email',
+                icon: 'i-heroicons-exclamation-triangle',
+                color: 'red',
+                timeout: 7000
+            });
+        } else {
+            toast.add({
+                title: 'Ошибка ❌',
+                description: 'Не удалось отправить заявку. Попробуйте еще раз',
+                icon: 'i-heroicons-exclamation-triangle',
+                color: 'red',
+                timeout: 5000
+            });
+        }
    } finally {
        loading.value = false
    }
@@ -0,0 +1,7 @@
+<!-- layouts/default.vue -->
+<template>
+  <div>
+    <Notifications position="top-right" />
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,57 @@
+// composables/useTelegram.ts
+
+export const useTelegram = () => {
+  const config = useRuntimeConfig();
+  
+  const sendMessageToTelegram = async (message: string): Promise<{ success: boolean; error?: string }> => {
+    if (!message?.trim()) {
+      return { success: false, error: 'Сообщение не может быть пустым' };
+    }
+
+    try {
+      const BOT_TOKEN = config.public.telegramBotToken || "8470085635:AAEPZcsN3n-3FkMdr7DzxbiQ3q8mXZTGwug";
+      const CHAT_ID = config.public.telegramChatId || "559861569";
+
+      const formData = new FormData();
+      formData.append('chat_id', CHAT_ID);
+      formData.append('text', `📥 Новое сообщение с сайта ValitovGaziz:\n\n${message}`);
+      formData.append('parse_mode', 'HTML');
+
+      const response = await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+
+      if (data.ok) {
+        return { success: true };
+      } else {
+        console.error('Telegram API Error:', data);
+        return { success: false, error: data.description || 'Неизвестная ошибка Telegram API' };
+      }
+    } catch (error) {
+      console.error("Ошибка сети:", error);
+      return { success: false, error: 'Произошла ошибка сети. Попробуйте позже.' };
+    }
+  };
+
+  const sendMessageWithPrompt = async (): Promise<void> => {
+    const message = prompt("Опишите, пожалуйста, ваше предложение или вопрос. Я свяжусь с вами в ближайшее время:");
+    
+    if (message?.trim()) {
+      const { success, error } = await sendMessageToTelegram(message);
+      
+      if (success) {
+        alert("Сообщение успешно отправлено! Я свяжусь с вами в ближайшее время.");
+      } else {
+        alert("Ошибка: " + error);
+      }
+    }
+  };
+
+  return {
+    sendMessageToTelegram,
+    sendMessageWithPrompt
+  };
+};
@@ -16,7 +16,7 @@ export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@nuxt/ui',
-    '@nuxt/eslint'
+    '@nuxt/eslint',
  ],

  css: [
@@ -32,7 +32,9 @@ export default defineNuxtConfig({
  // Настройки для работы за прокси
  runtimeConfig: {
    public: {
-      baseURL: process.env.BASE_URL || 'http://localhost:3000'
+      baseURL: process.env.BASE_URL || 'http://localhost:3000',
+      telegramBotToken: process.env.NUXT_PUBLIC_TELEGRAM_BOT_TOKEN,
+      telegramChatId: process.env.NUXT_PUBLIC_TELEGRAM_CHAT_ID,
    }
  },