0ccfa57d7b
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 24s
Docker Build & Deploy / Deploy to Production (push) Successful in 10s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
581 lines
18 KiB
Vue
581 lines
18 KiB
Vue
<template>
|
||
<div class="page-container-flex">
|
||
<van-nav-bar title="预算管理" placeholder>
|
||
<template #right>
|
||
<van-icon
|
||
v-if="activeTab !== BudgetCategory.Savings
|
||
&& uncoveredCategories.length > 0
|
||
&& !isArchive"
|
||
name="warning-o"
|
||
size="20"
|
||
color="var(--van-danger-color)"
|
||
style="margin-right: 12px"
|
||
title="查看未覆盖预算的分类"
|
||
@click="showUncoveredDetails = true"
|
||
/>
|
||
<van-icon
|
||
v-if="isArchive"
|
||
name="records-o"
|
||
size="20"
|
||
title="已归档月份总结"
|
||
style="margin-right: 12px"
|
||
@click="showArchiveSummary()"
|
||
/>
|
||
<van-icon
|
||
v-if="activeTab !== BudgetCategory.Savings"
|
||
name="plus"
|
||
size="20"
|
||
title="添加预算"
|
||
@click="budgetEditRef.open({ category: activeTab })"
|
||
/>
|
||
<van-icon
|
||
v-else
|
||
name="setting-o"
|
||
size="20"
|
||
title="储蓄分类配置"
|
||
@click="savingsConfigRef.open()"
|
||
/>
|
||
</template>
|
||
</van-nav-bar>
|
||
|
||
<van-tabs v-model:active="activeTab" type="card" class="budget-tabs" style="margin: 12px 4px;">
|
||
<van-tab title="支出" :name="BudgetCategory.Expense">
|
||
<BudgetSummary
|
||
v-if="activeTab !== BudgetCategory.Savings"
|
||
v-model:date="selectedDate"
|
||
:stats="overallStats"
|
||
:title="activeTabTitle"
|
||
:get-value-class="getValueClass"
|
||
/>
|
||
<van-pull-refresh v-model="isRefreshing" class="scroll-content" @refresh="onRefresh">
|
||
<div class="budget-list">
|
||
<template v-if="expenseBudgets?.length > 0">
|
||
<van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
|
||
<BudgetCard
|
||
:budget="budget"
|
||
:progress-color="getProgressColor(budget)"
|
||
:percent-class="{ 'warning': (budget.current / budget.limit) > 0.8 }"
|
||
:period-label="getPeriodLabel(budget.type)"
|
||
@click="budgetEditRef.open({
|
||
data: budget,
|
||
isEditFlag: true,
|
||
category: budget.category
|
||
})"
|
||
>
|
||
<template #amount-info>
|
||
<div class="info-item">
|
||
<div class="label">已支出</div>
|
||
<div class="value expense">¥{{ formatMoney(budget.current) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">预算</div>
|
||
<div class="value">¥{{ formatMoney(budget.limit) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">余额</div>
|
||
<div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
|
||
¥{{ formatMoney(budget.limit - budget.current) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</BudgetCard>
|
||
<template #right>
|
||
<van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
|
||
</template>
|
||
</van-swipe-cell>
|
||
</template>
|
||
<van-empty v-else description="暂无支出预算" />
|
||
</div>
|
||
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
||
</van-pull-refresh>
|
||
</van-tab>
|
||
|
||
<van-tab title="收入" :name="BudgetCategory.Income">
|
||
<BudgetSummary
|
||
v-if="activeTab !== BudgetCategory.Savings"
|
||
v-model:date="selectedDate"
|
||
:stats="overallStats"
|
||
:title="activeTabTitle"
|
||
:get-value-class="getValueClass"
|
||
/>
|
||
<van-pull-refresh v-model="isRefreshing" class="scroll-content" @refresh="onRefresh">
|
||
<div class="budget-list">
|
||
<template v-if="incomeBudgets?.length > 0">
|
||
<van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
|
||
<BudgetCard
|
||
:budget="budget"
|
||
:progress-color="getIncomeProgressColor(budget)"
|
||
:percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
|
||
:period-label="getPeriodLabel(budget.type)"
|
||
@click="budgetEditRef.open({
|
||
data: budget,
|
||
isEditFlag: true,
|
||
category: budget.category
|
||
})"
|
||
>
|
||
<template #amount-info>
|
||
<div class="info-item">
|
||
<div class="label">已收入</div>
|
||
<div class="value income">¥{{ formatMoney(budget.current) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">目标</div>
|
||
<div class="value">¥{{ formatMoney(budget.limit) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">差额</div>
|
||
<div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
|
||
¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</BudgetCard>
|
||
<template #right>
|
||
<van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
|
||
</template>
|
||
</van-swipe-cell>
|
||
</template>
|
||
<van-empty v-else description="暂无收入预算" />
|
||
</div>
|
||
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
||
</van-pull-refresh>
|
||
</van-tab>
|
||
|
||
<van-tab title="存款" :name="BudgetCategory.Savings">
|
||
<van-pull-refresh v-model="isRefreshing" class="scroll-content" style="padding-top:4px" @refresh="onRefresh">
|
||
<div class="budget-list">
|
||
<template v-if="savingsBudgets?.length > 0">
|
||
<BudgetCard
|
||
v-for="budget in savingsBudgets"
|
||
:key="budget.id"
|
||
:budget="budget"
|
||
progress-color="var(--van-success-color)"
|
||
:percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
|
||
:period-label="getPeriodLabel(budget.type)"
|
||
style="margin: 0 12px 12px;"
|
||
>
|
||
<template #amount-info>
|
||
<div class="info-item">
|
||
<div class="label">已存</div>
|
||
<div class="value income">¥{{ formatMoney(budget.current) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">目标</div>
|
||
<div class="value">¥{{ formatMoney(budget.limit) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="label">还差</div>
|
||
<div class="value expense">
|
||
¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</BudgetCard>
|
||
</template>
|
||
<van-empty v-else description="暂无存款计划" />
|
||
</div>
|
||
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
||
</van-pull-refresh>
|
||
</van-tab>
|
||
</van-tabs>
|
||
|
||
<BudgetEditPopup
|
||
ref="budgetEditRef"
|
||
@success="fetchBudgetList"
|
||
/>
|
||
<SavingsConfigPopup
|
||
ref="savingsConfigRef"
|
||
@success="fetchBudgetList"
|
||
/>
|
||
|
||
<PopupContainer
|
||
v-model="showUncoveredDetails"
|
||
title="未覆盖预算的分类"
|
||
:subtitle="`本月共 <b style='color:var(--van-primary-color)'>${uncoveredCategories.length}</b> 个分类未设置预算`"
|
||
height="60%"
|
||
>
|
||
<div class="uncovered-list">
|
||
<div v-for="item in uncoveredCategories" :key="item.category" class="uncovered-item">
|
||
<div class="item-left">
|
||
<div class="category-name">{{ item.category }}</div>
|
||
<div class="transaction-count">{{ item.transactionCount }} 笔记录</div>
|
||
</div>
|
||
<div class="item-right">
|
||
<div class="item-amount" :class="activeTab === BudgetCategory.Expense ? 'expense' : 'income'">
|
||
¥{{ formatMoney(item.totalAmount) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<van-button block round type="primary" @click="showUncoveredDetails = false">
|
||
我知道了
|
||
</van-button>
|
||
</template>
|
||
</PopupContainer>
|
||
|
||
<PopupContainer
|
||
v-model="showSummaryPopup"
|
||
title="月份归档总结"
|
||
:subtitle="`${selectedDate.getFullYear()}年${selectedDate.getMonth() + 1}月`"
|
||
height="50%"
|
||
>
|
||
<div style="padding: 16px;">
|
||
<van-field
|
||
v-model="archiveSummary"
|
||
rows="6"
|
||
autosize
|
||
label="总结语"
|
||
type="textarea"
|
||
:placeholder="`请输入${selectedDate.getFullYear()}年${selectedDate.getMonth() + 1}月预算执行的总结或感悟...`"
|
||
show-word-limit
|
||
maxlength="500"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<van-button
|
||
block
|
||
round
|
||
type="primary"
|
||
:loading="isSavingSummary"
|
||
@click="handleSaveSummary"
|
||
>
|
||
保存总结
|
||
</van-button>
|
||
</template>
|
||
</PopupContainer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, watch } from 'vue'
|
||
import { showToast, showConfirmDialog } from 'vant'
|
||
import { getBudgetList, deleteBudget, getCategoryStats, getUncoveredCategories, getArchiveSummary, updateArchiveSummary } from '@/api/budget'
|
||
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
|
||
import BudgetCard from '@/components/Budget/BudgetCard.vue'
|
||
import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
|
||
import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
|
||
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)
|
||
const showUncoveredDetails = ref(false)
|
||
const uncoveredCategories = ref([])
|
||
|
||
const showSummaryPopup = ref(false)
|
||
const archiveSummary = ref('')
|
||
const isSavingSummary = ref(false)
|
||
|
||
const expenseBudgets = ref([])
|
||
const incomeBudgets = ref([])
|
||
const savingsBudgets = ref([])
|
||
const overallStats = ref({
|
||
month: { rate: '0.0', current: 0, limit: 0, count: 0 },
|
||
year: { rate: '0.0', current: 0, limit: 0, count: 0 }
|
||
})
|
||
|
||
const activeTabTitle = computed(() => {
|
||
if (activeTab.value === BudgetCategory.Expense) return '使用'
|
||
return '达成'
|
||
})
|
||
|
||
const isArchive = computed(() => {
|
||
const now = new Date()
|
||
return selectedDate.value.getFullYear() < now.getFullYear() ||
|
||
(selectedDate.value.getFullYear() === now.getFullYear() && selectedDate.value.getMonth() < now.getMonth())
|
||
})
|
||
|
||
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 ''
|
||
if (activeTab.value === BudgetCategory.Expense) {
|
||
if (numRate >= 100) return 'expense'
|
||
if (numRate >= 80) return 'warning'
|
||
return 'income'
|
||
} else {
|
||
if (numRate >= 100) return 'income'
|
||
if (numRate >= 80) return 'warning'
|
||
return 'expense'
|
||
}
|
||
}
|
||
|
||
const fetchBudgetList = async () => {
|
||
try {
|
||
const res = await getBudgetList(selectedDate.value.toISOString())
|
||
if (res.success) {
|
||
const data = res.data || []
|
||
expenseBudgets.value = data.filter(b => b.category === BudgetCategory.Expense)
|
||
incomeBudgets.value = data.filter(b => b.category === BudgetCategory.Income)
|
||
savingsBudgets.value = data.filter(b => b.category === BudgetCategory.Savings)
|
||
}
|
||
} catch (err) {
|
||
console.error('加载预算列表失败', err)
|
||
}
|
||
}
|
||
|
||
const onRefresh = async () => {
|
||
try {
|
||
await Promise.all([fetchBudgetList(), fetchCategoryStats(), fetchUncoveredCategories()])
|
||
} catch (err) {
|
||
console.error('刷新失败', err)
|
||
} finally {
|
||
isRefreshing.value = false
|
||
}
|
||
}
|
||
|
||
const fetchCategoryStats = async () => {
|
||
try {
|
||
const res = await getCategoryStats(activeTab.value, selectedDate.value.toISOString())
|
||
if (res.success) {
|
||
// 转换后端返回的数据格式为前端需要的格式
|
||
const data = res.data
|
||
overallStats.value = {
|
||
month: {
|
||
rate: data.month?.rate?.toFixed(1) || '0.0',
|
||
current: data.month?.current || 0,
|
||
limit: data.month?.limit || 0,
|
||
count: data.month?.count || 0
|
||
},
|
||
year: {
|
||
rate: data.year?.rate?.toFixed(1) || '0.0',
|
||
current: data.year?.current || 0,
|
||
limit: data.year?.limit || 0,
|
||
count: data.year?.count || 0
|
||
}
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('加载分类统计失败', err)
|
||
}
|
||
}
|
||
|
||
const fetchUncoveredCategories = async () => {
|
||
if (activeTab.value === BudgetCategory.Savings) {
|
||
uncoveredCategories.value = []
|
||
return
|
||
}
|
||
try {
|
||
const res = await getUncoveredCategories(activeTab.value, selectedDate.value.toISOString())
|
||
if (res.success) {
|
||
uncoveredCategories.value = res.data || []
|
||
}
|
||
} catch (err) {
|
||
console.error('获取未覆盖分类失败', err)
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
await Promise.all([
|
||
fetchBudgetList(),
|
||
fetchCategoryStats(),
|
||
fetchUncoveredCategories()
|
||
])
|
||
} catch (err) {
|
||
console.error('获取初始化数据失败', err)
|
||
}
|
||
})
|
||
|
||
const formatMoney = (val) => {
|
||
return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
||
}
|
||
|
||
const getPeriodLabel = (type) => {
|
||
const isCurrent = (date) => {
|
||
const now = new Date()
|
||
return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
|
||
}
|
||
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) => {
|
||
const ratio = budget.current / budget.limit
|
||
if (ratio >= 1) return 'var(--van-danger-color)'
|
||
if (ratio > 0.8) return 'var(--van-warning-color)'
|
||
return 'var(--van-primary-color)'
|
||
}
|
||
|
||
const getIncomeProgressColor = (budget) => {
|
||
const ratio = budget.current / budget.limit
|
||
if (ratio >= 1) return 'var(--van-success-color)'
|
||
return 'var(--van-primary-color)'
|
||
}
|
||
|
||
const handleDelete = (budget) => {
|
||
showConfirmDialog({
|
||
title: '确认删除',
|
||
message: `确定要删除预算 "${budget.name}" 吗？`,
|
||
}).then(async () => {
|
||
try {
|
||
const res = await deleteBudget(budget.id)
|
||
if (res.success) {
|
||
showToast('已删除')
|
||
fetchBudgetList()
|
||
}
|
||
} catch (err) {
|
||
showToast('删除失败')
|
||
console.error('删除预算失败', err)
|
||
}
|
||
}).catch(() => {})
|
||
}
|
||
|
||
const showArchiveSummary = async () => {
|
||
try {
|
||
const res = await getArchiveSummary(selectedDate.value.toISOString())
|
||
if (res.success) {
|
||
archiveSummary.value = res.data || ''
|
||
showSummaryPopup.value = true
|
||
}
|
||
} catch (err) {
|
||
console.error('获取总结失败', err)
|
||
showToast('获取总结失败')
|
||
}
|
||
}
|
||
|
||
const handleSaveSummary = async () => {
|
||
if (isSavingSummary.value) return
|
||
isSavingSummary.value = true
|
||
try {
|
||
const res = await updateArchiveSummary({
|
||
referenceDate: selectedDate.value.toISOString(),
|
||
summary: archiveSummary.value
|
||
})
|
||
if (res.success) {
|
||
showToast('已保存')
|
||
showSummaryPopup.value = false
|
||
}
|
||
} catch (err) {
|
||
console.error('保存总结失败', err)
|
||
showToast('保存总结失败')
|
||
} finally {
|
||
isSavingSummary.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.budget-tabs {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
margin-top: 12px;
|
||
min-height: 0;
|
||
}
|
||
|
||
:deep(.van-tabs__content) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
:deep(.van-tab__panel) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.budget-list {
|
||
padding-top: 8px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.budget-list :deep(.van-swipe-cell) {
|
||
margin: 0 12px 12px;
|
||
}
|
||
|
||
.scroll-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.delete-button {
|
||
height: 100%;
|
||
}
|
||
|
||
:deep(.van-tabs__nav--card) {
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.uncovered-list {
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.uncovered-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background-color: var(--van-background-2);
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.item-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.category-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: var(--van-text-color);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.transaction-count {
|
||
font-size: 12px;
|
||
color: var(--van-text-color-2);
|
||
}
|
||
|
||
.item-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.item-amount {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
font-family: DIN Alternate, system-ui;
|
||
}
|
||
|
||
/* 设置页面容器背景色 */
|
||
:deep(.van-nav-bar) {
|
||
background: transparent !important;
|
||
}
|
||
</style>
|