home1022
This commit is contained in:
bwstudio
@@ -0,0 +1,357 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user