627 lines
18 KiB
HTML
627 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>个人中心 - 图片收集小程序</title>
|
|
<!-- 引入Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
<!-- 引入Element UI CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
|
<!-- 引入Element UI JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
padding-top: env(safe-area-inset-top);
|
|
overflow-x: hidden;
|
|
}
|
|
.container {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
background-color: #1989fa;
|
|
color: white;
|
|
padding: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.header-action {
|
|
font-size: 16px;
|
|
}
|
|
.profile-header {
|
|
background: linear-gradient(135deg, #1989fa 0%, #36cfc9 100%);
|
|
color: white;
|
|
padding: 25px 15px;
|
|
position: relative;
|
|
}
|
|
.avatar-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.avatar {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
object-fit: cover;
|
|
background-color: white;
|
|
}
|
|
.user-info {
|
|
margin-left: 15px;
|
|
flex: 1;
|
|
}
|
|
.user-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
.user-meta {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.badge {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
}
|
|
.stat-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
margin: -25px 15px 15px 15px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
.stat-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 5px;
|
|
}
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.menu-section {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
margin: 0 15px 15px 15px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
.menu-group {
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
.menu-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.menu-item:active {
|
|
background-color: #f5f7fa;
|
|
}
|
|
.menu-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.menu-icon {
|
|
font-size: 18px;
|
|
width: 24px;
|
|
text-align: center;
|
|
margin-right: 12px;
|
|
color: #1989fa;
|
|
}
|
|
.menu-text {
|
|
font-size: 15px;
|
|
color: #303133;
|
|
}
|
|
.menu-right {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #909399;
|
|
}
|
|
.menu-arrow {
|
|
font-size: 16px;
|
|
margin-left: 5px;
|
|
}
|
|
.menu-badge {
|
|
background-color: #f56c6c;
|
|
color: white;
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
.logout-btn {
|
|
margin: 20px 15px;
|
|
width: calc(100% - 30px);
|
|
}
|
|
.settings-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-color: white;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
.settings-label {
|
|
font-size: 15px;
|
|
color: #303133;
|
|
}
|
|
.settings-value {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
.bottom-nav {
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 10px 0;
|
|
box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
padding-bottom: env(safe-area-inset-bottom, 10px);
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
width: 25%;
|
|
}
|
|
.nav-icon {
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.nav-item.active {
|
|
color: #1989fa;
|
|
}
|
|
.divider {
|
|
height: 10px;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.role-specific {
|
|
display: none;
|
|
}
|
|
.admin-role .admin-only,
|
|
.dept-role .dept-only {
|
|
display: block;
|
|
}
|
|
.info-card {
|
|
background-color: #ecf5ff;
|
|
border-left: 4px solid #1989fa;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
color: #606266;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" :class="userRole === 'admin' ? 'admin-role' : userRole === 'dept_manager' ? 'dept-role' : ''">
|
|
<div class="container">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="header">
|
|
<div class="header-action"></div>
|
|
<div class="header-title">个人中心</div>
|
|
<div class="header-action" @click="showSettings = !showSettings">
|
|
<i class="fa fa-cog"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人信息头部 -->
|
|
<div class="profile-header">
|
|
<div class="avatar-container">
|
|
<img :src="userInfo.avatar" class="avatar" :alt="userInfo.name">
|
|
<div class="user-info">
|
|
<div class="user-name">{{ userInfo.name }}</div>
|
|
<div class="user-meta">
|
|
<span>{{ userInfo.department }} | {{ userInfo.position }}</span>
|
|
<span class="badge">{{ getRoleText() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ userStats.uploadedImages }}</div>
|
|
<div class="stat-label">已上传图片</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ userStats.completedTasks }}</div>
|
|
<div class="stat-label">已完成任务</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ userStats.approvalRate }}%</div>
|
|
<div class="stat-label">通过率</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 信息提示卡片（仅管理员/部门负责人可见） -->
|
|
<div v-if="userRole === 'admin' || userRole === 'dept_manager'" class="info-card">
|
|
<i class="fa fa-info-circle"></i> 您有 {{ pendingActions.count }} 个待处理事项
|
|
</div>
|
|
|
|
<!-- 功能菜单区域 -->
|
|
<div class="menu-section">
|
|
<div class="menu-group">
|
|
<div class="menu-item" @click="viewMyUploads">
|
|
<div class="menu-left">
|
|
<i class="fa fa-picture-o menu-icon"></i>
|
|
<span class="menu-text">我的上传</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="viewMyTasks">
|
|
<div class="menu-left">
|
|
<i class="fa fa-tasks menu-icon"></i>
|
|
<span class="menu-text">我的任务</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<span v-if="userStats.pendingTasks > 0" class="menu-badge">{{ userStats.pendingTasks }}</span>
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="viewFavorites">
|
|
<div class="menu-left">
|
|
<i class="fa fa-star menu-icon"></i>
|
|
<span class="menu-text">我的收藏</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 管理员特定菜单 -->
|
|
<div class="menu-group admin-only">
|
|
<div class="menu-item" @click="manageDepartments">
|
|
<div class="menu-left">
|
|
<i class="fa fa-building-o menu-icon"></i>
|
|
<span class="menu-text">部门管理</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="manageUsers">
|
|
<div class="menu-left">
|
|
<i class="fa fa-users menu-icon"></i>
|
|
<span class="menu-text">用户管理</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="manageTasks">
|
|
<div class="menu-left">
|
|
<i class="fa fa-list-alt menu-icon"></i>
|
|
<span class="menu-text">任务管理</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 部门负责人特定菜单 -->
|
|
<div class="menu-group dept-only">
|
|
<div class="menu-item" @click="reviewImages">
|
|
<div class="menu-left">
|
|
<i class="fa fa-check-circle menu-icon"></i>
|
|
<span class="menu-text">图片审核</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<span v-if="pendingActions.reviewCount > 0" class="menu-badge">{{ pendingActions.reviewCount }}</span>
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="manageDeptTasks">
|
|
<div class="menu-left">
|
|
<i class="fa fa-calendar-check-o menu-icon"></i>
|
|
<span class="menu-text">部门任务</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- 其他功能 -->
|
|
<div class="menu-section">
|
|
<div class="menu-group">
|
|
<div class="menu-item" @click="openFeedback">
|
|
<div class="menu-left">
|
|
<i class="fa fa-commenting-o menu-icon"></i>
|
|
<span class="menu-text">意见反馈</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item" @click="openAbout">
|
|
<div class="menu-left">
|
|
<i class="fa fa-info-circle menu-icon"></i>
|
|
<span class="menu-text">关于我们</span>
|
|
</div>
|
|
<div class="menu-right">
|
|
<span class="settings-value">v1.0.0</span>
|
|
<i class="fa fa-angle-right menu-arrow"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退出登录按钮 -->
|
|
<el-button
|
|
type="danger"
|
|
class="logout-btn"
|
|
@click="handleLogout"
|
|
>
|
|
退出登录
|
|
</el-button>
|
|
|
|
<!-- 底部导航栏 -->
|
|
<div class="bottom-nav">
|
|
<div
|
|
class="nav-item"
|
|
:class="{ active: currentPage === 'home' }"
|
|
@click="navigateTo('home')"
|
|
>
|
|
<i class="fa fa-home nav-icon"></i>
|
|
<span>首页</span>
|
|
</div>
|
|
<div
|
|
class="nav-item"
|
|
:class="{ active: currentPage === 'task' }"
|
|
@click="navigateTo('task')"
|
|
>
|
|
<i class="fa fa-tasks nav-icon"></i>
|
|
<span>任务</span>
|
|
</div>
|
|
<div
|
|
class="nav-item"
|
|
:class="{ active: currentPage === 'upload' }"
|
|
@click="navigateTo('upload')"
|
|
>
|
|
<i class="fa fa-cloud-upload nav-icon"></i>
|
|
<span>上传</span>
|
|
</div>
|
|
<div
|
|
class="nav-item"
|
|
:class="{ active: currentPage === 'profile' }"
|
|
@click="navigateTo('profile')"
|
|
>
|
|
<i class="fa fa-user-o nav-icon"></i>
|
|
<span>我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
showSettings: false,
|
|
currentPage: 'profile',
|
|
userRole: 'user', // 'user', 'dept_manager', 'admin'
|
|
userInfo: {
|
|
name: '李明',
|
|
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
|
|
department: '市场部',
|
|
position: '专员',
|
|
phone: '138****6789',
|
|
email: 'liming@example.com',
|
|
joinDate: '2022-03-15'
|
|
},
|
|
userStats: {
|
|
uploadedImages: 42,
|
|
completedTasks: 12,
|
|
pendingTasks: 3,
|
|
approvalRate: 95
|
|
},
|
|
pendingActions: {
|
|
count: 8,
|
|
reviewCount: 5,
|
|
taskCount: 3
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取角色文本
|
|
getRoleText() {
|
|
const roleMap = {
|
|
'user': '普通用户',
|
|
'dept_manager': '部门负责人',
|
|
'admin': '管理员'
|
|
};
|
|
return roleMap[this.userRole] || '普通用户';
|
|
},
|
|
|
|
// 查看我的上传
|
|
viewMyUploads() {
|
|
this.$message.info('查看我的上传记录');
|
|
},
|
|
|
|
// 查看我的任务
|
|
viewMyTasks() {
|
|
window.location.href = 'task-management.html';
|
|
},
|
|
|
|
// 查看我的收藏
|
|
viewFavorites() {
|
|
this.$message.info('查看我的收藏');
|
|
},
|
|
|
|
// 部门管理（管理员）
|
|
manageDepartments() {
|
|
this.$message.info('管理部门');
|
|
},
|
|
|
|
// 用户管理（管理员）
|
|
manageUsers() {
|
|
this.$message.info('管理用户');
|
|
},
|
|
|
|
// 任务管理（管理员）
|
|
manageTasks() {
|
|
this.$message.info('管理任务');
|
|
},
|
|
|
|
// 图片审核（部门负责人）
|
|
reviewImages() {
|
|
this.$message.info('审核图片');
|
|
},
|
|
|
|
// 部门任务管理（部门负责人）
|
|
manageDeptTasks() {
|
|
this.$message.info('管理部门任务');
|
|
},
|
|
|
|
// 打开反馈
|
|
openFeedback() {
|
|
this.$message.info('打开意见反馈');
|
|
},
|
|
|
|
// 打开关于
|
|
openAbout() {
|
|
this.$message.info('关于我们');
|
|
},
|
|
|
|
// 处理退出登录
|
|
handleLogout() {
|
|
this.$confirm('确定要退出登录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
// 模拟退出登录
|
|
this.$message.success('退出成功');
|
|
// 跳转到登录页
|
|
setTimeout(() => {
|
|
window.location.href = 'login.html';
|
|
}, 1000);
|
|
}).catch(() => {
|
|
// 取消退出
|
|
});
|
|
},
|
|
|
|
// 导航到其他页面
|
|
navigateTo(page) {
|
|
this.currentPage = page;
|
|
let url = '';
|
|
|
|
switch (page) {
|
|
case 'home':
|
|
url = this.userRole === 'admin' ? 'admin-home.html' :
|
|
this.userRole === 'dept_manager' ? 'dept-home.html' : 'user-home.html';
|
|
break;
|
|
case 'task':
|
|
url = 'task-management.html';
|
|
break;
|
|
case 'upload':
|
|
url = 'image-upload.html';
|
|
break;
|
|
case 'profile':
|
|
url = 'user-profile.html';
|
|
break;
|
|
}
|
|
|
|
if (url && url !== window.location.pathname) {
|
|
window.location.href = url;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 检查URL参数，判断用户角色
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const role = urlParams.get('role');
|
|
if (role) {
|
|
this.userRole = role;
|
|
|
|
// 根据角色更新用户信息
|
|
if (role === 'admin') {
|
|
this.userInfo = {
|
|
name: '管理员',
|
|
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
|
|
department: '管理员',
|
|
position: '系统管理员',
|
|
phone: '139****1234',
|
|
email: 'admin@example.com',
|
|
joinDate: '2020-01-01'
|
|
};
|
|
this.userStats = {
|
|
uploadedImages: 120,
|
|
completedTasks: 45,
|
|
pendingTasks: 8,
|
|
approvalRate: 100
|
|
};
|
|
} else if (role === 'dept_manager') {
|
|
this.userInfo = {
|
|
name: '王经理',
|
|
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
|
|
department: '技术部',
|
|
position: '部门经理',
|
|
phone: '137****5678',
|
|
email: 'wang@example.com',
|
|
joinDate: '2019-06-15'
|
|
};
|
|
this.userStats = {
|
|
uploadedImages: 85,
|
|
completedTasks: 28,
|
|
pendingTasks: 5,
|
|
approvalRate: 98
|
|
};
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |