2.6 KiB
2.6 KiB
"我的"页面功能说明
功能概述
新增了"我的"页面，整合了以下功能：
- 用户信息展示
- 账户余额查看
- 预算进度展示
- 快捷功能入口
- 退出登录
页面结构
1. 用户信息卡片
- 显示用户头像（emoji）
- 显示用户昵称/用户名
- 显示用户ID
2. 账户余额卡片（可点击）
- 显示当前账户余额
- 显示总收入和总支出
- 点击可跳转到账户管理页面
3. 预算卡片（可点击）
- 显示本月预算进度条
- 显示预算金额、已用金额、剩余金额
- 点击可跳转到预算设置页面
4. 功能菜单
- 统计分析：跳转到统计页面
- 账户管理：跳转到账户管理页面
- 预算设置：跳转到预算设置页面
5. 退出登录按钮
- 点击后弹出确认对话框
- 确认后清除本地存储并跳转到登录页
技术特点
1. 滚动功能
- 使用
<scroll-view>组件实现页面滚动 - 支持长内容的流畅滚动
- 底部留有安全区域，避免被导航栏遮挡
2. 样式设计
- 延续现有的金色渐变主题风格
- 使用 rpx 单位，适配不同屏幕尺寸
- 卡片式布局，清晰美观
- 添加阴影和圆角，提升视觉效果
3. 交互体验
- 卡片点击有视觉反馈（背景色变化）
- 按钮点击有缩放动画
- 进度条有动画效果
- 退出登录有二次确认
4. 数据加载
- 页面加载时自动获取用户信息、账户信息、预算信息
- 使用 computed 计算预算进度百分比
- 错误处理，避免数据加载失败导致页面崩溃
导航栏配置
在 pages.json 中添加了：
- 页面路由配置
- TabBar 配置（新增"我的"标签）
图标说明
临时使用了 home 图标作为占位符，建议后续替换为专门的"我的"图标。
详细说明请查看：frontend/static/tabbar/ICON_GUIDE.md
使用方法
- 启动应用后，底部导航栏会显示4个标签：首页、记账、统计、我的
- 点击"我的"标签即可进入该页面
- 在页面中可以查看账户信息、预算信息，并快速跳转到相关功能页面
注意事项
- 确保用户已登录，否则用户信息可能显示不完整
- 账户和预算数据需要后端API支持
- 图标文件需要替换为合适的"我的"图标
- 页面使用了
scroll-view，确保内容可以正常滚动
后续优化建议
- 添加更多个人设置选项（如修改密码、修改昵称等）
- 添加数据统计概览（如本月记账天数、最大单笔支出等）
- 添加主题切换功能
- 添加关于页面和帮助文档入口
- 优化用户头像，支持上传自定义头像