add package qrcanvas-vue and component FigureQrCode

admin/package.json

@@ -39,6 +39,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "26.6.3",
     "portal-vue": "^2.1.7",
+    "qrcanvas-vue": "2.1.1",
     "regenerator-runtime": "^0.13.9",
     "stats-webpack-plugin": "^0.7.0",
     "vue": "^2.6.11",

admin/src/components/FigureQrCode.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="figure-qr-code">
+    <div class="qrbox">
+      <q-r-canvas :options="options" class="canvas" />
+    </div>
+  </div>
+</template>
+<script>
+import { QRCanvas } from 'qrcanvas-vue'
+
+export default {
+  name: 'FigureQrCode',
+  components: {
+    QRCanvas,
+  },
+  props: {
+    link: { type: String, required: true },
+  },
+  data() {
+    return {
+      options: {
+        cellSize: 8,
+        correctLevel: 'H',
+        data: this.link,
+      },
+    }
+  },
+  created() {
+    const image = new Image()
+    image.src = 'img/gdd-coin.png'
+    image.onload = () => {
+      this.options = {
+        ...this.options,
+        logo: {
+          image,
+        },
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+.qrbox {
+  padding: 20px;
+  background-color: rgb(255, 255, 255);
+}
+.canvas {
+  width: 90%;
+  max-width: 300px;
+  padding: 5px;
+  background-color: rgb(255, 255, 255);
+}
+</style>

admin/yarn.lock

@@ -932,6 +932,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.16.0":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.14.0":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
@@ -10959,6 +10966,27 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qrcanvas-vue@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/qrcanvas-vue/-/qrcanvas-vue-2.1.1.tgz#27b449f99eaf46f324b300215469bfdf8ef77d88"
+  integrity sha512-86NMjOJ5XJGrrqrD2t+zmZxZKNuW1Is7o88UOiM8qFxDBjuTyfq9VJE9/2rN5XxThsjBuY4bRrQqL9blVwnI9w==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    qrcanvas "^3.1.2"
+
+qrcanvas@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/qrcanvas/-/qrcanvas-3.1.2.tgz#81a25e91b2c27e9ace91da95591cbfb100d68702"
+  integrity sha512-lNcAyCHN0Eno/mJ5eBc7lHV/5ejAJxII0UELthG3bNnlLR+u8hCc7CR+hXBawbYUf96kNIosXfG2cJzx92ZWKg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    qrcode-generator "^1.4.4"
+
+qrcode-generator@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"