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

add profile page for begushiybashkir site

begushiybashkir/bbvue/src/views/Profile.vue

@@ -6,12 +6,36 @@
       <img src="https://via.placeholder.com/100/2e8b57/ffffff?text=У" 
            alt="Аватар"
            style="width: 100px; height: 100px; border-radius: 50%;">
-      <h2>Иван Иванов</h2>
-      <p>Участник с января 2024</p>
+      <h2>{{ user.firstName }} {{ user.lastName }}</h2>
+      <p>Участник с {{ joinDate }}</p>
+      <p class="user-email">{{ user.email }}</p>
+      <p v-if="user.phone" class="user-phone">📱 {{ user.phone }}</p>
+    </div>
+
+    <div class="profile-info">
+      <h3>📋 Информация о пользователе</h3>
+      <div class="info-grid">
+        <div class="info-item">
+          <label>Уровень подготовки:</label>
+          <span class="info-value">{{ experienceLabel }}</span>
+        </div>
+        <div class="info-item">
+          <label>Цели:</label>
+          <span class="info-value">{{ goalsLabel }}</span>
+        </div>
+        <div class="info-item">
+          <label>Рассылка:</label>
+          <span class="info-value">{{ user.newsletter ? '✅ Подключена' : '❌ Отключена' }}</span>
+        </div>
+        <div class="info-item">
+          <label>Роль:</label>
+          <span class="info-value role-badge">{{ user.role }}</span>
+        </div>
+      </div>
     </div>
 
     <div class="profile-stats">
-      <h3>Моя статистика</h3>
+      <h3>📊 Моя статистика</h3>
       <div class="stats-grid">
         <div class="stat-card">
           <h4>🏃 Всего пробег</h4>
@@ -29,7 +53,7 @@
     </div>
 
     <div class="profile-actions">
-      <button class="btn">✏️ Редактировать профиль</button>
+      <button class="btn" @click="editProfile">✏️ Редактировать профиль</button>
       <button class="btn">📊 Подробная статистика</button>
       <button class="btn" @click="$router.push('/training')">📅 Мой план тренировок</button>
     </div>
@@ -41,7 +65,74 @@
 <script>
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Profile'
+  name: 'Profile',
+  data() {
+    return {
+      user: {
+        firstName: 'Иван',
+        lastName: 'Иванов',
+        email: 'ivan.ivanov@example.com',
+        phone: '+7 (999) 123-45-67',
+        experience: 'intermediate',
+        goals: 'halfMarathon',
+        newsletter: true,
+        role: 'user',
+        createdAt: '2024-01-15T10:30:00Z'
+      }
+    }
+  },
+  computed: {
+    joinDate() {
+      if (!this.user.createdAt) return 'января 2024';
+      
+      const date = new Date(this.user.createdAt);
+      const month = date.toLocaleString('ru-RU', { month: 'long' });
+      const year = date.getFullYear();
+      return `${month} ${year}`;
+    },
+    experienceLabel() {
+      const experienceMap = {
+        'beginner': 'Начинающий (0-6 месяцев)',
+        'intermediate': 'Любитель (6-24 месяцев)',
+        'advanced': 'Опытный (2+ лет)',
+        'professional': 'Профессионал'
+      };
+      return experienceMap[this.user.experience] || 'Не указан';
+    },
+    goalsLabel() {
+      const goalsMap = {
+        'health': 'Улучшить здоровье',
+        'weight': 'Сбросить вес',
+        'first5k': 'Пробежать первые 5 км',
+        'first10k': 'Пробежать первые 10 км',
+        'halfMarathon': 'Подготовиться к полумарафону',
+        'marathon': 'Подготовиться к марафону',
+        'improve': 'Улучшить результаты',
+        'social': 'Общение и компания'
+      };
+      return goalsMap[this.user.goals] || 'Не указана';
+    }
+  },
+  methods: {
+    async loadUserData() {
+      try {
+        // TODO: Заменить на реальный API call
+        // const response = await this.$axios.get('/api/user/profile');
+        // this.user = response.data;
+        
+        // Временные данные для демонстрации
+        console.log('Загрузка данных пользователя...');
+      } catch (error) {
+        console.error('Ошибка загрузки данных:', error);
+      }
+    },
+    editProfile() {
+      this.$router.push('/profile/edit');
+    }
+  },
+  mounted() {
+    this.loadUserData();
+  }
 }
 </script>
 
@@ -49,6 +140,66 @@ export default {
 .profile-header {
   text-align: center;
   margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.user-email {
+  color: #666;
+  margin: 0.5rem 0;
+}
+
+.user-phone {
+  color: #666;
+  margin: 0.5rem 0;
+}
+
+.profile-info {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  margin-bottom: 2rem;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.info-item label {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.info-value {
+  color: #555;
+  font-size: 1rem;
+}
+
+.role-badge {
+  background: #2e8b57;
+  color: white;
+  padding: 0.3rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  display: inline-block;
+  width: fit-content;
 }
 
 .stats-grid {
@@ -73,4 +224,26 @@ export default {
   max-width: 300px;
   margin: 2rem auto;
 }
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .profile-actions {
+    max-width: 100%;
+  }
+  
+  .profile-header,
+  .profile-info {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>