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;