PC端实现微信支付功能（Vue2.0）

简介

        在实现微信支付之前，我们要知道，在提交订单是我们需要携带一个query参数去支付页面

为什么要携带参数？

        1.为了要获取支付信息，支付信息包含：

                1.1 需要支付多少钱，并渲染到支付界面，提示用户

                1.2 服务器返回的url，用于生成二维码                        

        2.为了下次请求查询支付状态（需要定时发请求检查支付状态）

---

获取支付信息：

  // 获取需要花多少钱
    async getPayInfo() {
      let result = await this.$API.reqPayInfo(this.$route.query.orderId);
      if (result.code == 200) {
        this.totalFee = result.data.totalFee;
        this.payInfo = result.data;
      } else {
        alert("失败");
      }
    },

 由上图我们可以看到，数据已经拿到了，价格为18486,   codeUrl就是可以生成二维码的url

 这里我们使用ElementUI组件库中的Message Box弹窗

点击支付按钮，进行弹窗，这个过程我就不再赘述了。

弹窗之后我们需要生成一个微信二维码，我们需要利用qrcode插件

qrcode - npm这是他的指导手册

import QRCode from "qrcode";

当我们点击支付按钮就应该生成二维码

// 生成二维码

let url = await QRCode.toDataURL(this.payInfo.codeUrl);

 此时二维码已经生成了，但没有实现支付功能，我们需要借助MessageBox中的beforeClose

——MessageBox 关闭前的回调，会暂停实例的关闭

具体参数可看文档Element - The world's most popular Vue UI framework

在此之前，我们需要在data中定义两个变量，code和timer

data() {

     return {

       totalFee: "",  //价格为18486

       payInfo: {},  //支付信息

       timer: null,  //为定时器准备的，这个不理解也可继续往下看

       code: ""   //我们需要留存请求支付的状态码，205的话说明支付成功

};

},

常规来说200是支付成功，205是支付中，我这样做的目的也是为了能不用付款（但发请求）就可实现功能。

 // 点击打开支付弹窗
    async open() {
      //  生成二维码
      let url = await QRCode.toDataURL(this.payInfo.codeUrl);
      this.$alert(`<img src=${url} />`, "请使用微信扫码支付", {
        showClose: false,
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: "支付成功",
        cancelButtonText: "支付遇到问题",
        center: true,
        dangerouslyUseHTMLString: true,
        beforeClose:(action, instance, done)=>{
          if (action == "confirm") {
            console.log("你点击的是支付成功");
            // 判断是否真的支付了
            
            if (this.code == 205) {
              console.log("支付成功啦");
              clearInterval(this.timer);
              this.timer = null;
            }
            done();
          } else {
            clearInterval(this.timer);
            this.timer = null;
            done();
          }
        }
   
      });
      // 查询支付状态
      if (!this.timer) {
        this.timer = setInterval(async () => {
          let result = await this.$API.reqPayStatus(this.$route.query.orderId);
          console.log(result);
          if (result.code == 205) {
            clearInterval(this.timer);
            this.timer = null;
            this.code = 205;
            // 关闭弹出框
           this.$msgbox.close()
          }
        }, 3000);
      }
    }

发现了吗我这里为什么用箭头函数

如果不使用箭头函数或者改变this指向的方法,在beforeClose中的this其实不是组件实例

instance 为 MessageBox 实例，下图证实想法是正确的

 于是我在上面的代码中使用的箭头函数，为什么箭头函数的this就可以？

this的指向问题_那只猫喝咖啡的博客-CSDN博客

上面链接有介绍，放心点开，篇幅非常短。

解决了this问题，基本上已经完成了支付功能，剩下的就是在判断支付成功的里面加上路由跳转至支付成功的界面。