EmailBill/Web/src/components/TransactionList.vue

<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>