You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.4 KiB
139 lines
3.4 KiB
<template>
|
|
<div class="personal-info">
|
|
<div class="info-container">
|
|
<!-- 头像 -->
|
|
<div class="avatar-container">
|
|
<img v-if="currentUser.isAdmin" class="avatar" src="../assets/user/avatar.png" alt="User Avatar" />
|
|
<img v-else class="avatar" src="../assets/user/user.png" alt="User Avatar" />
|
|
</div>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="user-info">
|
|
<p class="user-item"><strong>账户类型:</strong> {{ currentUser.isAdmin ? '管理员' : '普通用户' }}</p>
|
|
|
|
<!-- 可编辑的昵称 -->
|
|
<p class="user-item">
|
|
<strong>昵称:</strong>
|
|
<input v-model="currentUser.username" class="editable-input" type="text" />
|
|
</p>
|
|
|
|
<!-- 可编辑的个性签名 -->
|
|
<p class="user-item">
|
|
<strong>个性签名:</strong>
|
|
<input v-model="currentUser.signature" class="editable-input" type="text" />
|
|
</p>
|
|
|
|
<!-- 手机号码 (仅普通用户显示) -->
|
|
<p v-if="!currentUser.isAdmin" class="user-item">
|
|
<strong>手机号码:</strong>
|
|
<input v-model="currentUser.phone" class="editable-input" type="text" />
|
|
</p>
|
|
|
|
<!-- 可编辑的生日 -->
|
|
<p class="user-item">
|
|
<strong>生日:</strong>
|
|
<input v-model="currentUser.birthday" class="editable-input" type="date" />
|
|
</p>
|
|
|
|
<p class="user-item">
|
|
<el-button type="primary" @click="saveUser" style="width: 100%;" v-if="!currentUser.isAdmin">保存</el-button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted ,reactive} from 'vue';
|
|
import { useUserStore } from '../stores/user';
|
|
import { IUserInfo } from '../model/model';
|
|
|
|
// 从Pinia中获取user store
|
|
const userStore = useUserStore();
|
|
|
|
const currentUser = reactive<IUserInfo>({
|
|
isAdmin: false,
|
|
nickname: '',
|
|
signature: '',
|
|
phone: '',
|
|
birthday: '',
|
|
username: '',
|
|
password: ''
|
|
});
|
|
|
|
onMounted(() => {
|
|
// 获取当前用户
|
|
const user = userStore.getCurrentUser()
|
|
currentUser.username = user.username || '';
|
|
currentUser.nickname = user.nickname || '';
|
|
currentUser.signature = user.signature || '';
|
|
currentUser.phone = user.phone || '';
|
|
currentUser.birthday = user.birthday || '';
|
|
currentUser.isAdmin = user.isAdmin || false;
|
|
currentUser.password = user.password || '';
|
|
console.log("current = ", currentUser);
|
|
})
|
|
|
|
const saveUser = () => {
|
|
// 假设 currentUser 是你正在编辑的用户信息
|
|
userStore.updateUser(currentUser); // 保存修改后的用户信息
|
|
console.log('用户信息已更新:', currentUser);
|
|
ElMessage.success("保存成功")
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 整体布局居中 */
|
|
.personal-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.info-container {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
text-align: left;
|
|
width: 350px;
|
|
}
|
|
|
|
.avatar-container {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.user-info {
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.user-item {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.user-item strong {
|
|
color: #555;
|
|
}
|
|
|
|
/* 样式修改：让输入框看起来更整洁 */
|
|
.editable-input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-top: 5px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|