携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

前两天我们的首页只是粗暴查询10条记录，昨天历史记录完成了，可根据指定时间范围筛选出结果。今天咱们把首页的列表给优化一下，需求如下：

• 首页只展示本月的账单记录
• 加上查看更多按钮跳转至历史记录页

获取本月账单

获取本月的账单，我们的查询时间就是这个月初之后的时间都是本月的。于是我们拿到本年本月1号的那个时间戳，以这个时间点为查询条件，即可查询本月的账单数据了：

getTotalFee() {
    let month = new Date().getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    let year = new Date().getFullYear();
    let dateStr = `${year}-${month}-01 00:00:00`;
    uni.showLoading({
        title: '处理中...'
    })
    uniCloud.callFunction({
        name: 'get',
        data: {
            beginTime: new Date(dateStr).getTime()
        }
    }).then((res) => {
        uni.hideLoading()
        this.feeList = res.result.data;
        this.total = this.feeList.reduce((p, c) => Number(c.price) + p, 0);
    })
}

金额后面加两位小数：

<view>您本月一共消费了：{{total.toFixed(2)}}元</view>

查看更多

<button type="primary" @click="viewMore">查看更多</button>

viewMore() {
    this.$router.push({
        path: 'pages/history/history'
    });
}

点击查看更多，成功跳转历史记录。

完整代码：

<template>
    <view class="container">
        <view>您本月一共消费了{{feeList.length}}笔，合计：{{total.toFixed(2)}}元</view>
        <view>
            <uni-card v-for="item in feeList" :key="item._id" :title="item.name" :extra="item.price">
                <text class="uni-body">{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</text>
            </uni-card>
        </view>
        <button type="primary" @click="viewMore">查看更多</button>
    </view>
</template>

<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                total: 0,
                feeList: []
            }
        },
        mounted() {
            this.getTotalFee();
        },
        methods: {
            moment,
            getTotalFee() {
                let month = new Date().getMonth() + 1;
                month = month < 10 ? '0' + month : month;
                let year = new Date().getFullYear();
                let dateStr = `${year}-${month}-01 00:00:00`;
                uni.showLoading({
                    title: '处理中...'
                })
                uniCloud.callFunction({
                    name: 'get',
                    data: {
                        beginTime: new Date(dateStr).getTime()
                    }
                }).then((res) => {
                    uni.hideLoading()
                    this.feeList = res.result.data;
                    this.total = this.feeList.reduce((p, c) => Number(c.price) + p, 0);
                })
            },
            viewMore() {
                this.$router.push({
                    path: 'pages/history/history'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 30upx;
    }
</style>

至此，首页优化就完成了，并且添加账单，展示账单以及查看历史账单的功能也完成闭环了，接下来需要加入用户系统以及更多的功能，敬请期待！