卡比记账项目——记账明细ItemListItemList组件实现 ItemSummary组件收支明细的界面已经搭建好了

ItemList组件实现

ItemSummary组件

收支明细的界面已经搭建好了，可以预料到的是，无论是本月还是今年上个月，list都会是相同的布局，只是展示的内容不一样罢了，所以我们对这一部分进行抽离。抽离成ItemSummary组件。截屏2022-10-25 12.59.54.png 如图所示，时间分为本月、上月、今年、自定义时间四个维度。在使用ItemSummary的时候，直接用startDate等于一个时间是从0点0分开始，而我们需要endDate是从这一天的23点59分59秒开始计算。两者的逻辑是不一样的，需要进行if判断。如果是开始时间就从0点开始，结束时间就从23点59分59秒开始。

回到ItemSummary中，接受一个props里面有startDate和endDate。

截屏2022-10-25 13.27.12.png

我们没有使用day.js，但是之前封装了一个time.tsx时间库，进行一个API设计。

import { Time } from 'shared/time';
const time = new Time(); 
time.format('YYYY-MM-DD');
time.firstDayOfMonth(); //本月第一天
time.firstDayOfYear(); //今年第一天
time.lastDayOfMonth(); //本月最后一天
time.lastDayOfYear(); //今年最后一天
time.add(1, 'month'); //下个月

重构time

由于之前的time函数在使用时会产生一个api对象，会有内存使用的问题，所以将其绑定在原型上。把原来的time函数改成time类

截屏2022-10-25 13.34.07.png format这一堆以及后续的api就绑定在原型上了。以本月的第一天为例，返回一个新的时间对象包括年月日小时分钟秒

firstDayOfMonth() {
    return new Time(new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0));
}

回到ItemList先初始化时间，

const time = new Time() //创建当前时间
const customTime = reactive({
    start: new Time(),
    end: new Time() //自定义时间
})

本月，上月，今年

const timeList = [
    {
        start: time.firstDayOfMonth(),
        end: time.lastDayOfMonth()
    },
    {
        start: time.add(-1, 'month').firstDayOfMonth(),
        end: time.add(-1, 'month').lastDayOfMonth()
    },
    {
        start: time.firstDayOfYear(),
        end: time.lastDayOfYear()
    }
]