357 lines
9.2 KiB
Vue
357 lines
9.2 KiB
Vue
<template>
|
||
<view class="user-profile-container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="top-navbar">
|
||
<text class="title">个人中心</text>
|
||
<text class="settings" @click="goToSettings">设置</text>
|
||
</view>
|
||
|
||
<!-- 用户信息卡片 -->
|
||
<view class="user-card">
|
||
<view class="user-info">
|
||
<view class="avatar">
|
||
<image :src="userInfo.avatar" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="info">
|
||
<text class="name">{{ userInfo.name }}</text>
|
||
<text class="role">{{ userInfo.roleName }}</text>
|
||
<text class="department">{{ userInfo.department }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="user-stats">
|
||
<view class="stat-item">
|
||
<text class="count">{{ userInfo.uploadCount }}</text>
|
||
<text class="label">上传总数</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="count">{{ userInfo.passedCount }}</text>
|
||
<text class="label">审核通过</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="count">{{ userInfo.taskCount }}</text>
|
||
<text class="label">参与任务</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能菜单 -->
|
||
<view class="menu-section">
|
||
<view class="menu-item" @click="viewMyUploads">
|
||
<view class="menu-left">
|
||
<u-icon name="image" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">我的上传</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
<view class="menu-item" @click="viewMyTasks">
|
||
<view class="menu-left">
|
||
<u-icon name="task-list" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">我的任务</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
<view class="menu-item" @click="viewReviewHistory">
|
||
<view class="menu-left">
|
||
<u-icon name="time" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">审核历史</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 系统设置 -->
|
||
<view class="menu-section">
|
||
<view class="menu-item" @click="goToAccountSettings">
|
||
<view class="menu-left">
|
||
<u-icon name="account" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">账号与安全</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
<view class="menu-item" @click="goToNotificationSettings">
|
||
<view class="menu-left">
|
||
<u-icon name="bell" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">通知设置</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
<view class="menu-item" @click="goToPrivacySettings">
|
||
<view class="menu-left">
|
||
<u-icon name="lock" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">隐私设置</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关于 -->
|
||
<view class="menu-section">
|
||
<view class="menu-item" @click="viewAbout">
|
||
<view class="menu-left">
|
||
<u-icon name="info" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">关于我们</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
<view class="menu-item" @click="viewHelp">
|
||
<view class="menu-left">
|
||
<u-icon name="help-circle" size="32" color="#606266"></u-icon>
|
||
<text class="menu-title">帮助与反馈</text>
|
||
</view>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录按钮 -->
|
||
<button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
|
||
|
||
<!-- 退出登录确认弹窗 -->
|
||
<u-modal v-model="showLogoutModal" title="确认退出" @confirm="logout" :close-on-click-modal="false">
|
||
<text class="modal-content">确定要退出登录吗？</text>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 用户信息（演示数据）
|
||
userInfo: {
|
||
name: '张三',
|
||
roleName: '普通用户',
|
||
department: '研发部',
|
||
avatar: '/static/uview/example/avatar.jpg',
|
||
uploadCount: 28,
|
||
passedCount: 25,
|
||
taskCount: 5
|
||
},
|
||
showLogoutModal: false
|
||
}
|
||
},
|
||
methods: {
|
||
// 导航方法
|
||
goToSettings() {
|
||
this.$u.toast('设置页面待实现')
|
||
},
|
||
viewMyUploads() {
|
||
this.$u.toast('我的上传页面待实现')
|
||
},
|
||
viewMyTasks() {
|
||
uni.switchTab({
|
||
url: '/pages/task-management/task-management'
|
||
})
|
||
},
|
||
viewReviewHistory() {
|
||
this.$u.toast('审核历史页面待实现')
|
||
},
|
||
goToAccountSettings() {
|
||
this.$u.toast('账号与安全页面待实现')
|
||
},
|
||
goToNotificationSettings() {
|
||
this.$u.toast('通知设置页面待实现')
|
||
},
|
||
goToPrivacySettings() {
|
||
this.$u.toast('隐私设置页面待实现')
|
||
},
|
||
viewAbout() {
|
||
this.$u.toast('关于我们页面待实现')
|
||
},
|
||
viewHelp() {
|
||
this.$u.toast('帮助与反馈页面待实现')
|
||
},
|
||
|
||
// 退出登录相关
|
||
showLogoutConfirm() {
|
||
this.showLogoutModal = true
|
||
},
|
||
logout() {
|
||
// 模拟退出登录
|
||
this.showLogoutModal = false
|
||
this.$u.toast('退出登录成功')
|
||
|
||
// 延迟跳转到登录页
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/login/index'
|
||
})
|
||
}, 1000)
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 实际项目中，这里应该从后端获取用户信息
|
||
// this.getUserInfo()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-profile-container {
|
||
padding-top: 44px; // 适配顶部导航栏
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #f5f7fa;
|
||
|
||
.top-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 44px;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
z-index: 999;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.settings {
|
||
font-size: 32rpx;
|
||
color: #1989fa;
|
||
}
|
||
}
|
||
|
||
// 用户信息卡片
|
||
.user-card {
|
||
background-color: #ffffff;
|
||
margin: 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.avatar {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 70rpx;
|
||
overflow: hidden;
|
||
margin-right: 30rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
|
||
.name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.role {
|
||
font-size: 28rpx;
|
||
color: #1989fa;
|
||
background-color: #ecf5ff;
|
||
padding: 3rpx 15rpx;
|
||
border-radius: 15rpx;
|
||
display: inline-block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.department {
|
||
font-size: 26rpx;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 用户统计
|
||
.user-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 20rpx;
|
||
border-top: 2rpx solid #f0f2f5;
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
|
||
.count {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 功能菜单区域
|
||
.menu-section {
|
||
background-color: #ffffff;
|
||
margin: 20rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
|
||
&:not(:last-child) {
|
||
border-bottom: 2rpx solid #f0f2f5;
|
||
}
|
||
|
||
.menu-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
u-icon {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.menu-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 退出登录按钮
|
||
.logout-btn {
|
||
margin: 50rpx 20rpx 30rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 32rpx;
|
||
background-color: #ffffff;
|
||
color: #f56c6c;
|
||
border: 2rpx solid #f56c6c;
|
||
border-radius: 45rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
// 弹窗内容样式
|
||
.modal-content {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
</style> |