fundplatform/fund-mobile/src/views/expense/List.vue

<template>
  <div class="page expense-list">
    <van-nav-bar title="支出管理" left-arrow @click-left="$router.back()" />
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <van-search v-model="searchText" placeholder="搜索支出标题" @search="handleSearch" />
    </div>
    
    <!-- 支出列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="expense-card" v-for="item in list" :key="item.expenseId">
          <div class="expense-header">
            <span class="expense-title">{{ item.title }}</span>
            <van-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</van-tag>
          </div>
          <div class="expense-info">
            <div class="info-item">
              <van-icon name="apps-o" />
              <span>{{ item.typeName || '-' }}</span>
            </div>
            <div class="info-item">
              <van-icon name="clock-o" />
              <span>{{ item.expenseDate }}</span>
            </div>
          </div>
          <div class="expense-amount">
            <div class="amount-item">
              <span class="label">支出金额</span>
              <span class="value expense-value">¥{{ item.amount?.toLocaleString() }}</span>
            </div>
            <div class="amount-item" v-if="item.paidAmount">
              <span class="label">已支付</span>
              <span class="value">¥{{ item.paidAmount?.toLocaleString() }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    
    <!-- 新增按钮 -->
    <div class="add-btn" @click="$router.push('/expense/add')">
      <van-icon name="plus" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getExpenseList } from '@/api'

const searchText = ref('')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const list = ref<any[]>([])
const pageNum = ref(1)
const pageSize = 10

const getStatusType = (status: string): 'primary' | 'success' | 'warning' | 'danger' | 'default' => {
  const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'default'> = {
    'pending': 'warning',
    'approved': 'primary',
    'paid': 'success',
    'rejected': 'danger'
  }
  return map[status] || 'default'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    'pending': '待审批',
    'approved': '已审批',
    'paid': '已支付',
    'rejected': '已拒绝'
  }
  return map[status] || status
}

const loadData = async () => {
  try {
    const res: any = await getExpenseList({
      pageNum: pageNum.value,
      pageSize,
      title: searchText.value || undefined
    })
    const records = res.data?.records || []
    if (pageNum.value === 1) {
      list.value = records
    } else {
      list.value.push(...records)
    }
    finished.value = records.length < pageSize
  } catch (e) {
    console.error(e)
    finished.value = true
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const onLoad = () => {
  if (loading.value) return
  loading.value = true
  pageNum.value++
  loadData()
}

const onRefresh = () => {
  pageNum.value = 1
  finished.value = false
  loadData()
}

const handleSearch = () => {
  pageNum.value = 1
  finished.value = false
  list.value = []
  loading.value = true
  loadData()
}

onMounted(() => {
  loading.value = true
  loadData()
})
</script>

<style scoped>
.expense-list {
  background: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  background: #fff;
  padding: 8px 0;
}

.expense-card {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.expense-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.expense-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.expense-info {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #666;
}

.expense-amount {
  display: flex;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.amount-item {
  display: flex;
  flex-direction: column;
}

.amount-item .label {
  font-size: 12px;
  color: #999;
}

.amount-item .value {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
}

.expense-value {
  color: #FF3B30 !important;
}

.add-btn {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF3B30, #FF453A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.add-btn:active {
  transform: scale(0.95);
}
</style>