【云开发校园技术布道师】大学生记账本

2020-04-10 11:23:34 浏览数 (1)

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,系统会自动更新用户所选择账户的余额,在对应账户中减去用户的支出金额。同时生成账单。

图1图1
图2图2

4.3 记一笔:收入

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

(1)填写收入的金额

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

(3)选择收入存入的账户

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

图3图3
图4图4

4.4 记一笔:转账

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

(1)填写转账的金额

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

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

图5图5
图6图6

4.5 记一笔:余额

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

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

(2)选择对应的账户

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

图7图7
图8图8

4.6 记一笔:借贷

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

(1)填写借贷的金额

(2)选择存入的账户

(3)选择债权人(亲戚、朋友、同学)

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

图9图9
图10图10

4.7 账户

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

图11图11

4.8 账户的详细信息

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

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

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

图12图12
图13图13
图14图14

4.9 流水

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

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

图15图15
图16图16

4.10 我的

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

图17图17

4.11 学习充电

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

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

图18图18
图19图19

4.12 附近银行

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

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

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

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

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

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

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

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

图20图20
图21图21
图22图22
图23图23
图24图24
图25图25
图26图26
图27图27
图28图28
图29图29

4.13 汇率计算器

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

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

图30图30
图31图31
图32图32

4.13 客服

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

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

图33图33
图34图34

0 人点赞