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="placement-options mb-6">
        <label v-for="(label, type) in qrCodePlacements" :key="type" class="block mb-4">
          <input type="radio" :value="type" v-model="selectedPlacement" class="mr-2" />
          {{ label }}
        </label>
      </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"
      >
        Далее
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

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

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

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

function goBack() {
  // Логика перехода на предыдущий шаг
}
</script>