界面
This commit is contained in:
@@ -1,130 +1,124 @@
|
||||
<template>
|
||||
<div class="my-achievements">
|
||||
<div class="achievements-header">
|
||||
<h2>我的成就</h2>
|
||||
<div class="achievement-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">已获得</span>
|
||||
<span class="stat-value">{{ earnedCount }}</span>
|
||||
<span class="stat-total"> / {{ totalCount }}</span>
|
||||
|
||||
<div class="my-achievements">
|
||||
<div class="achievements-header">
|
||||
<h2>我的成就</h2>
|
||||
<div class="achievement-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">已获得</span>
|
||||
<span class="stat-value">{{ earnedCount }}</span>
|
||||
<span class="stat-total"> / {{ totalCount }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">完成率</span>
|
||||
<span class="stat-value">{{ completionRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">完成率</span>
|
||||
<span class="stat-value">{{ completionRate }}%</span>
|
||||
|
||||
<!-- 成就类型筛选 -->
|
||||
<div class="filter-tabs">
|
||||
<el-radio-group v-model="selectedType" @change="filterAchievements">
|
||||
<el-radio-button :label="undefined">全部</el-radio-button>
|
||||
<el-radio-button v-for="option in achievementTypeOptions" :key="option.value" :label="option.value">
|
||||
{{ option.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
|
||||
仅显示已获得
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成就类型筛选 -->
|
||||
<div class="filter-tabs">
|
||||
<el-radio-group v-model="selectedType" @change="filterAchievements">
|
||||
<el-radio-button :label="undefined">全部</el-radio-button>
|
||||
<el-radio-button
|
||||
v-for="option in achievementTypeOptions"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
|
||||
仅显示已获得
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :rows="3" animated />
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :rows="3" animated />
|
||||
</div>
|
||||
|
||||
<!-- 成就网格 -->
|
||||
<div v-else class="achievements-grid">
|
||||
<div
|
||||
class="achievement-item"
|
||||
v-for="achievement in filteredAchievements"
|
||||
:key="achievement.achievementID"
|
||||
:class="{ earned: achievement.obtained, locked: !achievement.obtained }"
|
||||
>
|
||||
<div class="achievement-icon">
|
||||
<el-image
|
||||
:src="getIconUrl(achievement.icon)"
|
||||
:alt="achievement.name"
|
||||
fit="contain"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-placeholder">
|
||||
<el-icon><Trophy /></el-icon>
|
||||
<!-- 成就网格 -->
|
||||
<div v-else class="achievements-grid">
|
||||
<div class="achievement-item" v-for="achievement in filteredAchievements" :key="achievement.achievementID"
|
||||
:class="{ earned: achievement.obtained, locked: !achievement.obtained }">
|
||||
<div class="achievement-icon">
|
||||
<el-image :src="getIconUrl(achievement.icon)" :alt="achievement.name" fit="contain">
|
||||
<template #error>
|
||||
<div class="image-placeholder">
|
||||
<el-icon>
|
||||
<Trophy />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="achievement-badge" v-if="achievement.obtained">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="achievement-level" v-if="achievement.level">
|
||||
Lv.{{ achievement.level }}
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="achievement-badge" v-if="achievement.obtained">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
<div class="achievement-level" v-if="achievement.level">
|
||||
Lv.{{ achievement.level }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-info">
|
||||
<div class="achievement-header">
|
||||
<h3>{{ achievement.name }}</h3>
|
||||
<el-tag
|
||||
:type="achievement.type === 1 ? 'success' : 'primary'"
|
||||
size="small"
|
||||
>
|
||||
{{ getAchievementTypeLabel(achievement.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="achievement-description">{{ achievement.description }}</p>
|
||||
|
||||
<!-- 条件说明 -->
|
||||
<div class="achievement-condition">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="achievement-progress" v-if="!achievement.obtained">
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">进度</span>
|
||||
<span class="progress-text">
|
||||
{{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
|
||||
</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="achievement.progressPercentage || 0"
|
||||
:color="progressColor"
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 获得信息 -->
|
||||
<div class="achievement-footer" v-if="achievement.obtained">
|
||||
<div class="achievement-date">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span>{{ formatDate(achievement.obtainTime) }}</span>
|
||||
</div>
|
||||
<div class="achievement-points" v-if="achievement.points">
|
||||
<el-icon><Star /></el-icon>
|
||||
<span>+{{ achievement.points }} 积分</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未获得时显示积分奖励 -->
|
||||
<div class="achievement-reward" v-else-if="achievement.points">
|
||||
<el-icon><Present /></el-icon>
|
||||
<span>奖励 {{ achievement.points }} 积分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-info">
|
||||
<div class="achievement-header">
|
||||
<h3>{{ achievement.name }}</h3>
|
||||
<el-tag :type="achievement.type === 1 ? 'success' : 'primary'" size="small">
|
||||
{{ getAchievementTypeLabel(achievement.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="achievement-description">{{ achievement.description }}</p>
|
||||
|
||||
<!-- 条件说明 -->
|
||||
<div class="achievement-condition">
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
<span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="achievement-progress" v-if="!achievement.obtained">
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">进度</span>
|
||||
<span class="progress-text">
|
||||
{{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
|
||||
</span>
|
||||
</div>
|
||||
<el-progress :percentage="achievement.progressPercentage || 0" :color="progressColor"
|
||||
:show-text="false" />
|
||||
</div>
|
||||
|
||||
<!-- 获得信息 -->
|
||||
<div class="achievement-footer" v-if="achievement.obtained">
|
||||
<div class="achievement-date">
|
||||
<el-icon>
|
||||
<Calendar />
|
||||
</el-icon>
|
||||
<span>{{ formatDate(achievement.obtainTime) }}</span>
|
||||
</div>
|
||||
<div class="achievement-points" v-if="achievement.points">
|
||||
<el-icon>
|
||||
<Star />
|
||||
</el-icon>
|
||||
<span>+{{ achievement.points }} 积分</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未获得时显示积分奖励 -->
|
||||
<div class="achievement-reward" v-else-if="achievement.points">
|
||||
<el-icon>
|
||||
<Present />
|
||||
</el-icon>
|
||||
<span>奖励 {{ achievement.points }} 积分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty v-if="!loading && filteredAchievements.length === 0" description="暂无成就数据" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="!loading && filteredAchievements.length === 0"
|
||||
description="暂无成就数据"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -135,7 +129,7 @@ import { achievementApi } from '@/apis/achievement';
|
||||
import type { AchievementVO } from '@/types';
|
||||
import { AchievementEnumHelper } from '@/types/enums/achievement-enums';
|
||||
import { getAchievementIconUrl } from '@/utils/iconUtils';
|
||||
|
||||
import { UserCenterLayout } from '@/views/user/user-center';
|
||||
// 响应式数据
|
||||
const loading = ref(false);
|
||||
const achievements = ref<AchievementVO[]>([]);
|
||||
@@ -171,17 +165,17 @@ const completionRate = computed(() => {
|
||||
// 筛选后的成就列表
|
||||
const filteredAchievements = computed(() => {
|
||||
let result = achievements.value;
|
||||
|
||||
|
||||
// 按类型筛选
|
||||
if (selectedType.value !== undefined) {
|
||||
result = result.filter(a => a.type === selectedType.value);
|
||||
}
|
||||
|
||||
|
||||
// 仅显示已获得
|
||||
if (showOnlyEarned.value) {
|
||||
result = result.filter(a => a.obtained);
|
||||
}
|
||||
|
||||
|
||||
// 排序：已获得的在前，按等级排序
|
||||
return result.sort((a, b) => {
|
||||
if (a.obtained !== b.obtained) {
|
||||
@@ -207,10 +201,10 @@ function formatConditionValue(conditionType?: number, conditionValue?: number):
|
||||
function formatDate(dateStr?: string): string {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -252,7 +246,7 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10%;
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
@@ -265,23 +259,23 @@ onMounted(() => {
|
||||
.achievement-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
|
||||
.stat-total {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
@@ -320,33 +314,33 @@ onMounted(() => {
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
|
||||
|
||||
&.earned {
|
||||
border-color: #52c41a;
|
||||
background: linear-gradient(135deg, #f6ffed, #ffffff);
|
||||
|
||||
|
||||
.achievement-icon {
|
||||
:deep(.el-image__inner) {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.locked {
|
||||
opacity: 0.75;
|
||||
|
||||
|
||||
.achievement-icon {
|
||||
:deep(.el-image__inner) {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover.earned {
|
||||
box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
&:hover.locked {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -357,12 +351,12 @@ onMounted(() => {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
:deep(.el-image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -414,13 +408,13 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
|
||||
.achievement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@@ -447,7 +441,7 @@ onMounted(() => {
|
||||
padding: 6px 12px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
|
||||
|
||||
:deep(.el-icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -459,20 +453,20 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
||||
.progress-label {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.progress-text {
|
||||
font-size: 13px;
|
||||
color: #1890ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-progress) {
|
||||
.el-progress-bar__outer {
|
||||
background-color: #f0f0f0;
|
||||
@@ -486,7 +480,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
|
||||
.achievement-date,
|
||||
.achievement-points {
|
||||
display: flex;
|
||||
@@ -494,12 +488,12 @@ onMounted(() => {
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
|
||||
:deep(.el-icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.achievement-points {
|
||||
color: #faad14;
|
||||
font-weight: 600;
|
||||
@@ -516,7 +510,7 @@ onMounted(() => {
|
||||
padding: 6px 12px;
|
||||
background: #fffbe6;
|
||||
border-radius: 6px;
|
||||
|
||||
|
||||
:deep(.el-icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -533,12 +527,12 @@ onMounted(() => {
|
||||
.achievements-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.achievement-stats {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
||||
.filter-tabs {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
@@ -546,4 +540,3 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user