feat(用户中心): 实现个人中心页面布局及功能

添加用户信息展示、消息中心、项目存档和退出登录功能
实现跳转到项目存档页面的导航逻辑
添加样式布局和响应式设计
This commit is contained in:
liangbin 2026-02-03 09:53:40 +08:00
parent 7959a0bd7d
commit dcb0ab1377
1 changed files with 92 additions and 1 deletions

View File

@ -1,3 +1,94 @@
<!-- 个人中心 -->
<template> <template>
<div>用户中心</div> <view class="PageBox">
<view class="CardBox">
<view class="imgBox">
<u-image src="https://img95.699pic.com/photo/60054/8564.jpg_wh300.jpg" shape="circle" width="100rpx"
height="100rpx" />
</view>
<view class="usrInfoBox">
<view class="FlexBox Title">{{ userInfo.name }}-{{ userInfo.position }} </view>
<view class="FlexBox">所属单位{{ userInfo.unit }} </view>
<view class="FlexBox">联系方式{{ userInfo.phone }} </view>
</view>
</view>
<view class="CardBox">
<u-icon name="bell-fill" size="32rpx" color="#0088FF" />
<view class="TxtBox">消息中心</view>
</view>
<view class="CardBox" @click="toArchivesRoom">
<u-icon name="file-text-fill" size="32rpx" color="#0088FF" />
<view class="TxtBox">项目存档</view>
</view>
<view class="CardBox">
<u-icon name="arrow-leftward" size="32rpx" color="#0088FF" />
<view class="TxtBox">退出登录</view>
</view>
</view>
</template> </template>
<script setup>
import { ref } from 'vue'
const userInfo = ref({
id: '123456', // ID
name: '张三', //
phone: '13800138000', //
email: 'zhangsan@example.com', //
position: '工程师', //
unit: '中国建筑集团有限公司', //
})
//
const toArchivesRoom = () => {
uni.navigateTo({
url: '/pages/ArchivesRoom/index',
})
}
</script>
<style lang="scss" scoped>
.FlexBox {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20rpx;
}
.Title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.PageBox {
background-color: #fff;
height: calc(100vh - 120rpx);
overflow: hidden;
padding: 20rpx;
box-sizing: border-box;
.CardBox {
width: 100%;
padding: 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20rpx;
background-color: #F9FAFB;
border-radius: 10rpx;
margin-bottom: 40rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
}
.imgBox {
width: 100rpx;
height: 100rpx;
}
}
</style>