vue实现生成二维码实现C扫B的支付方式

1、安装依赖

npm i qrcodejs2 --save

2、支付页面传参数（通过后台返回的参数得到billQRCode，传到支付页面）

let pay = JSON.parse(res.data.payData)

this.$router.push({

    name: "OrderPayWxPay",

    query:{

        url:pay.billQRCode

    }

})

3、支付页面代码如下：（接收参数billQRCode）

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
  </div>
</template>
 
<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {};
    },
    methods: {
      creatQrCode(url) {
        var that = this
        var qrcode = new QRCode(that.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
    },
    mounted() {
      this.creatQrCode(this.$route.query.url);
    },
  };
</script>
 
<style scoped="scoped" lang="scss">
  .qrcode {
     width:200px;
     margin:0 auto;
  }
</style>

就实现了二维码显示