hereconnect/src/views/ReadQRCodeView.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">
        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<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>