FE_sandTable/src/views/product/bank/Info.vue

<template>
  <div v-if="showAudit"
       class="audit">
    <div class="line">
      <span class="field">审批意见：</span>
      <span class="status">{{ getStatus(+info?.status) }}</span>
    </div>
    <div class="line">
      <span class="field">意见描述：</span>
      {{ info.opinionDescription }}
    </div>
    <p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ info.approvalTime }}</p>
    <p class="mb-2 text-sm text-[#333] text-right">审查员：{{ info.approvalTime && userName }}</p>
  </div>
  <div class="info my-2">
    <template v-if="route.params.action !== 'add'">
      <h6 class="step-name">{{ route.params.action !== 'config' ? '一、' : '' }}产品定义</h6>
      <p class="text">{{ info.productDefinition }}</p>
      <h6 class="step-name mt-5">{{ route.params.action !== 'config' ? '二、' : '' }}产品要素</h6>
      <p class="text">产品名称：{{ info.productName }}</p>
      <p class="text">贷款币种：人民币</p>
      <p v-if="info.loanPurpose"
         class="text">
        贷款用途：{{
        info.loanPurpose === '购房'
          ? '可用于住房按揭贷款、二手房住房按揭贷款。'
          : info.loanPurpose === '消费'
          ? '贷款用途可用于除购房之外的合法个人消费支出，不得用于投资经营，不得用于无指定用途的个人支出。'
          : info.loanPurpose === '经营' && !info.productType
          ? '可用于个人或其企业生产和经营活动中临时性、季节性等流动资金周转以及购置、安装或修理小型设备和装潢经营性场所所需的人民币贷款业务。'
          : info.loanPurpose === '创业'
          ? '用于创业或再创业过程中的资金需求。'
          : info.loanPurpose === '经营' && info.productType
          ? '用于短期生产经营周转的可循环的人民币信用贷款业务。'
          : info.otherPurposesOfLoan
      }}
      </p>
      <div class="flex my-2">
        <p class="text whitespace-nowrap">担保方式：</p>
        <p v-html="info.guarantyStyle"
           class="text"></p>
      </div>

      <p class="text">贷款期限：{{ info.minimumTermOfLoan }}月 - {{ info.maximumTermOfLoan }}月</p>
      <p class="text">贷款限额：{{ info.minimumLoan }}万元 - {{ info.loanCeiling }}万元</p>
      <p class="text">贷款利率：{{ info.minimumAprOnLoan }}% - {{ info.maximumAnnualInterestRate }}%</p>
      <p class="text">还款方式：{{ info.modeRepayment }}</p>

      <div v-if="info.prospectiveBorrowerText"
           class="flex my-2">
        <p class="text whitespace-nowrap">贷款对象：</p>
        <div class="text"
             v-html="info.prospectiveBorrowerText"></div>
      </div>
    </template>

    <template v-if="riskInfo && route.params.action !== 'config'">
      <h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '三、' : '' }}材料要求</h6>
      <p v-if="riskInfo?.accountMaterials"
         class="text">办理账户-提供材料：{{ riskInfo?.accountMaterials }}</p>
      <p v-if="riskInfo?.sendingAccount"
         class="text">办理账户-发放账户：借记卡或放款专户</p>
      <p v-if="riskInfo?.loanApplicationMethod"
         class="text">贷款申请-申请方式：{{ riskInfo?.loanApplicationMethod }}</p>
      <p v-if="riskInfo?.borrowerMaterial"
         class="text">贷款申请-提供材料-借款人材料：{{ riskInfo?.borrowerMaterial }}</p>
      <template v-if="info.productType">
        <p v-if="riskInfo?.enterpriseMaterial"
           class="text">贷款申请-提供材料-企业材料：{{ riskInfo?.enterpriseMaterial }}</p>
        <p v-if="riskInfo?.collateral"
           class="text">贷款申请-提供材料-抵押物：{{ riskInfo?.collateral }}</p>
      </template>
      <template v-else>
        <p v-if="riskInfo?.mateMaterial"
           class="text">贷款申请-提供材料-配偶材料：{{ riskInfo?.mateMaterial }}</p>
        <p v-if="riskInfo?.businessMaterials"
           class="text">贷款申请-提供材料-经营类材料：{{ riskInfo?.businessMaterials }}</p>
      </template>
      <p v-if="riskInfo?.supplementaryMaterials"
         class="text">贷款申请-提供材料-补充材料：{{ riskInfo?.supplementaryMaterials }}</p>
      <p v-if="riskInfo?.runBatchObject"
         class="text">系统跑批准入风控策略-跑批对象：{{ riskInfo?.runBatchObject }}</p>
      <p v-if="riskInfo?.accessStrategy"
         class="text">系统跑批准入风控策略-准入策略：{{ riskInfo?.accessStrategy }}</p>
      <p v-if="riskInfo?.personalCreditScoringStrategies"
         class="text">系统跑批准入风控策略-信用评分策略：{{ riskInfo?.personalCreditScoringStrategies }}</p>
      <p v-if="riskInfo?.riskDegreeStrategy"
         class="text">系统跑批准入风控策略-风险度策略：{{ riskInfo?.riskDegreeStrategy }}</p>
      <p v-if="riskInfo?.interestRatePricingModel"
         class="text">系统跑批准入风控策略-利率定价模型-个人额度模型：{{ riskInfo?.interestRatePricingModel }}</p>
      <p v-if="riskInfo?.individualInterestRateModel === '需要跑批'"
         class="text">系统跑批准入风控策略-利率定价模型-个人利率模型</p>
      <p v-if="riskInfo?.dueDiligenceMode"
         class="text">尽职调查-尽调方式：{{ riskInfo?.dueDiligenceMode }}</p>
      <p v-if="riskInfo?.dueDiligenceContent"
         class="text">尽职调查-尽调内容：{{ riskInfo?.dueDiligenceContent }}</p>
      <p v-if="riskInfo?.reviewContent"
         class="text">贷款审查-审查内容：{{ riskInfo?.reviewContent }}</p>
      <p v-if="riskInfo?.reviewSignature"
         class="text">贷款审查-审查签字：{{ riskInfo?.reviewSignature }}</p>
      <p v-if="riskInfo?.reviewApproveContent"
         class="text">贷款审批-审批内容：{{ riskInfo?.reviewApproveContent }}</p>
      <p v-if="riskInfo?.approvalSignature"
         class="text">贷款审批-审批签字：{{ riskInfo?.approvalSignature }}</p>
      <p v-if="riskInfo?.contractMaterials"
         class="text">签订合同-提供的材料：{{ riskInfo?.contractMaterials }}</p>
      <p v-if="riskInfo?.loanContract"
         class="text">签订合同-合同模板-借贷合同：{{ riskInfo?.loanContract }}</p>
      <p v-if="riskInfo?.mortgageContract"
         class="text">签订合同-合同模板-抵押合同：{{ riskInfo?.mortgageContract }}</p>
      <p v-if="riskInfo?.pledgeContract"
         class="text">签订合同-合同模板-质押合同：{{ riskInfo?.pledgeContract }}</p>
      <p v-if="riskInfo?.guaranteeContract"
         class="text">签订合同-合同模板-担保合同：{{ riskInfo?.guaranteeContract }}</p>
      <p v-if="riskInfo?.selectionStrategy"
         class="text">贷后管理-选择策略：{{ riskInfo?.selectionStrategy }}</p>

      <h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '四、' : '' }}业务流程</h6>
      <p class="text">1、贷款人APP向智信银行公司业务部门提交借款申请，同时提交贷款用途证明文件以及有关资料；</p>
      <p class="text">2、智信银行对贷款人的贷款申请进行审查，同时根据实际情况要求借款人提供补充资料；</p>
      <p class="text">3、智信银行内部审批通过后，与贷款人签订借款合同；</p>
      <p class="text">4、贷款人落实有关提款前提条件，根据贷款合同提款。</p>

      <template v-if="route.params.action !== 'add'">
        <h6 class="step-name mt-5">五、注意要点</h6>
        <p class="text">
          贷款人在使用款额度时，必须明确说明贷款用途。贷款人必须在获得循环贷款额度后，方可在额度与用途范围内申请贷款，受理机构仅限在原经办行，同时逐笔上报中心核批。单笔贷款金额不得超过贷款人单笔消费（或投资）总金额的80%。
        </p>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineExpose } from 'vue';
import { findById } from '@/api/bank';
import { getTheCurrentUserName } from '@/api/config';
import { useRouter, useRoute } from 'vue-router';
import { getStatus } from '@/store/useProduct';

// const props = defineProps({
//   tab: String,
// });
const emit = defineEmits(['updateStatus']);
const router = useRouter();
const route = useRoute();
const id = computed(() => +route.query.id);
const info = ref<Record<string, any>>({});
const riskInfo = ref<Record<string, any>>(null);
const userName = ref<string>();

// 是否显示审批结果
const showAudit = computed(() => {
  return (
    riskInfo.value &&
    (route.params.action === 'detail' ||
      (route.params.action !== 'approve' && info.value.status !== '295' && info.value.status !== '299') ||
      (route.params.action === 'approve' && info.value.status !== '296'))
  );
});

// 详情
const getDetail = async () => {
  if (id.value) {
    try {
      const { data } = await findById(id.value);
      info.value = data;
      emit('updateStatus', data.riskControlDetails ? '审批结果' : '产品要素');
      if (info.value.riskControlDetails) riskInfo.value = data.riskControlDetails;
    } finally {
    }
  }
};
// 获取审查员姓名
const getName = async () => {
  const res = await getTheCurrentUserName();
  userName.value = res.userName;
};
watch(
  () => route.query,
  () => {
    getDetail();
    getName();
  },
  {
    immediate: true,
  },
);

defineExpose({
  info,
});
</script>

<style lang="scss" scoped>
.info {
  .step-name {
    @apply mb-3 text-sm font-semibold text-[#006bff];
  }
  .line {
    @apply flex mb-2;
  }
  .label {
    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
  }
  .text {
    @apply text-sm text-[#333] leading-[32px];
  }
}
.audit {
  @apply py-5 px-4 mb-[30px] bg-[#f9fafc] rounded-[10px];
  .line {
    @apply mb-[18px] text-sm leading-[1.6];
  }
  .field {
    @apply text-sm font-semibold;
  }
}
</style>