day16/上午/316-尚硅谷-尚融宝-借款额度审核的前端实现

好，接下来呢，我们来看前端，前端这面呢，相对来说就简单的多了啊，因为呃，对于我们大家来说呢，就是按照一些套路，把这个前端呢，给它实现出来就可以了啊，第一个步骤呢，就是在我们的这个。嗯。借款额度审核这块啊，第一个步骤呢，就是在我们的这个前端这边呢，咱们去定义API啊，所以呢，咱们找到包点JS。找到SRB的命，找到src，找到API下面的borrow.js，然后在这里面呢，咱们添加一个接口的API方法，那么这边呢，也跟之前的API都是一样的，咱们就把这个URL那确认无误，然后method是post要提交的数据给他通过参数传过来就行了，就是一个啊要通过Jason字符串传输的这么一个数据，所以这个呢是API的定义，接下来呢，就是页面模板，页面模板的话呢，我们找到views，然后找到car，找到borrow，找到detail啊，然后在这个页面模板的最下方啊，我们这面这个页面模板呢，是分成两部分的，第一部分呢，就是原来的这个。

呃，借款的申请的详情啊，是这个form这一部分，然后第二部分呢，我们把它放在这这块呢，就是我们的审审批模板啊，审批模板这边呢，我们直接复制过来就好了。了解一下这里面的内容啊。这个不要求大家自己写了哈，有经历的你当然可以写一写啊，然后接下来呢，这面呢，就是第一啊。这个。如果是认证中的话，那么这个审批模板呢，我们就展示出来，如果不是认证中的话，那么这个审批模板呢，我们就不展示出来，那么我们的borrow.status大家还记得吧，我们是怎么取的来着，在这面。

先给他做个登录。好，先查看一下。稍等啊。好，然后呢，我们来看一下F12。F12，然后呢，我们来看一下它这个V哈。View里面呢，我们有个borrow borrow里面呢有一个status status呢，之前我们就是给它做过一个呃，数据的一个转化，把它从这个整形值呢，就给它转化成这个字符串的这个展示形式了，还记得吧？啊好，包括这个sa啊，包括这个呃，这个还款的方式，对吧？我们都给它转换成字符串的表现形式了啊好，那么这块呢，既然是字符串表现形式的话呢，我们在这边判断的时候，也要用这个字符串的形式去判断，就是当它是认证中的这个状态的时候呢，我们再显示这个认证表达，如果它是不是认证中的这个状态的话呢，我们其实就不展示认证表单了，那所以呢，这面我们现在是认证成功的状态，所以呢，我们刚才写的这个认证表单呢，他就没有展示出来，那因为前面呢，上堂课最后的时候呢，我们通过这个swer对这个认证进行了测试，并且呢，已经给他认证成功了，所以说现在他这个表单呢，就没有展示出来，那这样。

的话呢，我们就需要做什么呢，就需要把刚才这个认证的这个过程啊，给它还原回去啊，还原回去的话呢，因为我们知道我们刚才认证的过程呢，整个就做了四件事情。嗯，四件事情哈。我看一下啊。每四件事情写哪些？稍等啊找一下。

等一下，我找一找，我把那四件事情写到哪。啊，这呢哈，借款列表展示这块哈，写到这个借款列表展示最开始这个需求这块呢，啊，所以呢，我们现在要把这个四件事情呢，给它还原回去就可以了，咱们把刚才的这个认证过程呢给它清除掉，那所以呢，第一件事情就是inegal这个里面，User integral里面啊把这四条记录呢给它删掉。这是第一件事情。

第二件事情呢，就user这个里面，把这个二百二呢，给他清零对吧。来清一下零，然后接下来呢，这个borrow out status啊给他清零，就是还没认开始认证呢，给它清零，这第三件事情，第四件事情呢，就是包若这面。包这面啊，打开表，然后呢，这面也是一样啊，清零还没开始是吧。好，所以这块呢，是咱们把这个包这块是应该是认证中吧，对吧，认证中是一啊好这样的话呢，咱们把它给它还原成这种状态，好，然后接下来呢，我们再来刷新一下这个页面，正面这个页面。啊，大家看现在呢，这个表单就展示出来了，然后呢，我们F12看一下还是看一下这个数据。看一下borrow，然后这面这个status如果是一的话，它就是认证中了，对吧？嗯，然后呢，所以这样的话，这个表单展示出来之后呢，我们就可以去啊，再详细查看一下这个表单里面都写什么了。

那下面呢，就是这个表达。见面啊。嗯，表单在。这块呢，对吧？好，如果是认证中的话呢，那么我们首先展示是否通过啊，如果通过的话呢，它这就是二，对应我们那个枚一局里面的那个值啊，如果不通过的话呢，它这就是一啊，然后呃，这款。枚举这块大家去核对一下，因为有的时候这个。可能跟实际的情况不符的话，大家一定要改一下，就是未认证呢是零，然后认证中呢是一，认证成功呢是二，认证失败呢是负一，所以你一定要核对一下，把这个枚举的值和我们的这个前端的这面的这个值一定要让他匹配了，明白吧，要仔细检查一下有没有不一致的问题啊好，然后接下来呢，这面呢就是通过，这面呢就是不通过，然后再接下来呢，就是基本信息积分这块，基本信息积分这块呢，是一个文本框啊，然后呢，用户呢，自己去录入这个积分就可以了，那么他这边管理员端给他提示呢，就是根据用户的这个个人基本信息综合给他评估，给他30~100积分就行了。

嗯，然后接下来呢，就是身份证信息是否正确，身份证信息如果正确的话，那么这个is ID card OK就是true，否则的话就是false，那这样的话，后台我们根据这个值就会给他获取相应的30积分，对吧，就是上堂课我们处理的逻辑，然后这面呢，就是车辆信息是否正确，车辆信息如果正确就是是否则就是否同样啊就是刚才这个基本信息也好，身份信息也好，车辆信息也好，当这个approval form status等于二的时候，也就是说前面这个。

值我是通过的时候选二这个选通过的时候，我后面这个才展示出来，如果我选的是不通过，那后面干脆就不展示出来，根本就不渲染页面当中就没有这个选项，明白吧？啊所以这块呢，是基本信息积分这一块啊，然后接下来呢，就是嗯。车辆信息房产信息啊都是一样的，然后最后点确定按钮，点确定按钮这边呢，我们去调用一个pro submit这样的一个脚本，所以接下来呢，我们就来看一下这个approve submit这个脚本的编写，我们在这里面呢。写一个approval submitment啊，Approval segment，然后这面呢，咱们写this.save be disabled，嗯处防止重复提交，然后呢，接下来呢，呃，我们呃要传的这个。

值就是刚才写的那个API啊，要传的这个approval的这个appval呢，看一下后台我们封装的这个数据。就是它是吧，啊，刚才我们封装的是他在哪个地方拿到的，就在这个地方啊，有一个叫做包pro VO的这么一个VO对象，是我们要封装的这么一个表单传过来的这么一个，对，然后这个里面有什么呢？这个里面有一个叫borrow ID的啊，然后呢，还有status什么这些东西，这几个值刚才在表单当中都出现了啊，也就是说在页面当中。上面的这个位置。上面的这个位置啊，表单当中都出现了。都出现了是不是啊，哪几个值呢，就是我们封装的这些值，唯独谁没出现呢，这个borrow ID没出现，所以我们呢，要把这个borrow ID呢，给它封装进去，把它组装到这个。

对象当中，那怎么组装呢，就是this。点approval。这个啊，它不提示April提示了吗。点。Borrow ID这个值啊，然后呢，等于等于这包ID哪来的呢？这包ID注意是从这儿来的。这个地方啊，我们是通过点击借款管理借款人列表，然后通过点击这个审批进来的，你点这个审批进来的时候呢，这面传进来的这个ID就是这个包的ID，所以呢，这面呢，我们就可以this.dollar.para ms.ID啊给这个ID赋值。那这样的话呢，这个approval form的啊，这几个值呢，就全都组装完整了啊，就是大家在传参的时候啊，一定要检查一下啊，你这些值是不是都组装起来了啊，那刚才表单当中组装的表单当中做数据绑定的12345，也就是说。

这面12345对吧，这是表单当中数据已经绑好的纸，不用我们去做特殊的这么一个复制处理，只要你这边填写了它就绑上，但是呢，这个纸它没有给咱们在表单当中体现出来，所以咱们一定要自己给它绑上啊，所以怎么绑呢？就这样去给它绑一下好，然后这样的话呢，这个approve form的纸就完整了，然后呢，我们包。Bo。Borrow API，然后点。嗯，就是刚才咱们这个方法叫什么叫approval对吧，他。

然后呢，是不是要传一个参数啊，传的参数呢，就是刚才咱们组装的这个approval phone啊把它传上去，传上去之后呢，你就得到结果，然后接下来呢，这面就是一丝放。然后this.dollar message，然后点放点message，然后呢this点，然后点push，然后这面呢，我们就直接写就行，Co。就是到这个地址。就可以了哈，好，那就是审批完了之后呢，也是回到我们的借款额度申请的列表页，那这块呢，就是我们整个的一个前端的整合了，所以呢，这面前端整合完成之后呢，我们来试验一下啊，比如说这面呢，我们给这个用户呢100积分，好然后呢，这面身份这都是啊，那这样的话呢，这个用户最后呢，就会有四条积分明细，并且呢，有一个整体的一个积分记录啊，被记录在user里面，好然后我们先点击一下确定。

然这面呢，就审批完成，审批完成之后呢，这面的那个审批按钮也不见了，就变成查看按钮了，你刚才是审批按钮，现在变成查看钮，然后接下来呢，我们点击这面呢，也是变成审审认证通过了啊，然后点击查看，这个时候呢，下面这个审批表单也不见了啊，所以这个都是我们在页面当中做的，根据它的状态做了相应的判断去处理的，然后那我们再检查一下数据库表，首先数据库表当中呢，就是user inegral这块，我们呢又出现了四条记录，然后这四条记录值加起来呢，一百二百应该是290积分啊，然后那我们就看一下user in four里面呢，是不是这个用户呢的积分呢，变成了二百九了，并且呢，他的borrow of status呢变成二了啊，然后接下来呢，Borrow。

他的这个状态呢。也变成二了，对吧，所以说这个都是审批通过的一个状态啊好，那这面呢，就是我们对。审核的流程的一个完整的实现。