收支明细界面0.5
This commit is contained in:
WindowBird
parent
ddb9e0b6b2
commit
ba71594057
19
api/balanceLog.js
Normal file
19
api/balanceLog.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import request from '../utils/request'
|
||||
|
||||
/**
|
||||
* 获取余额日志列表
|
||||
* @param {Object} params - 查询参数
|
||||
* @param {string} params.beginCreateTime - 开始日期时间 (yyyy-MM-dd HH:mm:ss)
|
||||
* @param {string} params.endCreateTime - 结束日期时间 (yyyy-MM-dd HH:mm:ss)
|
||||
* @param {string} params.type - 1支出 2收入 (可选)
|
||||
* @param {string} params.bstType - 记录类型 ORDER:订单、WITHDRAW:提现 (可选)
|
||||
* @param {Array} params.excludeBstTypes - 排除的记录类型数组 (可选)
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getBalanceLogList(params) {
|
||||
return request({
|
||||
url: '/app/balanceLog/list',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -36,7 +36,13 @@
|
|||
</view>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<cash-flow-card v-for="(item, index) in cardList" :key="index" :cardData="item" />
|
||||
<view v-if="loading" class="loading-container">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="cardList.length === 0" class="empty-container">
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
<cash-flow-card v-else v-for="(item, index) in cardList" :key="index" :cardData="item" />
|
||||
</view>
|
||||
<!-- 底部弹窗 -->
|
||||
<uni-popup ref="popup" :mask-click="true" type="bottom">
|
||||
|
|
@ -70,6 +76,7 @@ import commonEnum from '../../enum/commonEnum'
|
|||
import { getNavBarHeight } from '../../utils/system'
|
||||
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
||||
import CashFlowCard from '../../components/cashFlowCard/cashFlowCard.vue'
|
||||
import { getBalanceLogList } from '../../api/balanceLog'
|
||||
|
||||
export default {
|
||||
name: 'CashFlowPage',
|
||||
|
|
@ -85,64 +92,12 @@ export default {
|
|||
startDate: this.getDate('start'),
|
||||
endDate: this.getDate('end'),
|
||||
expenseTypes: [
|
||||
'餐饮',
|
||||
'交通',
|
||||
'服饰',
|
||||
'购物',
|
||||
'服务',
|
||||
'教育',
|
||||
'娱乐',
|
||||
'运动',
|
||||
'生活缴费',
|
||||
'旅行',
|
||||
'宠物',
|
||||
'医疗',
|
||||
'保险',
|
||||
'公益',
|
||||
'发红包',
|
||||
],
|
||||
cardList: [
|
||||
{
|
||||
date: '4月28日',
|
||||
outflow: 200.0,
|
||||
inflow: 200.0,
|
||||
items: [
|
||||
{
|
||||
title: '提现',
|
||||
status: '审核中',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: -200.0,
|
||||
},
|
||||
{
|
||||
title: '订单',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: 200.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '4月28日',
|
||||
outflow: 200.0,
|
||||
inflow: 200.0,
|
||||
items: [
|
||||
{
|
||||
title: '提现',
|
||||
status: '审核中',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: -200.0,
|
||||
},
|
||||
{
|
||||
title: '订单',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: 200000.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
'提现',
|
||||
'订单',
|
||||
'其他'
|
||||
],
|
||||
cardList: [],
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -151,12 +106,13 @@ export default {
|
|||
},
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时的逻辑
|
||||
this.loadBalanceLogData()
|
||||
},
|
||||
methods: {
|
||||
// 日期选择变化处理
|
||||
bindDateChange: function (e) {
|
||||
this.date = e.detail.value
|
||||
this.loadBalanceLogData()
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date()
|
||||
|
|
@ -167,6 +123,8 @@ export default {
|
|||
if (type === 'start') {
|
||||
year = year - 10
|
||||
} else if (type === 'end') {
|
||||
// 结束日期设为当前时间
|
||||
return new Date().toISOString().split('T')[0]
|
||||
}
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day > 9 ? day : '0' + day
|
||||
|
|
@ -185,6 +143,151 @@ export default {
|
|||
console.log('选择的类型：', type)
|
||||
this.expenseType = type
|
||||
this.closePopup()
|
||||
this.loadBalanceLogData()
|
||||
},
|
||||
|
||||
// 加载余额日志数据
|
||||
async loadBalanceLogData() {
|
||||
if (this.loading) return
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
// 获取当前时间的格式化字符串
|
||||
const now = new Date()
|
||||
const endTime = now.toISOString().slice(0, 19).replace('T', ' ')
|
||||
|
||||
const params = {
|
||||
beginCreateTime: this.date + ' 00:00:01',
|
||||
endCreateTime: endTime
|
||||
}
|
||||
|
||||
console.log('查询参数:', {
|
||||
beginCreateTime: params.beginCreateTime,
|
||||
endCreateTime: params.endCreateTime
|
||||
})
|
||||
|
||||
// 根据选择的类型添加筛选条件
|
||||
if (this.expenseType !== '全部类型') {
|
||||
if (this.expenseType === '提现') {
|
||||
params.bstType = 'WITHDRAW'
|
||||
console.log('查询类型: 提现')
|
||||
} else if (this.expenseType === '订单') {
|
||||
params.bstType = 'ORDER'
|
||||
console.log('查询类型: 订单')
|
||||
} else if (this.expenseType === '其他') {
|
||||
console.log('查询类型: 其他 (前端过滤)')
|
||||
}
|
||||
} else {
|
||||
console.log('查询类型: 全部类型')
|
||||
}
|
||||
|
||||
const response = await getBalanceLogList(params)
|
||||
console.log('API响应:', response)
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
this.processBalanceLogData(response.data)
|
||||
} else {
|
||||
console.error('获取数据失败:', response.msg)
|
||||
uni.showToast({
|
||||
title: response.msg || '获取数据失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用失败:', error)
|
||||
uni.showToast({
|
||||
title: '网络错误，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 处理余额日志数据
|
||||
processBalanceLogData(data) {
|
||||
this.cardList = data.map(item => {
|
||||
// 计算当日总支出和总收入
|
||||
const totalExpense = Math.abs(item.totalExpense || 0)
|
||||
const totalIncome = item.totalIncome || 0
|
||||
|
||||
// 处理余额日志列表
|
||||
let items = item.balanceLogList.map(log => {
|
||||
const createTime = new Date(log.createTime)
|
||||
const time = createTime.toTimeString().substring(0, 5) // 获取 HH:mm 格式
|
||||
|
||||
return {
|
||||
title: this.getTitleByBstType(log.bstType),
|
||||
status: this.getStatusByBstType(log.bstType),
|
||||
time: time,
|
||||
orderNumber: log.id,
|
||||
amount: log.amount,
|
||||
bstType: log.bstType // 保留原始类型用于过滤
|
||||
}
|
||||
})
|
||||
|
||||
// 如果是"其他"类型，过滤掉提现和订单
|
||||
if (this.expenseType === '其他') {
|
||||
const originalCount = items.length
|
||||
items = items.filter(item =>
|
||||
item.bstType !== 'WITHDRAW' && item.bstType !== 'ORDER'
|
||||
)
|
||||
console.log(`其他类型过滤: 原始${originalCount}条，过滤后${items.length}条`)
|
||||
}
|
||||
|
||||
// 格式化日期显示
|
||||
const date = this.formatDateForDisplay(item.createTime)
|
||||
|
||||
return {
|
||||
date: date,
|
||||
outflow: totalExpense,
|
||||
inflow: totalIncome,
|
||||
items: items
|
||||
}
|
||||
})
|
||||
|
||||
// 更新页面显示的支出和收入金额
|
||||
this.updateTotalAmounts()
|
||||
},
|
||||
|
||||
// 根据业务类型获取标题
|
||||
getTitleByBstType(bstType) {
|
||||
const titleMap = {
|
||||
'WITHDRAW': '提现',
|
||||
'ORDER': '订单'
|
||||
}
|
||||
return titleMap[bstType] || '其他'
|
||||
},
|
||||
|
||||
// 根据业务类型获取状态
|
||||
getStatusByBstType(bstType) {
|
||||
const statusMap = {
|
||||
'WITHDRAW': '审核中',
|
||||
'ORDER': ''
|
||||
}
|
||||
return statusMap[bstType] || ''
|
||||
},
|
||||
|
||||
// 格式化日期显示
|
||||
formatDateForDisplay(dateString) {
|
||||
const date = new Date(dateString)
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
return `${month}月${day}日`
|
||||
},
|
||||
|
||||
// 更新总金额显示
|
||||
updateTotalAmounts() {
|
||||
let totalExpense = 0
|
||||
let totalIncome = 0
|
||||
|
||||
this.cardList.forEach(card => {
|
||||
totalExpense += card.outflow
|
||||
totalIncome += card.inflow
|
||||
})
|
||||
|
||||
this.expenditures = totalExpense.toFixed(2)
|
||||
this.Recorded = totalIncome.toFixed(2)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -327,4 +430,20 @@ view {
|
|||
font-size: 28rpx;
|
||||
box-shadow: #ff803a 0 2rpx 8rpx;
|
||||
}
|
||||
|
||||
/* 加载和空状态样式 */
|
||||
.loading-container,
|
||||
.empty-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200rpx;
|
||||
margin: 40rpx;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user