获取支付链接转化为二维码

链接转为二维码，需要安装vue-qrcodenpm install vue-qrcode

装二维码的容器：

<div class="amount" v-show="amount">
              <div class="amount_text">金额：{{ selected.price }} 元</div>
              <div class="amount_img">
                <canvas ref="qrCanvas"></canvas>
              </div>
</div>

将链接转化为二维码：

import QRCode from 'qrcode'
const qrCanvas = ref(null)
const codeUrl = ref(null)
const handleQR = (codeUrl) => {
  if (qrCanvas.value) {
    QRCode.toCanvas(qrCanvas.value, codeUrl, (error) => {
      if (error) console.error(error)
    })
  } else {
    console.error('Canvas element is undefined')
  }
}

完整代码：

<div class="amount" v-show="amount">
              <div class="amount_text">金额：{{ selected.price }} 元</div>
              <div class="amount_img">
                <canvas ref="qrCanvas"></canvas>
              </div>
</div>




import QRCode from 'qrcode'
const qrCanvas = ref(null)
const codeUrl = ref(null)

//二维码
const handleQR = (codeUrl) => {
  if (qrCanvas.value) {
    QRCode.toCanvas(qrCanvas.value, codeUrl, (error) => {
      if (error) console.error(error)
    })
  } else {
    console.error('Canvas element is undefined')
  }
}
//获取链接
const handleAmount = async (item) => {
  await axios
     .get(`/api/pay/native/${item.id}`)
    .then((response) => {
       codeUrl.value = response.data.data.codeUrl
       handleQR(codeUrl.value)//调用 将链接转化为二维码
   })
  .catch((error) => {
    })
}