<template>
  <div id="aliPay" class="qrcode">
    <div id="aliPayShow"></div>
  </div>
</template>
<script>

import QRCode from 'qrcodejs2'

export default {
  name: 'aliPay',
  data() {
    return {
      codes: '',
      url: '',
    }
  },
  methods: {
    // 获取url链接
    getUrl(url) {
      this.url = url
      this.showQrCode()
    },
    // 生成二维码
    showQrCode() {
      this.codes = ''
      document.getElementById('aliPayShow').innerHTML = ''
      let url = this.url
      this.codes = new QRCode('aliPayShow', {
        width: 136,
        height: 136, // 高度
        text: url, // 二维码内容
        // colorDark : '#f0f',      // 前景色
        // colorLight : '#ff0',      // 背景色
        correctLevel: QRCode.CorrectLevel.L // 容错等级
      })
    },
    qrCodeDownLoad() {
      let myCanvas = document.getElementById('aliPayShow').getElementsByTagName('canvas')
      let a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('image/png')
      a.download = '扫码开票'
      a.click()
      this.$message({
        message: '正在进行下载保存',
        type: 'success'
      })
    },
    qrCodePrint() {

    }
  }
}
</script>

<style scoped>
.qrcode {
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>
