qrcodejs2实现微信支付

1、npm i qrcodejs2       //在这里我们用的是qrcodejs2，它有官网文档

 2、import QRCode from "qrcodejs2";       //在你用到的vue2页面引入

3、在你用到的vue页面的template标签中加入以下代码、点击购买后出现的二维码样式

<template>
     <el-button class="bottomRight" type="primary" @click="buy">购买</el-button>

    <!-- 购买弹窗 -->
      <div class="mask-code" v-show="codeShow">
      <div class="code-box">
        <!-- <close-circle-outlined class="wechat-close" @click="closeMask" /> -->
        <i class="el-icon-circle-close icon" @click="closeMaskzhifu"></i>
        <div class="code-img" id="qrcode"></div>
        <p>使用微信扫描二维码进行支付</p>
      </div>
    </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default{
   data(){
      return{
         codeShow:false,//支付二维码弹窗默认不显示
         qrcode:"",// 
         timer:null,//判断支付的定时器
      }
   }
},
    
   methods:{
   // 购买支付,点击上边购买按钮的时候执行
    buy(){
       let fd = new FormData();
       fd.append("type_id", this.type_id);
       fd.append("price", this.frameList.price);//价格是后台给返的
       this.axios.post("/index/pay",fd).then((res) => {
       console.log(res);
       this.createQRcode(res.data.data);//执行函数让二维码生成链接
       this.listenOrder(res.data.out_trade_no);//监听它是否已经支付
        this.codeShow=true;
        });
    },

    // 用上边返的链接生成二维码
   createQRcode (url) {
     this.qrcode=document.getElementById("qrcode");
     var erweima = new QRCode(document.getElementById("qrcode"), {
     text: url, // 需要转换为二维码的内容
     width: 250,
     height: 250,
     colorDark: "#000", // 生成的二维码的深色部分
     colorLight: "#fff", //生成二维码的浅色部分
     correctLevel: QRCode.CorrectLevel.H, //纠错等级 
     src : '../img/pm.jpg'  //二维码中间的图片
  }); // 设置要生成二维码的链接
},

    // 监听是否支付
    listenOrder (noid) {
    this.selectOrder(noid);
},

    //在上边监听函数中执行
 selectOrder (noid) {
    this.timer= setInterval(async () => {
    let fd = new FormData();
    fd.append("number", noid);
    this.axios.post("/index/selectorder", fd).then((res)=>{
      console.log(res);
    if (res.data.trade_state === "SUCCESS") {
      clearInterval(this.timer);
      this.closeMaskzhifu();
      message.destroy();
      message.success("支付成功!");
      // let e = {
      //   dataset: {
      //     type: "show",
      //   },
      // };
      // emit("navChange", e);
      // state.showList();
    }
    })
  }, 2000);
},

   // 关闭支付二维码，清除定时器，不再判断用户是否支付成功
     closeMaskzhifu (){
      this.codeShow=false;
      this.qrcode.innerHTML = "";
      clearInterval(this.timer);
},
   },

</script>

<style lang="scss>
// 支付弹窗
.mask-code {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index:999999999999;
  .code-box {
    width: 380px;
    height: 540px;
    border-radius: 4px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding-top: 1px;
    .code-img {
      width: 250px;
      height: 250px;
      margin: 0 auto;
      margin-top: 20%;
    }
    p {
      font-size: 20px;
      color: #353535;
      text-align: center;
      margin-top: 50px;
    }
    .icon {
      font-size: 20px;
      float: right;
      margin: 15px;
      cursor: pointer;
    }
  }
}
</style>

 4、官网地址https://www.npmjs.com/package/qrcodejs2

注意：以上内容记得切换成自己的接口，一个支付生成链接的接口和一个判断是否支付了的接口