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

那只猫喝咖啡

已于 2022-08-29 11:58:04 修改

阅读量4.2k

点赞数

分类专栏： vue 文章标签： java 前端 javascript

于 2022-08-29 11:55:22 首次发布

本文链接：https://blog.csdn.net/guhanfengdu/article/details/126580554

版权

vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

简介

在实现微信支付之前，我们要知道，在提交订单是我们需要携带一个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);
      }
    }