modified: begushiybashkir/bbvue/src/views/ProfileEdit.vue

fix bag with not upate info into pinia store
This commit is contained in:
2025-10-12 10:35:38 +05:00
parent 38bee8e077
commit 389b3d8a19
+40 -90
View File
@@ -8,64 +8,29 @@
<div class="form-row">
<div class="form-group">
<label for="firstName">Имя *</label>
<input
id="firstName"
v-model="formData.firstName"
type="text"
class="form-input"
placeholder="Введите ваше имя"
required
:disabled="loading"
>
<input id="firstName" v-model="formData.firstName" type="text" class="form-input"
placeholder="Введите ваше имя" required :disabled="loading">
</div>
<div class="form-group">
<label for="lastName">Фамилия *</label>
<input
id="lastName"
v-model="formData.lastName"
type="text"
class="form-input"
placeholder="Введите вашу фамилию"
required
:disabled="loading"
>
<input id="lastName" v-model="formData.lastName" type="text" class="form-input"
placeholder="Введите вашу фамилию" required :disabled="loading">
</div>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input
id="email"
v-model="formData.email"
type="email"
class="form-input"
placeholder="example@mail.ru"
required
:disabled="loading"
>
</div>
<div class="form-group">
<label for="phone">Телефон</label>
<input
id="phone"
v-model="formData.phone"
type="tel"
class="form-input"
placeholder="+7 (999) 123-45-67"
:disabled="loading"
>
<input id="email" v-model="formData.email" type="email" class="form-input" placeholder="example@mail.ru"
required readonly disabled style="background-color: #f5f5f5; cursor: not-allowed;">
<small style="color: #666; font-size: 0.9rem;">
Email нельзя изменить. Для смены email обратитесь в поддержку.
</small>
</div>
<div class="form-group">
<label for="experience">Уровень подготовки</label>
<select
id="experience"
v-model="formData.experience"
class="form-input"
:disabled="loading"
>
<select id="experience" v-model="formData.experience" class="form-input" :disabled="loading">
<option value="">Выберите уровень</option>
<option value="beginner">Начинающий (0-6 месяцев)</option>
<option value="intermediate">Любитель (6-24 месяцев)</option>
@@ -76,12 +41,7 @@
<div class="form-group">
<label for="goals">Цели</label>
<select
id="goals"
v-model="formData.goals"
class="form-input"
:disabled="loading"
>
<select id="goals" v-model="formData.goals" class="form-input" :disabled="loading">
<option value="">Выберите цель</option>
<option value="health">Улучшить здоровье</option>
<option value="weight">Сбросить вес</option>
@@ -96,32 +56,18 @@
<div class="form-group checkbox-group">
<label class="checkbox-label">
<input
v-model="formData.newsletter"
type="checkbox"
class="checkbox"
:disabled="loading"
>
<input v-model="formData.newsletter" type="checkbox" class="checkbox" :disabled="loading">
<span class="checkmark"></span>
Хочу получать новости о тренировках и мероприятиях
</label>
</div>
<div class="form-actions">
<button
type="submit"
class="btn btn-primary"
:disabled="loading || !isFormChanged"
>
<button type="submit" class="btn btn-primary" :disabled="loading || !isFormChanged">
{{ loading ? 'Сохранение...' : '💾 Сохранить изменения' }}
</button>
<button
type="button"
class="btn btn-secondary"
@click="cancelEdit"
:disabled="loading"
>
<button type="button" class="btn btn-secondary" @click="cancelEdit" :disabled="loading">
Отмена
</button>
</div>
@@ -144,7 +90,6 @@
<script>
import { useAuthStore } from '../stores/auth'
import axios from 'axios'
export default {
name: 'ProfileEdit',
@@ -157,7 +102,7 @@ export default {
formData: {
firstName: '',
lastName: '',
email: '',
email: '', // Только для отображения, не для изменения
phone: '',
experience: '',
goals: '',
@@ -174,7 +119,12 @@ export default {
return this.authStore.user
},
isFormChanged() {
return JSON.stringify(this.formData) !== JSON.stringify(this.originalData)
// Исключаем email из сравнения, так как он не изменяется
const formDataCopy = { ...this.formData }
const originalDataCopy = { ...this.originalData }
delete formDataCopy.email
delete originalDataCopy.email
return JSON.stringify(formDataCopy) !== JSON.stringify(originalDataCopy)
}
},
methods: {
@@ -183,7 +133,7 @@ export default {
this.formData = {
firstName: this.user.firstName || '',
lastName: this.user.lastName || '',
email: this.user.email || '',
email: this.user.email || '', // Только для отображения
phone: this.user.phone || '',
experience: this.user.experience || '',
goals: this.user.goals || '',
@@ -198,25 +148,25 @@ export default {
this.success = false
try {
const response = await axios.put(
'https://begushiybashkir.ru/api/v1/auth/user/editProfile',
this.formData,
{
headers: {
'Authorization': `Bearer ${this.authStore.token}`
}
}
)
// Используем метод updateProfile из authStore
const result = await this.authStore.updateProfile({
firstName: this.formData.firstName,
lastName: this.formData.lastName,
phone: this.formData.phone,
experience: this.formData.experience,
goals: this.formData.goals,
newsletter: this.formData.newsletter
})
// Обновляем данные в store
this.authStore.setUser(response.data)
if (result.success) {
this.originalData = { ...this.formData }
this.success = true
// Скрываем сообщение об успехе через 3 секунды
setTimeout(() => {
this.success = false
}, 3000)
// Принудительно обновляем профиль в сторе
await this.authStore.fetchProfile()
} else {
this.error = result.error
}
} catch (err) {
this.error = err.response?.data?.message || 'Ошибка обновления профиля'
@@ -252,7 +202,7 @@ export default {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.form-row {
@@ -318,12 +268,12 @@ export default {
flex-shrink: 0;
}
.checkbox:checked + .checkmark {
.checkbox:checked+.checkmark {
background-color: #2e8b57;
border-color: #2e8b57;
}
.checkbox:checked + .checkmark::after {
.checkbox:checked+.checkmark::after {
content: '✓';
color: white;
position: absolute;