商城-下单-微信支付

3.微信支付

3.1.介绍

微信支付官方文档：https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

我们选择开发文档，而后进入选择页面：

选择扫码支付：

此处我们使用模式二来开发：

3.2.开发流程

模式二与模式一相比，流程更为简单，不依赖设置的回调支付URL。

商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url；

商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。

注意：code_url有效期为2小时，过期后扫码不能再发起支付。

流程图：

这里我们把商户（我们）要做的事情总结一下：

• 1、商户生成订单
• 2、商户调用微信下单接口，获取预交易的链接
• 3、商户将链接生成二维码图片，展示给用户；
• 4、用户支付并确认
• 5、支付结果通知：
  • 微信异步通知商户支付结果，商户告知微信支付接收情况
  • 商户如果没有收到通知，可以调用接口，查询支付状态
• 6、如果支付成功，发货，修改订单状态

在前面的业务中，我们已经完成了：

• 1、生成订单

接下来，我们需要做的是：

• 2、调用微信接口，生成链接。
• 3、并且生成二维码图片

3.3.生成二维码

3.3.1.生成预交易链接

我们先根据订单的编号，调用后台服务，生成交易链接，而后才能根据链接生成二维码。

在页面发起请求：

var payVm = new Vue({
   
    el:"#payVm",
    data:{
   
        ly,
        orderId:0,// 订单编号
    },
    created(){
   
        // 判断登录状态
        ly.http.get("/auth/verify").then(()