создание qr-кода

2024-11-18 18:26:28 +02:00
parent 89cf15b6ea
commit 931b0cc976
24 changed files with 813 additions and 103 deletions
@@ -1,55 +1,86 @@
 <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 class="create-page max-w-lg mx-auto py-8">
+    <!-- Секция выбора размещения -->
+    <CreateSection isActive>
+      <CreatePlacementSection
+        v-model="placement"
+        @nextStep="placement && activateSections('actions')"
      />
-    </div>
+    </CreateSection>
+
+    <!-- Секция выбора доступных действий -->
+    <CreateSection :isActive="activeSteps.includes('actions')">
+      <CreateActionsSection
+        v-model="selectedActions"
+        @nextStep="
+          selectedActions.length &&
+            activateSections(selectedActions.includes('sendMessage') ? 'delivery' : 'summary')
+        "
+      />
+    </CreateSection>
+
+    <!-- Секция выбора способа доставки -->
+    <CreateSection
+      v-if="selectedActions.includes('sendMessage')"
+      :isActive="activeSteps.includes('delivery')"
+    >
+      <CreateDeliverySection
+        v-model="deliveryMethod"
+        @nextStep="deliveryMethod && activateSections('messages', 'summary')"
+      />
+    </CreateSection>
+
+    <!-- Секция сообщений для отправки -->
+    <CreateSection
+      v-if="selectedActions.includes('sendMessage') && activeSteps.includes('messages')"
+      :isActive="true"
+    >
+      <CreateMessagesSection :placement v-model="messages" />
+    </CreateSection>
+
+    <!-- Секция итогового резюме -->
+    <CreateSection :isActive="activeSteps.includes('summary')">
+      <CreateSummarySection
+        v-model:uri="uri"
+        v-model:name="name"
+        :placement="placement"
+        :actions="selectedActions"
+        :deliveryMethod="deliveryMethod"
+        :user_uuid="user_uuid"
+        :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
+        @nextStep="activateSections('qrReady')"
+      />
+    </CreateSection>
+
+    <!-- Секция готового QR-кода -->
+    <CreateSection :isActive="activeSteps.includes('qrReady')">
+      <CreateReadySection :uri="uri" :name="name" />
+    </CreateSection>
+
+    <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
  </div>
 </template>

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

-const qrCodePlacements = {
-  car: 'Автомобиль',
-  pet: 'Питомец',
-  door: 'Входная дверь дома или квартиры',
-  store: 'Магазин',
-}
+// Шаги и состояния для работы с секциями
+const activeSteps = ref(['placement'])

-const selectedPlacement = ref('')
-const error = ref(false)
+const selectedActions = ref<string[]>([])
+const placement = ref('')
+const deliveryMethod = ref('')
+const messages = ref<string[]>([])
+const name = ref('')
+const uri = ref('')
+const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое

-function nextStep() {
-  if (!selectedPlacement.value) {
-    error.value = true
-  } else {
-    error.value = false
-    // Логика перехода к следующему шагу и сохранения места размещения QR-кода
-  }
+// Функция активации следующих шагов
+function activateSections(...sections: string[]) {
+  sections.forEach((section) => {
+    if (!activeSteps.value.includes(section)) {
+      activeSteps.value.push(section)
+    }
+  })
 }
 </script>