account/resources/mobile

家庭记账APP - 前端开发文档

项目概述

这是一个基于 uni-app 框架开发的跨平台家庭记账应用前端，支持个人记账和家庭共享记账功能。

已实现功能

1. 账单管理

• ✅ 添加账单（收入/支出）
• ✅ 账单列表（按日期分组显示）
• ✅ 月份切换查看
• ✅ 本月收支统计
• ✅ 多种分类（餐饮、交通、购物、娱乐等）
• ✅ 支持备注和日期选择

2. 家庭管理

• ✅ 创建家庭
• ✅ 加入家庭（通过邀请码）
• ✅ 查看家庭信息
• ✅ 查看家庭成员列表
• ✅ 家主功能：
  • 生成/重新生成邀请码
  • 复制邀请码
  • 移除家庭成员
• ✅ 退出家庭
• ⏳ 转让家主（待实现）

3. 统计分析

• ✅ 收支概览（收入、支出、结余）
• ✅ 月份切换
• ✅ 支出分类统计（带进度条和百分比）
• ✅ 收支趋势图（最近7天）
• ✅ 可视化图表展示

4. 用户中心

• ✅ 登录/注册
• ✅ 个人信息管理
• ✅ 用户协议和隐私政策

技术栈

• 框架: uni-app (Vue 3)
• 状态管理: Vuex
• UI组件: uni-ui
• HTTP请求: luch-request
• 样式: SCSS

项目结构

resources/mobile/
├── api/                    # API接口模块
│   ├── index.js           # API自动导入
│   └── modules/
│       ├── auth.js        # 认证相关API
│       ├── bill.js        # 账单相关API
│       ├── family.js      # 家庭管理API
│       ├── sms.js         # 短信相关API
│       └── statistics.js  # 统计分析API
├── components/            # 公共组件
│   ├── pages/            # 页面组件
│   └── tab-bar/          # 底部导航栏
├── config/               # 配置文件
├── mixins/               # 混入
│   └── auth.js          # 登录验证混入
├── pages/               # 页面
│   ├── index/           # 首页
│   ├── account/         # 账单管理
│   │   ├── bill/        # 账单页面
│   │   │   ├── add.vue  # 添加账单
│   │   │   └── index.vue # 账单列表
│   │   └── statistics/  # 统计分析
│   │       └── index.vue # 统计页面
│   ├── family/          # 家庭管理
│   │   ├── index.vue    # 家庭主页
│   │   ├── create.vue  # 创建家庭
│   │   └── join.vue    # 加入家庭
│   └── ucenter/        # 用户中心
│       ├── index.vue   # 个人中心
│       ├── login/      # 登录
│       └── register/   # 注册
├── static/              # 静态资源
├── store/              # Vuex状态管理
│   ├── index.js        # Store自动导入
│   └── modules/
│       ├── user.js     # 用户状态
│       └── family.js   # 家庭状态
└── utils/              # 工具函数
    ├── auth.js        # 认证工具
    ├── request.js     # HTTP请求封装
    └── tool.js        # 通用工具

API接口说明

账单API (/api/bill/*)

• GET /api/bill/list - 获取账单列表
• POST /api/bill/add - 添加账单
• POST /api/bill/edit - 编辑账单
• POST /api/bill/delete - 删除账单
• GET /api/bill/detail - 获取账单详情

家庭API (/api/family/*)

• GET /api/family/info - 获取家庭信息
• POST /api/family/create - 创建家庭
• POST /api/family/join - 加入家庭
• POST /api/family/leave - 退出家庭
• GET /api/family/invite-code - 获取邀请码
• POST /api/family/regenerate-invite-code - 重新生成邀请码
• POST /api/family/remove-member - 移除家庭成员
• GET /api/family/members - 获取家庭成员列表
• POST /api/family/transfer-owner - 转让家主

统计API (/api/statistics/*)

• GET /api/statistics/overview - 获取统计概览
• GET /api/statistics/trend - 获取收支趋势
• GET /api/statistics/category - 获取分类统计
• GET /api/statistics/monthly - 获取月度报表
• GET /api/statistics/yearly - 获取年度报表

功能特点

1. 家庭管理

• 一个人只能创建或加入一个家庭
• 家主可以管理家庭成员（添加、移除）
• 家主可以生成邀请码邀请成员
• 支持转让家主功能

2. 账单分类

• 支出分类：餐饮、交通、购物、娱乐、医疗、教育、居住、其他
• 收入分类：工资、奖金、投资、兼职、其他
• 每个分类都有独立的图标和颜色

3. 数据可视化

• 支出分类统计使用进度条展示占比
• 收支趋势使用柱状图展示最近7天数据
• 支持月份切换查看不同时间段的数据

4. 用户体验

• 渐变色主题设计
• 流畅的动画效果
• 下拉刷新支持
• 加载状态提示
• 空数据友好提示

开发说明

环境要求

• Node.js >= 14
• HBuilderX 或 VS Code
• uni-app CLI

安装依赖

cd resources/mobile
yarn install

运行项目

• 使用 HBuilderX 运行到不同平台
• 或使用 CLI 命令：npm run dev:mp-weixin (微信小程序)

构建项目

npm run build:mp-weixin

注意事项

1. API接口: 需要后端提供对应的接口支持，返回格式统一为：

{
  "code": 200,
  "message": "success",
  "data": {}
}

2. Token认证: 所有需要登录的接口都需要在请求头中携带Token：

Authorization: Bearer {token}

3. 家庭限制: 用户只能加入一个家庭，后端需要验证此限制

4. 邀请码: 邀请码建议使用10位随机字符串，确保唯一性

5. 日期格式: 统一使用 YYYY-MM-DD 格式

待优化功能

1. 账单编辑功能
2. 转让家主功能
3. 账单搜索和筛选
4. 导出数据功能
5. 预算管理
6. 账单提醒功能
7. 更多的统计图表（饼图、折线图等）

作者

molong ycgpp@126.com

许可证

MIT