SettingsPage.vue
5.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-08 16:08:24
* @FilePath: /mlaj/src/views/profile/SettingsPage.vue
* @Description: 用户设置页面
-->
<template>
<AppLayout>
<div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
<div class="px-4 py-6">
<FrostedGlass class="rounded-xl overflow-hidden">
<!-- 设置列表 -->
<div class="divide-y divide-gray-100">
<!-- 头像设置 -->
<div class="p-4" @click="router.push('/profile/settings/avatar')">
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- <div class="relative">
<img
:src="userAvatar || '/src/assets/images/avatar1.jpg'"
alt="用户头像"
class="w-16 h-16 rounded-full object-cover"
/>
</div> -->
<div class="ml-4">
<h3 class="text-base font-medium text-gray-900">修改头像</h3>
<p class="text-sm text-gray-500">支持 jpg、png 格式，大小不超过 2MB</p>
</div>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 用户名设置 -->
<div class="p-4" @click="router.push('/profile/settings/username')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">修改用户名</h3>
<p class="text-sm text-gray-500">{{ username }}</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 密码设置 -->
<!-- <div class="p-4" @click="router.push('/profile/settings/password')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">修改密码</h3>
<p class="text-sm text-gray-500">定期修改密码更安全</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div> -->
<!-- 视频上传 -->
<div class="p-4" @click="router.push('/upload_video')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">视频上传</h3>
<p class="text-sm text-gray-500">视频上传</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 音频播放 -->
<div class="p-4" @click="router.push('/profile/settings/audio')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">音频播放</h3>
<p class="text-sm text-gray-500">播放音频文件</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 课程学习 -->
<div class="p-4" @click="router.push('/study')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">课程学习</h3>
<p class="text-sm text-gray-500">课程学习</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 课程集合 -->
<div class="p-4" @click="router.push('/studyCourse')">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-gray-900">课程集合</h3>
<p class="text-sm text-gray-500">课程集合</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
</div>
</FrostedGlass>
</div>
</div>
</AppLayout>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue';
import FrostedGlass from '@/components/ui/FrostedGlass.vue';
import { ChevronRightIcon } from '@heroicons/vue/24/outline';
import { useTitle } from '@vueuse/core';
import { getUserInfoAPI } from '@/api/users';
const $route = useRoute();
const router = useRouter();
useTitle($route.meta.title);
// 用户头像
const userAvatar = ref('');
// 用户名
const username = ref('');
// 获取用户信息
onMounted(async () => {
try {
const response = await getUserInfoAPI();
if (response.data) {
userAvatar.value = response.data.user.avatar;
username.value = response.data.user.name;
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
});
</script>