fix

Web/src/components/CategoryBillPopup.vue

@@ -4,9 +4,7 @@
     :title="title"
     :height="'80%'"
   >
-    <!-- 交易列表 -->
     <div style="padding: 0">
-      <!-- Subtitle 作为内容区域顶部 -->
       <div
         v-if="total > 0"
         style="padding: 12px 16px; text-align: center; color: #999; font-size: 14px; border-bottom: 1px solid var(--van-border-color)"
@@ -14,114 +12,25 @@
         共 {{ total }} 笔交易
       </div>
 
-      <div class="transactions">
-        <!-- 加载状态 -->
-        <van-loading
-          v-if="loading && transactions.length === 0"
-          class="txn-loading"
-          size="24px"
-          vertical
-        >
-          加载中...
-        </van-loading>
-
-        <!-- 空状态 -->
-        <div
-          v-else-if="transactions.length === 0"
-          class="txn-empty"
-        >
-          <div class="empty-icon">
-            <van-icon
-              name="balance-list-o"
-              size="48"
-            />
-          </div>
-          <div class="empty-text">
-            暂无交易记录
-          </div>
-        </div>
-
-        <!-- 交易列表 -->
-        <div
-          v-else
-          class="txn-list"
-        >
-          <div
-            v-for="txn in transactions"
-            :key="txn.id"
-            class="txn-card"
-            @click="onTransactionClick(txn)"
-          >
-            <div
-              class="txn-icon"
-              :style="{ backgroundColor: txn.iconBg }"
-            >
-              <van-icon
-                :name="txn.icon"
-                :color="txn.iconColor"
-              />
-            </div>
-            <div class="txn-content">
-              <div class="txn-name">
-                {{ txn.reason }}
-              </div>
-              <div class="txn-footer">
-                <div class="txn-time">
-                  {{ formatDateTime(txn.occurredAt) }}
-                </div>
-                <span
-                  v-if="txn.classify"
-                  class="txn-classify-tag"
-                  :class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
-                >
-                  {{ txn.classify }}
-                </span>
-              </div>
-            </div>
-            <div class="txn-amount">
-              {{ formatAmount(txn.amount, txn.type) }}
-            </div>
-          </div>
-
-          <!-- 加载更多 -->
-          <div
-            v-if="!finished"
-            class="load-more"
-          >
-            <van-loading
-              v-if="loading"
-              size="20px"
-            >
-              加载中...
-            </van-loading>
-            <van-button
-              v-else
-              type="primary"
-              size="small"
-              @click="loadMore"
-            >
-              加载更多
-            </van-button>
-          </div>
-
-          <!-- 已加载全部 -->
-          <div
-            v-else
-            class="finished-text"
-          >
-            已加载全部
-          </div>
-        </div>
-      </div>
+      <BillListComponent
+        data-source="custom"
+        :transactions="transactions"
+        :loading="loading"
+        :finished="finished"
+        :show-delete="true"
+        :enable-filter="false"
+        @load="loadMore"
+        @click="onTransactionClick"
+        @delete="handleDelete"
+      />
     </div>
   </PopupContainerV2>
 
-  <!-- 交易详情弹窗 -->
   <TransactionDetailSheet
     v-model:show="showDetail"
     :transaction="currentTransaction"
     @save="handleSave"
-    @delete="handleDelete"
+    @delete="handleTransactionDelete"
   />
 </template>
 
@@ -130,7 +39,8 @@ import { ref, computed, watch } from 'vue'
 import { showToast } from 'vant'
 import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import { getTransactionList } from '@/api/transactionRecord'
+import BillListComponent from '@/components/Bill/BillListComponent.vue'
+import { getTransactionList, getTransactionDetail } from '@/api/transactionRecord'
 
 const props = defineProps({
   modelValue: {
@@ -157,20 +67,17 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'refresh'])
 
-// 双向绑定
 const visible = computed({
   get: () => props.modelValue,
   set: (value) => emit('update:modelValue', value)
 })
 
-// 标题
 const title = computed(() => {
   const classifyText = props.classify || '未分类'
   const typeText = props.type === 0 ? '支出' : props.type === 1 ? '收入' : '不计收支'
   return `${classifyText} - ${typeText}`
 })
 
-// 数据状态
 const transactions = ref([])
 const loading = ref(false)
 const finished = ref(false)
@@ -178,48 +85,11 @@ const pageIndex = ref(1)
 const pageSize = 20
 const total = ref(0)
 
-// 详情弹窗
 const showDetail = ref(false)
 const currentTransaction = ref(null)
 
-// 格式化日期时间
-const formatDateTime = (dateTimeStr) => {
-  const date = new Date(dateTimeStr)
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  return `${month}-${day} ${hours}:${minutes}`
-}
-
-// 格式化金额
-const formatAmount = (amount, type) => {
-  const sign = type === 1 ? '+' : '-'
-  return `${sign}${amount.toFixed(2)}`
-}
-
-// 根据分类获取图标
-const getIconByClassify = (classify) => {
-  const iconMap = {
-    餐饮: 'food',
-    购物: 'shopping',
-    交通: 'logistics',
-    娱乐: 'play-circle',
-    医疗: 'medic',
-    工资: 'gold-coin',
-    红包: 'gift'
-  }
-  return iconMap[classify] || 'bill'
-}
-
-// 根据类型获取颜色
-const getColorByType = (type) => {
-  return type === 1 ? '#22C55E' : '#FF6B6B'
-}
-
-// 加载数据
 const loadData = async (isRefresh = false) => {
-  if (loading.value || finished.value) {
+  if (loading.value) {
     return
   }
 
@@ -249,15 +119,7 @@ const loadData = async (isRefresh = false) => {
     if (response.success) {
       const newList = response.data || []
 
-      // 转换数据格式，添加显示所需的字段
-      const formattedList = newList.map((txn) => ({
-        ...txn,
-        icon: getIconByClassify(txn.classify),
-        iconColor: getColorByType(txn.type),
-        iconBg: '#FFFFFF'
-      }))
-
-      transactions.value = [...transactions.value, ...formattedList]
+      transactions.value = [...transactions.value, ...newList]
       total.value = response.total
 
       if (newList.length === 0 || newList.length < pageSize) {
@@ -278,42 +140,50 @@ const loadData = async (isRefresh = false) => {
   }
 }
 
-// 加载更多
 const loadMore = () => {
-  loadData(false)
+  if (!finished.value && !loading.value) {
+    loadData(false)
+  }
 }
 
-// 点击交易
-const onTransactionClick = (txn) => {
-  currentTransaction.value = txn
-  showDetail.value = true
+const onTransactionClick = async (txn) => {
+  try {
+    const response = await getTransactionDetail(txn.id)
+    if (response.success) {
+      currentTransaction.value = response.data
+      showDetail.value = true
+    } else {
+      showToast(response.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取详情出错:', error)
+    showToast('获取详情失败')
+  }
 }
 
-// 保存交易
 const handleSave = () => {
   showDetail.value = false
-  // 重新加载数据
   loadData(true)
-  // 通知父组件刷新
   emit('refresh')
 }
 
-// 删除交易
 const handleDelete = (id) => {
-  showDetail.value = false
-  // 从列表中移除
   transactions.value = transactions.value.filter((t) => t.id !== id)
   total.value--
-  // 通知父组件刷新
   emit('refresh')
 }
 
-// 监听弹窗打开
+const handleTransactionDelete = (id) => {
+  showDetail.value = false
+  transactions.value = transactions.value.filter((t) => t.id !== id)
+  total.value--
+  emit('refresh')
+}
+
 watch(visible, (newValue) => {
   if (newValue) {
     loadData(true)
   } else {
-    // 关闭时重置状态
     transactions.value = []
     pageIndex.value = 1
     finished.value = false
@@ -324,145 +194,4 @@ watch(visible, (newValue) => {
 
 <style scoped>
 @import '@/assets/theme.css';
-
-.transactions {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: var(--spacing-lg);
-}
-
-.txn-loading {
-  padding: var(--spacing-3xl);
-  text-align: center;
-}
-
-.txn-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-}
-
-.txn-card {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: var(--spacing-xl);
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: opacity 0.2s;
-  margin-top: 10px;
-}
-
-.txn-card:active {
-  opacity: 0.7;
-}
-
-.txn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-.txn-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  flex: 1;
-  min-width: 0;
-}
-
-.txn-name {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.txn-footer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.txn-time {
-  font-size: var(--font-md);
-  font-weight: var(--font-medium);
-  color: var(--text-tertiary);
-}
-
-.txn-classify-tag {
-  padding: 2px 8px;
-  font-size: var(--font-xs);
-  font-weight: var(--font-medium);
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-.txn-classify-tag.tag-income {
-  background-color: rgba(34, 197, 94, 0.15);
-  color: var(--accent-success);
-}
-
-.txn-classify-tag.tag-expense {
-  background-color: rgba(59, 130, 246, 0.15);
-  color: #3b82f6;
-}
-
-.txn-amount {
-  font-size: var(--font-lg);
-  font-weight: var(--font-bold);
-  color: var(--text-primary);
-  flex-shrink: 0;
-  margin-left: var(--spacing-md);
-}
-
-.load-more {
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing-xl) 0;
-}
-
-.finished-text {
-  text-align: center;
-  padding: var(--spacing-xl) 0;
-  font-size: var(--font-md);
-  color: var(--text-tertiary);
-}
-
-/* 空状态 */
-.txn-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-  padding: var(--spacing-4xl) var(--spacing-2xl);
-  gap: var(--spacing-md);
-}
-
-.empty-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-  color: var(--text-tertiary);
-  margin-bottom: var(--spacing-sm);
-}
-
-.empty-text {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-secondary);
-}
 </style>

Web/src/views/budgetV2/modules/SavingsBudgetContent.vue

@@ -400,7 +400,7 @@ const handleShowDetail = (budget) => {
     console.log('Details 内容:', budget.Details)
   }
   console.log('===================')
-  
+
   currentBudget.value = budget
   showDetailPopup.value = true
 }
@@ -431,38 +431,38 @@ const expenseCurrent = computed(() => matchedExpenseBudget.value?.current || 0)
 
 // 归档和未来预算的汇总 (仅用于年度存款计划)
 const hasArchivedIncome = computed(() => {
-  if (!currentBudget.value?.details) return false
+  if (!currentBudget.value?.details) {return false}
   return currentBudget.value.details.incomeItems.some(item => item.isArchived)
 })
 
 const archivedIncomeTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.incomeItems
     .filter(item => item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const futureIncomeTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.incomeItems
     .filter(item => !item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const hasArchivedExpense = computed(() => {
-  if (!currentBudget.value?.details) return false
+  if (!currentBudget.value?.details) {return false}
   return currentBudget.value.details.expenseItems.some(item => item.isArchived)
 })
 
 const archivedExpenseTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.expenseItems
     .filter(item => item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const futureExpenseTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.expenseItems
     .filter(item => !item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)