Vue3.x项目全程实录 40_订单支付流程编写 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课我们做了这个创建订单，那创建订单的同时呢，我们可以让他直接就选择支付，所以呢，我们在模板这里边，我们用了一个组件。你看啊，用了一个这个组件，弹出层你可以找到这个。嗯，这里面比如说我们找到这个。弹出。哦。找一下弹出层，弹出层po。这个弹出层，你看这里边儿，咱们选择的是下部弹出层，顶部底部弹出层，你看这样的一个弹出层。选择是这样的，所以呢，咱们引入这样的一个组件就可以了，现在呢，咱这里边已经引入了，如果我把这个弹出层显示这块，这块变成一个什么，变成一个帧加入。对吧，那这样就会弹出来一个我们想要的数据。就是呃，购物车这块啊。

那选择商品吧，选择一个项，你看到这里边他就现在是选择了，对吧。然后我们一点关闭的时候，它就会消失，当然我们不是让它在这块显示，不是让它在这显示，那我们可以做一个变量，对吧，当我们点支付点生成订单的时候让它显示，所以呢，还是在这个方法里边去处理，那我们只需要将这个做成一个变量去绑定就行了。将这块做成一个呃变量，也就是比如说显示支付pay一个弹出层，那么前边呢，加上一个动态的绑定V。在这个，那然后我们得声明这个变量，那我们在我们的状态这个里面。我们把这个变量给声明，然后返回去再给，比如说是嗯，P默认应的是假对吧，让它不显示，默应的是假不显示，然后。我们。在。呃，创建订单。创建订单的时候，在这里边我们去处理。

嗯，创建订单的时候，在这里弹出层处理，我们先将这个变量，也就是一点这个我们要STT里边的，呃数KY这个方法，现在等于什么，等于针，这样的话，我们一点支付的时候，它就显示这个弹出层了，这样一个简单的一个一个变化，然后呢，弹出层里边我们在获取什么支付宝啊，什么二维码那信息就可以了，那现在。我们当然了，我们这块得回去重新就这一个商品也可以，一个商品十块钱对不对。我们现在点击生成订单。你看弹出这样，那如果在手机里边，您可以用这种支付宝微信干嘛呀，这样的话我们可以去获取到，嗯，激活手机本地的一个支付宝，如果他支持的话，对吧，去调用，那咱们现在在这块没法演示，在电脑里边没法调用，所以呢，我这块做成二维码的方式去用。那显示这个订单。封面。然后我们在嗯，这个地方把这个我们去掉。这个去掉我们加一个什么呢？加一个我们获取微信二维码的这样的一个弹出层，但是我们就得先获取这个二维码的图片，然后我们摆在这个位置，在弹出层里边对吧？这里边当然直接你给放两个图片img对吧？但是这图片哪来的，我们得去找对吧？这块这个图片是弹出层中间内容，就是中间弹出层中显示的内容，所以呢，我们在这个里边。

支付这里面我们得获取到。什么呢？获取到我们的呃一些信息，支付的信息，那获取支付的信息呢，我们通过这个接口啊呃，获取二维码，通过访问这个接口，当然了这个接口呃里边需要的就是订单的ID，因为我们已经生清生成这个订单了，对吧，生成订单里边在I里边就给我们返回了这个ID了。那我们。得需要这个订单ID在is里边创建完之后，如果创建成功了，就给我们返回一个订单ID，你就在I里边，这ID就是订单ID，你可以打印一下啊，因为这是这个订单信息，你想要订单号，订单ID都可以，然后呢，我们把这个订单号，当然这个ID不是订单号，但是我们把它就写成订单号吧，比如说这里边来一个or no订单号。

呃，默认这个订单号，咱们就实际上它是空的，就可以默认这个订单号，咱们把它做成空的。然后我们在这块获取的时候。在这块就可以通过sta里边的or订单号，我们等于这个，当然这是订单ID啊，这是订单ID。订单ID，订单ID啊，不是订单号，订单号咱们后边会用它是一段生成的一大串东西，根据时间的这些东西，是给我们生成的一个一串码，那订单ID呢，就是数据表里边的这ID，因为用ID咱们就可以支付哪个订单，对吧？这里边它都会有那个价格，所以呢，也获取支付二维码，再把订单传给支付宝那个接口，然后呢，他通过这个获取你买的商品的名称信息，然后以及。呃，地址啊，什么信息对吧，和总价的信息，给我们形成一个支付宝的二维码是这样的，然后我们用订单号获取到了，需要传到我们那个接口里边，我们已经封装好的那个接口在这里边。

你看获取二维码这个只要传订单号和其他的这个参数就行了，那参数呢，我们需要传像阿里云呢，还是嗯，还是微信。这里边儿你看阿里还是微信对吧。那我们获取一个类型，这里边我们就单独两个都获取一下吧。嗯，这块方面。现在有订单号了，我们需要的条件有了，那我们就调用这个pay支付订单，就是获取二维码的，然后第一个参数s sta里边的对吧？呃，订单号这个订单ID对不对，然后我们传一个类型type，呃，阿里为阿里云。对吧，把这个进来，当然它是字符串类型的，我们别忘了字母加不是一个变量。获取阿里云的支付的信息，然后嗯，因为阿里这个我们是可以测试的，微信的我们是测试不了的。

因为阿里的我们有一个沙箱，当然得在安卓手机里边，你可以下载一个，那沙箱里边可以随便设置手机钱，那我这个沙箱里边，呃，设置了，比如说有几亿的这样一个价钱，专门用来测试用的，你可以随意设置微信呢，嗯，没有提供这个测试的，所以呢，他必须得在正式的服务器上，那你花的是真实的钱才可以啊，所以呢，我的不用大家损失，那就只用阿里这个沙箱，咱们去测试获取这个对吧，拿过来然后返回来的这个。r.ROOG。你看这个里边就有什么二维码的信息，当然这里边儿，嗯，我们微信的二维码，我们也用这一个啊，当然你可以单独获取微信，也就比如说你再写一个这样。然后呢，这块写上呃，微信，微信的类型应该是V叉。这样的去获取微信的这样的二维码。那咱们两个都是阿里的二维码，省得你支付的时候使用错了啊。Is，那我们打印一下，点击调用这个的时候。

那。嗯，稍近点。然后点击生成订单弹出来。有一个错误。啊，500。他告诉我们是阿里类型type支付27订单号，这都没问题。500是服务器错误，那应该是服务器没给我们返回，那我们看参数存没存错啊，类型阿里阿里云。一问下。在这块。支付类型，TP。TYP。阿里云，当然这个或许所有有可能是我们其他订单已经交过去了，对吧，因为每次点击它已经创建了生成这个，我们再呃后退一下。你看购物车里边已经是零了啊，然后呢，我们先到首页里边再购买一个。因为他每次点击他就创建这个订单。

然后呃，立即购买。结算。然后我们点生成订单。你看创建成功在下边没有错，你看返回来的是不是就有这个成功，然后这块是二维码，我们只要扫描这个二维码就可以了，但是这个这块是二维码图片的这个地址，我们用这个。嗯，URL。所以在这里边我们返回了这个支付的信息。然后，但下次我们操作还得重新走一下这样的一个流程，不然的话，我们现在已经创建了，既然已经执行这个了，那就会把这个已经装到我们的数据库里了，下次我再刷新用的时候。就没有这个ID了。所以呢，我们每测试的时候，你重新有一个购买的这样的一个过程，然后ST这里边把这个图片，因为想在页面里边去使用，对吧，所以呢，我们把它装到这里边。嗯，分别装一个什么呢？装一个AI阿里云的UR就就直接下云吧，一个默认是空的一个地址，然后咱们再来一个微信的啊V叉。

也是一个空的能加进来。那我们只需要获取到这个二维码的时候，在这里边获取阿里云这个二维码的时候，将STT里边的阿里云这个二维码is里边的。Q r code URL，这是它的图片地址，什么qr Co de_URL这样的话，我们就能将那个图片附给这个，然后呢，如果微信的话，我们在这里边去，呃，获取这个。这款这款V叉。V叉这样去过去啊，当然我们都用一个二维码，我就在这里边演示一下啊V。等于res里边的也是QR，同样的一个码有RLURL获取到。这样的话，我们在页面上就可以有微信支付和这两个支付都有的这样的一个情况，那获取这样的二维码。我们先把这个二维码是不是得放在这儿啊，那放在这块的时候，我们想要的摆的漂亮一点，我们也使用一个组件使用，呃，格子的。

九宫格的那个。找一下格子，九宫格。对话框。和九宫格，这宫格的使用这个你看这里面放图片使用这种方式，对吧，这两个呢，我已经引入了，呃继续看见我就不直接引入了，直接用就行了，然后呢，比如说像这样的呃方式我们直接。用就行，然后呢，不需要边线，你看可以自定义，比如边框是假，然后需要有几列对吧，咱可以我可以复制一个这个。拿过来到这块，然后呢，让它边框不显示边框，然后列呢，咱们就放两个图片，所以呢，这块写个二就可以了，然后这里边每个选项，呃，每个选项，这个选项上面我是可以加那个加那个文本的。在这加了，就在这加加一个啊。

支付宝二维码，然后换个行，下边呢，我再加上图片，图片用这个加，呃给个宽度高度吧，别太大TH宽度比如说我们给上150，他这里边支持啊，高度我们给上150，然后呃，图片。LV-lazy。这里面我们加上。这个叫做啊阿里云加上这个。支付二维码。过来同样的微信支付，但是多一个，我们把它删掉一个。我们把整体的复制化。整体复制完，然后是微信。微信二维码，这里边加了一个，加上微微。差这样。

支付二维码和微信宝，呃，支付宝二维码和微信二维码，咱们都给他加上了，嗯，咱们先看一下样子。这样点击，然后呢，咱们去支付。做一个这样的一个处理，然后你看现在这里边是没有数据的，我们再购买几本书。我买几本书啊。嗯，这个加一本。然后我们再到分类里边。再找一个，比如说再找，然后立即购买两本书就可以了。然后两个默认都选中了，但这些功能我就不说了，咱们都做过了，你肯定知道了，然后过来。加载了这两本书对吧，然后我现在点生成订单，当然这个。这个高度。嗯，40%吧。不然的话就放不下。点击生成。订单我去刷新一下。来一下。就网络慢生成订单。

那二维码。3.2码。比较慢，那不能显示，等待一下。看一下为什么没给我们显示啊。这个图片支不支持？应该应该支持的。那个开加载有几种方式，还可以设置那个加载为真，然后使用获取啊，我先使用S先加载，到时你加上那个属忘记那属于什么，你找一下这个手册。来，我们在出来刷新刷新快。现在因为他已经创建订单，这个数据就没了，那我们还得需要重新购买一下。买家。这玩意。加购罩。那就不买吧。啊，因为立即动脉有点离子，所以它数量是二结算。形成订单。智能订单，然后呢，我们点击。

生开名单。就会给我们出现这样的二维码，我现在等待一下，然后我们现在打开手机找出支付宝，现在你就可以支付了，现在我已经打开了手机，那现在这个二维码，我们现在扫描一下，用这个沙箱的环境去测试就可以了。打开。现在在扫描中。然后给我显示的价格是110块钱，订单信息是Linux私房菜等一件商品，然后呢，我现在点立即付款。输入密码。123456上线环境吗？现在。支付成功，我这里边显示支付成功，然后我点完成就可以了，现在就支付成功了，那支付成功其实后台的状态已经将它改变了。后台的状态已经让他改变了，支付成功，那支付成功后台改变了，那我们不能一直停留在这个页面啊，对不对，得显示支付成功或者是其他的东西对不对，所以呢，我们一般都用轮询的方式去处理，你比如说这里边已经在这显示支付对不对，支付成功，那我们做一个呃轮询，轮询查看。

他一直会等待用户的一个呃信息。嗯。行。查看。人群查看。你可以用真实的支付宝都可以去测试啊，但是这个环境后台写的结果测试信息也不会收到钱的，最好是用沙箱的这个去做啊，万一你的结果我改掉，你真收到你的钱多不好，对吧，所以呢，一定要下载一个沙箱的一个专业环境，然后。Host声明一个定时器T，我新用一变量接收，然后set in t轮巡，每隔多长时间去执行一下这个方法？比如说呃，我们设置呃三秒钟。两秒钟吧。你时间也别太短，别太长，三秒钟两秒钟这样就可以，然后呢，你看我们允许去干嘛呢，只要你支付，那支付的状态肯定会改变，也就是我们的它会有一个这个接口，查询支付状态的接口，查询支付状态接口，然后给我们返回这么多状态。

对吧，我们返回这些状态12345，那如果返回二就是支付完成，那我们就可以让他跳转页面，对吧，就可以这样去做。所以呢，我们这个支付的接口，这个跳转接口，我们在这块获取状态的接口，在这块我们也写了，看一下前边我们引没引入。前边嗯，找到。哎，这不刚才结束引入了，引入了那么我们就可以直接在这个里边在这块。轮询，每隔两秒钟我们去请求这个接口，请求这个接口，那这接口我们需要传递的就是什么，这个订单号对不对，通过订单号订单的ID，我们才能够，呃，找到哪个订单的一个支付状态，然后。Res返回的就是数据12345，我们只要二的那个状态，那如果什么res等于二对吧？等于二的时候就证明是。

呃，支付成功了对吧。当然得加上这个代号，数字对比没关系，它都会判断，如果等于二的话，就不要再允许了，所以呢，我们这块前面定义一个变量的原因，尔特这个清除谁啊TIM加。清楚这个变量就不要能允许了，那停止轮询，然后呢，我们去跳转，嗯，跳转到哪呢？只用I路由push，你可以跳转到订单列表页面PHH订单。这块是一个B项目的时，然后padh哪块去到or DR订单页表这块，当然了，我们如果支付完成的话，那我们也可以把它传一个状态过去，就这状态是二，已经是是完成的Q，当然你不传也可以啊，你想过去之后那边直接显示这个现在是支付过的状态，那我们就下一个STT状态码是二。通过这个参数传过去，那在这个页面，那我们就可以通过QE路由里边QE找到状态码上，就是这个证明已经支付完成的了，因为这个判断已经是支付成功了，对吧，那现在我们再走一遍流程，再支付一下。

这样的话，他就会允许我们跳转。来，我们再回到。所以我们再选择这本书。你选择这种选择一样的。随便比如说。选对象。高大高大上的这个图书加入购物车对吧。嗯，这本书这么好，那我就买这一本。但是呢，我想买多个的。对吧，这么好的书得买个十本八本的。十本吧，啊，明白吧，然后我们结算。结算，然后我们生成订单，生成订单的时候，我们显示二维码，那我们现在打开手机。然后我们扫码，这两码现在扫哪都可以啊。现在我这个手机支付宝界面给我显示的是价钱是幺零八零点零零，然后订单信息是细说PP第四版等一件商品。

然后呢，呃，让我支付，那我支付。然后密码123456。现在我已经支付完成，你看支付完成它允许跳转，跳转到我们订单里边，但订那边我只写了一个界面，还是功能明显，功能交互，咱们下节课咱们就开始做这个页面，这就是我们订单的一个支付的一个流程，咱们就做完了，但是微信的流程跟这差不多了，但是微信测试环境呢，咱不太好模拟对吧。好，谢谢大家。这节课我们就。