耗时七天,我写完了自己的第一个小程序

一入红尘深似海。

自2016年参加工作时申请了第一张信用卡,至今已有七年矣。在这七年之中,自己信用卡的数量由1张逐渐增加到12张,后又慢慢减少到如今的5张。七年的卡海浮沉让我从初入社会的一无所有,到如今的负债累累。

当然,这篇文章并不是来记录自己七年的负债之旅,而是在经历了多年**"钱都去哪儿了?"**的内心呼唤后的心灵觉醒:还是要有个账本记账啊!

我的需求并不复杂:

1、可以快速的知道如今自己卡的总额度是多少,还需要还的欠款是多少(清楚负债情况)

2、可以快速知道每张卡的可用额度是多少,账单日是哪天(便于刷卡时明确知道该刷哪张卡,不至于出现今天刚刷了卡,明天就出了账单要还的现象)

3、可以知道每个月刷卡的总手续费是多少(清楚损益,明白每个月的损耗)

4、记录收支(了解每一分钱都去了哪里)

基于以上四个简单的需求,在尝试现在市面上十几款记账软件后,我惊奇的发现:竟然没有一款合适的软件可以满足我的需求!

于是,我做了一个**【XXXX】** 的决定:自己来写一个工具吧!

然后,就诞生了我发布的第一个小程序:了账

小程序简介

了(liao)账是一款简洁的记账小程序。了账中的了字,是明了之意,清楚明白自己的账目,亦是了结之意,祝愿各位卡友早日上岸。

了账的页面相对简洁,有**【未登录】【已登录】**两种状态展示,如下图所示:

【未登录】

【已登录】

了账只有账户账单两个tab页,分别用来展示当前账户信息和查看收支记录。

账户页面展示了用户(目前只有作者本人😄)较为关心的几个数据:【当前额度】、【可用额度】、【现金额度】、【信用卡总览】、【当前账户】。

账单页面除了查看每一笔收支记录外,在顶部也展示了当月总出账、总入账信息。

新增账户

用户可通过【新增】按键创建账户,在账户页面,顶部账户信息会随之动态改变。如下图所示:

在新增页面,用户可点击账户类型修改新增账户的类型,目前【了账】共包含【信用卡】、【储蓄卡】、【支付宝】、【微信】、【其他】共五类账户。除信用卡外,其余四类账户额度统一归类为【现金额度】。

信用卡除了【固定额度】之外有时会给一部分【临时额度】,因此,在新增账户页面,除了【固定额度】之外,添加了【当前额度】字段。【当前额度】是包含【固定额度】和【临时额度】的账户总额度。

新增收支

当用户创建过账户后,就可以点击【账户】页面右下角**【记一笔】** 浮块创建收支记录,并在【账单】页面查看。相应的,账户页面所展示的【账户信息】也会随之动态改变。如下图所示:

在记录收支时,不同的账户类型可选的账单类型也不相同。如:信用卡账户下可选择的账单类型为【日常支出】、【个人刷卡】、【账单还款】,储蓄卡账户下可选择的账单类型为【日常支出】、【日常收入】、【转账支出】、【转账收入】,支付宝账户微信账户其他账户则多出【提现】类型可供选择。如下图所示:

当账单类型为【日常支出】时,则须选择支出类型。目前共有【食】、【行】、【衣】、【住】、【娱乐】、【其他支出】六类支出可供选择。如下图所示:

信用卡账户账单类型为【个人刷卡】,以及支付宝账户微信账户其他账户账单类型为【提现】时,则需填写【收款金额】。收款账户为除【信用卡账户】外的其他账户,收款金额为除去手续费之外的实际到账金额。如下图所示:

账单的编辑、删除和账户的编辑、删除

用户可通过左滑对当前账户及当前收支进行编辑、删除。当收支被删除后,账户信息将会回退该笔收支。当账户被删除后,该账户下的所有收支将不可被编辑、删除。如下图所示:

账户详情和账单详情

点击每个账户和账单,可进入详情页,查看详情信息。如下图所示:

写在最后

账本只是工具,最主要的还是要诸位卡友调整好心态,量入为出。祝愿各位早日上岸!!!

欢迎大家体验:

写代码用了7天,备案发布将近一个月!!!最后上线认证居然还收了30块巨款!!!至今仍未明白:经历了实名注册小程序号,实名IPC备案后,最后上线认证的意义在哪里?难道只为承袭小马哥一贯的氪金传统?

相关推荐
彭世瑜13 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40414 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish15 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five16 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序16 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54117 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省18 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98518 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮20 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code20 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript