路由更新
This commit is contained in:
177
schoolNewsWeb/src/views/user-center/LearningRecordsView.vue
Normal file
177
schoolNewsWeb/src/views/user-center/LearningRecordsView.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="learning-records">
|
||||
<div class="records-header">
|
||||
<h2>学习记录</h2>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="records-list">
|
||||
<div class="record-item" v-for="record in records" :key="record.id">
|
||||
<div class="record-icon">
|
||||
<i :class="getRecordIcon(record.type)"></i>
|
||||
</div>
|
||||
<div class="record-content">
|
||||
<h3>{{ record.title }}</h3>
|
||||
<p class="record-description">{{ record.description }}</p>
|
||||
<div class="record-meta">
|
||||
<span class="record-type">{{ record.typeName }}</span>
|
||||
<span class="record-duration">学习时长：{{ record.duration }}分钟</span>
|
||||
<span class="record-date">{{ record.learnDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-progress">
|
||||
<div class="progress-circle" :class="`progress-${record.status}`">
|
||||
<span>{{ record.progress }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElDatePicker } from 'element-plus';
|
||||
|
||||
const dateRange = ref<[Date, Date] | null>(null);
|
||||
const records = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载学习记录
|
||||
});
|
||||
|
||||
function handleDateChange() {
|
||||
// TODO: 根据日期筛选记录
|
||||
}
|
||||
|
||||
function getRecordIcon(type: string) {
|
||||
const iconMap: Record<string, string> = {
|
||||
'article': '📄',
|
||||
'video': '🎥',
|
||||
'audio': '🎵',
|
||||
'course': '📚'
|
||||
};
|
||||
return iconMap[type] || '📄';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.learning-records {
|
||||
.records-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #C62828;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.record-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
flex: 1;
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.record-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.record-meta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.record-type {
|
||||
color: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.record-duration,
|
||||
.record-date {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record-progress {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
&.progress-completed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
&.progress-in-progress {
|
||||
background: #fff3e0;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
&.progress-not-started {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
200
schoolNewsWeb/src/views/user-center/MyAchievementsView.vue
Normal file
200
schoolNewsWeb/src/views/user-center/MyAchievementsView.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="my-achievements">
|
||||
<div class="achievements-header">
|
||||
<h2>我的成就</h2>
|
||||
<div class="achievement-stats">
|
||||
<span>已获得 <strong>{{ earnedCount }}</strong> / {{ totalCount }} 个成就</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="achievements-grid">
|
||||
<div
|
||||
class="achievement-item"
|
||||
v-for="achievement in achievements"
|
||||
:key="achievement.id"
|
||||
:class="{ earned: achievement.earned, locked: !achievement.earned }"
|
||||
>
|
||||
<div class="achievement-icon">
|
||||
<img :src="achievement.icon" :alt="achievement.name" />
|
||||
<div class="achievement-badge" v-if="achievement.earned">✓</div>
|
||||
</div>
|
||||
<div class="achievement-info">
|
||||
<h3>{{ achievement.name }}</h3>
|
||||
<p class="achievement-description">{{ achievement.description }}</p>
|
||||
<div class="achievement-progress" v-if="!achievement.earned && achievement.progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: achievement.progress + '%' }"></div>
|
||||
</div>
|
||||
<span class="progress-text">{{ achievement.progress }}%</span>
|
||||
</div>
|
||||
<div class="achievement-date" v-if="achievement.earned">
|
||||
获得时间：{{ achievement.earnedDate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
|
||||
const achievements = ref<any[]>([]);
|
||||
|
||||
const earnedCount = computed(() => {
|
||||
return achievements.value.filter(a => a.earned).length;
|
||||
});
|
||||
|
||||
const totalCount = computed(() => {
|
||||
return achievements.value.length;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载成就数据
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-achievements {
|
||||
.achievements-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-stats {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
|
||||
strong {
|
||||
color: #C62828;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.achievement-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.earned {
|
||||
border-color: #C62828;
|
||||
background: linear-gradient(135deg, #fff5f5, #ffffff);
|
||||
|
||||
.achievement-icon {
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.locked {
|
||||
opacity: 0.6;
|
||||
|
||||
.achievement-icon {
|
||||
img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover.earned {
|
||||
box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-badge {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.achievement-info {
|
||||
flex: 1;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.achievement-progress {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #C62828, #E53935);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
197
schoolNewsWeb/src/views/user-center/MyFavoritesView.vue
Normal file
197
schoolNewsWeb/src/views/user-center/MyFavoritesView.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="my-favorites">
|
||||
<div class="favorites-header">
|
||||
<h2>我的收藏</h2>
|
||||
<div class="filter-tabs">
|
||||
<div
|
||||
class="filter-tab"
|
||||
v-for="filter in filters"
|
||||
:key="filter.key"
|
||||
:class="{ active: activeFilter === filter.key }"
|
||||
@click="activeFilter = filter.key"
|
||||
>
|
||||
{{ filter.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="favorites-grid">
|
||||
<div class="favorite-item" v-for="item in filteredFavorites" :key="item.id">
|
||||
<div class="item-thumbnail">
|
||||
<img :src="item.thumbnail" :alt="item.title" />
|
||||
<div class="item-type">{{ item.typeName }}</div>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p class="item-summary">{{ item.summary }}</p>
|
||||
<div class="item-footer">
|
||||
<span class="item-date">收藏于 {{ item.favoriteDate }}</span>
|
||||
<div class="item-actions">
|
||||
<el-button size="small" @click="viewItem(item)">查看</el-button>
|
||||
<el-button size="small" type="danger" @click="removeFavorite(item)">取消收藏</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElButton, ElMessage } from 'element-plus';
|
||||
|
||||
const activeFilter = ref('all');
|
||||
const favorites = ref<any[]>([]);
|
||||
|
||||
const filters = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'article', label: '文章' },
|
||||
{ key: 'video', label: '视频' },
|
||||
{ key: 'audio', label: '音频' },
|
||||
{ key: 'course', label: '课程' }
|
||||
];
|
||||
|
||||
const filteredFavorites = computed(() => {
|
||||
if (activeFilter.value === 'all') return favorites.value;
|
||||
return favorites.value.filter(item => item.type === activeFilter.value);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载收藏数据
|
||||
});
|
||||
|
||||
function viewItem(item: any) {
|
||||
// TODO: 跳转到详情页
|
||||
}
|
||||
|
||||
function removeFavorite(item: any) {
|
||||
// TODO: 取消收藏
|
||||
ElMessage.success('已取消收藏');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-favorites {
|
||||
.favorites-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 8px 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #ffe6e6;
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #C62828;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.favorites-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.favorite-item {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #C62828;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: #f5f5f5;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.item-type {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
padding: 4px 12px;
|
||||
background: rgba(198, 40, 40, 0.9);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
padding: 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-summary {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
185
schoolNewsWeb/src/views/user-center/UserCenterView.vue
Normal file
185
schoolNewsWeb/src/views/user-center/UserCenterView.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="user-center-page">
|
||||
<div class="user-banner">
|
||||
<div class="user-avatar">
|
||||
<img :src="userInfo.avatar" alt="用户头像" />
|
||||
</div>
|
||||
<div class="user-basic">
|
||||
<h2>{{ userInfo.name }}</h2>
|
||||
<p>{{ userInfo.bio }}</p>
|
||||
</div>
|
||||
<div class="user-stats">
|
||||
<div class="stat-item" v-for="stat in stats" :key="stat.label">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-tabs">
|
||||
<div
|
||||
class="center-tab"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-content">
|
||||
<component :is="currentComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import LearningRecords from './components/LearningRecords.vue';
|
||||
import MyFavorites from './components/MyFavorites.vue';
|
||||
import MyAchievements from './components/MyAchievements.vue';
|
||||
|
||||
const store = useStore();
|
||||
const activeTab = ref('records');
|
||||
|
||||
const userInfo = computed(() => store.getters['auth/userInfo']);
|
||||
|
||||
const stats = ref([
|
||||
{ label: '学习天数', value: 0 },
|
||||
{ label: '学习时长', value: '0h' },
|
||||
{ label: '完成任务', value: 0 },
|
||||
{ label: '获得成就', value: 0 }
|
||||
]);
|
||||
|
||||
const tabs = [
|
||||
{ key: 'records', label: '学习记录' },
|
||||
{ key: 'favorites', label: '我的收藏' },
|
||||
{ key: 'achievements', label: '我的成就' }
|
||||
];
|
||||
|
||||
const componentMap: Record<string, any> = {
|
||||
'records': LearningRecords,
|
||||
'favorites': MyFavorites,
|
||||
'achievements': MyAchievements
|
||||
};
|
||||
|
||||
const currentComponent = computed(() => componentMap[activeTab.value]);
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载用户统计数据
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-center-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-banner {
|
||||
background: linear-gradient(135deg, #C62828, #E53935);
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4px solid white;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.user-basic {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.center-tabs {
|
||||
background: white;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.center-tab {
|
||||
padding: 16px 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #C62828;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-content {
|
||||
background: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user