60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<section>
|
||
|
|
<h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
|
||
|
|
<p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
|
||
|
|
<div class="flex flex-col gap-3 mb-4">
|
||
|
|
<div class="flex items-center gap-2" v-for="option in deliveryOptions" :key="option.method">
|
||
|
|
<RadioButton
|
||
|
|
v-model="model"
|
||
|
|
:inputId="option.method"
|
||
|
|
name="delivery"
|
||
|
|
:value="option.method"
|
||
|
|
@change="handleSelection(option.method)"
|
||
|
|
/>
|
||
|
|
<label :for="option.method">{{ option.label }}</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Сообщение о недоступности -->
|
||
|
|
<p v-if="telegramNotice" class="text-red-500 mb-2">
|
||
|
|
Отправка в Telegram пока в разработке.<br />
|
||
|
|
Этот способ отправки сообщений можно будет выбрать позже.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
|
||
|
|
|
||
|
|
const emit = defineEmits(['nextStep'])
|
||
|
|
const model = defineModel<QRCodeDocument['messageDeliveryMethod']>()
|
||
|
|
|
||
|
|
type DeliveryOption = {
|
||
|
|
label: string
|
||
|
|
method: QRCodeDocument['messageDeliveryMethod']
|
||
|
|
}
|
||
|
|
|
||
|
|
// Локальное состояние для уведомления
|
||
|
|
const telegramNotice = ref(false)
|
||
|
|
|
||
|
|
// Массив вариантов доставки
|
||
|
|
const deliveryOptions: DeliveryOption[] = [
|
||
|
|
{
|
||
|
|
label: 'В браузере (push-уведомления)',
|
||
|
|
method: 'webPushSubscription',
|
||
|
|
},
|
||
|
|
{ label: 'Telegram', method: 'telegram' },
|
||
|
|
]
|
||
|
|
|
||
|
|
// Обработчик выбора
|
||
|
|
function handleSelection(method: QRCodeDocument['messageDeliveryMethod']) {
|
||
|
|
if (method === 'telegram') {
|
||
|
|
telegramNotice.value = true
|
||
|
|
} else {
|
||
|
|
telegramNotice.value = false
|
||
|
|
emit('nextStep')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|