From 541782190641e9a1815c5434c9910a009eb235a9 Mon Sep 17 00:00:00 2001 From: wangxiaogang <1433729587@qq.com> Date: Thu, 4 Jun 2026 18:10:25 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20TransactionItem=E5=B0=8F=E5=A4=B4?= =?UTF-8?q?=E5=83=8F+=E9=A2=84=E7=AE=97=E9=A1=B5=E5=8F=8C=E6=98=BE+?= =?UTF-8?q?=E8=B4=A6=E5=8D=95=E9=9D=99=E9=BB=98=E5=88=B7=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TransactionItem: - meta 区域改为 view+flex 布局，小头像作为独立元素渲染 - creator-tag 容器包裹头像+昵称，小程序端 image 不嵌套在 text 内 预算页: - 群组模式顶部显示概览行（群组预算 | 我的预算） - 下方显示「设置我的预算」卡片，编辑作用于个人预算 - 个人模式保持原样 账单页: - loadTx 添加 silent 参数，静默刷新时不清空列表 - onShow 调用 loadTx(true, true) 避免骨架屏闪烁 --- .../TransactionItem/TransactionItem.vue | 27 ++++-- client/src/pages/bills/index.vue | 6 +- client/src/pages/budget/index.vue | 96 ++++++++++++------- 3 files changed, 82 insertions(+), 47 deletions(-) diff --git a/client/src/components/TransactionItem/TransactionItem.vue b/client/src/components/TransactionItem/TransactionItem.vue index f1edd2e..a5e3d7a 100644 --- a/client/src/components/TransactionItem/TransactionItem.vue +++ b/client/src/components/TransactionItem/TransactionItem.vue @@ -17,12 +17,14 @@ /> {{ item.note || item.category_name || '未分类' }} - - - {{ item.creator_nickname?.[0] }} - {{ item.creator_nickname }} · - {{ item.category_name || '未分类' }}{{ hideDate ? '' : ' · ' + formatDate(item.date) }} - + + + + {{ item.creator_nickname?.[0] }} + {{ item.creator_nickname }} + + {{ (isOtherCreator ? ' · ' : '') + (item.category_name || '未分类') }}{{ hideDate ? '' : ' · ' + formatDate(item.date) }} + {{ item.type === 'expense' ? '-' : '+' }}{{ formatAmount(item.amount) }} @@ -148,16 +150,22 @@ function onTouchEnd() { } } +.creator-tag { + margin-right: 4rpx; + display: inline; +} + .creator-mini-avatar { width: 28rpx; height: 28rpx; border-radius: 50%; - vertical-align: middle; margin-right: 4rpx; + position: relative; + top: 4rpx; } .creator-mini-initial { - display: inline-flex; + display: flex; width: 28rpx; height: 28rpx; border-radius: 50%; @@ -166,8 +174,7 @@ function onTouchEnd() { color: #FF8C69; align-items: center; justify-content: center; - vertical-align: middle; - margin-right: 4rpx; + flex-shrink: 0; } .info { diff --git a/client/src/pages/bills/index.vue b/client/src/pages/bills/index.vue index 701c788..c55d5cb 100644 --- a/client/src/pages/bills/index.vue +++ b/client/src/pages/bills/index.vue @@ -122,7 +122,7 @@ onMounted(async () => { // 静默刷新（切换群组/返回时） onShow(() => { - if (initialLoaded.value) loadTx(true) + if (initialLoaded.value) loadTx(true, true) }) function switchFilter(type: string) { @@ -130,10 +130,10 @@ function switchFilter(type: string) { loadTx(true) } -async function loadTx(reset = false) { +async function loadTx(reset = false, silent = false) { if (reset) { page.value = 1 - txList.value = [] + if (!silent) txList.value = [] } const seq = ++loadSeq const params: any = { page: page.value, pageSize } diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue index 0d6b97d..959b7f8 100644 --- a/client/src/pages/budget/index.vue +++ b/client/src/pages/budget/index.vue @@ -12,45 +12,40 @@ - - - - 群组预算 - {{ currentMonth }} + + + + 群组预算 + {{ budget ? formatAmount(budget.amount) : '未设置' }} + + + + 我的预算 + {{ budgetAmount > 0 ? formatAmount(budgetAmount) : '未设置' }} - - {{ budget ? formatAmount(budget.amount) : '未设置' }} - - - 群组成员均未设置预算 - + {{ groupStore.isGroupMode ? '我的预算' : '本月预算' }} {{ currentMonth }} - {{ myBudgetAmount > 0 ? formatAmount(myBudgetAmount) : '未设置' }} + {{ budgetAmount > 0 ? formatAmount(budgetAmount) : '未设置' }} 设置预算，掌控开支 - {{ groupStore.isGroupMode ? '设置我的预算' : '快捷金额' }} + 快捷金额 (null) +const budgetAmount = ref(0) const monthExpense = ref(0) -const myBudgetAmount = ref(0) -const myExpense = ref(0) const loading = ref(true) const initialLoaded = ref(false) const amountStr = ref('') @@ -113,17 +107,12 @@ function formatPreset(val: number) { function syncBudgetData() { budget.value = budgetStore.budget monthExpense.value = statsStore.overview.expense - // 群组模式用 myAmount，个人模式用 amount - if (budget.value) { - myBudgetAmount.value = groupStore.isGroupMode ? (budget.value.myAmount || 0) : budget.value.amount - myExpense.value = groupStore.isGroupMode ? statsStore.overview.expense : statsStore.overview.expense - } else { - myBudgetAmount.value = 0 - myExpense.value = 0 - } - // 预填输入框（个人预算） - if (myBudgetAmount.value > 0) { - amountStr.value = (myBudgetAmount.value / 100).toString() + // 群组模式用 myAmount（个人预算），个人模式用 amount + budgetAmount.value = budget.value + ? (groupStore.isGroupMode ? (budget.value.myAmount || 0) : budget.value.amount) + : 0 + if (budgetAmount.value > 0) { + amountStr.value = (budgetAmount.value / 100).toString() } } @@ -236,6 +225,45 @@ function goBack() { padding: 0 40rpx; } +.overview-row { + display: flex; + align-items: center; + background: #FFFFFF; + border-radius: 28rpx; + padding: 28rpx 32rpx; + margin-bottom: 24rpx; + border: 2rpx solid #F0E0D6; + box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08); +} + +.overview-item { + flex: 1; + text-align: center; +} + +.overview-label { + font-size: 24rpx; + color: #8B7E7E; + display: block; + margin-bottom: 8rpx; +} + +.overview-value { + font-family: 'Fredoka', sans-serif; + font-size: 32rpx; + font-weight: 600; + color: #2D1B1B; + + &.highlight { color: #FF8C69; } +} + +.overview-divider { + width: 2rpx; + height: 56rpx; + background: #F0E0D6; + flex-shrink: 0; +} + .preview-card { background: #FFFFFF; border-radius: 40rpx;