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

昨天我们完成了记一笔的功能，今天我们继续实现首页账单的展示。根据我们记的账单，列表展示各个账单以及总的账单。

获取账单列表

先整个基础卡片，一会替换数据：

调云函数获取账单列表:

<template>
    <view class="container">
        <view>您一共消费了：{{total}}元</view>
        <view>
            <uni-card v-for="item in feeList" :key="item._id" :title="item.name" :extra="item.price">
                <text class="uni-body">{{item.createTime}}</text>
            </uni-card>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                total: 0,
                feeList: []
            }
        },
        mounted() {
            this.getTotalFee();
        },
        methods: {
            getTotalFee() {
                uni.showLoading({
                    title: '处理中...'
                })
                uniCloud.callFunction({
                    name: 'get'
                }).then((res) => {
                    uni.hideLoading()
                    this.feeList = res.result.data;
                })
            }
        }
    }
</script>

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

我们去记一笔多加几条数据：

导入moment格式化日期时间：

跟普通vue项目一样，可以通过npm安装：

导入使用：

计算总的消费：

getTotalFee() {
    uni.showLoading({
        title: '处理中...'
    })
    uniCloud.callFunction({
        name: 'get'
    }).then((res) => {
        uni.hideLoading()
        this.feeList = res.result.data;
        this.total = this.feeList.reduce((p, c) => Number(c.price) + p, 0);
    })
}

完整代码：

<template>
    <view class="container">
        <view>您一共消费了：{{total}}元</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>
    </view>
</template>

<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                total: 0,
                feeList: []
            }
        },
        mounted() {
            this.getTotalFee();
        },
        methods: {
            moment,
            getTotalFee() {
                uni.showLoading({
                    title: '处理中...'
                })
                uniCloud.callFunction({
                    name: 'get'
                }).then((res) => {
                    uni.hideLoading()
                    this.feeList = res.result.data;
                    this.total = this.feeList.reduce((p, c) => Number(c.price) + p, 0);
                })
            }
        }
    }
</script>

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

至此，首页的账单数据展示也简单实现了。后续会慢慢完善和丰富功能，今天的内容就是这么多，感谢观看！