labsop_scientific_h5/pages/project/components/detail/ProjectBudget.vue

<template>
  <view class="module-container">
    <!-- 预算详细列表 -->
    <view class="budget-list" v-if="fundsList?.length">
      <view class="list-title">科目预算明细</view>
      <view class="budget-card" v-for="(row, index) in fundsList" :key="index">
        <view class="card-indicator" :class="row.fundsClass === '10' ? 'direct' : 'indirect'"></view>
        <view class="card-main">
          <view class="card-header">
            <view class="subj-box">
              <text class="subj-name">{{ row.fundsSubjName }}</text>
              <text class="subj-type" :class="row.fundsClass === '10' ? 'direct' : 'indirect'">
                {{ row.fundsClass === '10' ? '直接费用' : '间接/管理' }}
              </text>
            </view>
          </view>
          
          <view class="funds-breakdown">
            <view class="breakdown-row">
              <view class="info-cell">
                <text class="cell-label">财政拨款</text>
                <text class="cell-value">{{ amountUnitFormatter(row.projectFundsAmount) }}</text>
              </view>
              <view class="info-cell">
                <text class="cell-label">匹配经费</text>
                <text class="cell-value">{{ amountUnitFormatter(row.otherFundsAmount) }}</text>
              </view>
            </view>
            <view class="breakdown-row">
              <view class="info-cell">
                <text class="cell-label">自筹经费</text>
                <text class="cell-value">{{ amountUnitFormatter(row.raiseFundsAmount) }}</text>
              </view>
              <view class="info-cell total">
                <text class="cell-label">预算总计</text>
                <text class="cell-amount">{{ amountUnitFormatter(row.totalFundsAmount) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态展示 -->
    <view v-else class="empty-wrap">
      <uv-empty mode="data" text="暂无项目预算数据"></uv-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { formatWithComma } from '@/utils/format';

const props = defineProps<{
  projectId: number;
  projectType: string;
  projectData: any;
}>();

const fundsList = computed(() => {
  return props.projectData?.fundsList || [];
});



const amountUnitFormatter = (num: any) => {
  return formatWithComma(num);
};
</script>

<style lang="scss" scoped>
.module-container {
  padding: 30rpx 20rpx;
  background-color: #f6f8fc;
  min-height: 100vh;

  /* 列表部分 */
  .budget-list {
    .list-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #1e293b;
      margin-bottom: 24rpx;
      padding-left: 10rpx;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        width: 8rpx;
        height: 32rpx;
        background-color: #4f46e5;
        border-radius: 4rpx;
        margin-right: 16rpx;
      }
    }

    .budget-card {
      background-color: #fff;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      overflow: hidden;
      display: flex;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
      position: relative;

      .card-indicator {
        width: 10rpx;
        flex-shrink: 0;
        &.direct { background-color: #10b981; }
        &.indirect { background-color: #3b82f6; }
      }

      .card-main {
        flex: 1;
        padding: 30rpx;
        
        .card-header {
          margin-bottom: 24rpx;
          
          .subj-box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            
            .subj-name {
              font-size: 32rpx;
              color: #1e293b;
              font-weight: 700;
              flex: 1;
              line-height: 1.4;
              margin-right: 20rpx;
            }
            
            .subj-type {
              font-size: 20rpx;
              padding: 6rpx 16rpx;
              border-radius: 8rpx;
              white-space: nowrap;
              
              &.direct {
                background-color: #ecfdf5;
                color: #059669;
              }
              &.indirect {
                background-color: #eff6ff;
                color: #2563eb;
              }
            }
          }
        }

        .funds-breakdown {
          background-color: #f8fafc;
          border-radius: 12rpx;
          padding: 20rpx;

          .breakdown-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            
            &:last-child { margin-bottom: 0; }

            .info-cell {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 4rpx;
              
              .cell-label {
                font-size: 22rpx;
                color: #64748b;
              }
              .cell-value {
                font-size: 28rpx;
                color: #ef4444;
                font-weight: 500;
              }

              &.total {
                .cell-amount {
                  font-size: 32rpx;
                  color: #dc2626;
                  font-weight: 800;
                }
              }
            }
          }
        }
      }
    }
  }

  .empty-wrap {
    padding: 120rpx 0;
    text-align: center;
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>