调整

2025-12-27 22:05:50 +08:00
parent 3b5675d50d
commit 1a805e51f7
6 changed files with 183 additions and 101 deletions
--- a/Web/src/components/TransactionDetail.vue
+++ b/Web/src/components/TransactionDetail.vue
@@ -12,6 +12,7 @@
        <h3>交易详情</h3>
      </div>
      
+      <div class="scroll-area">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-cell title="卡号" :value="transaction.card" />
@@ -102,6 +103,7 @@
          </van-button>
        </div>
      </van-form>
+      </div>
    </div>
  </van-popup>

@@ -334,13 +336,27 @@ const formatDate = (dateString) => {

 <style scoped>
 .transaction-detail {
-  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.detail-header {
+  flex-shrink: 0;
+  border-bottom: 1px solid #ebedf0;
 }

 .detail-header h3 {
  margin: 10px 0;
 }

+.scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 20px;
+}
+
 .classify-buttons {
  display: flex;
  flex-wrap: wrap;
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -175,8 +175,8 @@ const emailList = ref([])
 const loading = ref(false)
 const refreshing = ref(false)
 const finished = ref(false)
-const lastId = ref(null) // 游标分页：记录最后一条记录的ID
-const lastTime = ref(null) // 游标分页：记录最后一条记录的时间
+const pageIndex = ref(1) // 页码
+const pageSize = 20 // 每页数量
 const total = ref(0)
 const detailVisible = ref(false)
 const currentEmail = ref(null)
@@ -192,18 +192,16 @@ const loadData = async (isRefresh = false) => {
  if (loading.value) return // 防止重复加载
  
  if (isRefresh) {
-    lastId.value = null
-    lastTime.value = null
+    pageIndex.value = 1
    emailList.value = []
    finished.value = false
  }

  loading.value = true
  try {
-    const params = {}
-    if (lastTime.value && lastId.value) {
-      params.lastReceivedDate = lastTime.value
-      params.lastId = lastId.value
+    const params = {
+      pageIndex: pageIndex.value,
+      pageSize: pageSize
    }
    
    const response = await getEmailList(params)
@@ -211,8 +209,6 @@ const loadData = async (isRefresh = false) => {
    if (response.success) {
      const newList = response.data || []
      total.value = response.total || 0
-      const newLastId = response.lastId || 0
-      const newLastTime = response.lastTime
      
      if (isRefresh) {
        emailList.value = newList
@@ -220,17 +216,12 @@ const loadData = async (isRefresh = false) => {
        emailList.value = [...(emailList.value || []), ...newList]
      }
      
-      // 更新游标
-      if (newLastId > 0 && newLastTime) {
-        lastId.value = newLastId
-        lastTime.value = newLastTime
-      }
-      
-      // 判断是否还有更多数据（返回数据少于20条或为空，说明没有更多了）
-      if (newList.length === 0 || newList.length < 20) {
+      // 判断是否还有更多数据（返回数据少于pageSize条或为空，说明没有更多了）
+      if (newList.length === 0 || newList.length < pageSize) {
        finished.value = true
      } else {
        finished.value = false
+        pageIndex.value++
      }
    } else {
      showToast(response.message || '加载数据失败')
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -40,19 +40,19 @@

        <!-- 月度概览卡片 -->
        <div class="overview-card">
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(0)">
            <div class="label">总支出</div>
            <div class="value expense">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
            <div class="sub-text">{{ monthlyData.expenseCount }}笔</div>
          </div>
          <div class="divider"></div>
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(1)">
            <div class="label">总收入</div>
            <div class="value income">¥{{ formatMoney(monthlyData.totalIncome) }}</div>
            <div class="sub-text">{{ monthlyData.incomeCount }}笔</div>
          </div>
          <div class="divider"></div>
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(null)">
            <div class="label">结余</div>
            <div class="value" :class="monthlyData.balance >= 0 ? 'income' : 'expense'">
              {{ monthlyData.balance >= 0 ? '' : '-' }}¥{{ formatMoney(Math.abs(monthlyData.balance)) }}
@@ -257,7 +257,7 @@
      <div class="category-bills">
        <div class="popup-header">
          <h3>{{ selectedCategoryTitle }}</h3>
-          <p v-if="categoryBills.length">共 {{ categoryBills.length }} 笔交易</p>
+          <p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
        </div>

        <div class="bills-scroll-container">
@@ -306,11 +306,12 @@ const billListVisible = ref(false)
 const billListLoading = ref(false)
 const billListFinished = ref(false)
 const categoryBills = ref([])
+const categoryBillsTotal = ref(0)
 const selectedCategoryTitle = ref('')
 const selectedClassify = ref('')
 const selectedType = ref(null)
-const lastBillId = ref(null)
-const lastBillTime = ref(null)
+const billPageIndex = ref(1)
+const billPageSize = 20

 // 详情编辑相关
 const detailVisible = ref(false)
@@ -569,11 +570,29 @@ const goToCategoryBills = (classify, type) => {
  
  // 重置分页状态
  categoryBills.value = []
-  lastBillId.value = null
-  lastBillTime.value = null
+  categoryBillsTotal.value = 0
+  billPageIndex.value = 1
  billListFinished.value = false
  
  billListVisible.value = true
+  // 打开弹窗后加载数据
+  loadCategoryBills()
+}
+
+// 打开总支出/总收入的所有账单列表
+const goToTypeOverviewBills = (type) => {
+  selectedClassify.value = null
+  selectedType.value = type
+  selectedCategoryTitle.value = `${type === 0 ? '总支出' : '总收入'} - 明细`
+  
+  // 重置分页状态
+  categoryBills.value = []
+  billPageIndex.value = 1
+  billListFinished.value = false
+  
+  billListVisible.value = true
+  // 打开弹窗后加载数据
+  loadCategoryBills()
 }

 // 加载分类账单数据
@@ -583,15 +602,17 @@ const loadCategoryBills = async () => {
  billListLoading.value = true
  try {
    const params = {
-      classify: selectedClassify.value,
+      pageIndex: billPageIndex.value,
+      pageSize: billPageSize,
      type: selectedType.value,
      year: currentYear.value,
-      month: currentMonth.value
+      month: currentMonth.value,
+      sortByAmount: true
    }
    
-    if (lastBillTime.value && lastBillId.value) {
-      params.lastOccurredAt = lastBillTime.value
-      params.lastId = lastBillId.value
+    // 仅当选择了分类时才添加classify参数
+    if (selectedClassify.value !== null) {
+      params.classify = selectedClassify.value
    }
    
    const response = await getTransactionList(params)
@@ -599,15 +620,13 @@ const loadCategoryBills = async () => {
    if (response.success) {
      const newList = response.data || []
      categoryBills.value = [...categoryBills.value, ...newList]
+      categoryBillsTotal.value = response.total
      
-      if (newList.length > 0) {
-        const lastRecord = newList[newList.length - 1]
-        lastBillId.value = response.lastId || lastRecord.id
-        lastBillTime.value = response.lastTime || lastRecord.occurredAt
-      }
-      
-      if (newList.length === 0 || newList.length < 20) {
+      if (newList.length === 0 || newList.length < billPageSize) {
        billListFinished.value = true
+      } else {
+        billListFinished.value = false
+        billPageIndex.value++
      }
    } else {
      showToast(response.message || '加载账单失败')
@@ -645,8 +664,7 @@ const onBillSave = async () => {
  
  // 刷新账单列表
  categoryBills.value = []
-  lastBillId.value = null
-  lastBillTime.value = null
+  billPageIndex.value = 1
  billListFinished.value = false
  await loadCategoryBills()
  
@@ -700,6 +718,23 @@ onActivated(() => {
  text-align: center;
 }

+.overview-item.clickable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.overview-item.clickable:active {
+  background-color: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .overview-item.clickable:active {
+    background-color: #2c2c2c;
+  }
+}
+
 .overview-item .label {
  font-size: 13px;
  color: var(--van-text-color-2);
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -191,8 +191,8 @@ const transactionList = ref([])
 const loading = ref(false)
 const refreshing = ref(false)
 const finished = ref(false)
-const lastId = ref(null)
-const lastTime = ref(null)
+const pageIndex = ref(1)
+const pageSize = 20
 const total = ref(0)
 const detailVisible = ref(false)
 const currentTransaction = ref(null)
@@ -251,18 +251,16 @@ const loadClassifyList = async (type = null) => {
 // 加载数据
 const loadData = async (isRefresh = false) => {
  if (isRefresh) {
-    lastId.value = null
-    lastTime.value = null
+    pageIndex.value = 1
    transactionList.value = []
    finished.value = false
  }

  loading.value = true
  try {
-    const params = {}
-    if (lastTime.value && lastId.value) {
-      params.lastOccurredAt = lastTime.value
-      params.lastId = lastId.value
+    const params = {
+      pageIndex: pageIndex.value,
+      pageSize: pageSize
    }
    
    // 添加搜索关键词
@@ -275,8 +273,6 @@ const loadData = async (isRefresh = false) => {
    if (response.success) {
      const newList = response.data || []
      total.value = response.total || 0
-      const newLastId = response.lastId || 0
-      const newLastTime = response.lastTime
      
      if (isRefresh) {
        transactionList.value = newList
@@ -284,15 +280,11 @@ const loadData = async (isRefresh = false) => {
        transactionList.value = [...(transactionList.value || []), ...newList]
      }
      
-      if (newLastId > 0 && newLastTime) {
-        lastId.value = newLastId
-        lastTime.value = newLastTime
-      }
-      
-      if (newList.length === 0 || newList.length < 20) {
+      if (newList.length === 0 || newList.length < pageSize) {
        finished.value = true
      } else {
        finished.value = false
+        pageIndex.value++
      }
    } else {
      showToast(response.message || '加载数据失败')