微信小程序-记账本

最新推荐文章于 2024-12-03 17:09:50 发布

置顶

张金城大呵呵

最新推荐文章于 2024-12-03 17:09:50 发布

阅读量1.3w

点赞数 30

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_46008509/article/details/107071988

版权

原文链接：https://blog.csdn.net/weixin_46008509/article/details/107071988

项目说明

这是一款具有记账功能的小程序-记账本，简单分为四个模块：首页、记账、报表、我的。首页页面初始数据显示当月的收入支出和结余的情况、以及当日收支，有列表可以选择其他日期的记账信息。记账页面有记账类型、消费类型、支付类型和记账信息可选择，记账信息选择记账时间、金额和备注，最后选择保存。报表模块页面有年列表、月列表和日列表选择记账的日期，选择支出或收入会分别显示当年的收支总额，以及显示百分比饼图可直观看到年度的消费类型比例。最后是我的模块，提供授权登录来显示用户的头像及昵称。

模块概览

详细设计

首页

分为本月结余、本月支出、本月收入，以及本日支出收入和详情列表，还有时间选择可以选择其他日期的详细收入支出。

代码分析：

.fl{

float:left;

}

.fr{

float:right;

}

.clearfix::after{

content: "";

display: block;

clear: both;

}

向左向右浮,，浮动会脱离文档流，这时候父元素没有高度的话父元素高度不为0，所以需要清除浮动影响。

data: {

dateRange: {

start: "",

end: ""

msgData: [],

isFristShow: true,

currentDate: "",

isToday: true,

cost: {

shouru: 0,

zhichu:0

monthDate: "", /

monthCost: {

shouru: 0,

zhichu: 0

dateRange为日期范围数据，msgData: []是获取的记账记录信息，isFristShow: true用来判断是否页面首次加载，currentDate表选中的日期，isToday: true, 判断选中日期是否是当天，cost是选中日期的收入与支出总额，初始值0，monthDate、monthCost是选中的月份以及该月的收入与支出。

在获取时间范围函数setDate里设置开始日期和结束日期

实例化var timer = new Date();获取年var year = timer.getFullYear();获取月份, 因为月份从0开始，真实月份需要加一 var month = timer.getMonth() + 1; 获取日var date = timer.getDate();

接着设置开始日期和结束日期var start = year - 1 + "-" + this.addZero(month) + "-" + this.addZero(date); var end = year + "-" + this.addZero(month) + "-" + this.addZero(date);

最后调用这些方法设置data里的值，

this.setData({

dateRange: {

start,

end

}

写一个更改日期时间函数selectDate

先重新获取数据this.getMsgData(e.detail.value); 获取选择的月份，如果选择的月份和上一次选择的月份相同，则不执行getMonMsgData

if (e.detail.value.substring(0, 7) != this.data.monthDate){

this.data.monthDate = e.detail.value.substring(0, 7)

this.getMonMsgData(this.data.monthDate)

}