獲取支付連結轉化為二維碼

連結轉為二維碼，需要安裝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) => {
    })
}