first commot

Web/src/components/TransactionList.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="transaction-list-container">
+    <van-list
+      :loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-cell-group v-if="transactions && transactions.length" inset style="margin-top: 10px">
+        <van-swipe-cell
+          v-for="transaction in transactions"
+          :key="transaction.id"
+        >
+          <div
+            class="transaction-card"
+            @click="handleClick(transaction)"
+          >
+            <div class="card-left">
+              <div class="transaction-title">
+                <span class="reason">{{ transaction.reason || '(无摘要)' }}</span>
+                <van-tag 
+                  :type="getTypeTagType(transaction.type)" 
+                  size="medium"
+                >
+                  {{ getTypeName(transaction.type) }}
+                </van-tag>
+              </div>
+              <div class="transaction-info">
+                <div>交易时间: {{ formatDate(transaction.occurredAt) }}</div>
+                <div v-if="transaction.classify">分类: {{ transaction.classify }} 
+                  <span v-if="transaction.subClassify">/ {{ transaction.subClassify }}</span>
+                </div>
+                <div v-if="transaction.card">
+                  卡号: {{ transaction.card }}
+                </div>
+                <div v-if="transaction.importFrom">
+                  来源: {{ transaction.importFrom }}
+                </div>
+              </div>
+            </div>
+            <div class="card-right">
+              <div class="transaction-amount">
+                <div :class="['amount', getAmountClass(transaction.type)]">
+                  {{ formatAmount(transaction.amount, transaction.type) }}
+                </div>
+                <div class="balance" v-if="transaction.balance && transaction.balance > 0">
+                  余额: {{ formatMoney(transaction.balance) }}
+                </div>
+                <div class="balance" v-if="transaction.refundAmount && transaction.refundAmount > 0">
+                  退款: {{ formatMoney(transaction.refundAmount) }}
+                </div>
+              </div>
+              <van-icon name="arrow" size="16" color="#c8c9cc" />
+            </div>
+          </div>
+          <template #right v-if="showDelete">
+            <van-button 
+              square
+              type="danger" 
+              text="删除"
+              class="delete-button"
+              @click="handleDeleteClick(transaction)"
+            />
+          </template>
+        </van-swipe-cell>
+      </van-cell-group>
+
+      <van-empty 
+        v-if="!loading && !(transactions && transactions.length)" 
+        description="暂无交易记录" 
+      />
+    </van-list>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits } from 'vue'
+
+defineProps({
+  transactions: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  finished: {
+    type: Boolean,
+    default: false
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['load', 'click', 'delete'])
+
+const onLoad = () => {
+  emit('load')
+}
+
+const handleClick = (transaction) => {
+  emit('click', transaction)
+}
+
+const handleDeleteClick = (transaction) => {
+  emit('delete', transaction)
+}
+
+// 获取交易类型名称
+const getTypeName = (type) => {
+  const typeMap = {
+    0: '支出',
+    1: '收入',
+    2: '不计入收支'
+  }
+  return typeMap[type] || '未知'
+}
+
+// 获取交易类型标签类型
+const getTypeTagType = (type) => {
+  const typeMap = {
+    0: 'danger',
+    1: 'success',
+    2: 'default'
+  }
+  return typeMap[type] || 'default'
+}
+
+// 获取金额样式类
+const getAmountClass = (type) => {
+  if (type === 0) return 'expense'
+  if (type === 1) return 'income'
+  return 'neutral'
+}
+
+// 格式化金额（带符号）
+const formatAmount = (amount, type) => {
+  const formatted = formatMoney(amount)
+  if (type === 0) return `- ${formatted}`
+  if (type === 1) return `+ ${formatted}`
+  return formatted
+}
+
+// 格式化金额
+const formatMoney = (amount) => {
+  return `¥${Number(amount).toFixed(2)}`
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+</script>
+
+<style scoped>
+.transaction-list-container {
+  width: 100%;
+}
+
+.transaction-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.card-left {
+  flex: 1;
+  min-width: 0;
+  padding-right: 12px;
+}
+
+.card-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.transaction-title {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  margin-bottom: 8px;
+  gap: 8px;
+}
+
+.reason {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.transaction-info {
+  font-size: 12px;
+  color: #969799;
+  line-height: 1.6;
+}
+
+.transaction-amount {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: 90px;
+}
+
+.amount {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+
+.amount.expense {
+  color: #ee0a24;
+}
+
+.amount.income {
+  color: #07c160;
+}
+
+.amount.neutral {
+  color: #646566;
+}
+
+.balance {
+  font-size: 12px;
+  color: #969799;
+  white-space: nowrap;
+}
+
+.delete-button {
+  height: 100%;
+}
+</style>