labsop_scientific_h5/pages/fund/claim-records/detail.vue

<template>
  <view class="detail-container">
    <view class="header-card">
      <view class="title">{{ form.projectName || '未知名称' }}</view>
      <view class="meta-row">
        <view class="leader" v-if="form.projectIncharge">
          项目负责人：{{ form.projectIncharge }}
        </view>
        <view class="tags">
          <text class="tag bg-blue">{{ getProjectTypeLabel(form.projectType) }}</text>
        </view>
      </view>
    </view>
    <view class="scroll-wrapper">
      <scroll-view scroll-y class="content-area" :show-scrollbar="false">
        <view class="component-wrapper">
          <CommonSection title="项目信息">
            <CommonInfoRow label="预算金额" :value="amountUnitFormatter(form.contractAmount) + '元'" :isAmount="true" />
          </CommonSection>

          <CommonSection title="入账经费">
            <CommonInfoRow label="经费类型" :value="formatAmountType(form.amountType)" />
            <CommonInfoRow label="入账金额" :value="amountUnitFormatter(form.amount) + '元'" :isAmount="true" />
            <CommonInfoRow label="入账时间" :value="formatDate(form.applyTime, 'YYYY-MM-DD')" />
            <CommonInfoRow label="拨款单位" :value="form.allotUnit" />
            <CommonInfoRow label="拨款时间" :value="formatDate(form.allotTime, 'YYYY-MM-DD')" />
            <CommonInfoRow label="入账说明" :value="form.remark" />
          </CommonSection>

          <CommonSection title="预算情况" v-if="form.fundsList && form.fundsList.length > 0">
            <CommonInfoRow v-for="(item, index) in form.fundsList" :key="item.id || index" :label="item.subjName"
              :value="amountUnitFormatter(item.amount) + '元'" :isAmount="true" />
          </CommonSection>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useClaimApi } from '@/api/fund/index';
import { formatDate } from '@/utils/date';
import CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

const claimApi = useClaimApi();

const form = ref<any>({
  id: 0,
  amount: '', //金额(元)
  projectName: '',
  projectType: '',
  contractAmount: '',
  projectIncharge: '',
  applyTime: '',
  amountType: '',
  allotUnit: '',
  allotTime: '',
  remark: '',
  fundsList: []
});

const getProjectTypeLabel = (type: string) => {
  const map: Record<string, string> = {
    '10': '纵向项目',
    '20': '横向项目',
    '30': '内部项目',
    '40': '重点学科',
    '50': '人才类项目',
    '60': '科研平台'
  };
  return map[type] || '-';
};

const formatAmountType = (type: string) => {
  const amountTypeOptions = [
    { value: '10', label: '财政拨款' },
    { value: '20', label: '匹配经费' },
    { value: '30', label: '自筹经费' }
  ];
  const find = amountTypeOptions.find((item) => item.value == type);
  return find ? find.label : '-';
};

const amountUnitFormatter = (val: any) => {
  if (val === null || val === undefined || val === '') return '0.00';
  const num = Number(val);
  return isNaN(num) ? '0.00' : num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const getFundDetail = async (id: number) => {
  try {
    const res: any = await claimApi.getRecordDetails({ id });
    if (res.code == 200 && res.data) {
      form.value = { ...form.value, ...res.data };
    }
  } catch (err) {
    console.error('获取详情失败', err);
  }
};

onLoad((options: any) => {
  const id = options.id ? Number(options.id) : 0;
  if (id) {
    getFundDetail(id);
  }
});
</script>

<style lang="scss" scoped>
.detail-container {
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.header-card {
  flex-shrink: 0;
  background: linear-gradient(135deg, #1c9bfd 0%, #15a982 100%);
  padding: 40rpx 30rpx 40rpx;
  color: #fff;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  box-shadow: 0 10rpx 20rpx rgba(28, 155, 253, 0.2);

  .title {
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    line-height: 1.4;
  }

  .meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
  }

  .leader {
    font-size: 28rpx;
    opacity: 0.9;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag {
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      border-radius: 30rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(4px);
    }
  }
}

.scroll-wrapper {
  flex: 1;
  overflow: hidden;
  margin-top: 10rpx;
}

.content-area {
  height: 100%;
}

.component-wrapper {
  margin: 0 30rpx;
  padding-top: 20rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
</style>