116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
|
<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">
|
||
|
|
Сделайте НаСвязи удобнее. Будем рады вашей <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>
|