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

<template>
  <div class="page receivable-list">
    <div class="header-bar mac-card">
      <div class="back-btn" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <span class="header-title">应收款管理</span>
      <div class="placeholder"></div>
    </div>
    
    <!-- 搜索栏 -->
    <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="list-container">
          <div 
            v-for="item in list" 
            :key="item.id" 
            class="receivable-card mac-card fade-in-up"
          >
            <div class="card-header">
              <span class="customer-name">{{ item.customerName || '-' }}</span>
              <van-tag :type="getStatusType(item.status)" round>
                {{ getStatusName(item.status) }}
              </van-tag>
            </div>
            <div class="card-project">{{ item.projectName || '未关联项目' }}</div>
            <div class="card-body">
              <div class="amount-info">
                <span class="amount-label">应收金额</span>
                <span class="amount-value">¥{{ item.receivableAmount?.toLocaleString() }}</span>
              </div>
              <div class="date-info">
                <van-icon name="clock-o" />
                <span>{{ item.receivableDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    
    <!-- 新增按钮 -->
    <div class="add-btn" @click="$router.push('/receivable/add')">
      <van-icon name="plus" />
    </div>
  </div>
</template>

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

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

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

const getStatusName = (status: string) => {
  const map: Record<string, string> = {
    pending: '待收款',
    partial: '部分收款',
    received: '已收款',
    overdue: '逾期'
  }
  return map[status] || status
}

const loadData = async () => {
  try {
    const res: any = await getReceivableList({ 
      pageNum: pageNum.value, 
      pageSize,
      keyword: 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
    loading.value = false
  } catch (e: any) {
    showToast(e.message || '加载失败')
    loading.value = false
    finished.value = true
  }
}

const onLoad = () => {
  if (pageNum.value === 1 && list.value.length === 0) {
    loadData()
  } else {
    pageNum.value++
    loadData()
  }
}

const onRefresh = () => {
  list.value = []
  pageNum.value = 1
  finished.value = false
  refreshing.value = false
  loadData()
}

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

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.receivable-list {
  padding: 0 16px;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin: 12px -16px 0;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 245, 247, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

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

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mac-primary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:active {
  transform: scale(0.95);
  background: rgba(0, 122, 255, 0.2);
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--mac-text);
}

.placeholder {
  width: 36px;
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receivable-card {
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.receivable-card:active {
  transform: scale(0.98);
}

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

.customer-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--mac-text);
}

.card-project {
  font-size: 13px;
  color: var(--mac-text-secondary);
  margin-bottom: 12px;
  padding-left: 2px;
}

.card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

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

.amount-label {
  font-size: 12px;
  color: var(--mac-text-secondary);
  margin-bottom: 4px;
}

.amount-value {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--mac-primary), #5AC8FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.date-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mac-text-secondary);
}

.add-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34C759, #30D158);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 100;
}

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