770 lines
24 KiB
Vue
770 lines
24 KiB
Vue
|
<template>
|
|||
|
|
<div class="page-container">
|
|||
|
|
<van-nav-bar title="预算管理" placeholder fixed z-index="100">
|
|||
|
|
<template #right>
|
|||
|
|
<van-icon name="plus" size="20" @click="showAddPopup = true" />
|
|||
|
|
</template>
|
|||
|
|
</van-nav-bar>
|
|||
|
|
|
|||
|
|
<div class="page-content">
|
|||
|
|
<van-tabs v-model:active="activeTab" sticky offset-top="46" type="card">
|
|||
|
|
<van-tab title="支出" name="expense">
|
|||
|
|
<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="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
|
|||
|
|
<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 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>
|
|||
|
|
<span class="sync-time">上次同步: {{ budget.lastSync }}</span>
|
|||
|
|
</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="income">
|
|||
|
|
<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="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
|
|||
|
|
<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>
|
|||
|
|
<span class="sync-time">上次同步: {{ budget.lastSync }}</span>
|
|||
|
|
</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="savings">
|
|||
|
|
<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="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
|
|||
|
|
<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>
|
|||
|
|
<span class="sync-time">上次同步: {{ budget.lastSync }}</span>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<!-- 添加预算弹窗 -->
|
|||
|
|
<PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
|
|||
|
|
<div class="add-budget-form">
|
|||
|
|
<van-form @submit="onSubmit">
|
|||
|
|
<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="week">周</van-radio>
|
|||
|
|
<van-radio name="month">月</van-radio>
|
|||
|
|
<van-radio name="year">年</van-radio>
|
|||
|
|
<van-radio name="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="expense">支出</van-radio>
|
|||
|
|
<van-radio name="income">收入</van-radio>
|
|||
|
|
<van-radio name="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>
|
|||
|
|
<div style="margin: 32px 16px;">
|
|||
|
|
<van-button round block type="primary" native-type="submit">
|
|||
|
|
保 存
|
|||
|
|
</van-button>
|
|||
|
|
</div>
|
|||
|
|
</van-form>
|
|||
|
|
</div>
|
|||
|
|
</PopupContainer>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
|||
|
|
import { showToast, showConfirmDialog } from 'vant'
|
|||
|
|
import PopupContainer from '@/components/PopupContainer.vue'
|
|||
|
|
import { getCategoryList } from '@/api/transactionCategory'
|
|||
|
|
|
|||
|
|
const activeTab = ref('expense')
|
|||
|
|
const showAddPopup = ref(false)
|
|||
|
|
const categories = ref([])
|
|||
|
|
|
|||
|
|
// 模拟数据 (提前定义以防止模板渲染时 undefined)
|
|||
|
|
const expenseBudgets = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '总支出预算',
|
|||
|
|
type: 'month',
|
|||
|
|
limit: 5000,
|
|||
|
|
current: 3250.5,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '2026-01-01 ~ 2026-01-31',
|
|||
|
|
lastSync: '2026-01-06 10:00',
|
|||
|
|
syncing: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '餐饮美食',
|
|||
|
|
type: 'month',
|
|||
|
|
limit: 1500,
|
|||
|
|
current: 1420,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '2026-01-01 ~ 2026-01-31',
|
|||
|
|
lastSync: '2026-01-06 09:30',
|
|||
|
|
syncing: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '年度旅游',
|
|||
|
|
type: 'year',
|
|||
|
|
limit: 10000,
|
|||
|
|
current: 0,
|
|||
|
|
isStopped: true,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '2026-01-01 ~ 2026-12-31',
|
|||
|
|
lastSync: '2026-01-01 00:00',
|
|||
|
|
syncing: false
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const incomeBudgets = ref([
|
|||
|
|
{
|
|||
|
|
id: 101,
|
|||
|
|
name: '月度薪资',
|
|||
|
|
type: 'month',
|
|||
|
|
limit: 10000,
|
|||
|
|
current: 10000,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '2026-01-01 ~ 2026-01-31',
|
|||
|
|
lastSync: '2026-01-06 10:05',
|
|||
|
|
syncing: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 102,
|
|||
|
|
name: '理财收益',
|
|||
|
|
type: 'year',
|
|||
|
|
limit: 2000,
|
|||
|
|
current: 450.8,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '2026-01-01 ~ 2026-12-31',
|
|||
|
|
lastSync: '2026-01-06 10:05',
|
|||
|
|
syncing: false
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const savingsBudgets = ref([
|
|||
|
|
{
|
|||
|
|
id: 201,
|
|||
|
|
name: '买房基金',
|
|||
|
|
type: 'year',
|
|||
|
|
limit: 500000,
|
|||
|
|
current: 125000,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2025-01-01',
|
|||
|
|
period: '2025-01-01 ~ 2030-12-31',
|
|||
|
|
lastSync: '2026-01-06 11:00',
|
|||
|
|
syncing: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 202,
|
|||
|
|
name: '养老金',
|
|||
|
|
type: 'year',
|
|||
|
|
limit: 1000000,
|
|||
|
|
current: 50000,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: '2026-01-01',
|
|||
|
|
period: '长期',
|
|||
|
|
lastSync: '2026-01-06 11:00',
|
|||
|
|
syncing: false
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const form = reactive({
|
|||
|
|
name: '',
|
|||
|
|
type: 'month',
|
|||
|
|
category: 'expense',
|
|||
|
|
limit: '',
|
|||
|
|
selectedCategories: []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const categoryTypeMap = {
|
|||
|
|
expense: 0,
|
|||
|
|
income: 1,
|
|||
|
|
savings: 2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const filteredCategories = computed(() => {
|
|||
|
|
const targetType = categoryTypeMap[form.category]
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await getCategoryList()
|
|||
|
|
if (res.success) {
|
|||
|
|
categories.value = res.data || []
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('加载分类失败', err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
watch(() => form.category, () => {
|
|||
|
|
form.selectedCategories = []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const formatMoney = (val) => {
|
|||
|
|
return parseFloat(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getPeriodLabel = (type) => {
|
|||
|
|
const map = {
|
|||
|
|
week: '本周',
|
|||
|
|
month: '本月',
|
|||
|
|
year: '本年'
|
|||
|
|
}
|
|||
|
|
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 getPeriodRange = (startDate, type) => {
|
|||
|
|
if (!startDate || startDate === '长期') return startDate
|
|||
|
|
const start = new Date(startDate)
|
|||
|
|
let end = new Date(startDate)
|
|||
|
|
|
|||
|
|
if (type === 'week') {
|
|||
|
|
end.setDate(start.getDate() + 6)
|
|||
|
|
} else if (type === 'month') {
|
|||
|
|
end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
|
|||
|
|
} else if (type === 'year') {
|
|||
|
|
end = new Date(start.getFullYear(), 11, 31)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const format = (d) => d.toISOString().split('T')[0]
|
|||
|
|
return `${format(start)} ~ ${format(end)}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSwitchPeriod = (budget, direction) => {
|
|||
|
|
if (!budget.startDate || budget.period === '长期') return
|
|||
|
|
|
|||
|
|
const currentStart = new Date(budget.startDate)
|
|||
|
|
if (budget.type === 'week') {
|
|||
|
|
currentStart.setDate(currentStart.getDate() + direction * 7)
|
|||
|
|
} else if (budget.type === 'month') {
|
|||
|
|
currentStart.setMonth(currentStart.getMonth() + direction)
|
|||
|
|
currentStart.setDate(1)
|
|||
|
|
} else if (budget.type === 'year') {
|
|||
|
|
currentStart.setFullYear(currentStart.getFullYear() + direction)
|
|||
|
|
currentStart.setMonth(0)
|
|||
|
|
currentStart.setDate(1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
budget.startDate = currentStart.toISOString().split('T')[0]
|
|||
|
|
budget.period = getPeriodRange(budget.startDate, budget.type)
|
|||
|
|
|
|||
|
|
// 模拟数据更新
|
|||
|
|
budget.current = Math.floor(Math.random() * budget.limit * 1.2 * 100) / 100
|
|||
|
|
budget.lastSync = new Date().toLocaleString()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDelete = (budget) => {
|
|||
|
|
showConfirmDialog({
|
|||
|
|
title: '确认删除',
|
|||
|
|
message: `确定要删除预算 "${budget.name}" 吗？`,
|
|||
|
|
}).then(() => {
|
|||
|
|
expenseBudgets.value = expenseBudgets.value.filter(b => b.id !== budget.id)
|
|||
|
|
incomeBudgets.value = incomeBudgets.value.filter(b => b.id !== budget.id)
|
|||
|
|
savingsBudgets.value = savingsBudgets.value.filter(b => b.id !== budget.id)
|
|||
|
|
showToast('已删除')
|
|||
|
|
}).catch(() => {})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSync = (budget) => {
|
|||
|
|
budget.syncing = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
budget.syncing = false
|
|||
|
|
budget.lastSync = new Date().toLocaleString()
|
|||
|
|
showToast('同步成功')
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleToggleStop = (budget) => {
|
|||
|
|
budget.isStopped = !budget.isStopped
|
|||
|
|
showToast(budget.isStopped ? '已停止' : '已恢复')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
const startDate = new Date()
|
|||
|
|
if (form.type === 'month') startDate.setDate(1)
|
|||
|
|
if (form.type === 'year') {
|
|||
|
|
startDate.setMonth(0)
|
|||
|
|
startDate.setDate(1)
|
|||
|
|
}
|
|||
|
|
const startDateStr = startDate.toISOString().split('T')[0]
|
|||
|
|
|
|||
|
|
const newBudget = {
|
|||
|
|
id: Date.now(),
|
|||
|
|
name: form.name,
|
|||
|
|
type: form.type,
|
|||
|
|
limit: parseFloat(form.limit),
|
|||
|
|
categories: [...form.selectedCategories],
|
|||
|
|
current: 0,
|
|||
|
|
isStopped: false,
|
|||
|
|
startDate: startDateStr,
|
|||
|
|
period: getPeriodRange(startDateStr, form.type),
|
|||
|
|
lastSync: '刚刚',
|
|||
|
|
syncing: false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (form.category === 'expense') {
|
|||
|
|
expenseBudgets.value.unshift(newBudget)
|
|||
|
|
activeTab.value = 'expense'
|
|||
|
|
} else if (form.category === 'income') {
|
|||
|
|
incomeBudgets.value.unshift(newBudget)
|
|||
|
|
activeTab.value = 'income'
|
|||
|
|
} else {
|
|||
|
|
savingsBudgets.value.unshift(newBudget)
|
|||
|
|
activeTab.value = 'savings'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showAddPopup.value = false
|
|||
|
|
showToast('添加成功')
|
|||
|
|
|
|||
|
|
// 重置表单
|
|||
|
|
form.name = ''
|
|||
|
|
form.limit = ''
|
|||
|
|
form.selectedCategories = []
|
|||
|
|
}
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
</style>
|