|
|
@@ -1,7 +1,23 @@
|
|
|
+<!--
|
|
|
+ 支出汇总:DateSelect 旁可选记账时间(payTime,默认) / 发生时间(sendTime)。
|
|
|
+-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
|
|
|
- <view class="top-bar" style="margin:20upx 0 20upx 40upx;padding-top:30upx;">
|
|
|
+ <view class="date-filter-row">
|
|
|
+ <!-- 记账时间 / 发生时间:只切换筛字段,共用同一 DateSelect -->
|
|
|
+ <view class="time-type-row">
|
|
|
+ <view
|
|
|
+ class="time-type-item"
|
|
|
+ :class="{ active: timeType === 'pay' }"
|
|
|
+ @click="changeTimeType('pay')"
|
|
|
+ >记账时间</view>
|
|
|
+ <view
|
|
|
+ class="time-type-item"
|
|
|
+ :class="{ active: timeType === 'send' }"
|
|
|
+ @click="changeTimeType('send')"
|
|
|
+ >发生时间</view>
|
|
|
+ </view>
|
|
|
<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
|
|
|
</view>
|
|
|
|
|
|
@@ -48,10 +64,20 @@ export default {
|
|
|
searchTime:'',
|
|
|
startTime:'',
|
|
|
endTime:'',
|
|
|
+ // pay=记账时间(默认) / send=发生时间
|
|
|
+ timeType: 'pay',
|
|
|
catList:[]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 切换记账时间 / 发生时间后刷新汇总 */
|
|
|
+ changeTimeType(type) {
|
|
|
+ if (this.timeType === type) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.timeType = type
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
selectDateFn(val) {
|
|
|
this.searchTime = val.searchTime
|
|
|
this.startTime = val.startTime
|
|
|
@@ -59,7 +85,12 @@ export default {
|
|
|
this.init()
|
|
|
},
|
|
|
init(){
|
|
|
- getStat({searchTime: this.searchTime,startTime: this.startTime,endTime: this.endTime}).then(res=>{
|
|
|
+ getStat({
|
|
|
+ searchTime: this.searchTime,
|
|
|
+ startTime: this.startTime,
|
|
|
+ endTime: this.endTime,
|
|
|
+ timeType: this.timeType
|
|
|
+ }).then(res=>{
|
|
|
if(res.code == 1){
|
|
|
this.bxList = res.data.list ? res.data.list : []
|
|
|
this.catList = res.data.catList ? res.data.catList : []
|
|
|
@@ -70,4 +101,37 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-</style>
|
|
|
+.date-filter-row {
|
|
|
+ margin: 20upx 20upx 20upx 20upx;
|
|
|
+ padding-top: 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .time-type-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 12upx;
|
|
|
+ }
|
|
|
+ .time-type-item {
|
|
|
+ height: 56upx;
|
|
|
+ line-height: 56upx;
|
|
|
+ padding: 0 16upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 8upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #fff;
|
|
|
+ background: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bar {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|