72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<template>
|
||
<div class="max-w-md mx-auto p-6 rounded-lg shadow-md text-gray-900">
|
||
<h2 class="text-2xl font-bold mb-6 text-primary text-center">Заполните контактные данные</h2>
|
||
|
||
<form @submit.prevent="onSubmit" class="space-y-4">
|
||
<div>
|
||
<label for="to" class="block text-sm font-medium text-primary mb-2"> Ваш e-mail: </label>
|
||
<input
|
||
id="to"
|
||
v-model="to"
|
||
type="email"
|
||
required
|
||
placeholder="email@example.com"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||
/>
|
||
</div>
|
||
|
||
<UiButton type="submit" :disabled="isLoading" class="w-[400px]">
|
||
<span v-if="isLoading">Перехожу...</span>
|
||
<span v-else>Перейти к оплате</span>
|
||
</UiButton>
|
||
</form>
|
||
|
||
<div v-if="status" class="mt-4 p-3 rounded-md" :class="statusClass">
|
||
{{ status }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
|
||
const to = ref('')
|
||
const status = ref('')
|
||
const isLoading = ref(false)
|
||
|
||
const statusClass = computed(() => {
|
||
if (status.value.includes('Ошибка')) {
|
||
return 'bg-red-100 text-red-700 border border-red-200'
|
||
}
|
||
if (status.value.includes('Успех')) {
|
||
return 'bg-green-100 text-green-700 border border-green-200'
|
||
}
|
||
return 'bg-blue-100 text-blue-700 border-blue-200'
|
||
})
|
||
|
||
async function onSubmit() {
|
||
if (!to.value) {
|
||
status.value = 'Пожалуйста, введите ваш e-mail'
|
||
return
|
||
}
|
||
|
||
isLoading.value = true
|
||
status.value = ''
|
||
|
||
try {
|
||
await $fetch('/api/send-order', {
|
||
method: 'POST',
|
||
body: { to: to.value },
|
||
})
|
||
|
||
status.value = 'Успех! Письмо с подтверждением отправлено на вашу почту.'
|
||
to.value = ''
|
||
} catch (error) {
|
||
console.error('Ошибка отправки письма:', error)
|
||
status.value = `Ошибка отправки: ${error?.data?.message || error.message || 'Неизвестная ошибка'}`
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
</script>
|