mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
4.7 KiB
HTML
199 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>个人信息修改</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
</head>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.profile-container {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="tel"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 10px 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div class="profile-container">
|
|
<h1 class="text-2xl text-center">个人信息修改</h1>
|
|
|
|
<div class="form-group">
|
|
<label>用户名</label>
|
|
<input type="text" !value="user.username" @input="user.username = $event.target.value" placeholder="请输入用户名">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>昵称</label>
|
|
<input type="text" !value="user.nickname" @input="user.nickname = $event.target.value" placeholder="请输入昵称">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>头像URL</label>
|
|
<img v-if="user.icon" :src="user.icon" class="avatar-preview">
|
|
<input type="text" !value="user.icon" @input="user.icon = $event.target.value" placeholder="请输入头像URL">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>电子邮箱</label>
|
|
<input type="email" !value="user.email" @input="user.email = $event.target.value" placeholder="请输入电子邮箱">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>手机号码</label>
|
|
<input type="tel" !value="user.phone" @input="user.phone = $event.target.value" placeholder="请输入手机号码">
|
|
</div>
|
|
|
|
<button @click="saveProfile" class="btn">保存修改</button>
|
|
|
|
<div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
|
|
<div v-if="successMessage" style="color: green; margin-top: 10px;">{{ successMessage }}</div>
|
|
</div>
|
|
|
|
<script setup>
|
|
// 初始化用户数据
|
|
user = {
|
|
id: Guser.uid,
|
|
username: Guser.username,
|
|
nickname: "",
|
|
icon: Guser.icon || "",
|
|
email: "",
|
|
phone: "",
|
|
status: 0
|
|
};
|
|
|
|
errorMessage = "";
|
|
successMessage = "";
|
|
isLoading = false;
|
|
|
|
// 加载用户数据
|
|
loadUserData = async () => {
|
|
try {
|
|
isLoading = true;
|
|
const response = await api.Get("/api/user/" + user.id);
|
|
if (response) {
|
|
user = {
|
|
id: response.id,
|
|
username: response.username || "",
|
|
nickname: response.nickname || "",
|
|
icon: response.icon || "",
|
|
email: response.email || "",
|
|
phone: response.phone || "",
|
|
status: response.status || 0
|
|
};
|
|
}
|
|
} catch (error) {
|
|
errorMessage = "加载用户数据失败: " + error.message;
|
|
} finally {
|
|
isLoading = false;
|
|
}
|
|
};
|
|
|
|
// 保存修改
|
|
saveProfile = async () => {
|
|
try {
|
|
errorMessage = "";
|
|
successMessage = "";
|
|
isLoading = true;
|
|
|
|
// 准备更新数据
|
|
const updateData = {
|
|
username: user.username || null,
|
|
nickname: user.nickname || null,
|
|
icon: user.icon || null,
|
|
email: user.email || null,
|
|
phone: user.phone || null
|
|
};
|
|
|
|
// 发送更新请求
|
|
const response = await api.Patch("/api/user/" + user.id, updateData);
|
|
|
|
if (response) {
|
|
successMessage = "个人信息更新成功！";
|
|
// 更新本地数据
|
|
user = {
|
|
...user,
|
|
username: response.username || user.username,
|
|
nickname: response.nickname || user.nickname,
|
|
icon: response.icon || user.icon,
|
|
email: response.email || user.email,
|
|
phone: response.phone || user.phone
|
|
};
|
|
}
|
|
} catch (error) {
|
|
errorMessage = "保存失败: " + error.message;
|
|
} finally {
|
|
isLoading = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
loadUserData();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|