valitovgaziz
144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<div class="appeals">
|
|
<section class="page-hero">
|
|
<div class="container">
|
|
<h1>Обращения</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div v-if="!isAuthenticated" class="appeals__guest">
|
|
<p class="body-text--gray">Войдите, чтобы создать обращение</p>
|
|
<NuxtLink to="/auth/login" class="btn btn--primary btn--md">
|
|
Войти
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<form v-else @submit.prevent="handleSubmit" class="appeals__form">
|
|
<div class="form-group">
|
|
<label class="form-label">Тема обращения</label>
|
|
<select v-model="form.subject" class="form-select" required>
|
|
<option value="">Выберите тему</option>
|
|
<option value="bug">Ошибка на сайте</option>
|
|
<option value="suggestion">Предложение</option>
|
|
<option value="question">Вопрос</option>
|
|
<option value="other">Другое</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Сообщение</label>
|
|
<textarea
|
|
v-model="form.message"
|
|
class="form-input"
|
|
rows="6"
|
|
placeholder="Опишите ваше обращение"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn--primary btn--md" :disabled="sending">
|
|
{{ sending ? 'Отправка...' : 'Отправить' }}
|
|
</button>
|
|
|
|
<p v-if="success" class="appeals__success">
|
|
Обращение отправлено
|
|
</p>
|
|
<p v-if="error" class="appeals__error">{{ error }}</p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
title: 'Обращения',
|
|
})
|
|
|
|
const { isAuthenticated } = useAuth()
|
|
|
|
const form = reactive({
|
|
subject: '',
|
|
message: '',
|
|
})
|
|
const sending = ref(false)
|
|
const success = ref(false)
|
|
const error = ref('')
|
|
|
|
async function handleSubmit() {
|
|
sending.value = true
|
|
success.value = false
|
|
error.value = ''
|
|
try {
|
|
const api = useApi()
|
|
await api.post('/appeals', {
|
|
subject: form.subject,
|
|
message: form.message,
|
|
})
|
|
success.value = true
|
|
form.subject = ''
|
|
form.message = ''
|
|
} catch (e: any) {
|
|
error.value = e.message || 'Ошибка отправки'
|
|
} finally {
|
|
sending.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-hero {
|
|
background: var(--color-primary);
|
|
padding: 60px 0;
|
|
text-align: center;
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.page-hero h1 {
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.appeals__guest {
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.appeals__form {
|
|
max-width: 560px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
textarea.form-input {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.appeals__success {
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-small);
|
|
color: var(--color-green-accent);
|
|
padding: 8px;
|
|
background: var(--color-bg-success);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.appeals__error {
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-small);
|
|
color: var(--color-red);
|
|
padding: 8px;
|
|
background: var(--color-bg-error);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
</style>
|