fix: небольшие фиксы фронта
This commit is contained in:
@@ -2,7 +2,6 @@
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GlassCard from '@/components/ui/GlassCard.vue'
|
||||
import AchievementBadge from '@/components/ui/AchievementBadge.vue'
|
||||
import EmptyState from '@/components/ui/EmptyState.vue'
|
||||
|
||||
@@ -11,13 +10,6 @@ const auth = useAuthStore()
|
||||
const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
|
||||
const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))
|
||||
|
||||
const rewards = [
|
||||
{ id: 'r1', title: 'Стикерпак UniVerse', price: 80, available: true },
|
||||
{ id: 'r2', title: 'Термокружка ЮФУ', price: 150, available: true },
|
||||
{ id: 'r3', title: 'Доп. консультация преподавателя', price: 220, available: false },
|
||||
{ id: 'r4', title: 'Цифровой бейдж «Research Explorer»', price: 60, available: true },
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
if (auth.user) void userStore.fetchStudentData(auth.user.id)
|
||||
})
|
||||
@@ -25,7 +17,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="achievements page-content">
|
||||
<h1 class="page-title">Достижения и магазин наград</h1>
|
||||
<h1 class="page-title">Достижения</h1>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Полученные достижения</h2>
|
||||
@@ -66,27 +58,10 @@ onMounted(() => {
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Магазин наград</h2>
|
||||
<div class="rewards">
|
||||
<GlassCard v-for="r in rewards" :key="r.id" class="reward-card">
|
||||
<div class="reward-title">{{ r.title }}</div>
|
||||
<div class="reward-price">{{ r.price }} монет</div>
|
||||
<button class="btn-primary" :disabled="!r.available">
|
||||
{{ r.available ? 'Купить' : 'Недоступно' }}
|
||||
</button>
|
||||
</GlassCard>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.achievements { display: flex; flex-direction: column; gap: 20px; }
|
||||
.list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
|
||||
.reward-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
|
||||
.reward-title { font-weight: 700; }
|
||||
.reward-price { color: var(--color-text-secondary); font-size: 13px; }
|
||||
</style>
|
||||
|
||||
@@ -70,6 +70,7 @@ const typeIcon: Record<string, string> = {
|
||||
min-height: calc(100vh - var(--topbar-height) - 28px - 80px);
|
||||
}
|
||||
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
||||
.header .page-title { margin-bottom: 0; }
|
||||
.notification-groups { display: flex; flex-direction: column; gap: 14px; }
|
||||
.group-title { font-weight: 700; margin-bottom: 10px; }
|
||||
.items { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
@@ -3,10 +3,8 @@ import { computed, onMounted, ref } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GlassCard from '@/components/ui/GlassCard.vue'
|
||||
import CoinChip from '@/components/ui/CoinChip.vue'
|
||||
import ProgressBar from '@/components/ui/ProgressBar.vue'
|
||||
import AchievementBadge from '@/components/ui/AchievementBadge.vue'
|
||||
import DataTable from '@/components/ui/DataTable.vue'
|
||||
import EmptyState from '@/components/ui/EmptyState.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
@@ -54,12 +52,6 @@ const interestTags = ref([
|
||||
|
||||
const notificationSettings = ref({ email: true })
|
||||
|
||||
const historyColumns = [
|
||||
{ key: 'date', label: 'Дата' },
|
||||
{ key: 'description', label: 'Описание' },
|
||||
{ key: 'amount', label: 'Монеты', align: 'right' },
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
void userStore.fetchStudentData(user.value.id)
|
||||
})
|
||||
@@ -69,7 +61,6 @@ onMounted(() => {
|
||||
<div class="profile page-content">
|
||||
<div class="header">
|
||||
<h1 class="page-title">Профиль пользователя</h1>
|
||||
<CoinChip :amount="user.coins" />
|
||||
</div>
|
||||
|
||||
<div class="profile-grid">
|
||||
@@ -118,7 +109,7 @@ onMounted(() => {
|
||||
<EmptyState
|
||||
v-if="!userStore.achievements.length"
|
||||
title="Достижений пока нет"
|
||||
subtitle="Они появятся после посещений, отзывов и начислений."
|
||||
subtitle="Они появятся после посещений и отзывов."
|
||||
/>
|
||||
<div v-else class="achievements">
|
||||
<AchievementBadge
|
||||
@@ -129,25 +120,10 @@ onMounted(() => {
|
||||
:description="a.description"
|
||||
:unlocked="a.unlocked"
|
||||
:unlockedAt="a.unlockedAt"
|
||||
:coins="a.coins"
|
||||
/>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
<GlassCard>
|
||||
<div class="section-title">История начисления монет</div>
|
||||
<EmptyState
|
||||
v-if="!userStore.coinHistory.length"
|
||||
title="История монет пуста"
|
||||
subtitle="Начисления появятся после активностей на платформе."
|
||||
/>
|
||||
<DataTable :columns="historyColumns" :rows="userStore.coinHistory">
|
||||
<template #amount="{ value }">
|
||||
<span :class="value > 0 ? 'positive' : 'negative'">{{ value > 0 ? `+${value}` : value }}</span>
|
||||
</template>
|
||||
</DataTable>
|
||||
</GlassCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -165,6 +141,4 @@ onMounted(() => {
|
||||
.settings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
|
||||
.setting { font-size: 13px; color: var(--color-text-secondary); display: flex; gap: 8px; align-items: center; }
|
||||
.achievements { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
|
||||
.positive { color: #166534; font-weight: 600; }
|
||||
.negative { color: #991B1B; font-weight: 600; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user