day18/上午/358-尚硅谷-尚融宝-充值功能的前端整合

那刚才我们这个测试既然是成功的，就说明我们在这个地方就可以把这块给它放开，然后放开之后呢，咱们再给它进行一个重新启动，然后呢，咱们再实际的去做一下这个前端的整合。嗯。好，那么这边我们启动了之后呢，我们再来看一下咱们的笔记啊，笔记这边呢，就可以做前端整合了，前端整合这块整个的这个代码不要求大家会写了，但是你要理解这里面的核心，然后理解每个步骤是什么意思，所以呢，我呢先把这个代码呢，先咱们传递过去，但是我一步一步给大家考，但是实际上这个整个的这个代码咱们之前写过一遍，就是做账户绑定的时候写过一遍啊，那我再等大家去看一遍啊，我们找到前端页面，找到充值页遍，充值页面呢在s size，然后呢，Pages pages下面的user user下面。

有有有有没没有充值页面是吧，我看一下啊，Apply的包你大有没有啊，我再给他拿过来。然后呢，在。嗯，我看一下在什么地方，这啊叫资料第四部分pages user。没有是吧，尾差点把它拿过来。好，然后呢，这个就是咱们的充值页面了，嗯，然后呢，我们可以去预览一下，它在咱们的首页这个地方呢，能直接去刚好这差或者是先登录吧，登录然后呢，这是投资人13466816630123456好点登录。

那投资人这面呢，有一个充值，然后呢，我们点充值好就来到了刚才咱们新加的这个差的这个页面当中，那么在这个页面当中呢，有一个叫充值金额啊，我们呢，可以在这边输入零，然后呢，我们希望点充值就干嘛，就弹出刚才我们看到的这个页。就弹出这个页哈，叫前往汇付宝资金拓平台，所以当我们点充值的一瞬间，我们需要做一个弹窗，对吧？啊好在弹窗里面有一个按钮，点击这个按钮，再调用我们刚才写的那个解锁方法，明白这个意思吧，嗯，所以呢，呃，我们来看一下整个前端的代码呢，是这样的。

就是method里面我们定义的一个computer，它弹出那个提示窗的那个方法叫做this，词点Dollar alert，这个是element UI里面的一个啊提示框弹窗组件，所以我们就直接用它就行了，然后这个Dollar alo里面呢。1233个参数，这三个参数分别是什么呢？分别是标题、内容以及其他必要配置项啊，标题就是这个。前往汇报资金汇平台内容就是这个，您即将前往汇报终旨，您即将前往汇报终旨，这样三除标准哈，好还有呢，就是其他配置项，其他配置项里面包含，比如说第一个我们要写的是一个HTL代码啊，如果你我直接把它加出来。

看下这个。也差的里面，然后也差这里面这不是定一下。然后把这个方法粘过来，将来之后呢，这个参数我就先不配啊，这是第三个参数啊，然后说咱们先配两个参数，这个能看懂对吧，一有两参数，因为有两参数的话呢，然后咱们在这个地方啊，输入十元，然后点诶它是弹的是这样的一个效果，明白吧，他就没有把这个HTML呢给他展示出来，我们必须呢，把这个HML给它渲染出来，而不是原上输出出来，所以如果是这样的话呢，我们就需要配参数了，那配什么参数呢？就配刚才说的那个。这嗯，这东西这不用记不用记，你就只要配个这个他就能展示就行，没有必要去背下来，你到时候照样写一下就行，我也是照样就会变来，然后接下来呢，我们刷新一下，刷新一下之后我们再点，你会发现呢，这块呢，就是渲染出来一个结果了，明白这意思吧，啊然后接下来呢，就是这个这个确定按钮呢，我就想给它变成什么，我要也变成这个立即型号，那这样的话呢，我们在配置这个参数的时候呢，就叫confirm button test，这个是一个固定的一个在我们的element UI的alert组件当中的文档当中可以找到这个啊，这个我再给大家找一下啊，你们肯定有同学都有没听说过。

I应该没用，是不是可能忘了啊，那天说有点太过分了，然后呢，这面就是elephant UI的那个官方文档是吧，我们找到找到之后呢，有是不是有啊，是不是这啊，这后面是不是再往后啊。

是不是就有刚才咱们所说的这些配置参数啥的，明白这意思。啊，Learn才行啊，应该是message啊，不是message message box啊对，是这个东西，你别看它叫有乐，但是它是message box组件了，然后这个message box组件里面呢，它就有这个叫叫看见了吧，然后这里面不就是一些这是第三个参数，这不就是一些配置项吗？那这些配置项呢，我们从哪找，从后面就开找。你就知道，比如说这个就是刚才我们用的，然后还有一个呢，就是我们马上就要写的，这个叫confirm button text，就是确定按钮，它的默认值是确定，你可以把它改成别的，所以说这些内容呢，大家千万不要试图去记忆啊，全都可以从文档当中去找到，所以呢，我们这边呢，就来到这个位置，然后呢就confirm button type，然后呢，咱们就写立即前往对吧？嗯，所以这个话呢，我们就上啊，上报这边，然后呢，我们就要零充值，就变成了立即行了啊这是这款，那接下来呢，当我点击立即向上的时候呢，我就触发一个动作，好，我想触发什么动作呢？实际上它默认触发的动作呢，就是关闭这个按钮，就是关闭这个按钮，但是呢，实际上呢，它还有一个隐含的事件啊，这个事件呢，叫。

思条下叫call back叫call back call back呢就是message box关闭后的回调，也就是刚才我点完确定之后，实际上就是相当于你比如说你在Windows的系统当中，浏览器，当你看帮弹出一个就是那个浏，你用加vas，你点一下确定是不是就是把那个东西关掉了，是这个意思吧？啊就平时我们写的那个javascript的原声，不是有一个aler吗？对吧，那还不有个确定按钮吗？你点确定目的是什么，是不是就关闭那个弹出的弹窗啊，这个也是啊，这个呃，确定按钮呢，实际上也是关闭弹窗，而关闭弹窗之后，只要这个弹窗一关，我呢就想做一件事情，这件事情呢，我们就可以写在哪了，就可以写在那个com back呢，而且这个com back呢，它是一个方是类型的，它是一个函数类型的啊，它是个函数类型的，然后呢，你如果是多点去。

这个按钮去关注它的话呢，它的这个这有一个参数，就这个函数有一个参数，参数叫action参数，Action的指的应该是confirm confirm confirm啊所以说呢，我们可以通过这个信息呢，去做这样的一个操作，这操作呢，就是在这里面写靠外，然后呢，这是一个方式类型的是啊好，然后接下来呢，我们它这块呢，说有一个呃，回调的三数叫action action，然后呢，那我们就判断一下a action等于confirm，对你要不确定，你就都把它复制过来，省它写错了就流长时和条问题好的时候呢，我们就怎么样发起远程调用，这个是我们向后向我们的服务器啊，向后端服务器发起调用，那也就是。

就是说我们刚才写的那个接口对吧？啊，我们刚才写的那个那个接口就是这个接口啊，像这个接口发起远程交流，所以呢，我们可以把它复制一下。复制，然后呢，我们在嗯，这个地方就对吧，this.dollar at sales。

好，这块如果前面这块你拉下的同学就写就知道，就固定就能用就行了啊，就发Dollar，然后嗯，Dollar post啊然后这块呢，我们就写刚才的这个地址啊，那么我们完整的地址呢，是API靠userl count of make charge，这个地方是不是输入用户输入的差别啊好用户输入的差是不是它在表单当中输入的，也就是说在这个地方输入的呀，我们需要把这个地方用户输入的值呢来获取到，那么呃，就是差值。Am啊差折化好，那这款呢，就是我们整个的一个表单提交了，那他提交完了之后呢。

提交完了之后，这个是向是干嘛？是不是向我们刚才写的这个后端接口发起提交，好，我们向后端接口发起了提交，后端接口干嘛？是不是把这个字符串给我们返回到前端的这个位置了，好，它返回到哪了？它返回到response里是这意思吧？啊，它实际上是返回到response里了，那么我们是不是要把这个response让它直接在浏览器当中渲染出来呀？那么你想让response里面的这个叫做response.data.form。Response，看一下对不对，放先没问题对吧，写错了好，是不是想让它显示在浏览器当中，直接作为当前的一个，呃，浏览器当中的内容替换当前浏览器当中的所有的内容，把当前浏览器中的所有的内容用新的内容替换掉，这句话叫做document.white啊，就是用当前啊括号里的HTML上把当前浏览器当中现有的文档全都替换掉，那就是到回的点来，这样的话我们前后端就整合起来了，然后呢，刚才的那个表单呢，它在展示到页面当中的一瞬间，因为后面我提交它就瞬间会提交上去，这的话就造成了我们浏览器跳转到了恢复他们的一个效果，明白哈，好，那我们呢，把这个整个呢退下学习一下，所以呢，这面我们刷新，然后这面呢，我们要。

然后点充值，然后点立即切换。我看一下。这块有个错误啊，他说X手指错。

看一下他我这块写的是嗯，this.dollar a iOS点。嗯，应该没问题啊，看他半在这边没错吧。对比一下。他没有错，没有错，没有错，那我做一个测试啊，这个测试是什么测试呢？就是你看一下这面这个this this，哎，它这面的this是不是有问题啊，这么看啊看看。看点lo this把这this打一下this，然后这面呢打一下这个Dis，这DIS1这是THIS2是吧，好，然后接下来呢，我们来看先把这个嗯给它评一下，我总感觉一后就好使刷一下啊。

刷下之后呢，然后这边我们写幺零，然后把这个先清一下，然后点东西，然后呢，这个是THIS1THIS in呢是view component对吧，这边有这些东西，然后点立即签啊this are this are呢，它就是on find是吧，好像有点很奇怪，它这个里面的this好像和外面的this词跟我们之前的那个，嗯，好像取的就是方式就不太一样，我看一看写法有什么区别啊，因因为如果写法没有区别的话，应该取的方式是一样的，它靠外X。差啊，我知道了，我我那面用的是啊，就是箭头函数的形式，我这边用的是function的形式，这两种写法是在有一些场景下它是有区别的，这个如果大家学vascript的时候，大家可能就了解了啊，在function里面，它的这个this变成了当前function的时候啊，然后呢，在这个里面，这是线，这是箭头函数的形式是吧？在箭头函数里面，它的这个this呢，就还是这个this，但是这不是就是所有的场景都是这样的啊，这只是当前咱这个场景，因为在这配当中，这种类似的上下文环境它是相当复杂的，它不是一两句就能说清楚的，是我现在说的只是在当前的这个场景下啊，就是这个是箭头函数的场景下，这个类似和外面这个类子是一致的，但是有其他的场景，即使你用箭头函数的这个类似和外部阶子也是不一样的，明白哈，这块我就不详细给大家说了。

但是你要知道的就是这个类子在这种产景下用，和这个类子在这种场景下用它不一样啊，那所以说我们怎么解决这个问题呢？第一就是如果我们要保证使用这个方式的话，我们可以在这个地方呢，比如说我let一个下划线，对啊，等于this，然后那接下来呢，我在这个地方写this啊，看看有没有this。

然后呢十，然后点充值这一点三一样的就过来了，明白吧，然后还有一种方式呢，就是用什么，就是用咱们前面那个发音的这种方式，就是这块写箭头函数，写箭头函数，然后这里这个就是正常了。明白哈，所以正好这块碰到这个问题了，咱们就说一下，要碰不到的话我就不提，因为这块确实有点复杂，然后呢，这样的话呢，我们就把它放开放开。放开，放开之后呢，用下划线的替换，这个明白吧，那你当然这个时还有什么类思这都要替换啊，所以说其实用这个为什么说现在比较推荐这种镜头函数的写法，那你你看你就可以忽略这个类似所产生的一些隐患了，对不对啊，所以说这个也是电动函输入方式的，它有一些就是特别重要的一些区别了，然后呢，接下来呢，我们就把这个呢给他再重新来执行一下。

幺零啊，然后这块我们点充值好，然后立即前往，哎，这个时候呢，他就前返过来，就到了我们的惠付宝的这个账号当中，然后在恢付宝这里面呢，他就展示了这个页面，展示了页面之后呢，我们输入这个支付密码，我们支付密码123456，之前我们绑定账号的时候设置的，然后点击确定充值成功，对吧？充值成功，然后接下来呢，在这个地方点返给平台，那么在充值成功的一瞬间，大家看一下。在我们的汇复包里面啊，一定会报错，为什么？因为我们并没有写回调，所以接下来下一个步骤，我们是不是就应该写这个回调了，明白吧，但是呃，虽然他没有写回调，汇付宝那边的充值成成功成功了，因为我们回调失败就是我们上城宝平台这边数据同步失败了，上城宝这边的账号应该也有更新没有成功的东西，但是恢付宝里面一定是充值了，那我们怎么检查呢？汇付宝表user account，打开看看这个用户是不是有十块钱，这是刚才我们充进去的十块钱啊好，那所以说呢，这是咱们整个的。

这样的一个充值到汇付宝当中的一个过程，嗯。