delivery-depot-uniapp/pages/myTask-verification/components/FinanceInfo.vue

<template>
  <view class="finance-info">
    <view class="info-card">
      <view class="info-row radio-row">
        <text class="label">是否国有及国有投资:</text>
        <radio-group class="radio-group">
          <label class="radio">
            <radio :value="0" :checked="financeInfo.sfgykg === 0" />
            <text>是</text>
          </label>
          <label class="radio">
            <radio :value="1" :checked="financeInfo.sfgykg === 0" />
            <text>否</text>
          </label>
        </radio-group>
      </view>

      <view class="info-row">
        <text class="label">上一年总资产(万元):</text>
        <text class="value">{{ financeInfo.syndzzc }}</text>
      </view>

      <view
        class="year-info"
        v-for="(year, index) in financeInfo.cnxxList"
        :key="index"
      >
        <view class="info-row">
          <text class="label">{{ year.cn }}年营业收入(万元):</text>
          <text class="value">{{ year.yysr }}</text>
        </view>
        <view class="info-row">
          <text class="label">{{ year.cn }}年净利润(万元):</text>
          <text class="value">{{ year.jlr }}</text>
        </view>
        <view class="info-row">
          <text class="label">{{ year.cn }}年总负债(万元):</text>
          <text class="value">{{ year.zfz }}</text>
        </view>
      </view>
    </view>
    <view style="height: 140rpx"></view>
  </view>
</template>

<script>
import { getFinanceInfoApi } from "@/api/task";
export default {
  name: "FinanceInfo",
  props: {
    taskInfo: {
      type: Object, // 根据实际数据类型调整
      default: () => ({}), // 默认值
    },
  },
  data() {
    return {
      years: [2024, 2023, 2022],
      financeInfo: {
        sfgykg: null,
        syndzzc: null,
        cnxxList: [],
      },
    };
  },
  mounted() {
    this.getFinanceInfo();
  },
  methods: {
    getFinanceInfo() {
      getFinanceInfoApi({
        kqId: this.taskInfo.kqId,
      }).then((res) => {
        if (res.code === 0 && res.data && res.data.length > 0) {
          this.financeInfo = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.finance-info {
  padding: 20rpx;
  height: 100%;
  overflow: auto;
  .info-card {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

    .info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      &.radio-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .label {
        color: #666;
        font-size: 28rpx;
      }

      .value {
        color: #000;
        font-size: 28rpx;
      }
    }

    .radio-group {
      width: 240rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .year-info {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #eee;
    }
  }
}
</style>