携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
昨天我们实现了首页展示账单列表和账单总数的功能，今天我们继续完善我们的程序，实现历史记录的查看。
需求分析
- 内置几个常用按钮近一周，近一月，近三月，近半年。可快速查询这些时间段内的账单情况。
- 可选择具体日期查询（暂时不做）
- 可切换年份（暂时不做）
- 用图表展示（暂时不做，咱们后面会专门讲图表的时候再做）
ok，咱们先怼几个按钮到页面上：
<template>
<view class="container">
<view class="btn-group">
<button type="primary" size="mini">近一周</button>
<button type="default" size="mini">近一月</button>
<button type="default" size="mini">近三月</button>
<button type="default" size="mini">近半年</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 30upx;
.btn-group {
display: flex;
justify-content: space-around;
}
}
</style>
复制代码查看历史记录接口其实和首页的账单列表是相同的，只是查询的条件不同。
无意间看到这个组件，还挺符合我们这个列表展示的。cv了
之前我们的云函数是直接返回10条数据，没有任何查询条件，我们稍加修改，增加日期查询：
'use strict';
const db = uniCloud.database()
const _ = db.command
exports.main = async (event, context) => {
const collection = db.collection('bill')
const res = await collection.where({'createTime': _.gt(event.beginTime)}).get()
return res
};
复制代码也就是查询比我们设定的开始时间之后的数据。注意每次修改了云函数需要重新上传部署才可以使用。
我们现在来修改我们几个按钮的查询逻辑：
<view class="btn-group">
<button type="primary" size="mini" @click="getListByDate('week')">近一周</button>
<button type="default" size="mini" @click="getListByDate('month')">近一月</button>
<button type="default" size="mini" @click="getListByDate('season')">近三月</button>
<button type="default" size="mini" @click="getListByDate('halfyear')">近半年</button>
</view>
复制代码getListByDate(type) {
uni.showLoading({
title: '处理中...'
})
let beginTime = null;
let now = new Date().getTime();
let day = 24 * 60 * 60 * 1000;
switch (type) {
case 'week':
beginTime = now - 7 * day;
break;
case 'month':
beginTime = now - 30 * day;
break;
case 'season':
beginTime = now - 90 * day;
break;
case 'halfyear':
beginTime = now - 180 * day;
break;
}
uniCloud.callFunction({
name: 'get',
data: {
beginTime
}
}).then((res) => {
uni.hideLoading()
this.list = res.result.data;
})
}
复制代码点击查询：
由于我们的数据跨度很小，都是这两天加的，所以看不出效果，我们去数据库把时间改改：
双击即可修改，完了点击确定就可以了。我们再去页面上刷新看看：
完整代码：
<template>
<view class="container">
<view class="btn-group">
<button :type="current === 'week' ? 'primary' : 'default'" size="mini" @click="getListByDate('week')">近一周</button>
<button :type="current === 'month' ? 'primary' : 'default'" size="mini" @click="getListByDate('month')">近一月</button>
<button :type="current === 'season' ? 'primary' : 'default'" size="mini" @click="getListByDate('season')">近三月</button>
<button :type="current === 'halfyear' ? 'primary' : 'default'" size="mini" @click="getListByDate('halfyear')">近半年</button>
</view>
<uni-list>
<uni-list-chat :avatar="billImg" v-for="item in list" :key="item._id" :title="item.price" :note="item.name"
:time="moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')"></uni-list-chat>
</uni-list>
</view>
</template>
<script>
import billImg from '@/static/bill.jpg';
import moment from 'moment';
export default {
data() {
return {
list: [],
billImg,
current: 'week'
}
},
mounted() {
this.getListByDate('week');
},
methods: {
moment,
getListByDate(type) {
this.current = type;
uni.showLoading({
title: '处理中...'
})
let beginTime = null;
let now = new Date().getTime();
let day = 24 * 60 * 60 * 1000;
switch (type) {
case 'week':
beginTime = now - 7 * day;
break;
case 'month':
beginTime = now - 30 * day;
break;
case 'season':
beginTime = now - 90 * day;
break;
case 'halfyear':
beginTime = now - 180 * day;
break;
}
uniCloud.callFunction({
name: 'get',
data: {
beginTime
}
}).then((res) => {
uni.hideLoading()
this.list = res.result.data;
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 30upx;
.btn-group {
display: flex;
justify-content: space-around;
}
}
</style>
复制代码至此，查看历史账单的功能就完成啦，是不是很简单啊，今天就分享到这，明天咱们继续往下做。