update profile

v3
veypi 3 months ago
parent ada216cfd5
commit f188882c0c

@ -367,15 +367,13 @@
<div class="form-group">
<label class="form-label">用户名</label>
<input type="text" class="form-input" !value="user.username"
@input="updateField('username', $event.target.value)" placeholder="请输入用户名">
<input type="text" class="form-input" v:value="user.username" placeholder="请输入用户名">
<div class="form-description">用户名用于登录,建议使用英文或数字</div>
</div>
<div class="form-group">
<label class="form-label">昵称</label>
<input type="text" class="form-input" !value="user.nickname"
@input="updateField('nickname', $event.target.value)" placeholder="请输入昵称">
<input type="text" class="form-input" v:value="user.nickname" placeholder="请输入昵称">
<div class="form-description">昵称将在页面中显示,可以使用中文</div>
</div>
@ -383,8 +381,7 @@
<label class="form-label">头像URL</label>
<div class="avatar-input-group">
<div class="avatar-input">
<input type="text" class="form-input" !value="user.icon" @input="updateField('icon', $event.target.value)"
placeholder="请输入头像图片URL">
<input type="text" class="form-input" v:value="user.icon" placeholder="请输入头像图片URL">
<div class="form-description">输入图片链接地址支持jpg、png、gif格式</div>
</div>
<img v-if="user.icon" :src="user.icon" class="avatar-preview-small" alt="头像预览">
@ -402,15 +399,13 @@
<div class="form-group">
<label class="form-label">电子邮箱</label>
<input type="email" class="form-input" !value="user.email" @input="updateField('email', $event.target.value)"
placeholder="请输入电子邮箱">
<input type="email" class="form-input" v:value="user.email" placeholder="请输入电子邮箱">
<div class="form-description">用于接收重要通知和找回密码</div>
</div>
<div class="form-group">
<label class="form-label">手机号码</label>
<input type="tel" class="form-input" !value="user.phone" @input="updateField('phone', $event.target.value)"
placeholder="请输入手机号码">
<input type="tel" class="form-input" v:value="user.phone" placeholder="请输入手机号码">
<div class="form-description">用于接收验证码和安全提醒</div>
</div>
</div>
@ -474,18 +469,18 @@
// 更新字段
updateField = (field, value) => {
user[field] = value
checkForChanges()
}
// 检查是否有变更
checkForChanges = () => {
hasChanges = (
user.username !== originalUser.username ||
user.nickname !== originalUser.nickname ||
user.icon !== originalUser.icon ||
user.email !== originalUser.email ||
let changes = [
user.username !== originalUser.username,
user.nickname !== originalUser.nickname,
user.icon !== originalUser.icon,
user.email !== originalUser.email,
user.phone !== originalUser.phone
)
]
hasChanges = changes.some(change => change)
}
// 显示错误消息
@ -512,7 +507,6 @@
const response = await $axios.get("/api/user/" + user.id).catch(error => {
console.log(error)
})
console.log(response)
if (response) {
user = {
id: response.id,
@ -538,6 +532,7 @@
// 保存修改
saveProfile = async () => {
try {
checkForChanges()
if (!hasChanges || isSaving) return
errorMessage = ""
@ -587,9 +582,7 @@
// 监听用户数据变化
$watch(() => {
if ($data.hasChanges) {
console.log('Profile has unsaved changes')
}
checkForChanges()
})
// 页面离开前提醒未保存的更改

Loading…
Cancel
Save