SettingsPage.vue
6.34 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-04 10:32:03
* @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('/profile/settings/phone')">
<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">{{ phone }}</p>
</div>
<ChevronRightIcon class="w-5 h-5 text-gray-400" />
</div>
</div>
<!-- 退出登录 -->
<div class="p-4" @click="handleLogout">
<div class="flex items-center justify-between">
<div>
<h3 class="text-base font-medium text-red-500">退出登录</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';
import { showConfirmDialog, showToast } from 'vant';
import { useAuth } from '@/contexts/auth';
const $route = useRoute();
const router = useRouter();
const { logout } = useAuth();
useTitle($route.meta.title);
// 用户头像
const userAvatar = ref('');
// 用户名
const username = ref('');
// 手机号
const phone = ref('');
// 退出登录
const handleLogout = () => {
showConfirmDialog({
title: '提示',
message: '确定要退出登录吗？',
})
.then(() => {
// 确认退出
document.cookie = 'PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
document.cookie = 'currentUser=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
logout(); // Clear any other auth state if present
showToast('已退出登录');
router.replace('/');
})
.catch(() => {
// 取消退出
});
};
// 获取用户信息
onMounted(async () => {
try {
const response = await getUserInfoAPI();
if (response.data) {
userAvatar.value = response.data.user.avatar;
username.value = response.data.user.name;
phone.value = response.data.user.mobile;
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
});
</script>