添加预算管理功能，重构账单和消息视图，优化路由和组件交互
This commit is contained in:
孙诚
@@ -9,11 +9,17 @@
|
||||
<van-tabbar-item name="statistics" icon="chart-trending-o" to="/" @click="handleTabClick('/statistics')">
|
||||
统计
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="balance" icon="balance-list" to="/balance" @click="handleTabClick('/balance')">
|
||||
账单
|
||||
<van-tabbar-item name="budget" icon="bill-o" to="/budget" @click="handleTabClick('/budget')">
|
||||
预算
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="message" icon="comment" to="/message" @click="handleTabClick('/message')" :badge="messageStore.unreadCount || null">
|
||||
消息
|
||||
<van-tabbar-item
|
||||
name="balance"
|
||||
icon="balance-list"
|
||||
:to="messageStore.unreadCount > 0 ? '/balance?tab=message' : '/balance'"
|
||||
@click="handleTabClick('/balance')"
|
||||
:badge="messageStore.unreadCount || null"
|
||||
>
|
||||
账单
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting" to="/setting">
|
||||
设置
|
||||
@@ -69,7 +75,8 @@ const showTabbar = computed(() => {
|
||||
route.path === '/calendar' ||
|
||||
route.path === '/message' ||
|
||||
route.path === '/setting' ||
|
||||
route.path === '/balance'
|
||||
route.path === '/balance' ||
|
||||
route.path === '/budget'
|
||||
})
|
||||
|
||||
const active = ref('')
|
||||
@@ -105,11 +112,12 @@ const setActive = (path) => {
|
||||
case '/calendar':
|
||||
return 'ccalendar'
|
||||
case '/balance':
|
||||
return 'balance'
|
||||
case '/message':
|
||||
return 'message'
|
||||
return 'balance'
|
||||
case '/setting':
|
||||
return 'setting'
|
||||
case '/budget':
|
||||
return 'budget'
|
||||
default:
|
||||
return 'statistics'
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@ const router = createRouter({
|
||||
{
|
||||
path: '/message',
|
||||
name: 'message',
|
||||
component: () => import('../views/MessageView.vue'),
|
||||
redirect: { path: '/balance', query: { tab: 'message' } },
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
@@ -87,6 +87,12 @@ const router = createRouter({
|
||||
name: 'log',
|
||||
component: () => import('../views/LogView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/budget',
|
||||
name: 'budget',
|
||||
component: () => import('../views/BudgetView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container-flex">
|
||||
<!-- 顶部导航栏 -->
|
||||
<van-nav-bar title="交易记录" placeholder>
|
||||
<van-nav-bar title="账单" placeholder>
|
||||
<template #right>
|
||||
<van-button
|
||||
v-if="tabActive === 'email'"
|
||||
@@ -12,27 +12,46 @@
|
||||
>
|
||||
立即同步
|
||||
</van-button>
|
||||
<van-icon
|
||||
v-if="tabActive === 'message'"
|
||||
name="passed"
|
||||
size="20"
|
||||
@click="messageViewRef?.handleMarkAllRead()"
|
||||
/>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<van-tabs v-model:active="tabActive" animated>
|
||||
<van-tab title="账单记录" name="balance" />
|
||||
<van-tab title="邮件记录" name="email" />
|
||||
<van-tab title="账单" name="balance" />
|
||||
<van-tab title="邮件" name="email" />
|
||||
<van-tab title="消息" name="message" />
|
||||
</van-tabs>
|
||||
|
||||
<TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
|
||||
<EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
|
||||
<MessageView v-else-if="tabActive === 'message'" ref="messageViewRef" :is-component="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import TransactionsRecord from './TransactionsRecord.vue';
|
||||
import EmailRecord from './EmailRecord.vue';
|
||||
const tabActive = ref('balance');
|
||||
import MessageView from './MessageView.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const tabActive = ref(route.query.tab || 'balance');
|
||||
|
||||
// 监听路由参数变化，用于从 tabbar 点击时切换 tab
|
||||
watch(() => route.query.tab, (newTab) => {
|
||||
if (newTab) {
|
||||
tabActive.value = newTab;
|
||||
}
|
||||
});
|
||||
|
||||
const transactionsRecordRef = ref(null);
|
||||
const emailRecordRef = ref(null);
|
||||
|
||||
const messageViewRef = ref(null);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
769
Web/src/views/BudgetView.vue
Normal file
769
Web/src/views/BudgetView.vue
Normal file
@@ -0,0 +1,769 @@
|
||||
<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>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="page-container-flex">
|
||||
<van-nav-bar title="消息中心">
|
||||
<van-nav-bar v-if="!isComponent" title="消息中心">
|
||||
<template #right>
|
||||
<van-icon name="passed" size="18" @click="handleMarkAllRead" />
|
||||
</template>
|
||||
@@ -207,6 +207,16 @@ const handleMarkAllRead = () => {
|
||||
onMounted(() => {
|
||||
// onLoad 会由 van-list 自动触发
|
||||
});
|
||||
const props = defineProps({
|
||||
isComponent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
handleMarkAllRead
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user