微服务项目：尚融宝（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 的桌面端组件库https://element.eleme.io/#/zh-CN/component/steps

Alert 警告：

2、页面模板

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

创建 pages/user/borrower.vue

二、借款人信息页面

1、个人基本信息

个人基本信息

    
        
            
        
    

    
        
            
            
        
    
    
        
            
            
        
    
    
        
            
        
    
    
        
            
        
    
    
        
            
        
    
    
        
            
        
    

2、联系人信息 

联系人信息

    
        
            
        
    
    
        
            
        
    
    
        
            
        
    

3、身份认证信息 

身份认证信息

    
        
            
        
    
    
        
            
        
    

 4、其他信息

其他信息

    
        
            
        
    
    
        
            
        
    

5、文件上传

pages/user/borrower.vue

定义methods：

onUploadSuccessIdCard1(response, file) {
  this.onUploadSuccess(response, file, 'idCard1')
},

onUploadSuccessIdCard2(response, file) {
  this.onUploadSuccess(response, file, 'idCard2')
},

onUploadSuccessHouse(response, file) {
  this.onUploadSuccess(response, file, 'house')
},

onUploadSuccessCar(response, file) {
  this.onUploadSuccess(response, file, 'car')
},

onUploadSuccess(response, file, type) {
  // debugger
  if (response.code !== 0) {
    this.$message.error(response.message)
    return
  }
  // 填充上传文件列表
  this.borrower.borrowerAttachList.push({
    imageName: file.name,
    imageUrl: response.data.url,
    imageType: type,
  })
},

onUploadRemove(file, fileList) {
  console.log('fileList', fileList)
  //删除oss服务器上的内容
  this.$axios
    .$delete('/api/oss/file/remove?url=' + file.response.data.url)
    .then((response) => {
      // debugger
      console.log('远程删除')
      this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.filter(
        function(item) {
          console.log('item', item)
          return item.imageUrl != file.response.data.url
        }
      )
    })
},