serega404
047611fd24
🚀 Create and publish a Docker image / Detect changes in backend and frontend (push) Successful in 5s
🚀 Create and publish a Docker image / Build & publish backend image (push) Successful in 8s
🚀 Create and publish a Docker image / Update stack on Portainer (push) Successful in 3s
76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import GlassCard from '@/components/ui/GlassCard.vue'
|
|
import AchievementBadge from '@/components/ui/AchievementBadge.vue'
|
|
|
|
const userStore = useUserStore()
|
|
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 },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="achievements page-content">
|
|
<h1 class="page-title">Достижения и магазин наград</h1>
|
|
|
|
<section>
|
|
<h2 class="section-title">Полученные достижения</h2>
|
|
<div class="list">
|
|
<AchievementBadge
|
|
v-for="a in unlocked"
|
|
:key="a.id"
|
|
:icon="a.icon"
|
|
:title="a.title"
|
|
:description="a.description"
|
|
:unlocked="a.unlocked"
|
|
:unlockedAt="a.unlockedAt"
|
|
:coins="a.coins"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="section-title">Заблокированные</h2>
|
|
<div class="list">
|
|
<AchievementBadge
|
|
v-for="a in locked"
|
|
:key="a.id"
|
|
:icon="a.icon"
|
|
:title="a.title"
|
|
:description="a.description"
|
|
:unlocked="a.unlocked"
|
|
/>
|
|
</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>
|