164-尚硅谷-尚医通-前台用户系统-预约挂号-订单支付（生成二维码）-前端整合

下面呢，我们继续来开发微信支付二维码的接口，刚才呢，咱们把主体的部分都已经做到了，然后这里边呢，还有一个小功能，比如说咱们现在约定我们二维码在两个小时之内有效，当它超过两个小时之后，它就失效了，就是不能支付了，那这个过程咱给他处理一下，那怎么处理呢？咱是可以用到这个red，包括咱之前那个短信验证码，就是咱约定十分钟有效，咱用red是不能实现，所以现在同样用red把这个来做一下，那怎么做？首先咱先注意一个叫red to。用它来进行实现。看里头。我们叫red target，就是red模板，然后这个注之后下面再来做一下啊，首先第一部分我们在这里边咱先做一个操作，咱们就是第一次呢，我们先从ready中取这个数据，果能取到直接返回，如果不能取到，咱就做这个过程，最终再放到red中，跟咱之前做那个red基本上是一致的，那现在我来做一下啊，就是首先我们先从这个。

里边。获取这个数据，那当然获取一下啊，怎么获取呢？咱通过这个ready to上OPS for value，点上get，里边是不是加它的key，比如咱们让它的key呢，就是咱们这个O的ID啊，给它变成一个string，然后这里边的Y6值，比如就放咱们最终返回那个map即可，那再让它就返回这么一个。Map集合，比如说起个名字叫这个配map。等于咱们这个map，这里边我做个强转，这是我们通过的数据，然后这个pay map呢，咱们给它做一个判断，如果说这个值呢，不等于空，那咱把它就直接做个返回。

我来写一下啊，不等于空，咱就直接re退这个配map，如果说它等于空，我们再进行我们下面的这个操作啊，这是从RA中取数据，然后下面操作之后呢，我们在这个地方，比如说你这里边RA中等于空，那咱把数据都得到之后，最后给他是不是再放回到我们这个就是RA里边去啊，咱们需要做这个事情，那这里边我给他写一下啊，比如说咱们写的完整点做个判断。如果说你的这个code值呢，不等于空，就里边有数据，那咱给它就放到咱们的RA里面去啊，就是result.get code这个值不等于，那表示它有这个返回结果，然后咱们通过red。to.os for value.set里边放入我们的值，这个值有以下几部分，咱之前写过，我就快度实验下啊，第一个是它的key，我们就写一个old ID two string，第二个是它的Y表，咱就写这个map，第三个是它的时间，就是咱来一个120，下一个它那个单位，我们叫time unit.minutes120分钟是不是两个小时，现在我们把这个就完成了，然后最终把它捋顺一下。

这就是关于微信生成二维码的接口，咱们现在就都给他做到了，所以这是关于接口部分，然后接口写完之后呢，咱们下面把它的前端整合一下，在前端里边把这个二维码给它最终生成出来。那咱们看一下啊。看他怎么做，首先第一个咱们先在我们这个JS文件中把接口定一下，我们就找到这个微信点JS，然后在里边我来写上这个方法。然后写到第一个啊，这个方法就是。

生成微信。支付的。二维码。这个方法，然后给方法起个名字，比如我们叫这个create native。在里边需要传入是不是咱们这个订单的ID啊，这是一个方法，然后在方法里边加上它路径啊，这个路径应该不是这个路径啊，所以咱家可以写的完整点啊，或者你重新再写一个那JS文件，我觉得最后写到一个里边了，我们是这个路径。把它拿过来，API order，微信，然后它的方法名字叫这个create native。后面加上这个O的ID，咱们通过表达式把这取到。O的ID。这是我们写的一个路径，然后它的提交方式就是这个概率提交，这是我们关于这个接口定义，然后定义之后呢，咱们来到我们这个页面，就是咱们这个订单的详情页面，有这个售的这个页面，因为里边有这个支付按钮，那我们来到售页面，在售页面中首先把这文件先引入我们来一个import，我叫微信。

A片from加上这个艾特杠A片。微信。这个我们就引入了，然后引入之后呢，在里边再来做一下这个调用，最终实现二维码的这么一个显示，那怎么调用呢？这过程应跟之前相比，应该说简单很多了啊，那咱给他就快速写下这个最终的这么一个调用，我们来实现一下啊。那这样的话呢，首先在这里边呢，我们有一个就是那个生成二维码方法，比如说你点击支付，它需要生成二维码，那咱看怎么做的好，首先在里边我们先找到支付是这个位置，就是这个配，当我点配会掉这个方法，所以我下面就来写上这个方法，就是里边这个。

这么写啊，生成支付二维码，我们叫pay的这个方法。然后在方法中怎么做呢？大家看到啊，因为我这里边要生成二维码，二维二二维码的方式呢，我这里边是这么做的，我用了一个叫沿dialo，让它弹出一个框，通过弹框把这个显示，弹框怎么做呢？这个值等于处是不是弹框啊，所以我下面有几个就是初始值默认是false，然后这是配OBBG指的那对象啊，包括还有加值目前是false，那让它弹出来这个值变成处，这弹框是不是显示了，所以咱们先做第一部分。我写一下啊，就是让他那个支付二维码的弹框进行显示，因为这个比较重要，所以这个前算代码给各位，我也详细写一下，我们来一个Z，点上这个dialo配，然后它的值等于处，这是我们的第一步，然后这个做到之后，我们调用微信API，刚才咱们写的这个方法就是这个方法。

可瑞。NET5然后方法中呢，传入咱们那个订单的ID啊，就是我们那个OID，也就是里边这个值，咱通过路由应该取到了，所以我把它直接拿过来。OID，然后这个调用之后呢，我们加上这么一个点，加上一个response。电流函数通过response可以得到里边返回的数据response.date然后咱们做个赋值，这个点配OBG给它都复制到这个OBG种，然后在OBG里边我们能得到它的相关的内容啊，咱最终把它可以得到，那这里边我们可以做一个判断，那我们写一下啊。咱们来一个if。

配OBG呢，其实就是咱们返回的是不是那个外集合呀，那在里边，比如咱们得到一个值，我们来一个这次点配OBBG点上里边咱们看到啊，咱们返回值里边的有这么一个值。这我先关掉啊，然后咱们看到这个值叫这个QUL，其实就是我们那个二维码的地址，如果这个值等于空，那咱这个二维码是不是就生成失败，所以就咱就提示它说你支付错误，如果这值不等于空，那我们就进行显示，把这值给它取到，所以咱们现在来做这么一个简单判断。那我在里边写一下啊，如果说配这次点配OBG.kurl。这个值如果说它等于空。那现在就表示呢，咱这个生成是失败的。生成失败。那生成失败的话呢，我们让这个弹框它就不进行显示了啊，咱让它的值。

等于这个负。然后等于for之后，我们让他来一个提示，This，点这个就是message。点上挨着。给咱们来一个就是。支付错误或者说支付失败啊，咱们做这么一个处理，所以这样的话，把这个做到了，当然后面还有else，然后面再来进一步实现啊。我们再来一个else，后面咱再完善。现在咱们把这个调用部分就写出来了，然后洗完之后呢，我们看啊，因为现在我这里边一调用就是我一点那支付它肯定就行调用，调用之后呢，在这个配OBBG中会有咱们二维码的那个地址部分，而这个地址呢，咱们在页面中是不是要进行显示啊，就是要显示二维码那个内容，那怎么显示呢？给各位强调啊，因为这二维码呢，它的地址因为咱会看到，并不是咱们普通的地址，它需要通过一个插件或者一个组件进行下载才能进行显示，那这插件是什么呢？在我vuee中有这么一个插件，通过它能去下载二维码，所以咱们首先在前台中把这插件需要给它装上，我这里边已经提前装过了，你用里边这个就是在这个。

终端里边给大家演示一下啊，我把这终端重新打开。然后这里边你用NPM因此的把它先下载下来，然后下载之后找到里面一个文件，就在这个plugs里边有这个文件my play s里边，把它引入在voe中，使用这个插件才能实现我们这个基本使用，用它来下载二维码，所以这一步各位必须要做到，我在课件中都写到了，我这个已经提前做过了，先把它下载，然后在里面进行使用，然后这个做到之后呢，我们在页面中就进行显示，可以中用这个插件可以做到页面中怎么做呢？咱们看一下我的课件中啊，里边就是一行代码就可以实现，就这行代码。

我把它给各位拿过来，咱们找到我们的页面位置，在页面应该是在这个地方，我这里加入注释显示二维码，然后你看啊，用这个标签，然后冒号单项绑定Y6 Y6中加上配OBBG点上扣ul，就是咱们这个地址，然后这里边是它的这个size大小，这样的话二维码在里边就可以进行显示，所以这是我们完成的这个前端的这么一个整合，这个咱们就做到了。然后这个做到之后呢，咱们最后把这个效果我们来做个测试，看一下目前的效果能不能做到，包括我刚才在这个接口中的这个位置，把这外机合也做了一个返回，一会咱能看到里边的值到底是什么，那我现在把这服务给它启动起来，然后咱们做一个测试，就看一下二维码生成的这么一个效果，我们等它先行起来。

好，现在都已经启动了，然后咱们一会儿在O里边呢，能看到我们的输出内容，那下面我打开页面，我先刷新一下，然后刷新之后我在这个订单的详情页面中，咱们点击支付看效果，大家看啊，我一点支付，你发现二维码是不是就生出来了，这就是咱们微信支付的二维码，然后这个生成之后，我们现在看一下我这里边的一个输出，看一下它里边那个输入值什么。啊，比如说我们给他重新测试一下啊。我把这个重新刷新一下啊，然后点击生成二维码，咱们看里边是不是一段输出啊，这是我们通过微信那边给咱们返回内容，然后大家看这内容中啊，你看到啊，里边这值比是第一个是它那个随机字符串，然后主要是第二个值叫code的ul，就是我们微信的地址，但是你看这地址啊是什么，是微信冒号杠杠，不是我们那个地址，所以要用那个插件把它下下来，然后后面有它的一些其他值，比如咱们看到里边还有一个值，就这个result code是不是叫success表示成功嘛，所以现在我们就完成了二维码的这么一个生成，各位知道这过程能把这接口给它能够完整写出来。

然后这个做到之后呢，咱们下面做的就是我们当支付之后呢，咱们可以每个月的时间去查一次支付状态，当支付状态查完之后，我们能够更新订单的信息，那咱们一会儿把这完成，目前是完成了二维码生成的这么一个功能。