fix
This commit is contained in:
SunCheng
@@ -16,7 +16,9 @@
|
||||
<template #right>
|
||||
<!-- 未覆盖分类警告图标（支出和收入 tab） -->
|
||||
<van-icon
|
||||
v-if="activeTab !== BudgetCategory.Savings && uncoveredCategories.length > 0 && !isArchive"
|
||||
v-if="
|
||||
activeTab !== BudgetCategory.Savings && uncoveredCategories.length > 0 && !isArchive
|
||||
"
|
||||
name="warning-o"
|
||||
size="20"
|
||||
color="var(--van-danger-color)"
|
||||
@@ -285,7 +287,13 @@
|
||||
|
||||
<!-- 空状态 -->
|
||||
<van-empty
|
||||
v-if="activeTab !== BudgetCategory.Savings && !loading && !hasError && ((activeTab === BudgetCategory.Expense && expenseBudgets?.length === 0) || (activeTab === BudgetCategory.Income && incomeBudgets?.length === 0))"
|
||||
v-if="
|
||||
activeTab !== BudgetCategory.Savings &&
|
||||
!loading &&
|
||||
!hasError &&
|
||||
((activeTab === BudgetCategory.Expense && expenseBudgets?.length === 0) ||
|
||||
(activeTab === BudgetCategory.Income && incomeBudgets?.length === 0))
|
||||
"
|
||||
:description="`暂无${activeTab === BudgetCategory.Expense ? '支出' : '收入'}预算`"
|
||||
/>
|
||||
</div>
|
||||
@@ -347,7 +355,10 @@
|
||||
<div style="padding: 16px">
|
||||
<div
|
||||
class="rich-html-content"
|
||||
v-html="archiveSummary || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无总结</p>'"
|
||||
v-html="
|
||||
archiveSummary ||
|
||||
'<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无总结</p>'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</PopupContainer>
|
||||
@@ -402,7 +413,7 @@ defineOptions({
|
||||
})
|
||||
|
||||
const messageStore = useMessageStore()
|
||||
const theme = computed(() => messageStore.isDarkMode ? 'dark' : 'light')
|
||||
const theme = computed(() => (messageStore.isDarkMode ? 'dark' : 'light'))
|
||||
|
||||
// 日期状态
|
||||
const currentDate = ref(new Date())
|
||||
@@ -607,11 +618,7 @@ const loadBudgetData = async () => {
|
||||
|
||||
try {
|
||||
// 并发加载多个数据源
|
||||
await Promise.allSettled([
|
||||
loadMonthlyData(),
|
||||
loadCategoryStats(),
|
||||
loadUncoveredCategories()
|
||||
])
|
||||
await Promise.allSettled([loadMonthlyData(), loadCategoryStats(), loadUncoveredCategories()])
|
||||
} catch (_error) {
|
||||
console.error('加载预算数据失败:', _error)
|
||||
hasError.value = true
|
||||
@@ -910,7 +917,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.budget-content {
|
||||
padding: 12px;
|
||||
padding: var(--spacing-md);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
@@ -970,7 +978,9 @@ onBeforeUnmount(() => {
|
||||
.item-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: DIN Alternate, system-ui;
|
||||
font-family:
|
||||
DIN Alternate,
|
||||
system-ui;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
@@ -988,7 +998,9 @@ onBeforeUnmount(() => {
|
||||
.info-item .value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: DIN Alternate, system-ui;
|
||||
font-family:
|
||||
DIN Alternate,
|
||||
system-ui;
|
||||
}
|
||||
|
||||
.info-item .value.expense {
|
||||
|
||||
@@ -71,125 +71,112 @@
|
||||
</div>
|
||||
|
||||
<!-- 计划存款明细弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="showDetailPopup"
|
||||
position="bottom"
|
||||
round
|
||||
:style="{ height: '80%' }"
|
||||
<PopupContainer
|
||||
v-model="showDetailPopup"
|
||||
title="计划存款明细"
|
||||
height="80%"
|
||||
>
|
||||
<div class="detail-popup-content">
|
||||
<div class="popup-header">
|
||||
<h3 class="popup-title">
|
||||
计划存款明细
|
||||
</h3>
|
||||
<van-icon
|
||||
name="cross"
|
||||
size="20"
|
||||
class="close-icon"
|
||||
@click="showDetailPopup = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<div
|
||||
v-if="currentBudget"
|
||||
class="detail-content"
|
||||
>
|
||||
<div class="detail-section income-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="balance-o" />
|
||||
收入预算
|
||||
<div class="popup-body">
|
||||
<div
|
||||
v-if="currentBudget"
|
||||
class="detail-content"
|
||||
>
|
||||
<div class="detail-section income-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="balance-o" />
|
||||
收入预算
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">预算限额</span>
|
||||
<span class="detail-value income">¥{{ formatMoney(incomeLimit) }}</span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">预算限额</span>
|
||||
<span class="detail-value income">¥{{ formatMoney(incomeLimit) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际收入</span>
|
||||
<span class="detail-value">¥{{ formatMoney(incomeCurrent) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际收入</span>
|
||||
<span class="detail-value">¥{{ formatMoney(incomeCurrent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section expense-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="bill-o" />
|
||||
支出预算
|
||||
<div class="detail-section expense-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="bill-o" />
|
||||
支出预算
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">预算限额</span>
|
||||
<span class="detail-value expense">¥{{ formatMoney(expenseLimit) }}</span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">预算限额</span>
|
||||
<span class="detail-value expense">¥{{ formatMoney(expenseLimit) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际支出</span>
|
||||
<span class="detail-value">¥{{ formatMoney(expenseCurrent) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际支出</span>
|
||||
<span class="detail-value">¥{{ formatMoney(expenseCurrent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section formula-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="calculator-o" />
|
||||
计划存款公式
|
||||
<div class="detail-section formula-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="calculator-o" />
|
||||
计划存款公式
|
||||
</div>
|
||||
<div class="formula-box">
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">收入预算</span>
|
||||
<span class="formula-value income">¥{{ formatMoney(incomeLimit) }}</span>
|
||||
</div>
|
||||
<div class="formula-box">
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">收入预算</span>
|
||||
<span class="formula-value income">¥{{ formatMoney(incomeLimit) }}</span>
|
||||
</div>
|
||||
<div class="formula-operator">
|
||||
-
|
||||
</div>
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">支出预算</span>
|
||||
<span class="formula-value expense">¥{{ formatMoney(expenseLimit) }}</span>
|
||||
</div>
|
||||
<div class="formula-operator">
|
||||
=
|
||||
</div>
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">计划存款</span>
|
||||
<span class="formula-value">¥{{ formatMoney(currentBudget.limit) }}</span>
|
||||
</div>
|
||||
<div class="formula-operator">
|
||||
-
|
||||
</div>
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">支出预算</span>
|
||||
<span class="formula-value expense">¥{{ formatMoney(expenseLimit) }}</span>
|
||||
</div>
|
||||
<div class="formula-operator">
|
||||
=
|
||||
</div>
|
||||
<div class="formula-item">
|
||||
<span class="formula-label">计划存款</span>
|
||||
<span class="formula-value">¥{{ formatMoney(currentBudget.limit) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section result-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="chart-trending-o" />
|
||||
存款结果
|
||||
<div class="detail-section result-section">
|
||||
<div class="section-title">
|
||||
<van-icon name="chart-trending-o" />
|
||||
存款结果
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">计划存款</span>
|
||||
<span class="detail-value">¥{{ formatMoney(currentBudget.limit) }}</span>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">计划存款</span>
|
||||
<span class="detail-value">¥{{ formatMoney(currentBudget.limit) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际存款</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="{ income: currentBudget.current >= currentBudget.limit }"
|
||||
>¥{{ formatMoney(currentBudget.current) }}</span>
|
||||
</div>
|
||||
<div class="detail-row highlight">
|
||||
<span class="detail-label">还差</span>
|
||||
<span class="detail-value expense">¥{{
|
||||
formatMoney(Math.max(0, currentBudget.limit - currentBudget.current))
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">实际存款</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="{ income: currentBudget.current >= currentBudget.limit }"
|
||||
>¥{{ formatMoney(currentBudget.current) }}</span>
|
||||
</div>
|
||||
<div class="detail-row highlight">
|
||||
<span class="detail-label">还差</span>
|
||||
<span class="detail-value expense">¥{{
|
||||
formatMoney(Math.max(0, currentBudget.limit - currentBudget.current))
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</PopupContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import BudgetCard from '@/components/Budget/BudgetCard.vue'
|
||||
import { BudgetPeriodType } from '@/constants/enums'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
@@ -349,41 +336,6 @@ const getProgressColor = (budget) => {
|
||||
color: var(--van-success-color);
|
||||
}
|
||||
|
||||
.detail-popup-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--van-background-2);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--van-border-color);
|
||||
background-color: var(--van-background-2);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--van-text-color);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: var(--van-text-color-2);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user