wangxiaogang
9f5802d634
BUG-01: recurring /sync next_date 更新逻辑错误（应用循环后的 next） BUG-02: bills onReachBottom loading 缺 .value BUG-03: group store switchToPersonal 缺少 await (3处) OPT-04: notification requireNotificationEditAuth 加 try-catch OPT-05: category 迁移源分类条件改为 is_custom=1 AND user_id=? OPT-06: user 旧头像删除加 try-catch + 日志 CODE-02: format.ts 跨年日期显示年份 CODE-05: notification isValidUrl 去掉相对路径允许
383 lines
11 KiB
Vue
383 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="header-fixed">
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<text class="page-title">全部账单</text>
|
||
</view>
|
||
|
||
<view class="tabs-wrap">
|
||
<view class="tabs">
|
||
<view class="tab" :class="{ active: filterType === 'all' }" @tap="switchFilter('all')">全部</view>
|
||
<view class="tab" :class="{ active: filterType === 'expense' }" @tap="switchFilter('expense')">支出</view>
|
||
<view class="tab" :class="{ active: filterType === 'income' }" @tap="switchFilter('income')">收入</view>
|
||
</view>
|
||
<view class="filter-btn" :class="{ active: hasAdvancedFilter }" @tap="showFilter = true">
|
||
<Icon name="filter" :size="28" :color="hasAdvancedFilter ? '#FF8C69' : '#8B7E7E'" />
|
||
<text class="filter-btn-text">筛选</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选结果统计 -->
|
||
<view class="filter-stats" v-if="hasAdvancedFilter && !loading">
|
||
<text class="filter-stats-text">共 {{ total }} 笔</text>
|
||
<text class="filter-stats-text" v-if="filteredExpense > 0">支出 {{ formatAmount(filteredExpense) }}</text>
|
||
<text class="filter-stats-text" v-if="filteredIncome > 0">收入 {{ formatAmount(filteredIncome) }}</text>
|
||
</view>
|
||
|
||
<!-- 筛选面板 -->
|
||
<FilterPanel v-if="showFilter" :initialFilters="advancedFilters" @close="showFilter = false" @apply="onFilterApply" />
|
||
|
||
<view class="tx-list" v-if="!loading || txList.length > 0">
|
||
<view v-for="group in groupedTx" :key="group.date" class="date-group">
|
||
<view class="group-header">
|
||
<text class="group-date">{{ group.label }}</text>
|
||
<text class="group-total" :class="{ expense: group.expense > 0 }">
|
||
{{ group.expense > 0 ? '- ' + formatAmount(group.expense) : '' }}
|
||
{{ group.income > 0 ? '+ ' + formatAmount(group.income) : '' }}
|
||
</text>
|
||
</view>
|
||
<TransactionItem
|
||
v-for="item in group.items"
|
||
:key="item.id"
|
||
:item="item"
|
||
:hideDate="true"
|
||
:showCreator="groupStore.isGroupMode"
|
||
:currentUserId="userStore.userInfo?.id"
|
||
@item-tap="onEdit(item)"
|
||
@delete="onDelete(item)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tx-list" v-if="loading && txList.length === 0">
|
||
<view v-for="g in 2" :key="g" class="date-group">
|
||
<view class="group-header">
|
||
<Skeleton width="120rpx" height="26rpx" variant="text" />
|
||
<Skeleton width="160rpx" height="24rpx" variant="text" />
|
||
</view>
|
||
<view v-for="i in 3" :key="i" class="skeleton-item">
|
||
<Skeleton width="80rpx" height="80rpx" variant="circle" />
|
||
<view class="skeleton-info">
|
||
<Skeleton width="160rpx" height="28rpx" variant="text" />
|
||
<Skeleton width="240rpx" height="24rpx" variant="text" />
|
||
</view>
|
||
<Skeleton width="120rpx" height="32rpx" variant="rect" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="loading-more" v-if="loading && txList.length > 0">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<view class="loading-more" v-if="noMore && txList.length > 0">
|
||
<text class="loading-text">没有更多了</text>
|
||
</view>
|
||
|
||
<view class="state-box" v-if="loadError">
|
||
<Icon name="alert-circle" :size="48" color="#BFB3B3" />
|
||
<text class="state-text">加载失败，下拉刷新重试</text>
|
||
</view>
|
||
|
||
<view class="state-box" v-if="txList.length === 0 && !loading && !loadError">
|
||
<Icon name="edit" :size="48" color="#BFB3B3" />
|
||
<text class="state-text">暂无账单记录</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { useGroupStore } from '@/stores/group'
|
||
import { waitForReady } from '@/utils/app-ready'
|
||
import { getTransactions, deleteTransaction } from '@/api/transaction'
|
||
import TransactionItem from '@/components/TransactionItem/TransactionItem.vue'
|
||
import Icon from '@/components/Icon/Icon.vue'
|
||
import Skeleton from '@/components/Skeleton/Skeleton.vue'
|
||
import FilterPanel from './filter-panel.vue'
|
||
import { statusBarHeight } from '@/utils/system'
|
||
import { formatAmount, formatDate } from '@/utils/format'
|
||
import type { Transaction, TransactionParams } from '@/api/transaction'
|
||
import type { FilterParams } from '@/api/filter'
|
||
|
||
const userStore = useUserStore()
|
||
const groupStore = useGroupStore()
|
||
const loading = ref(false)
|
||
const filterType = ref('all')
|
||
const page = ref(1)
|
||
const pageSize = 20
|
||
const txList = ref<Transaction[]>([])
|
||
const total = ref(0)
|
||
const loadError = ref(false)
|
||
let loadSeq = 0 // 请求序号，防止并发覆盖
|
||
|
||
// 高级筛选
|
||
const showFilter = ref(false)
|
||
const advancedFilters = ref<FilterParams>({})
|
||
const filteredExpense = ref(0)
|
||
const filteredIncome = ref(0)
|
||
const hasAdvancedFilter = computed(() => {
|
||
const f = advancedFilters.value
|
||
return !!(f.category_ids?.length || f.startDate || f.endDate || f.minAmount || f.maxAmount || f.keyword)
|
||
})
|
||
|
||
const noMore = computed(() => txList.value.length >= total.value && total.value > 0)
|
||
|
||
const groupedTx = computed(() => {
|
||
const groups: Record<string, { date: string; label: string; expense: number; income: number; items: any[] }> = {}
|
||
for (const tx of txList.value) {
|
||
if (!groups[tx.date]) {
|
||
groups[tx.date] = { date: tx.date, label: formatDate(tx.date), expense: 0, income: 0, items: [] }
|
||
}
|
||
groups[tx.date].items.push(tx)
|
||
if (tx.type === 'expense') {
|
||
groups[tx.date].expense += tx.amount
|
||
} else {
|
||
groups[tx.date].income += tx.amount
|
||
}
|
||
}
|
||
return Object.values(groups).sort((a, b) => b.date.localeCompare(a.date))
|
||
})
|
||
|
||
const initialLoaded = ref(false)
|
||
|
||
onMounted(async () => {
|
||
await waitForReady()
|
||
loadTx(true).finally(() => { initialLoaded.value = true })
|
||
})
|
||
|
||
// 静默刷新（切换群组/返回时）
|
||
onShow(() => {
|
||
if (initialLoaded.value) loadTx(true, true)
|
||
})
|
||
|
||
function switchFilter(type: string) {
|
||
filterType.value = type
|
||
loadTx(true)
|
||
}
|
||
|
||
async function loadTx(reset = false, silent = false) {
|
||
if (reset) {
|
||
page.value = 1
|
||
if (!silent) txList.value = []
|
||
}
|
||
const seq = ++loadSeq
|
||
const params: TransactionParams & { group_id?: number | null; category_ids?: string } = { page: page.value, pageSize, group_id: groupStore.currentGroupId }
|
||
if (filterType.value !== 'all') params.type = filterType.value
|
||
// 合并高级筛选参数
|
||
const af = advancedFilters.value
|
||
if (af.category_ids?.length) params.category_ids = af.category_ids.join(',')
|
||
if (af.startDate) params.startDate = af.startDate
|
||
if (af.endDate) params.endDate = af.endDate
|
||
if (af.minAmount) params.minAmount = af.minAmount
|
||
if (af.maxAmount) params.maxAmount = af.maxAmount
|
||
if (af.keyword) params.keyword = af.keyword
|
||
try {
|
||
loading.value = true
|
||
loadError.value = false
|
||
const data = await getTransactions(params)
|
||
// 丢弃过期请求的结果
|
||
if (seq !== loadSeq) return
|
||
if (reset) {
|
||
txList.value = data.list
|
||
} else {
|
||
txList.value = [...txList.value, ...data.list]
|
||
}
|
||
total.value = data.total
|
||
filteredExpense.value = data.filteredExpense || 0
|
||
filteredIncome.value = data.filteredIncome || 0
|
||
} catch (e) {
|
||
if (seq !== loadSeq) return
|
||
console.error('Load bills error:', e)
|
||
loadError.value = true
|
||
} finally {
|
||
if (seq === loadSeq) loading.value = false
|
||
}
|
||
}
|
||
|
||
function onFilterApply(filters: FilterParams) {
|
||
advancedFilters.value = filters
|
||
showFilter.value = false
|
||
loadTx(true)
|
||
}
|
||
|
||
function onEdit(item: any) {
|
||
if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) {
|
||
uni.showToast({ title: '只能编辑自己的记录', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: `/pages/add/index?editId=${item.id}` })
|
||
}
|
||
|
||
async function onDelete(item: any) {
|
||
if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) {
|
||
uni.showToast({ title: '只能删除自己的记录', icon: 'none' })
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '删除记录',
|
||
content: `确定删除这笔 ${item.type === 'expense' ? '支出' : '收入'} ¥${(item.amount / 100).toFixed(2)}？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await deleteTransaction(item.id)
|
||
txList.value = txList.value.filter(t => t.id !== item.id)
|
||
total.value--
|
||
// 更新筛选金额
|
||
if (item.type === 'expense') {
|
||
filteredExpense.value = Math.max(0, filteredExpense.value - item.amount)
|
||
} else {
|
||
filteredIncome.value = Math.max(0, filteredIncome.value - item.amount)
|
||
}
|
||
uni.showToast({ title: '已删除', icon: 'success' })
|
||
} catch {
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 触底加载更多
|
||
onReachBottom(() => {
|
||
if (noMore.value || loading.value) return
|
||
page.value++
|
||
loadTx(false)
|
||
})
|
||
|
||
// 下拉刷新
|
||
onPullDownRefresh(() => {
|
||
loadTx(true).finally(() => uni.stopPullDownRefresh())
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/mixins.scss';
|
||
|
||
.page {
|
||
@include page-base;
|
||
}
|
||
|
||
.header-fixed {
|
||
@include sticky-header;
|
||
}
|
||
|
||
.status-bar {
|
||
@include status-bar;
|
||
}
|
||
|
||
.page-title {
|
||
@include page-title;
|
||
}
|
||
|
||
.tabs-wrap {
|
||
@include tabs-wrap;
|
||
justify-content: center;
|
||
margin: 0 0 $space-md;
|
||
}
|
||
|
||
.tabs {
|
||
@include tabs;
|
||
}
|
||
|
||
.tab {
|
||
@include tab;
|
||
}
|
||
|
||
.filter-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
padding: 12rpx 20rpx;
|
||
background: $surface-warm;
|
||
border-radius: $radius-lg;
|
||
border: 2rpx solid $border;
|
||
|
||
&.active {
|
||
border-color: $primary;
|
||
background: $primary-light;
|
||
}
|
||
|
||
&:active { opacity: 0.7; }
|
||
}
|
||
|
||
.filter-btn-text {
|
||
font-size: $font-md;
|
||
color: $text-sec;
|
||
.active & { color: $primary; }
|
||
}
|
||
|
||
.filter-stats {
|
||
display: flex;
|
||
gap: $space-md;
|
||
padding: 0 $space-xl $space-sm;
|
||
}
|
||
|
||
.filter-stats-text {
|
||
font-size: $font-md;
|
||
font-family: 'Fredoka', sans-serif;
|
||
color: $text-sec;
|
||
}
|
||
|
||
.tx-list { padding: 0 $space-xl; }
|
||
|
||
.date-group {
|
||
margin-bottom: $space-md;
|
||
}
|
||
|
||
.group-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $space-sm 0;
|
||
border-bottom: 1rpx solid $border;
|
||
margin-bottom: $space-xs;
|
||
}
|
||
|
||
.group-date {
|
||
font-size: $font-base;
|
||
font-weight: 600;
|
||
color: $text;
|
||
}
|
||
|
||
.group-total {
|
||
font-family: 'Fredoka', sans-serif;
|
||
font-size: $font-md;
|
||
color: $text-sec;
|
||
|
||
&.expense { color: $text; }
|
||
}
|
||
|
||
.skeleton-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 0;
|
||
gap: $space-md;
|
||
}
|
||
|
||
.skeleton-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $space-xs;
|
||
}
|
||
|
||
.loading-more {
|
||
text-align: center;
|
||
padding: $space-lg 0;
|
||
}
|
||
|
||
.loading-text { font-size: $font-md; color: $text-muted; }
|
||
|
||
.state-box {
|
||
@include state-box;
|
||
justify-content: center;
|
||
}
|
||
|
||
.state-text {
|
||
@include state-text;
|
||
}
|
||
</style>
|