yss-project/src/app/shared/components/settlement-card/settlement-card.html

<div class="settlement-card">
  <!-- 统计数据概览 -->
  <div class="stats-overview">
    <h4>尾款结算概览</h4>
    <div class="stats-grid">
      <div class="stat-item total">
        <div class="stat-value">{{ formatAmount(stats().totalAmount) }}</div>
        <div class="stat-label">总金额 ({{ stats().totalCount }}项)</div>
      </div>
      <div class="stat-item pending">
        <div class="stat-value">{{ formatAmount(stats().pendingAmount) }}</div>
        <div class="stat-label">待收款 ({{ stats().pendingCount }}项)</div>
      </div>
      <div class="stat-item overdue">
        <div class="stat-value">{{ formatAmount(stats().overdueAmount) }}</div>
        <div class="stat-label">逾期尾款 ({{ stats().overdueCount }}项)</div>
      </div>
      <div class="stat-item completed">
        <div class="stat-value">{{ formatAmount(stats().completedAmount) }}</div>
        <div class="stat-label">已收款 ({{ stats().completedCount }}项)</div>
      </div>
    </div>
  </div>

  <!-- 筛选和搜索 -->
  <div class="filter-section">
    <div class="search-bar">
      <input 
        type="text" 
        placeholder="搜索项目名称或阶段..."
        [value]="searchKeyword()"
        (input)="updateSearchKeyword($event.target.value)"
        class="search-input">
    </div>
    <div class="filter-buttons">
      <button 
        class="filter-btn"
        [class.active]="statusFilter() === 'all'"
        (click)="updateStatusFilter('all')">
        全部
      </button>
      <button 
        class="filter-btn pending"
        [class.active]="statusFilter() === '待结算'"
        (click)="updateStatusFilter('待结算')">
        待结算
      </button>
      <button 
        class="filter-btn overdue"
        [class.active]="statusFilter() === 'overdue'"
        (click)="updateStatusFilter('overdue')">
        逾期
      </button>
      <button 
        class="filter-btn completed"
        [class.active]="statusFilter() === '已结算'"
        (click)="updateStatusFilter('已结算')">
        已结算
      </button>
    </div>
  </div>

  <!-- 结算列表 -->
  <div class="settlements-list">
    @if (filteredSettlements() && filteredSettlements().length > 0) {
      <div class="list-header">
        <span class="col-project">项目信息</span>
        <span class="col-amount">金额</span>
        <span class="col-status">状态</span>
        <span class="col-date">日期</span>
      </div>
      <div class="list-body">
        @for (settlement of filteredSettlements(); track settlement.id) {
          <div class="settlement-item" [class]="getStatusClass(settlement)">
            <div class="col-project">
              <div class="project-name">{{ settlement.projectName || '结算项' }}</div>
              <div class="stage-name">{{ settlement.stage || '阶段' }}</div>
            </div>
            <div class="col-amount">
              <div class="amount">{{ formatAmount(settlement.amount || 0) }}</div>
              <div class="percentage">{{ settlement.percentage }}%</div>
            </div>
            <div class="col-status">
              <span class="status-badge" [class]="getStatusClass(settlement)">
                {{ settlement.status }}
              </span>
              @if (isOverdue(settlement)) {
                <div class="overdue-days">逾期 {{ getDaysOverdue(settlement) }} 天</div>
              }
            </div>
            <div class="col-date">
              @if (settlement.settledAt) {
                <div class="settled-date">{{ settlement.settledAt | date:'yyyy-MM-dd' }}</div>
                <div class="date-label">结算日期</div>
              } @else {
                <div class="due-date">{{ settlement.createdAt | date:'yyyy-MM-dd' }}</div>
                <div class="date-label">创建日期</div>
              }
            </div>
          </div>
        }
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon">💰</div>
        <div class="empty-title">暂无结算信息</div>
        <div class="empty-desc">当前筛选条件下没有找到相关的结算记录</div>
      </div>
    }
  </div>
</div>