app/pages/enter/creditEnter/index.vue

<template>
  <s-layout>
    <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
    <view class="form-container">
      <u-form :model="form" ref="form1" :border-bottom="false" label-width="220">
        <u-form-item label="相关照片" prop="infoImages">
          <view class="tpClass">
            <s-uploader v-model:url="form.infoImages" fileMediatype="pdf" limit="1" mode="list" />
            <u-button @click="pdfClick" v-if="form.infoImages && route.formType == 'edit'"
              type="primary">点击查看</u-button>
          </view>
          <u-button @click="extractClick" type="primary">提取</u-button>
        </u-form-item>
        <u-form-item label="用户编号" prop="userId">
          <u-input v-model="form.userId" placeholder="请输入用户编号" />
        </u-form-item>
        <u-form-item label="报告编号" prop="reportNumber">
          <u-input v-model="form.reportNumber" placeholder="请输入报告编号" />
        </u-form-item>

        <u-form-item label="报告时间" prop="reportTime">
          <u-input v-model="form.reportTime" type="select" placeholder="选择报告时间" @click="calendar1.show = true" />
          <u-calendar v-model="calendar1.show" mode="date" @change="onCalendar1"></u-calendar>

        </u-form-item>

        <u-form-item label="被查询者姓名" prop="name">
          <u-input v-model="form.name" placeholder="请输入被查询者姓名" />
        </u-form-item>

        <u-form-item label="被查询者证件类型" prop="idCardType">
          <u-input v-model="form.idCardType" placeholder="请输入被查询者证件类型" />
        </u-form-item>

        <u-form-item label="被查询者证件号码" prop="idCardNumber">
          <u-input v-model="form.idCardNumber" placeholder="请输入被查询者证件号码" />
        </u-form-item>

        <u-form-item label="查询机构" prop="queryOrganization">
          <u-input v-model="form.queryOrganization" placeholder="请输入查询机构" />
        </u-form-item>

        <u-form-item label="查询原因" prop="queryReason">
          <u-input v-model="form.queryReason" placeholder="请输入查询原因" />
        </u-form-item>

        <u-form-item label="异议信息提示" prop="disputeInfo">
          <u-input v-model="form.disputeInfo" placeholder="请输入异议信息提示" />
        </u-form-item>

        <u-form-item label="性别" prop="gender">
          <u-input v-model="form.gender" placeholder="请输入性别" />
        </u-form-item>

        <u-form-item label="出生日期" prop="birthDate">
          <u-input v-model="form.birthDate" type="select" placeholder="选择出生日期" @click="calendar2.show = true" />
          <u-calendar v-model="calendar2.show" mode="date" @change="onCalendar2"></u-calendar>
        </u-form-item>

        <u-form-item label="婚姻状况" prop="maritalStatus">
          <u-input v-model="form.maritalStatus" placeholder="请输入婚姻状况" />
        </u-form-item>

        <u-form-item label="就业状况" prop="employmentStatus">
          <u-input v-model="form.employmentStatus" placeholder="请输入就业状况" />
        </u-form-item>

        <u-form-item label="学历" prop="education">
          <u-input v-model="form.education" placeholder="请输入学历" />
        </u-form-item>

        <u-form-item label="学位" prop="degree">
          <u-input v-model="form.degree" placeholder="请输入学位" />
        </u-form-item>

        <u-form-item label="国籍" prop="nationality">
          <u-input v-model="form.nationality" placeholder="请输入国籍" />
        </u-form-item>

        <u-form-item label="电子邮箱" prop="email">
          <u-input v-model="form.email" placeholder="请输入电子邮箱" />
        </u-form-item>

        <u-form-item label="通讯地址" prop="communicationAddress">
          <u-input v-model="form.communicationAddress" placeholder="请输入通讯地址" />
        </u-form-item>

        <u-form-item label="户籍地址" prop="householdAddress">
          <u-input v-model="form.householdAddress" placeholder="请输入户籍地址" />
        </u-form-item>

        <u-form-item label="信贷交易业务类型" prop="loanType">
          <u-input v-model="form.loanType" placeholder="请输入信贷交易业务类型" />
        </u-form-item>

        <u-form-item label="信贷交易账户数" prop="loanAccountCount">
          <u-input v-model="form.loanAccountCount" placeholder="请输入信贷交易账户数" />
        </u-form-item>

        <u-form-item label="首笔业务发放月份" prop="firstLoanMonth">
          <u-input v-model="form.firstLoanMonth" placeholder="请输入首笔业务发放月份" />
        </u-form-item>

        <u-form-item label="非循环贷管理机构数" prop="nonCyclicLoanManagementCount">
          <u-input v-model="form.nonCyclicLoanManagementCount" placeholder="请输入非循环贷管理机构数" />
        </u-form-item>

        <u-form-item label="非循环贷账户数" prop="nonCyclicLoanAccountCount">
          <u-input v-model="form.nonCyclicLoanAccountCount" placeholder="请输入非循环贷账户数" />
        </u-form-item>

        <u-form-item label="非循环贷授信总额" prop="nonCyclicLoanCreditTotal">
          <u-input v-model="form.nonCyclicLoanCreditTotal" placeholder="请输入非循环贷授信总额" />
        </u-form-item>

        <u-form-item label="非循环贷余额" prop="nonCyclicLoanBalance">
          <u-input v-model="form.nonCyclicLoanBalance" placeholder="请输入非循环贷余额" />
        </u-form-item>

        <u-form-item label="非循环贷近6个月平均应还款" prop="nonCyclicLoanAvgRepayment">
          <u-input v-model="form.nonCyclicLoanAvgRepayment" placeholder="请输入非循环贷近6个月平均应还款" />
        </u-form-item>

        <u-form-item label="循环贷账户一管理机构数" prop="cyclicLoanManagementCount1">
          <u-input v-model="form.cyclicLoanManagementCount1" placeholder="请输入循环贷账户一管理机构数" />
        </u-form-item>

        <u-form-item label="循环贷账户一账户数" prop="cyclicLoanAccountCount1">
          <u-input v-model="form.cyclicLoanAccountCount1" placeholder="请输入循环贷账户一账户数" />
        </u-form-item>

        <u-form-item label="循环贷账户一授信总额" prop="cyclicLoanCreditTotal1">
          <u-input v-model="form.cyclicLoanCreditTotal1" placeholder="请输入循环贷账户一授信总额" />
        </u-form-item>

        <u-form-item label="循环贷账户一余额" prop="cyclicLoanBalance1">
          <u-input v-model="form.cyclicLoanBalance1" placeholder="请输入循环贷账户一余额" />
        </u-form-item>

        <u-form-item label="循环贷账户一近6个月平均应还款" prop="cyclicLoanAvgRepayment1">
          <u-input v-model="form.cyclicLoanAvgRepayment1" placeholder="请输入循环贷账户一近6个月平均应还款" />
        </u-form-item>

        <u-form-item label="循环贷账户二管理机构数" prop="cyclicLoanManagementCount2">
          <u-input v-model="form.cyclicLoanManagementCount2" placeholder="请输入循环贷账户二管理机构数" />
        </u-form-item>

        <u-form-item label="循环贷账户二账户数" prop="cyclicLoanAccountCount2">
          <u-input v-model="form.cyclicLoanAccountCount2" placeholder="请输入循环贷账户二账户数" />
        </u-form-item>

        <u-form-item label="循环贷账户二授信总额" prop="cyclicLoanCreditTotal2">
          <u-input v-model="form.cyclicLoanCreditTotal2" placeholder="请输入循环贷账户二授信总额" />
        </u-form-item>

        <u-form-item label="循环贷账户二余额" prop="cyclicLoanBalance2">
          <u-input v-model="form.cyclicLoanBalance2" placeholder="请输入循环贷账户二余额" />
        </u-form-item>

        <u-form-item label="循环贷账户二近6个月平均应还款" prop="cyclicLoanAvgRepayment2">
          <u-input v-model="form.cyclicLoanAvgRepayment2" placeholder="请输入循环贷账户二近6个月平均应还款" />
        </u-form-item>

        <u-form-item label="贷记卡发卡机构数" prop="creditCardIssuerCount">
          <u-input v-model="form.creditCardIssuerCount" placeholder="请输入贷记卡发卡机构数" />
        </u-form-item>

        <u-form-item label="贷记卡账户数" prop="creditCardAccountCount">
          <u-input v-model="form.creditCardAccountCount" placeholder="请输入贷记卡账户数" />
        </u-form-item>

        <u-form-item label="贷记卡授信总额" prop="creditCardCreditTotal">
          <u-input v-model="form.creditCardCreditTotal" placeholder="请输入贷记卡授信总额" />
        </u-form-item>

        <u-form-item label="数据使用状态" prop="infoStatus">
          <u-radio-group v-model="form.infoStatus">
            <u-radio v-for="(item, index) in infoStatusOptions" :key="index" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
      </u-form>
      <view style="height: 80px;"></view>
      <view class="submit-btn">
        <u-button @click="submit" type="primary">提交</u-button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import EnterApi from '@/sheep/api/enter/index.js'
import sheep from '@/sheep';

const form1 = ref(null);
const route = ref({});
const list = ref([
  '温馨提示：请上传个人征信pdf进行提取！'
])

const form = ref({
  reportNumber: '',
  reportTime: '',
  name: '',
  idCardType: '',
  idCardNumber: '',
  queryOrganization: '',
  queryReason: '',
  disputeInfo: '',
  gender: '',
  birthDate: '',
  maritalStatus: '',
  employmentStatus: '',
  education: '',
  degree: '',
  nationality: '',
  email: '',
  communicationAddress: '',
  householdAddress: '',
  loanType: '',
  loanAccountCount: '',
  firstLoanMonth: '',
  nonCyclicLoanManagementCount: '',
  nonCyclicLoanAccountCount: '',
  nonCyclicLoanCreditTotal: '',
  nonCyclicLoanBalance: '',
  nonCyclicLoanAvgRepayment: '',
  cyclicLoanManagementCount1: '',
  cyclicLoanAccountCount1: '',
  cyclicLoanCreditTotal1: '',
  cyclicLoanBalance1: '',
  cyclicLoanAvgRepayment1: '',
  cyclicLoanManagementCount2: '',
  cyclicLoanAccountCount2: '',
  cyclicLoanCreditTotal2: '',
  cyclicLoanBalance2: '',
  cyclicLoanAvgRepayment2: '',
  creditCardIssuerCount: '',
  creditCardAccountCount: '',
  creditCardCreditTotal: '',
  infoImages: [],
  infoStatus: ''
});

const calendar1 = reactive({
  show: false
});

const calendar2 = reactive({
  show: false
});

const infoStatusOptions = reactive([
  {
    value: '1',
    label: '启用'
  },
  {
    value: '0',
    label: '停用'
  }
]);

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
  ],
  idCardNumber: [
    { required: true, message: '请输入身份证号码', trigger: ['change', 'blur'] }
  ]
};

const getUserCreditAxios = async () => {
  const res = await EnterApi.getUserPersonalCredit(route.value.id);
  if (res.code === 0) {
    form.value = { ...res.data, infoImages: res.data.infoImages[0] || '' };
  }
};
const pdfClick = () => {
  if (form.value.infoImages) {
    // #ifdef H5
    window.open(form.value.infoImages);
    // #endif

    // #ifdef APP-PLUS
    uni.downloadFile({
      url: form.value.infoImages,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.openDocument({
            filePath: res.tempFilePath,
            success: () => {
              console.log('打开PDF文档成功');
            },
            fail: (err) => {
              uni.showToast({
                title: '打开PDF失败',
                icon: 'none'
              });
            }
          });
        }
      },
      fail: () => {
        uni.showToast({
          title: '下载PDF失败',
          icon: 'none'
        });
      }
    });
    // #endif
  } else {
    uni.showToast({
      title: '暂无PDF文件',
      icon: 'none'
    });
  }
}
onMounted(() => {
  form1.value.setRules(rules);
  if (route.value.id) {
    getUserCreditAxios();
  }
});

onLoad(async (options) => {
  route.value = options;
});

const submit = () => {
  form1.value.validate(async (valid) => {
    if (valid) {
      if (route.value.formType === 'create') {
        const res = await EnterApi.createUserPersonalCredit({ ...form.value, infoImages: [form.value.infoImages] })
        if (res.code === 0) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          })
          sheep.$router.back()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      } else {
        const res = await EnterApi.updateUserPersonalCredit({ ...form.value, infoImages: form.value.infoImages })
        if (res.code === 0) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
          sheep.$router.back()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      }
    }
  })
};

const extractClick = async () => {
  if (form.value.infoImages && form.value.infoImages.length == 0)
    return uni.showToast({
      icon: "none",
      title: "请上传个人征信pdf"
    })

  const res = await EnterApi.difyPdf({
    type: "提取个人征信",
    images: '',
    doc: form.value.infoImages
  })

  const data = JSON.parse(res.data)
  for (const key in data) {
    if (Object.prototype.hasOwnProperty.call(data, key)) {
      const element = data[key];
      if (element === "" || element === null || element === undefined) {
        delete data[key]
      }
    }
  }
  form.value = { ...form.value, ...data }

  if (res.code === 0) {
    uni.showToast({
      icon: "none",
      title: "提取成功"
    })
  } else {
    uni.showModal({
      content: res.msg,
      showCancel: false
    })
  }
};

const onCalendar1 = (e) => {
  form.value.reportTime = e.result;
};

const onCalendar2 = (e) => {
  form.value.birthDate = e.result;
};
</script>

<style lang="scss" scoped>
.form-container {
  padding: 40rpx;
  background-color: #ffffff;

  .u-form {
    background: #fff;
  }

  .submit-btn {
    padding: 40rpx 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: calc(100% - 80rpx);
  }

  .form-data {
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
  }
}
</style>