Целевая страница отсканированного QR-кода (пока без реальной отправки сообщения)

src/views/ManageQRCodeReadyView.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="max-w-lg mx-auto py-6 px-4 md:px-6">
     <section class="content text-center">
-      <h2 class="text-xl font-semibold mb-4">Ваш QR-код готов</h2>
+      <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
       <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
 
-      <!-- Рендер QR-кода -->
+      <!-- Рендер QR‑кода -->
       <div v-if="!loading && svgUrl" class="border p-4 bg-white rounded-lg mb-6">
-        <img :src="svgUrl" alt="QR-код" />
+        <img :src="svgUrl" alt="QR‑код" />
       </div>
 
       <!-- Сообщение об ошибке -->
@@ -37,14 +37,12 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
 import QRCodeStyling from 'qr-code-styling'
 import { getQrCodeDocument } from '@/api/qrCode'
 import { optimize } from 'svgo'
+import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 
-// Получаем параметры маршрута
-const route = useRoute()
-const { qr_code_uri } = route.params as { qr_code_uri: string }
+const { qr_code_uri } = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
 
 // Локальные состояния
 const loading = ref(true)
@@ -94,7 +92,7 @@ async function generateOptimizedSvg(url: string) {
         throw new Error('Ошибка оптимизации SVG')
       }
     } else {
-      throw new Error('Ошибка генерации QR-кода')
+      throw new Error('Ошибка генерации QR‑кода')
     }
   } catch (err) {
     error.value = (err as Error).message || 'Неизвестная ошибка'
@@ -109,19 +107,19 @@ async function downloadPng() {
       extension: 'png',
     })
   } catch (err) {
-    error.value = (err as Error).message || 'Ошибка при скачивании QR-кода'
+    error.value = (err as Error).message || 'Ошибка при скачивании QR‑кода'
   }
 }
 
 // Монтирование
 onMounted(async () => {
   try {
-    // Загружаем данные QR-кода
+    // Загружаем данные QR‑кода
     const doc = await getQrCodeDocument(qr_code_uri)
     qrCodeData.value = { name: doc.name, url: doc.url }
     await generateOptimizedSvg(doc.url)
   } catch (err) {
-    error.value = (err as Error).message || 'Ошибка загрузки данных QR-кода'
+    error.value = (err as Error).message || 'Ошибка загрузки данных QR‑кода'
   } finally {
     loading.value = false
   }

src/views/ReadQRCodeView.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="flex flex-col min-h-screen">
+    <!-- Основной контент -->
+    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
+      <section class="max-w-lg w-full">
+        <p class="text-gray-600 mb-4 text-center">
+          Выберите сообщение из списка или напишите своё:
+        </p>
+
+        <!-- Предустановленные сообщения -->
+        <div v-if="presetMessages.length" class="mb-6">
+          <div class="flex flex-col gap-3">
+            <Button
+              v-for="(message, index) in presetMessages"
+              :key="index"
+              class="p-button-outlined w-full text-left"
+              :disabled="loading"
+              @click="sendPresetMessage(message)"
+            >
+              {{ message }}
+            </Button>
+          </div>
+        </div>
+
+        <!-- Текстовое поле ввода с кнопкой -->
+        <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
+          <InputText
+            id="customMessage"
+            v-model="customMessage"
+            class="flex-1"
+            placeholder="Напишите сообщение"
+            :disabled="loading"
+          />
+          <Button
+            type="submit"
+            icon="pi pi-send"
+            class="p-button-md"
+            :disabled="!customMessage.trim() || loading"
+          />
+        </form>
+
+        <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
+        <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
+      </section>
+    </main>
+
+    <!-- Футер -->
+    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
+      <p>
+        Нужен такой же?
+        <a href="/create" class="underline">Создайте свой QR‑код</a>.
+      </p>
+      <p class="mt-1">
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/support" class="underline"
+          >поддержке</a
+        >.
+      </p>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getQrCodeDocument } from '@/api/qrCode'
+import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+
+const { qr_code_uri } = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
+
+// Локальные состояния
+const presetMessages = ref<string[]>([])
+const customMessage = ref('')
+const success = ref(false)
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+// Функция для отправки сообщения
+async function sendMessage(message: string) {
+  try {
+    loading.value = true
+    console.log({
+      qr_code_uri,
+      message: message.trim(),
+    })
+
+    success.value = true
+    error.value = null
+    customMessage.value = ''
+  } catch {
+    success.value = false
+    error.value = 'Ошибка отправки сообщения'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Функция для отправки предустановленного сообщения
+async function sendPresetMessage(message: string) {
+  await sendMessage(message)
+}
+
+// Функция для отправки пользовательского сообщения
+async function sendCustomMessage() {
+  await sendMessage(customMessage.value)
+}
+
+// Загрузка данных QR‑кода
+onMounted(async () => {
+  try {
+    const qrCodeDoc = await getQrCodeDocument(qr_code_uri)
+    presetMessages.value = qrCodeDoc!.predefinedMessage || []
+  } catch {
+    error.value = 'Ошибка загрузки данных QR‑кода'
+  }
+})
+</script>