开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：生成微信支付二维码前端】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11497
生成微信支付二维码前端
内容介绍：
一、生成微信支付二维码
二、整合
三、测试
一、生成微信支付二维码
在支付页面中，点击去支付，页面需要生成二维码，应该调用之前的接口，根据订单 id 把二维码生成出来。
export default {
//生成订单
createOrders(coursed){
return request({
url:’/eduorder/order/createrOrder/’+courseId,
method:’post’
})
},
//根据订单 id 查询订单信息
getOrderInfo(id){
return request({
url:’/eduorder/order/getOrderInfo/’+id,
method:’get’
})
},
//生成二维码的方法
createNative(orderNo){
return request({
url:’/eduorder/paylog/getOrderInfo/’+orderNo,
method:’get'
//查询订单状态的方法
//生成二维码的方法
queryPayStatus(orderNo){
return request({
url:’/eduorder/paylog/queryPayStatus/’+orderNo,
method:’get’
})
}
}
点开去支付的页面，即订单显示页面，在这个页面做一个调用，实现目的。
来到_oid.vue 页面，找到去支付的地方，绑定事件写方法。
methods:{
//去支付
toPay(){
this.$router.push({path:’/pay/’+this.order.orderNo})
在 pages 中新建文件夹命名为 pay，在 pay 中新建个页面_pid.vue。在这页面中做二维码的生成
<template>
<div class=”cart py-.container”>
<!—主内容—>
<div class=”checkout py-container pay”>
<divd class=”checkout-tit”>
<h4 class=”fl tit-txt”><span class=”success-icon”></span><span class=”success-info”>
订单提交成功，请您及时付款！订单号：{{payOvj.out_trade_no}}</span>
<h4>
<span class=”fr”><em class=”sui_lead>应付金额：</em><em class=”orange money”>¥{{payObj.total_fee}}</em></span>
<div class=”clearfix”></div>
</div>
<div class=”checkout-steps”>
<div class=”fl weiin”>微信支付</div>
<div class=”fl sao”>
<p class=”red”>请使用微信扫一扫。</p>
<div class=”fl code”>
<!--<img id=”Qrious” src=”~/assets/img/erweima.png” alt=””>
<!--<qriously value=”weixin://wxpay/bizpayurl?pr=R7tnDpZ”:size=”338”/>
<qriously :value=”payObj.code_url”:size=”338/>
<div class=”saosao”>
<p>请使用微信扫一扫</p>
<p>扫描二维码支付</p>
</div>
</div>
</div>
<div class=”clearfix”></div>
<1-- <p><a href=”pay.html” target=”_blank”>> 其他支付方式</a></p>
</div>
</div>
</div>
</template>
<script>
import ordersApi from ‘@/api/orders’
export default {
asyncData({ params,error }){
return ordersApi.createNatvie(params.pid)
.then(response=>{
payObj:response.data.data
})
}
}
</script>
因为生成的二维码是 map 集合，于是把 map 集合得到。而在 map 集合中，对应的值都取出，在 payObj 中得到map 集合。
最后把所有的值都显示出来。payObj.code_url 是二维码地址，而如果写个图片，地址却不能生成，这需要 vue 中的一个组件，把 qriously 下载下来，这个组件是以前安装过的，详见用户登录和注册。
二、整合
在支付位置绑定一个事件 topay，跳转到支付页面，即 pid 页面，在页面中通过路由得到 pid 值，得到之后复制给payObj，因为里面有返回的 map 集合，通过 payObj，把里面的值都取出来，值取的名字都是 service 实现类别中的名字，put 中的名字是随便写的，但 get 中的名字是固定的。
三、测试
启用接口，把 oders 启动，做内容测试。检查一下 nacos 中的相关服务。
重新进入平台，重新登录，点击课程，在列表中点击某一个课程，进入详情页面，点击立即购买，生成订单。
此时点击 F12，再点击去支付，发现目前报了错误：undefine 没有定义。
回到 paylogcontroller 页面，在控制台中发现二维码的集合在接口中返回了。
在桌面新建一个 txt 文档用来调试，
返回状态码是 success，表示生成二维码是成功的，但在页面中报了错误，说 out_trade_no 没有被定义，可能是单词有拼写错误。
经检查，是少写了一个 return
return ordersApi.createNatvie(params.pid)
.then(response=>{
return {
payObj:response.data.data
}
重新测试后，二维码成功生成。且有订单号，有金额，课程名称也可以选择显示出来。
回到订单表中，有数据，但支付表中，由于还没有支付，数据为空。
