WindowBird/OfficeSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个人信息页面

Browse Source
This commit is contained in:
WindowBird 2025-11-22 09:12:08 +08:00
parent 989b61c55d
commit 45b493ee98
3 changed files with 650 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
components/my/My.vue
View File

@ -1,5 +1,46 @@
<template>
<view class="mine-page">
<!-- 个人资料卡片 -->
<view class="profile-card" @click="goToProfile">
<view class="profile-header">
<view class="avatar-wrapper">
<image
v-if="userInfo?.user?.avatar"
class="avatar-img"
:src="userInfo.user.avatar"
mode="aspectFill"
/>
<view v-else class="avatar-placeholder">
<text class="avatar-text">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
</view>
</view>
<view class="profile-info">
<view class="name-row">
<text class="user-name">{{ userInfo?.user?.nickName || '--' }}</text>
<text v-if="userInfo?.roles?.[0]" class="role-badge">{{ userInfo.roles[0] }}</text>
</view>
<text class="dept-name">{{ userInfo?.user?.deptName || '--' }}</text>
</view>
<view class="arrow-icon">›</view>
</view>
<!-- <view class="profile-stats">-->
<!-- <view class="stat-item">-->
<!-- <text class="stat-value">{{ userInfo?.user?.taskCount || 0 }}</text>-->
<!-- <text class="stat-label">任务数</text>-->
<!-- </view>-->
<!-- <view class="stat-divider"></view>-->
<!-- <view class="stat-item">-->
<!-- <text class="stat-value">{{ userInfo?.user?.projectCount || 0 }}</text>-->
<!-- <text class="stat-label">项目数</text>-->
<!-- </view>-->
<!-- <view class="stat-divider"></view>-->
<!-- <view class="stat-item">-->
<!-- <text class="stat-value">{{ userInfo?.user?.taskNum || 0 }}</text>-->
<!-- <text class="stat-label">任务编号</text>-->
<!-- </view>-->
<!-- </view>-->
</view>
<view
class="card settings-card"
v-if="showPrivateSwitch"
@ -183,6 +224,19 @@ const handleUpdate = () => {
showUpdateDialog(updateData)
}
// 获取头像文字
const getAvatarText = (name) => {
if (!name) return '?'
return name.charAt(0).toUpperCase()
}
// 跳转到个人资料详情页
const goToProfile = () => {
uni.navigateTo({
url: '/pages/my/profile/index'
})
}
const onLogout = async () => {
if (loading.value) return
loading.value = true
@ -203,22 +257,157 @@ const onLogout = async () => {
<style lang="scss" scoped>
.mine-page {
padding: 24rpx;
background-color: #f6f7fb;
min-height: 100vh;
box-sizing: border-box;
}
.profile-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 24rpx;
padding: 40rpx 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.profile-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.profile-header {
display: flex;
align-items: center;
margin-bottom: 32rpx;
position: relative;
z-index: 1;
}
.avatar-wrapper {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
border: 4rpx solid rgba(255, 255, 255, 0.3);
margin-right: 24rpx;
flex-shrink: 0;
}
.avatar-img {
width: 100%;
height: 100%;
}
.avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
}
.avatar-text {
font-size: 48rpx;
font-weight: 600;
color: #ffffff;
}
.profile-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.name-row {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
.user-name {
font-size: 36rpx;
font-weight: 600;
color: #ffffff;
margin-right: 16rpx;
}
.role-badge {
font-size: 20rpx;
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
padding: 4rpx 12rpx;
border-radius: 12rpx;
font-weight: 500;
}
.dept-name {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
}
.arrow-icon {
font-size: 48rpx;
color: rgba(255, 255, 255, 0.8);
font-weight: 300;
margin-left: 16rpx;
}
.profile-stats {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 32rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.stat-value {
font-size: 32rpx;
font-weight: 600;
color: #ffffff;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.8);
}
.stat-divider {
width: 1rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.2);
margin: 0 16rpx;
}
.card {
background: #ffffff;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
}
.settings-card {
margin-bottom: 24rpx;
}
.setting-row {
display: flex;
@ -238,9 +427,6 @@ const onLogout = async () => {
color: #6b7280;
}
.version-card {
margin-bottom: 24rpx;
}
.version-header {
margin-bottom: 24rpx;

7
pages.json
View File

@ -180,6 +180,13 @@
"style": {
"navigationBarTitleText": "公告详情"
}
},
{
"path": "pages/my/profile/index",
"style": {
"navigationBarTitleText": "个人资料",
"navigationStyle": "custom"
}
}
],

449
pages/my/profile/index.vue Normal file
View File

@ -0,0 +1,449 @@
<template>
<view class="profile-detail-page">
<!-- 自定义导航栏 -->
<view class="custom-navbar">
<view class="navbar-content">
<text class="nav-btn" @click="handleBack">‹</text>
<text class="nav-title">个人资料</text>
<text class="nav-btn" style="opacity: 0;">占位</text>
</view>
</view>
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<!-- 头像和基本信息卡片 -->
<view class="profile-header-card">
<view class="avatar-section">
<view class="avatar-wrapper-large">
<image
v-if="userInfo?.user?.avatar"
class="avatar-img-large"
:src="userInfo.user.avatar"
mode="aspectFill"
/>
<view v-else class="avatar-placeholder-large">
<text class="avatar-text-large">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
</view>
</view>
<view class="user-basic-info">
<text class="user-name-large">{{ userInfo?.user?.nickName || '--' }}</text>
<view style="display: flex;align-items: center;gap: 10px">
<view class="user-dept-large">{{ userInfo?.user?.deptName || '--' }}</view>
<view class="role-tags" v-if="userInfo?.roles && userInfo.roles.length > 0">
<text
class="role-tag"
v-for="(role, index) in userInfo.roles"
:key="index"
>
{{ role }}
</text>
</view>
</view>
</view>
</view>
</view>
<!-- 统计信息卡片 -->
<view class="info-card stats-card">
<view class="card-title">工作统计</view>
<view class="stats-grid">
<view class="stat-box">
<text class="stat-number">{{ userInfo?.user?.taskCount || 0 }}</text>
<text class="stat-desc">任务数</text>
</view>
<view class="stat-box">
<text class="stat-number">{{ userInfo?.user?.projectCount || 0 }}</text>
<text class="stat-desc">项目数</text>
</view>
<view class="stat-box">
<text class="stat-number">{{ userInfo?.user?.taskNum || 0 }}</text>
<text class="stat-desc">任务编号</text>
</view>
</view>
</view>
<!-- 基本信息卡片 -->
<view class="info-card">
<view class="card-title">基本信息</view>
<view class="info-list">
<view class="info-item">
<text class="info-label">用户名</text>
<text class="info-value">{{ userInfo?.user?.userName || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">工号</text>
<text class="info-value">{{ userInfo?.user?.userNo || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">手机号</text>
<text class="info-value">{{ userInfo?.user?.phonenumber || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">邮箱</text>
<text class="info-value">{{ userInfo?.user?.email || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">性别</text>
<text class="info-value">{{ getSexText(userInfo?.user?.sex) }}</text>
</view>
<view class="info-item">
<text class="info-label">生日</text>
<text class="info-value">{{ userInfo?.user?.birthday || '--' }}</text>
</view>
</view>
</view>
<!-- 部门信息卡片 -->
<view class="info-card" v-if="userInfo?.user?.dept">
<view class="card-title">部门信息</view>
<view class="info-list">
<view class="info-item">
<text class="info-label">部门名称</text>
<text class="info-value">{{ userInfo.user.dept.deptName || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">部门负责人</text>
<text class="info-value">{{ userInfo.user.dept.leader || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">部门邮箱</text>
<text class="info-value">{{ userInfo.user.dept.email || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">部门电话</text>
<text class="info-value">{{ userInfo.user.dept.phone || '--' }}</text>
</view>
</view>
</view>
<!-- 工作信息卡片 -->
<view class="info-card">
<view class="card-title">工作信息</view>
<view class="info-list">
<view class="info-item">
<text class="info-label">入职日期</text>
<text class="info-value">{{ userInfo?.user?.employDate || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">离职日期</text>
<text class="info-value">{{ userInfo?.user?.resignDate || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">创建时间</text>
<text class="info-value">{{ userInfo?.user?.createTime || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">最后登录</text>
<text class="info-value">{{ userInfo?.user?.loginDate || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">登录IP</text>
<text class="info-value">{{ userInfo?.user?.loginIp || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">状态</text>
<text class="info-value" :class="getStatusClass(userInfo?.user?.status)">
{{ getStatusText(userInfo?.user?.status) }}
</text>
</view>
</view>
</view>
<!-- 权限信息卡片 -->
<view class="info-card" v-if="userInfo?.permissions && userInfo.permissions.length > 0">
<view class="card-title">权限信息</view>
<view class="permissions-list">
<text
class="permission-tag"
v-for="(permission, index) in userInfo.permissions"
:key="index"
>
{{ permission }}
</text>
</view>
</view>
<!-- 备注信息 -->
<view class="info-card" v-if="userInfo?.user?.remark">
<view class="card-title">备注</view>
<view class="remark-content">
<text>{{ userInfo.user.remark }}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
// 获取头像文字
const getAvatarText = (name) => {
if (!name) return '?'
return name.charAt(0).toUpperCase()
}
// 获取性别文本
const getSexText = (sex) => {
if (sex === '0') return '女'
if (sex === '1') return '男'
return '--'
}
// 获取状态文本
const getStatusText = (status) => {
if (status === '0') return '正常'
if (status === '1') return '停用'
return '--'
}
// 获取状态样式类
const getStatusClass = (status) => {
if (status === '0') return 'status-normal'
if (status === '1') return 'status-disabled'
return ''
}
// 返回
const handleBack = () => {
uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.profile-detail-page {
box-sizing: border-box;
display: flex;
flex-direction: column;
//height: 100vh;
background-color: #f5f5f5;
}
.custom-navbar {
background-color: #fff;
padding-top: var(--status-bar-height, 0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 100;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 16px;
}
.nav-btn {
font-size: 24px;
color: #333;
font-weight: bold;
min-width: 44px;
text-align: center;
}
.nav-title {
font-size: 18px;
font-weight: 600;
color: #333;
flex: 1;
text-align: center;
}
.content-scroll {
box-sizing: border-box;
flex: 1;
padding: 16px;
}
.profile-header-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 32px 24px;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.avatar-section {
display: flex;
align-items: center;
}
.avatar-wrapper-large {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
border: 4px solid rgba(255, 255, 255, 0.3);
margin-right: 24px;
flex-shrink: 0;
}
.avatar-img-large {
width: 100%;
height: 100%;
}
.avatar-placeholder-large {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
}
.avatar-text-large {
font-size: 48px;
font-weight: 600;
color: #ffffff;
}
.user-basic-info {
flex: 1;
display: flex;
flex-direction: column;
}
.user-name-large {
font-size: 28px;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.user-dept-large {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
.role-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.role-tag {
font-size: 12px;
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
padding: 4px 12px;
border-radius: 12px;
font-weight: 500;
}
.info-card {
background: #ffffff;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.stats-card {
.stats-grid {
display: flex;
justify-content: space-around;
padding: 16px 0;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.stat-number {
font-size: 32px;
font-weight: 600;
color: #667eea;
margin-bottom: 8px;
}
.stat-desc {
font-size: 14px;
color: #666;
}
}
.info-list {
display: flex;
flex-direction: column;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
}
}
.info-label {
font-size: 14px;
color: #666;
flex-shrink: 0;
}
.info-value {
font-size: 14px;
color: #333;
text-align: right;
flex: 1;
margin-left: 16px;
&.status-normal {
color: #67c23a;
}
&.status-disabled {
color: #f56c6c;
}
}
.permissions-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.permission-tag {
font-size: 12px;
background: #f0f7ff;
color: #409eff;
padding: 6px 12px;
border-radius: 12px;
font-weight: 500;
}
.remark-content {
font-size: 14px;
color: #666;
line-height: 1.6;
padding: 8px 0;
}
</style>