loan-pricing/ruoyi-ui/src/views/loanPricing/workflow/components/BargainingPoolDisplay.vue

<template>
  <el-card class="bargaining-pool-card">
    <div slot="header" class="card-header">
      <span class="card-title">议价池</span>
    </div>
    <el-descriptions :column="2" border size="small">
      <el-descriptions-item label="网点议价池">
        {{ displayBranchPool }}
      </el-descriptions-item>
      <el-descriptions-item label="支行议价池">
        {{ displaySubBranchPool }}
      </el-descriptions-item>
      <el-descriptions-item label="私域池">
        {{ displayPrivateDomainPool }}
      </el-descriptions-item>
      <el-descriptions-item label="超利分成">
        {{ displayExcessProfitShare }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
export default {
  name: "BargainingPoolDisplay",
  props: {
    branchPool: {
      type: [Number, String],
      default: 0
    },
    subBranchPool: {
      type: [Number, String],
      default: 0
    },
    privateDomainPool: {
      type: [Number, String],
      default: 0
    },
    excessProfitShare: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    displayBranchPool() {
      const value = this.branchPool
      if (value === null || value === undefined || value === '') {
        return '0'
      }
      return value
    },
    displaySubBranchPool() {
      const value = this.subBranchPool
      if (value === null || value === undefined || value === '') {
        return '0'
      }
      return value
    },
    displayPrivateDomainPool() {
      const value = this.privateDomainPool
      if (value === null || value === undefined || value === '') {
        return '0'
      }
      return value
    },
    displayExcessProfitShare() {
      const value = this.excessProfitShare
      if (value === null || value === undefined || value === '') {
        return '0'
      }
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
.bargaining-pool-card {
  ::v-deep .el-card__header {
    padding: 16px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #ebeef5;
  }

  .card-header {
    display: flex;
    align-items: center;

    .card-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  ::v-deep .el-card__body {
    padding: 20px;
  }
}
</style>