视图路径修改
This commit is contained in:
248
schoolNewsWeb/src/views/user/user-center/components/UserCard.vue
Normal file
248
schoolNewsWeb/src/views/user/user-center/components/UserCard.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="user-card">
|
||||
<!-- 标题栏 -->
|
||||
<div class="card-header">
|
||||
<div class="title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<h3 class="title">个人信息</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="user-info-section">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar-wrapper">
|
||||
<img
|
||||
:src="userInfo?.avatar && userInfo.avatar!='default' ? userInfo.avatar : defaultAvatar"
|
||||
:alt="userInfo?.username"
|
||||
class="avatar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 用户详细信息 -->
|
||||
<div class="user-details">
|
||||
<!-- 用户名和性别 -->
|
||||
<div class="user-name-row">
|
||||
<span class="username">{{ userInfo?.username || '未设置昵称' }}</span>
|
||||
<div class="gender-tag" v-if="userInfo?.gender">
|
||||
<img :src="userInfo?.gender === 1 ? maleIcon : femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
|
||||
<span class="gender-text">{{ userInfo?.gender === 1 ? '男' : '女' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<div class="info-row">
|
||||
<span class="info-item">所属部门：{{ userInfo?.deptName || '未分配部门' }}</span>
|
||||
<span class="info-item" v-if="userInfo?.phone">手机号：{{ userInfo?.phone || '未设置' }}</span>
|
||||
<span class="info-item" v-if="userInfo?.email">邮箱：{{ userInfo?.email || '未设置' }}</span>
|
||||
<div class="level-item">
|
||||
<span class="info-label">学习等级：</span>
|
||||
<img :src="levelIcon" alt="等级" class="level-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="edit-btn" @click="handleEdit">编辑资料</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="UserCard">
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { UserVO } from '@/types';
|
||||
import {userProfileApi} from '@/apis/usercenter/profile'
|
||||
import defaultAvatarImg from '@/assets/imgs/default-avatar.png';
|
||||
import maleIcon from '@/assets/imgs/male.svg';
|
||||
import femaleIcon from '@/assets/imgs/female.svg';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getLevelIconUrl } from '@/utils/iconUtils';
|
||||
|
||||
const router = useRouter();
|
||||
const userInfo = ref<UserVO>();
|
||||
|
||||
// 默认头像
|
||||
const defaultAvatar = defaultAvatarImg;
|
||||
|
||||
const levelIcon = computed(() => {
|
||||
const level = userInfo.value?.level || 1;
|
||||
return getLevelIconUrl(level);
|
||||
});
|
||||
|
||||
function handleEdit() {
|
||||
router.push('/profile');
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await userProfileApi.getUserProfile();
|
||||
if(res.success){
|
||||
userInfo.value = res.data;
|
||||
}else{
|
||||
ElMessage.error(res.message || '获取用户信息失败');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
min-height: 190px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #C62828;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 4px 16px;
|
||||
background: rgba(198, 40, 40, 0.05);
|
||||
border: 1px solid #C62828;
|
||||
border-radius: 4px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #C62828;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(198, 40, 40, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(198, 40, 40, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
.gender-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.gender-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.level-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
color: #334155;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user