bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1020

Browse Source
This commit is contained in:
bwstudio
2025-10-20 07:11:14 +08:00
parent 78f6022827
commit 467b04e5b0
18 changed files with 10466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
原型/小程序页面/user-profile.html
+627
View File
@@ -0,0 +1,627 @@
<!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>