856 lines
28 KiB
Vue
856 lines
28 KiB
Vue
<template>
|
|
<div class="page-container-flex">
|
|
<van-nav-bar title="预算管理" placeholder>
|
|
<template #right>
|
|
<van-icon name="plus" size="20" @click="showAddPopup = true" />
|
|
</template>
|
|
</van-nav-bar>
|
|
|
|
<div class="scroll-content">
|
|
<div class="page-content">
|
|
<van-tabs v-model:active="activeTab" sticky offset-top="0" type="card">
|
|
<van-tab title="支出" :name="BudgetCategory.Expense">
|
|
<div class="summary-card common-card">
|
|
<div class="summary-item">
|
|
<div class="label">本周{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.week.rate)">
|
|
{{ overallStats.week.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.week.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">本月{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.month.rate)">
|
|
{{ overallStats.month.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.month.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">年度{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.year.rate)">
|
|
{{ overallStats.year.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.year.count }}个预算</div>
|
|
</div>
|
|
</div>
|
|
<div class="budget-list">
|
|
<template v-if="expenseBudgets?.length > 0">
|
|
<van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
|
|
<div class="common-card budget-card">
|
|
<div class="card-header">
|
|
<div class="budget-info">
|
|
<h3 class="card-title">{{ budget.name }}</h3>
|
|
<van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
|
|
<van-tag v-else type="success" size="small" plain>进行中</van-tag>
|
|
</div>
|
|
<div class="header-actions">
|
|
<van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain @click="handleToggleStop(budget)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="budget-body">
|
|
<div class="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>
|
|
</div>
|
|
|
|
<div class="progress-section">
|
|
<div class="progress-info">
|
|
<span class="period-type">{{ getPeriodLabel(budget.type) }}进度</span>
|
|
<span class="percent" :class="{ 'warning': (budget.current / budget.limit) > 0.8 }">
|
|
{{ Math.round((budget.current / budget.limit) * 100) }}%
|
|
</span>
|
|
</div>
|
|
<van-progress
|
|
:percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)"
|
|
stroke-width="8"
|
|
:color="getProgressColor(budget)"
|
|
:show-pivot="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<div class="period-navigation">
|
|
<van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
|
|
<span class="period-text">{{ budget.period }}</span>
|
|
<van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</van-tab>
|
|
|
|
<van-tab title="收入" :name="BudgetCategory.Income">
|
|
<div class="summary-card common-card">
|
|
<div class="summary-item">
|
|
<div class="label">本周{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.week.rate)">
|
|
{{ overallStats.week.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.week.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">本月{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.month.rate)">
|
|
{{ overallStats.month.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.month.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">年度{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.year.rate)">
|
|
{{ overallStats.year.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.year.count }}个预算</div>
|
|
</div>
|
|
</div>
|
|
<div class="budget-list">
|
|
<template v-if="incomeBudgets?.length > 0">
|
|
<van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
|
|
<div class="common-card budget-card">
|
|
<div class="card-header">
|
|
<div class="budget-info">
|
|
<h3 class="card-title">{{ budget.name }}</h3>
|
|
<van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
|
|
<van-tag v-else type="success" size="small" plain>进行中</van-tag>
|
|
</div>
|
|
<div class="header-actions">
|
|
<van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="budget-body">
|
|
<div class="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>
|
|
</div>
|
|
|
|
<div class="progress-section">
|
|
<div class="progress-info">
|
|
<span class="period-type">{{ getPeriodLabel(budget.type) }}达成度</span>
|
|
<span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
|
|
{{ Math.round((budget.current / budget.limit) * 100) }}%
|
|
</span>
|
|
</div>
|
|
<van-progress
|
|
:percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)"
|
|
stroke-width="8"
|
|
:color="getIncomeProgressColor(budget)"
|
|
:show-pivot="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<div class="period-navigation">
|
|
<van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
|
|
<span class="period-text">{{ budget.period }}</span>
|
|
<van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</van-tab>
|
|
|
|
<van-tab title="存款" :name="BudgetCategory.Savings">
|
|
<div class="summary-card common-card">
|
|
<div class="summary-item">
|
|
<div class="label">本周{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.week.rate)">
|
|
{{ overallStats.week.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.week.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">本月{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.month.rate)">
|
|
{{ overallStats.month.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.month.count }}个预算</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="summary-item">
|
|
<div class="label">年度{{ activeTabTitle }}率</div>
|
|
<div class="value" :class="getValueClass(overallStats.year.rate)">
|
|
{{ overallStats.year.rate }}<span class="unit">%</span>
|
|
</div>
|
|
<div class="sub-label">{{ overallStats.year.count }}个预算</div>
|
|
</div>
|
|
</div>
|
|
<div class="budget-list">
|
|
<template v-if="savingsBudgets?.length > 0">
|
|
<van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
|
|
<div class="common-card budget-card">
|
|
<div class="card-header">
|
|
<div class="budget-info">
|
|
<h3 class="card-title">{{ budget.name }}</h3>
|
|
<van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
|
|
<van-tag v-else type="success" size="small" plain>积累中</van-tag>
|
|
</div>
|
|
<div class="header-actions">
|
|
<van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="budget-body">
|
|
<div class="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>
|
|
</div>
|
|
|
|
<div class="progress-section">
|
|
<div class="progress-info">
|
|
<span class="period-type">储蓄进度</span>
|
|
<span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
|
|
{{ Math.round((budget.current / budget.limit) * 100) }}%
|
|
</span>
|
|
</div>
|
|
<van-progress
|
|
:percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)"
|
|
stroke-width="8"
|
|
color="#07c160"
|
|
:show-pivot="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<div class="period-navigation">
|
|
<van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
|
|
<span class="period-text">
|
|
{{ budget.period }}
|
|
</span>
|
|
<van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</van-tab>
|
|
</van-tabs>
|
|
<!-- 底部安全距离 -->
|
|
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加预算弹窗 -->
|
|
<PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
|
|
<div class="add-budget-form">
|
|
<van-form>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
v-model="form.name"
|
|
name="name"
|
|
label="预算名称"
|
|
placeholder="例如：每月餐饮、年度奖金"
|
|
:rules="[{ required: true, message: '请填写预算名称' }]"
|
|
/>
|
|
<van-field name="type" label="统计周期">
|
|
<template #input>
|
|
<van-radio-group v-model="form.type" direction="horizontal">
|
|
<van-radio :name="BudgetPeriodType.Week">周</van-radio>
|
|
<van-radio :name="BudgetPeriodType.Month">月</van-radio>
|
|
<van-radio :name="BudgetPeriodType.Year">年</van-radio>
|
|
<van-radio :name="BudgetPeriodType.Longterm">长期</van-radio>
|
|
</van-radio-group>
|
|
</template>
|
|
</van-field>
|
|
<van-field
|
|
v-model="form.limit"
|
|
type="number"
|
|
name="limit"
|
|
label="预算金额"
|
|
placeholder="0.00"
|
|
:rules="[{ required: true, message: '请填写预算金额' }]"
|
|
>
|
|
<template #extra>
|
|
<span>元</span>
|
|
</template>
|
|
</van-field>
|
|
<van-field name="category" label="类型">
|
|
<template #input>
|
|
<van-radio-group v-model="form.category" direction="horizontal">
|
|
<van-radio :name="BudgetCategory.Expense">支出</van-radio>
|
|
<van-radio :name="BudgetCategory.Income">收入</van-radio>
|
|
<van-radio :name="BudgetCategory.Savings">存款</van-radio>
|
|
</van-radio-group>
|
|
</template>
|
|
</van-field>
|
|
<van-field label="相关分类">
|
|
<template #input>
|
|
<div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
|
|
<div v-else class="selected-categories">
|
|
<span class="ellipsis-text">
|
|
{{ form.selectedCategories.join('、') }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</van-field>
|
|
<div class="classify-buttons">
|
|
<van-button
|
|
v-if="filteredCategories.length > 0"
|
|
:type="isAllSelected ? 'primary' : 'default'"
|
|
size="small"
|
|
class="classify-btn all-btn"
|
|
@click="toggleAll"
|
|
>
|
|
{{ isAllSelected ? '取消全选' : '全选' }}
|
|
</van-button>
|
|
<van-button
|
|
v-for="item in filteredCategories"
|
|
:key="item.id"
|
|
:type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
|
|
size="small"
|
|
class="classify-btn"
|
|
@click="toggleCategory(item.name)"
|
|
>
|
|
{{ item.name }}
|
|
</van-button>
|
|
<div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
|
|
</div>
|
|
|
|
</van-cell-group>
|
|
</van-form>
|
|
</div>
|
|
<template #footer>
|
|
<van-button block type="primary" @click="onSubmit">保存预算</van-button>
|
|
</template>
|
|
</PopupContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
|
import { showToast, showConfirmDialog } from 'vant'
|
|
import { getCategoryList } from '@/api/transactionCategory'
|
|
import { getBudgetList, createBudget, deleteBudget, toggleStopBudget, getBudgetStatistics } from '@/api/budget'
|
|
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
|
|
import PopupContainer from '@/components/PopupContainer.vue'
|
|
|
|
const activeTab = ref(BudgetCategory.Expense)
|
|
const showAddPopup = ref(false)
|
|
const categories = ref([])
|
|
|
|
const expenseBudgets = ref([])
|
|
const incomeBudgets = ref([])
|
|
const savingsBudgets = ref([])
|
|
|
|
const activeTabTitle = computed(() => {
|
|
if (activeTab.value === BudgetCategory.Expense) return '使用'
|
|
return '达成'
|
|
})
|
|
|
|
const overallStats = computed(() => {
|
|
const allBudgets = [...expenseBudgets.value, ...incomeBudgets.value, ...savingsBudgets.value]
|
|
|
|
const getStatsForType = (type) => {
|
|
const category = activeTab.value
|
|
const filtered = allBudgets.filter(b => b.type === type && b.category === category && !b.isStopped)
|
|
|
|
if (filtered.length === 0) return { rate: '0.0', current: 0, limit: 0, count: 0 }
|
|
|
|
const current = filtered.reduce((sum, b) => sum + (b.current || 0), 0)
|
|
const limit = filtered.reduce((sum, b) => sum + (b.limit || 0), 0)
|
|
const rate = limit > 0 ? (current / limit) * 100 : 0
|
|
|
|
return {
|
|
rate: rate.toFixed(1),
|
|
current,
|
|
limit,
|
|
count: filtered.length
|
|
}
|
|
}
|
|
|
|
return {
|
|
week: getStatsForType(BudgetPeriodType.Week),
|
|
month: getStatsForType(BudgetPeriodType.Month),
|
|
year: getStatsForType(BudgetPeriodType.Year)
|
|
}
|
|
})
|
|
|
|
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 form = reactive({
|
|
name: '',
|
|
type: BudgetPeriodType.Month,
|
|
category: BudgetCategory.Expense,
|
|
limit: '',
|
|
selectedCategories: []
|
|
})
|
|
|
|
const filteredCategories = computed(() => {
|
|
const targetType = form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
|
|
return categories.value.filter(c => c.type === targetType)
|
|
})
|
|
|
|
const toggleCategory = (name) => {
|
|
const index = form.selectedCategories.indexOf(name)
|
|
if (index > -1) {
|
|
form.selectedCategories.splice(index, 1)
|
|
} else {
|
|
form.selectedCategories.push(name)
|
|
}
|
|
}
|
|
|
|
const isAllSelected = computed(() => {
|
|
return filteredCategories.value.length > 0 &&
|
|
filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
|
|
})
|
|
|
|
const toggleAll = () => {
|
|
if (isAllSelected.value) {
|
|
form.selectedCategories = []
|
|
} else {
|
|
form.selectedCategories = filteredCategories.value.map(c => c.name)
|
|
}
|
|
}
|
|
|
|
const fetchBudgetList = async () => {
|
|
try {
|
|
const res = await getBudgetList()
|
|
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)
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const [catRes] = await Promise.all([
|
|
getCategoryList(),
|
|
fetchBudgetList()
|
|
])
|
|
if (catRes.success) {
|
|
categories.value = catRes.data || []
|
|
}
|
|
} catch (err) {
|
|
console.error('获取初始化数据失败', err)
|
|
}
|
|
})
|
|
|
|
watch(() => form.category, () => {
|
|
form.selectedCategories = []
|
|
})
|
|
|
|
const formatMoney = (val) => {
|
|
return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
|
|
const getPeriodLabel = (type) => {
|
|
const map = {
|
|
[BudgetPeriodType.Week]: '本周',
|
|
[BudgetPeriodType.Month]: '本月',
|
|
[BudgetPeriodType.Year]: '本年',
|
|
[BudgetPeriodType.Longterm]: '长期'
|
|
}
|
|
return map[type] || '周期'
|
|
}
|
|
|
|
const getProgressColor = (budget) => {
|
|
const ratio = budget.current / budget.limit
|
|
if (ratio >= 1) return '#ee0a24' // 危险红色
|
|
if (ratio > 0.8) return '#ff976a' // 警告橙色
|
|
return '#1989fa' // 正常蓝色
|
|
}
|
|
|
|
const getIncomeProgressColor = (budget) => {
|
|
const ratio = budget.current / budget.limit
|
|
if (ratio >= 1) return '#07c160' // 完成绿色
|
|
return '#1989fa' // 蓝色
|
|
}
|
|
|
|
const refDateMap = {}
|
|
|
|
const handleSwitchPeriod = async (budget, direction) => {
|
|
if (budget.type === BudgetPeriodType.Longterm) {
|
|
showToast('长期预算不支持切换周期')
|
|
return
|
|
}
|
|
|
|
// 获取或初始化该预算的参考日期
|
|
let currentRefDate = refDateMap[budget.id] || new Date()
|
|
const date = new Date(currentRefDate)
|
|
|
|
if (budget.type === BudgetPeriodType.Week) {
|
|
date.setDate(date.getDate() + direction * 7)
|
|
} else if (budget.type === BudgetPeriodType.Month) {
|
|
date.setMonth(date.getMonth() + direction)
|
|
} else if (budget.type === BudgetPeriodType.Year) {
|
|
date.setFullYear(date.getFullYear() + direction)
|
|
}
|
|
|
|
try {
|
|
const res = await getBudgetStatistics(budget.id, date.toISOString())
|
|
if (res.success) {
|
|
refDateMap[budget.id] = date
|
|
// 更新当前列表中的预算对象信息
|
|
Object.assign(budget, res.data)
|
|
}
|
|
} catch (err) {
|
|
showToast('加载历史统计失败')
|
|
console.error('加载预算历史统计失败', err)
|
|
}
|
|
}
|
|
|
|
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 handleToggleStop = async (budget) => {
|
|
try {
|
|
const res = await toggleStopBudget(budget.id)
|
|
if (res.success) {
|
|
showToast(budget.isStopped ? '已恢复' : '已停止')
|
|
// 切换停止状态后刷新列表
|
|
fetchBudgetList()
|
|
}
|
|
} catch (err) {
|
|
showToast('操作失败')
|
|
console.error('切换预算状态失败', err)
|
|
}
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
try {
|
|
const res = await createBudget({
|
|
...form,
|
|
limit: parseFloat(form.limit),
|
|
categoryNames: form.selectedCategories
|
|
})
|
|
if (res.success) {
|
|
showToast('保存成功')
|
|
showAddPopup.value = false
|
|
fetchBudgetList()
|
|
// 重置表单
|
|
form.name = ''
|
|
form.limit = ''
|
|
form.selectedCategories = []
|
|
}
|
|
} catch (err) {
|
|
showToast('保存失败')
|
|
console.error('保存预算失败', err)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.budget-list {
|
|
padding-top: 8px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.budget-list :deep(.van-swipe-cell) {
|
|
margin: 0 12px 12px;
|
|
}
|
|
|
|
.budget-card {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.budget-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.amount-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 16px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.info-item .label {
|
|
font-size: 12px;
|
|
color: #969799;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-item .value {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.value.expense {
|
|
color: #ee0a24;
|
|
}
|
|
|
|
.value.income {
|
|
color: #07c160;
|
|
}
|
|
|
|
.progress-section {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.progress-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
color: #646566;
|
|
}
|
|
|
|
.percent.warning {
|
|
color: #ff976a;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.percent.income {
|
|
color: #07c160;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: #969799;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #ebedf0;
|
|
}
|
|
|
|
.period-navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-icon {
|
|
padding: 4px;
|
|
font-size: 12px;
|
|
color: #1989fa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-icon:active {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.delete-button {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.card-footer {
|
|
border-top-color: #2c2c2c;
|
|
}
|
|
}
|
|
|
|
.add-budget-form {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.selected-categories {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ellipsis-text {
|
|
font-size: 14px;
|
|
color: #323233;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
.classify-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.classify-btn {
|
|
flex: 0 0 auto;
|
|
min-width: 60px;
|
|
border-radius: 16px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.all-btn {
|
|
font-weight: bold;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.no-data {
|
|
font-size: 13px;
|
|
color: #969799;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
:deep(.van-tabs__nav--card) {
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.summary-card {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 12px 16px;
|
|
margin-top: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.summary-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.summary-item .label {
|
|
font-size: 12px;
|
|
color: #969799;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.summary-item .value {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 2px;
|
|
color: #323233;
|
|
}
|
|
|
|
.summary-item .value.expense {
|
|
color: #ee0a24;
|
|
}
|
|
|
|
.summary-item .value.income {
|
|
color: #07c160;
|
|
}
|
|
|
|
.summary-item .value.warning {
|
|
color: #ff976a;
|
|
}
|
|
|
|
.summary-item .unit {
|
|
font-size: 11px;
|
|
margin-left: 1px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.summary-item .sub-label {
|
|
font-size: 11px;
|
|
color: #c8c9cc;
|
|
}
|
|
|
|
.divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background-color: #ebedf0;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.summary-item .value {
|
|
color: #f5f5f5;
|
|
}
|
|
.divider {
|
|
background-color: #2c2c2c;
|
|
}
|
|
}
|
|
</style>
|