• 微服务项目：尚融宝（38）（核心业务流程：申请借款额度（1））

    认清现实，放弃幻想，准备斗争

    一、借款人申请额度

    1、需求描述

    平台管理员根据借款人个人信息设置积分，通过积分规则借款人可以获取额度。

    2、相关数据库表

    二、具体步骤

    step1：用户在个人中心点击 “立即借款”  (http://localhost:3000/user/borrower)

    step2：展示借款人信息认证页面

     

    step3：借款人填写信息并提交

    step4：展示等待审核页面

    step5：平台审核

    step6：显示审批结果

     借款人信息表单

    一、步骤导航

    1、参考

    Steps 步骤条：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库icon-default.png?t=N7T8https://element.eleme.io/#/zh-CN/component/steps

    Alert 警告：

    2、页面模板

    这个页面比较复杂，因此我们一步一步创建，熟悉页面结构

    创建 pages/user/borrower.vue

    2. <script>
    3. export default {
    4.   data() {
    5.     let BASE_API = process.env.BASE_API
    6.  
    7.     return {
    8.       active: 0, //步骤
    9.       borrowerStatus: null,
    10.       submitBtnDisabled: false,
    11.       //借款人信息
    12.       borrower: {
    13.         borrowerAttachList: [],
    14.       },
    15.       educationList: [], //学历列表
    16.       industryList: [], //行业列表
    17.       incomeList: [], //月收入列表
    18.       returnSourceList: [], //还款来源列表
    19.       contactsRelationList: [], //联系人关系
    20.       uploadUrl: BASE_API + '/api/oss/file/upload', //文件上传地址
    21.     }
    22.   },
    23.  
    24.   methods: {
    25.     save() {
    26.       this.submitBtnDisabled = true
    27.       this.active = 1
    28.     },
    29.   },
    30. }
    31. script>

    二、借款人信息页面

    1、个人基本信息

    1. 个人基本信息
    2. <el-form label-width="120px">
    3.     <el-form-item label="年龄">
    4.         <el-col :span="5">
    5.             <el-input v-model="borrower.age" />
    6.         el-col>
    7.     el-form-item>
    8.  
    9.     <el-form-item label="性别">
    10.         <el-select v-model="borrower.sex">
    11.             <el-option :value="1" :label="'男'" />
    12.             <el-option :value="0" :label="'女'" />
    13.         el-select>
    14.     el-form-item>
    15.     <el-form-item label="婚否">
    16.         <el-select v-model="borrower.marry">
    17.             <el-option :value="true" :label="'是'" />
    18.             <el-option :value="false" :label="'否'" />
    19.         el-select>
    20.     el-form-item>
    21.     <el-form-item label="学历">
    22.         <el-select v-model="borrower.education">
    23.             <el-option
    24.                        v-for="item in educationList"
    25.                        :key="item.value"
    26.                        :label="item.name"
    27.                        :value="item.value"
    28.                        />
    29.         el-select>
    30.     el-form-item>
    31.     <el-form-item label="行业">
    32.         <el-select v-model="borrower.industry">
    33.             <el-option
    34.                        v-for="item in industryList"
    35.                        :key="item.value"
    36.                        :label="item.name"
    37.                        :value="item.value"
    38.                        />
    39.         el-select>
    40.     el-form-item>
    41.     <el-form-item label="月收入">
    42.         <el-select v-model="borrower.income">
    43.             <el-option
    44.                        v-for="item in incomeList"
    45.                        :key="item.value"
    46.                        :label="item.name"
    47.                        :value="item.value"
    48.                        />
    49.         el-select>
    50.     el-form-item>
    51.     <el-form-item label="还款来源">
    52.         <el-select v-model="borrower.returnSource">
    53.             <el-option
    54.                        v-for="item in returnSourceList"
    55.                        :key="item.value"
    56.                        :label="item.name"
    57.                        :value="item.value"
    58.                        />
    59.         el-select>
    60.     el-form-item>
    61. el-form>

    2、联系人信息 

    1. 联系人信息
    2. <el-form label-width="120px">
    3.     <el-form-item label="联系人姓名">
    4.         <el-col :span="5">
    5.             <el-input v-model="borrower.contactsName" />
    6.         el-col>
    7.     el-form-item>
    8.     <el-form-item label="联系人手机">
    9.         <el-col :span="5">
    10.             <el-input v-model="borrower.contactsMobile" />
    11.         el-col>
    12.     el-form-item>
    13.     <el-form-item label="联系人关系">
    14.         <el-select v-model="borrower.contactsRelation">
    15.             <el-option
    16.                        v-for="item in contactsRelationList"
    17.                        :key="item.value"
    18.                        :label="item.name"
    19.                        :value="item.value"
    20.                        />
    21.         el-select>
    22.     el-form-item>
    23. el-form>

    3、身份认证信息 

    1. 身份认证信息
    2. <el-form label-width="120px">
    3.     <el-form-item label="身份证人像面">
    4.         <el-upload
    5.                    :on-success="onUploadSuccessIdCard1"
    6.                    :on-remove="onUploadRemove"
    7.                    :multiple="false"
    8.                    :action="uploadUrl"
    9.                    :data="{ module: 'idCard1' }"
    10.                    :limit="1"
    11.                    list-type="picture-card"
    12.                    >
    13.             <i class="el-icon-plus">i>
    14.         el-upload>
    15.     el-form-item>
    16.     <el-form-item label="身份证国徽面">
    17.         <el-upload
    18.                    :on-success="onUploadSuccessIdCard2"
    19.                    :on-remove="onUploadRemove"
    20.                    :multiple="false"
    21.                    :action="uploadUrl"
    22.                    :data="{ module: 'idCard2' }"
    23.                    :limit="1"
    24.                    list-type="picture-card"
    25.                    >
    26.             <i class="el-icon-plus">i>
    27.         el-upload>
    28.     el-form-item>
    29. el-form>

     4、其他信息

    1. 其他信息
    2. <el-form label-width="120px">
    3.     <el-form-item label="房产信息">
    4.         <el-upload
    5.                    :on-success="onUploadSuccessHouse"
    6.                    :on-remove="onUploadRemove"
    7.                    :multiple="false"
    8.                    :action="uploadUrl"
    9.                    :data="{ module: 'house' }"
    10.                    list-type="picture-card"
    11.                    >
    12.             <i class="el-icon-plus">i>
    13.         el-upload>
    14.     el-form-item>
    15.     <el-form-item label="车辆信息">
    16.         <el-upload
    17.                    :on-success="onUploadSuccessCar"
    18.                    :on-remove="onUploadRemove"
    19.                    :multiple="false"
    20.                    :action="uploadUrl"
    21.                    :data="{ module: 'car' }"
    22.                    list-type="picture-card"
    23.                    >
    24.             <i class="el-icon-plus">i>
    25.         el-upload>
    26.     el-form-item>
    27. el-form>

    5、文件上传

    pages/user/borrower.vue

    定义methods：

    1. onUploadSuccessIdCard1(response, file) {
    2.   this.onUploadSuccess(response, file, 'idCard1')
    3. },
    4.  
    5. onUploadSuccessIdCard2(response, file) {
    6.   this.onUploadSuccess(response, file, 'idCard2')
    7. },
    8.  
    9. onUploadSuccessHouse(response, file) {
    10.   this.onUploadSuccess(response, file, 'house')
    11. },
    12.  
    13. onUploadSuccessCar(response, file) {
    14.   this.onUploadSuccess(response, file, 'car')
    15. },
    16.  
    17. onUploadSuccess(response, file, type) {
    18.   // debugger
    19.   if (response.code !== 0) {
    20.     this.$message.error(response.message)
    21.     return
    22.   }
    23.   // 填充上传文件列表
    24.   this.borrower.borrowerAttachList.push({
    25.     imageName: file.name,
    26.     imageUrl: response.data.url,
    27.     imageType: type,
    28.   })
    29. },
    30.  
    31. onUploadRemove(file, fileList) {
    32.   console.log('fileList', fileList)
    33.   //删除oss服务器上的内容
    34.   this.$axios
    35.     .$delete('/api/oss/file/remove?url=' + file.response.data.url)
    36.     .then((response) => {
    37.       // debugger
    38.       console.log('远程删除')
    39.       this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.filter(
    40.         function(item) {
    41.           console.log('item', item)
    42.           return item.imageUrl != file.response.data.url
    43.         }
    44.       )
    45.     })
    46. },

     

  • 相关阅读:
    vue项目npm install报错解决
    软件测试/测试开发/人工智能丨​Python运算符解析，小白也能轻松get
    XML学习笔记
    Request之获取请求数据的方法 [JavaWeb][Servlet]
    css主题切换
    记录一次内存泄漏排查过程
    音频设备初始化与输出：QT与SDL策略模式的实现
    JSqlParser生成修改表定义SQL语句
    python的文件目录操作 1
    传奇服务端服务端运行7个窗口的各窗口功能讲解
  • 原文地址：https://blog.csdn.net/m0_62436868/article/details/126846351