FE_sandTable/src/views/product/Info.vue

<template>
  <div v-if="info.approvalTime"
       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">审查员：公瑾</p>
  </div>
  <div class="info mt-2">
    <h6 class="step-name">一、产品定义</h6>
    <p class="text">{{ info.productDefinition }}</p>
    <h6 class="step-name mt-5">二、产品要素</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>
    <p class="text">担保方式：{{ info.guarantyStyle }}</p>
    <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 class="text">
      贷款对象：
      <p v-if="info.minimumAge">年龄{{ info.minimumAge }} - {{ info.maximumAge }}周岁；</p>
      <p v-if="info.educationalRequirements">取得{{ info.educationalRequirements }}以上学历；</p>
      <p v-if="info.currentWorkingLife">{{ info.currentWorkingLife }}；</p>
      <p v-if="info.providentFundAndSocialSecurity">连续缴纳本市社保或者公积金6个月；</p>
      <p>持有中国银行I类账户，且已关联至手机银行，且在我行及其他金融同业无不良信用记录。</p>
    </div>
    <template v-if="role == 43">
      <h6 class="step-name mt-5">三、材料要求</h6>
      <h6 class="step-name mt-5">四、业务流程</h6>
      <p class="text">1、贷款人APP向智信银行公司业务部门提交借款申请，同时提交贷款用途证明文件以及有关资料；</p>
      <p class="text">2、智信银行对贷款人的贷款申请进行审查，同时根据实际情况要求借款人提供补充资料；</p>
      <p class="text">3、智信银行内部审批通过后，与贷款人签订借款合同；</p>
      <p class="text">4、贷款人落实有关提款前提条件，根据贷款合同提款。</p>
      <h6 class="step-name mt-5">五、注意要点</h6>
      <p class="text">
        贷款人在使用款额度时，必须明确说明贷款用途。贷款人必须在获得循环贷款额度后，方可在额度与用途范围内申请贷款，受理机构仅限在原经办行，同时逐笔上报中心核批。单笔贷款金额不得超过贷款人单笔消费（或投资）总金额的80%。
      </p>
    </template>
  </div>
</template>

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

const router = useRouter();
const route = useRoute();
const role = computed(() => route.query.role || 41); // 1产品经理，2风控经理，3专家委员会
const id = computed(() => +route.query.id);
const info = ref<Record<string, any>>({});
const riskInfo = ref<Record<string, any>>(null);

// 详情
const getDetail = async () => {
  if (id.value) {
    try {
      const { data } = await findById(id.value);
      info.value = data;
      if (info.value.riskControlDetails) riskInfo.value = info.value.riskControlDetails;
    } finally {
    }
  }
};
watch(
  () => route.query,
  () => {
    getDetail();
  },
  {
    immediate: true,
  },
);
</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 {
  padding: 20px 16px;
  margin-bottom: 30px;
  background: #f9fafc;
  border-radius: 10px;
  .line {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
  }
  .field {
    font-size: 14px;
    font-weight: 600;
  }
}
</style>