52 lines
1.7 KiB
Vue
52 lines
1.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 flex flex-col gap-10">
|
|
<template v-for="action in actions">
|
|
<ReadContactInfo v-if="action === 'viewContactInfo'" :contactInfo="contactInfo" />
|
|
<ReadMessageSender
|
|
v-else-if="action === 'sendMessage'"
|
|
:qr_code_uri="qr_code_uri"
|
|
:predefinedMessages="predefinedMessages"
|
|
/>
|
|
</template>
|
|
</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="/donate" class="underline"
|
|
>поддержке</a
|
|
>.
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { getQrCodeDocument } from '@/api/qrCode'
|
|
|
|
const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()
|
|
|
|
// Локальные состояния
|
|
const predefinedMessages = ref<string[]>([])
|
|
const contactInfo = ref<{ name?: string; phone?: string; email?: string }>({})
|
|
const actions = ref<string[]>([])
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const qrCodeDoc = await getQrCodeDocument(qr_code_uri)
|
|
predefinedMessages.value = qrCodeDoc!.predefinedMessage || []
|
|
contactInfo.value = qrCodeDoc!.contactInfo || { name: 'waka', phone: '+123' }
|
|
actions.value = qrCodeDoc!.actions || []
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
})
|
|
</script>
|