vue支付 微信支付、支付宝支付

vue 支付

微信返回字符串，转为二维码扫码即可支付。

支付宝返回HTML代码，调用form 的submit 开启支付

流程：1、调用订单接口，获得订单号，2、传递订单号至预支付接口，返回（字符串/HTML）代码，

本文章用于解决怎么处理              字符串/HTML

代码：

项目采用mqtt订阅后端返回标识，所以支付宝要打开新页面，否则mqtt链接失败！！！

以下代码已忽略前两步！！！ 即放入预支付接口返回内部

支付宝：

let myWindow = window.open("", "_blank");
const div = document.createElement("div");
div.innerHTML = res.data.data.form;
myWindow.document.body.appendChild(div);
myWindow.document.forms[0].submit();

微信：

import QRCode from "qrcodejs2";

<el-form-item label="请扫码" :label-width="formLabelWidth" >
          <div id="qrBox"></div>
          <p>{{link}}</p>
        </el-form-item>

 data() {
    return {
      link:''
    };
  },

放入预支付返回内
this.link = res.data.data.codeurl;
this.$nextTick(function() {
     this.qrcode();
});

methods：
//  生成二维码
    qrcode() {
      // let that = this;
      new QRCode("qrBox", {
        width: 124,
        height: 124, // 高度
        text: this.link // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });
    },

 

 res为前端调用预支付接口的返回