Copy the code by clicking on QR #41

web/html/common/qrcode_modal.html

@@ -2,7 +2,8 @@
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true" width="300px" :ok-text="qrModal.okText"
          cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
-    <canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
+         <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
+    <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas>
 </a-modal>
 
 <script>
@@ -34,7 +35,10 @@
                     this.clipboard = new ClipboardJS('#qr-modal-ok-btn', {
                         text: () => this.copyText,
                     });
-                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
+                    this.clipboard.on('success', () => {
+                        app.$message.success('{{ i18n "copied" }}')
+                        this.clipboard.destroy();
+                    });
                 }
                 if (this.qrcode === null) {
                     this.qrcode = new QRious({
@@ -57,6 +61,17 @@
         data: {
             qrModal: qrModal,
         },
+        methods: {
+            copyToClipboard() {
+                this.qrModal.clipboard = new ClipboardJS('#qrCode', {
+                    text: () => this.qrModal.copyText,
+                });
+                this.qrModal.clipboard.on('success', () => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.qrModal.clipboard.destroy();
+                });
+            }
+        },
     });
 
 </script>