feat: 更新预算摘要组件以支持日期选择;在预算视图中添加日期绑定,优化数据获取逻辑
All checks were successful
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Docker Build & Deploy / Build Docker Image (push) Successful in 17s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s

This commit is contained in:
2026-01-11 12:41:52 +08:00
parent d2b2158b30
commit 49023237e7
2 changed files with 193 additions and 25 deletions

View File

@@ -29,6 +29,7 @@
<van-tab title="支出" :name="BudgetCategory.Expense">
<BudgetSummary
v-if="activeTab !== BudgetCategory.Savings"
v-model:date="selectedDate"
:stats="overallStats"
:title="activeTabTitle"
:get-value-class="getValueClass"
@@ -80,6 +81,7 @@
<van-tab title="收入" :name="BudgetCategory.Income">
<BudgetSummary
v-if="activeTab !== BudgetCategory.Savings"
v-model:date="selectedDate"
:stats="overallStats"
:title="activeTabTitle"
:get-value-class="getValueClass"
@@ -217,6 +219,7 @@ import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'
import PopupContainer from '@/components/PopupContainer.vue'
const activeTab = ref(BudgetCategory.Expense)
const selectedDate = ref(new Date())
const budgetEditRef = ref(null)
const savingsConfigRef = ref(null)
const isRefreshing = ref(false)
@@ -240,6 +243,14 @@ watch(activeTab, async () => {
await Promise.all([fetchCategoryStats(), fetchUncoveredCategories()])
})
watch(selectedDate, async () => {
await Promise.all([
fetchBudgetList(),
fetchCategoryStats(),
fetchUncoveredCategories()
])
})
const getValueClass = (rate) => {
const numRate = parseFloat(rate)
if (numRate === 0) return ''
@@ -256,7 +267,7 @@ const getValueClass = (rate) => {
const fetchBudgetList = async () => {
try {
const res = await getBudgetList()
const res = await getBudgetList(selectedDate.value.toISOString())
if (res.success) {
const data = res.data || []
expenseBudgets.value = data.filter(b => b.category === BudgetCategory.Expense)
@@ -280,7 +291,7 @@ const onRefresh = async () => {
const fetchCategoryStats = async () => {
try {
const res = await getCategoryStats(activeTab.value)
const res = await getCategoryStats(activeTab.value, selectedDate.value.toISOString())
if (res.success) {
// 转换后端返回的数据格式为前端需要的格式
const data = res.data
@@ -310,7 +321,7 @@ const fetchUncoveredCategories = async () => {
return
}
try {
const res = await getUncoveredCategories(activeTab.value)
const res = await getUncoveredCategories(activeTab.value, selectedDate.value.toISOString())
if (res.success) {
uncoveredCategories.value = res.data || []
}
@@ -336,11 +347,22 @@ const formatMoney = (val) => {
}
const getPeriodLabel = (type) => {
const map = {
[BudgetPeriodType.Month]: '本月',
[BudgetPeriodType.Year]: '本年'
const isCurrent = (date) => {
const now = new Date()
return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
}
return map[type] || '周期'
const isCurrentYear = (date) => {
const now = new Date()
return date.getFullYear() === now.getFullYear()
}
if (type === BudgetPeriodType.Month) {
return isCurrent(selectedDate.value) ? '本月' : `${selectedDate.value.getMonth() + 1}月`
}
if (type === BudgetPeriodType.Year) {
return isCurrentYear(selectedDate.value) ? '本年' : `${selectedDate.value.getFullYear()}年`
}
return '周期'
}
const getProgressColor = (budget) => {