1 项目介绍

1.1 项目背景

记账最直接的作用就是摸清收入、支出的具体情况，看看自己到底挣了多少钱，花了多少钱，钱都花在什么地方。还可以知道维持正常的日常生活需要多少钱，剩下的钱可以考虑进行消费和投资，这是进行财务规划的基础。因此本项目的目的在于帮助在校大学生合理地管理自己的财务，培养良好的消费习惯，搞清楚钱是怎样花出去的，避免大手大脚乱花钱。通过记账帮助学生成为精明的理性消费者，把钱花在刀刃上，用更少的钱做更多的事。

1.2 项目简介

大学生记账本是面向大学生的方便快捷的记账微信小程序。系统提供支出、收入、转账、余额、借贷五大记账模块，内含多种情景账本，涉及食品、交通、购物、宿舍、娱乐、学习等各种针对学生的场景，以满足不同时期的记账需要。用户可以实时查看自己的账户余额和所有账单记录，同时本系统提供了查询“附近银行”的地图功能和汇率计算器功能，帮助用户高效生活。

2 设计思路

一开始就准备做一个专门针对大学生的记账小程序，要尽可能地涵盖学生日常生活中的各种发生支付或收入的场景。

使用小程序云开来方便地管理数据，使用部分Vant UI的组件来美化页面，使用腾讯位置服务来搜索用户附近的银行。

3 应用场景

学生在支出或者收入一笔钱之后，就可以随时打开“大学生记账”微信小程序记一笔。

4 功能介绍

4.1 登录授权

用户进入系统，点击“开始使用按钮”之后，系统会有一个弹窗提示申请获得用户信息，用户点击“允许”之后就可以使用该系统。之后用户再次进入系统不会再进行登录。

4.2 记一笔：支出

功能描述：用户记录一次支出的账单，如图1

（1）填写支出的金额

（2）用户可以点击“拍照”按钮进行拍照，或者选择一张照片

（3）选择支出的分类：系统提供了食品、交通、购物、寝室、娱乐、学习、通讯、数码等13类情景账本，满足用户不同的需求。

（4）选择支出账户：系统提供了现金账户、信用卡账户（花呗、京东白条、信用卡）、金融账户（银行卡）、虚拟账户（微信钱包、支付宝、余额宝、校园卡、QQ钱包、公交卡）供用户选择

（5）选择支出日期

（6）用户可自由选择是否添加备注

（7）长按“按住说话”按钮，系统可识别用户的语音，自动转化为文字添加到备注中

（8）点击“保存”按钮之后，系统会将用户所填写的信息保存到数据库中，包括用户选择的图片，如图2，系统会自动更新用户所选择账户的余额，在对应账户中减去用户的支出金额。同时生成账单。

4.3 记一笔：收入

功能描述：用户记录一次收入的账单，如图3

（1）填写收入的金额

（2）选择收入的分类：系统提供了“生活费”、“兼职收入”、“红包收入”、“利息收入”、“理财收入”、“奖学金”、“赞助”七大类收入类别，满足用户不同的需求。

（3）选择收入存入的账户

（4）点击“保存”按钮之后，系统会将用户所填写的信息保存到数据库中，如图4，系统会自动更新用户所选择账户的余额，在对应账户中加上用户的收入金额。同时生成账单。

4.4 记一笔：转账

功能描述：用户记录一次转账的账单，如图5

（1）填写转账的金额

（2）选择转账的两个账户（都是用户自己的账户），涉及现金账户、信用卡账户（花呗、京东白条、信用卡）、金融账户（银行卡）、虚拟账户（微信钱包、支付宝、余额宝、校园卡、QQ钱包、公交卡）

（3）点击“保存”按钮之后，系统会将用户所填写的信息保存到数据库中，如图6，系统会自动更新用户所选择账户的余额，在转出账户中减去对应的金额，在转入账户中加上对应的金额。同时生成账单。

4.5 记一笔：余额

功能描述：用户记录一次转账的账单，如图7

（1）填写账户所剩余的余额，用户首次使用本系统时，默认所有账户的余额为0，因此用户需要使用该功能更新自己账户的余额

（2）选择对应的账户

（3）点击“保存”按钮之后，系统会将用户所填写的信息保存到数据库中，如图8，系统会自动更新用户所选择账户的余额。同时生成账单。

4.6 记一笔：借贷

功能描述：用户记录一次借贷的账单，如图9

（1）填写借贷的金额

（2）选择存入的账户

（3）选择债权人（亲戚、朋友、同学）

（3）点击“保存”按钮之后，系统会将用户所填写的信息保存到数据库中，如图10，系统会自动更新用户所选择账户的余额。同时生成账单。

4.7 账户

功能描述：用户可以在此菜单中查看自己所有账户的余额，如图11

4.8 账户的详细信息

功能描述：用户点击某一个账户后会跳转到对应的账户详情页，以现金账户为例，如图12

（1）账户详情页会显示涉及到该账户的所有账单记录，包括支出、收入、余额变更、转账、借贷。对于涉及收入的账单，金额前会有一个“+”号，涉及支出的账单，金额前会有一个“—”号，对于不同的账单类型，系统所展示的图标也有所不同，帮助用户进行更好地区分，同时系统会自动按照时间顺序对所有账单记录进行排序，从年到月再到日，如图13

（2）用户点击“记一笔”按钮后，系统会从底部弹出一个菜单栏供用户选择，包括“支出”、“收入”、“转账”、“余额”，用户点击某一个菜单后，系统将自动跳转到对应的“记一笔页面”，如图14

4.9 流水

功能描述：显示用户的账户总余额，同时可以在“流水”功能中查看自己所有账户的所有账单记录，如图15。

如果用户在记账时上传了照片，则可以在账单记录中查看，如图16

4.10 我的

功能描述：显示用户微信头像、微信昵称，提供“学习充电”、“附近银行”、“汇率计算器”、“客服”功能给用户，如图17

4.11 学习充电

功能描述：“学如逆水行舟，不进则退。”作为一个面向大学生的系统，本系统旨在帮助大学生合理地管理自己的财务，培养良好的消费习惯，因此系统提供一些学习资料供用户学习查看。如图18

点击某一个学习内容时，系统会跳转到对应的详情页，如图19

4.12 附近银行

功能描述：作为一个记账系统，当用户使用本系统时，不可避免的会有去银行存钱、取钱的需求，为帮助用户高效率生活，因此系统提供了“附近银行”查询功能。

（1）系统会获取用户的位置（用户使用该功能时，系统将提示用户进行授权），如图20

（2）系统将自动搜索用户周边距离用户最近的20个银行，然后按照距离从近到远对搜索到的银行做一个排序，显示在页面上供用户查看选择。如图21

（3）考虑到用户可能有更多的搜索需求，地图需求，因此系统贴心地提供了“搜索更多”功能，用户下滑到页面底部即可看到“搜索更多”的按钮，如图22

（4）用户点击“搜索更多”按钮后将跳转到地图搜索页面，用户输入要搜索的地名时，系统会在搜索框下方显示符合条件的地点，如图23。用户点击自己想要的一个地点，之后点击页面右上角的“完成”按钮，系统将跳回之前的页面，将用户点击的地点显示在页面下方。如图24、图25

（5）在页面上显示的所有银行的右边有一个“去这里”的按钮，下方是用户所在位置距该地点的距离。当用户点击“去这里”的按钮后，系统将跳转到如图26所示的界面。页面上显示着用户所在位置与目的地的直线连接，让用户有一个直观的方向感。并且有“路线规划”和“开始导航”两个按钮。

（6）当用户点击“路线规划”按钮后，系统将跳转到路线规划的页面，有“驾车”、“公交”、“步行”三种出行方式供用户选择，同时页面上会显示对应的路线信息，如图27所示

（7）当用户点击“开始导航”按钮后，系统将跳转到预导航页面，之后用户点击右下角的按钮后，系统将弹出选择菜单，有“高德地图”、“腾讯地图”供用户选择。如图28、图29所示

4.13 汇率计算器

功能描述：本系统为用户提供了汇率计算器的功能，支持人民币、港元、澳门元、美元、欧元、英镑、日元之间的汇率换算。如图30、图31所示

当用户点击某一个数字输入框时，系统会自动将该输入框的占位符设置为100，用于帮助用户快速输入，省去删除数字的麻烦，同时系统将自动更新其他输入框的占位符为汇率换算之后的结果，帮助用户快速判断。如点击美元输入框之后的效果如图32所示

4.13 客服

功能描述：为帮助用户更好地使用本产品，系统设置了客服功能，如图33所示

当用户点击按钮之后将进入到客服会话页面，如图34所示