pc端支付宝支付和微信支付（vue）

微信扫码支付
需要用到的插件 ： qrcodejs2
先安装 cnpm i qrcodejs2 -S
然后引入：import QRCode from "qrcodejs2";
配置啥的照着官网写就ok了

点击后弹窗出现，就有惊喜

代码如下：

<template>
  <div class="box">
    <el-button type="success" @click="payOrder">点我有惊喜</el-button>
    <el-dialog width="300px" title="微信支付" @close="closeCode" :visible.sync="show" append-to-body>
      <div class="paycode">
        <!-- 放置二维码的容器,需要给一个ref -->
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    // 展示二维码
    payOrder() {
      this.show = true;
      // 二维码内容,由后台返回的地址
      this.qrcode = "https://www.baidu.com/?tn=21002492_25_hao_pg";
      // 使用$nextTick确保数据渲染
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    // 生成二维码
    crateQrcode() {
      this.qr = new QRCode("qrcode", {
        width: 130,
        height: 130, // 高度
        text: this.qrcode, // 二维码内容
        background: "#f0f"
      });
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.innerVisible = false;
      this.$refs.qrcode.innerHTML = "";
    }
  }
};
</script>

<style>
#qrcode {
  display: flex;
  justify-content: center;
}
</style>

支付宝支付
调接口后端返回的是form 表单

单击支付宝支付后出现支付界面：

自己也在学习中，加油！！！