hereconnect/src/views/CreateView.vue

<template>
  <div class="flex items-center justify-center min-h-screen px-4">
    <div class="max-w-md">
      <h2 class="text-2xl font-semibold mb-4">Где вы хотите разместить QR-код?</h2>
      <p class="text-gray-600 mb-6">
        Этот выбор поможет настроить QR-код с подходящими действиями для выбранного места или цели.
        На следующем шаге вы сможете выбрать, какие действия будут доступны сканирующему.
      </p>

      <!-- Список типов назначений -->
      <div class="mb-6 flex flex-col gap-3">
        <div class="flex items-center gap-2" v-for="(label, type) in qrCodePlacements" :key="type">
          <RadioButton v-model="selectedPlacement" :inputId="type" name="pizza" :value="type" />
          <label :for="type">{{ label }}</label>
        </div>
      </div>

      <!-- Сообщение об ошибке -->
      <p v-if="error" class="text-red-500 mb-4">
        Пожалуйста, выберите, где вы хотите разместить QR-код
      </p>

      <!-- Кнопка Далее -->
      <Button
        @click="nextStep"
        :disabled="!selectedPlacement"
        class="p-2 bg-blue-500 text-white rounded"
        label="Далее"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const qrCodePlacements = {
  car: 'Автомобиль',
  pet: 'Питомец',
  door: 'Входная дверь дома или квартиры',
  store: 'Магазин',
}

const selectedPlacement = ref('')
const error = ref(false)

function nextStep() {
  if (!selectedPlacement.value) {
    error.value = true
  } else {
    error.value = false
    // Логика перехода к следующему шагу и сохранения места размещения QR-кода
  }
}
</script>