3x-ui/web/html/common/qrcode_modal.html

{{define "qrcodeModal"}}
<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
         :closable="true"
         :class="themeSwitcher.darkCardClass"
         :footer="null"
         width="300px">
    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
        {{ i18n "pages.inbounds.clickOnQRcode" }}
    </a-tag>
    <a-tag v-if="qrModal.clientName" color="orange" style="margin-bottom: 10px;display: block;text-align: center;">
        {{ i18n "pages.inbounds.email" }}: "[[ qrModal.clientName ]]"
    </a-tag>
    <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%; margin-top: 10px;"></canvas>
</a-modal>

<script>

    const qrModal = {
        title: '',
        content: '',
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
        copyText: '',
        clientName: null,
        qrcode: null,
        clipboard: null,
        visible: false,
        show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '', clientName = null) {
            this.title = title;
            this.content = content;
            this.dbInbound = dbInbound;
            this.inbound = dbInbound.toInbound();
            this.clientName = clientName;
            if (ObjectUtil.isEmpty(copyText)) {
                this.copyText = content;
            } else {
                this.copyText = copyText;
            }
            this.visible = true;
            qrModalApp.$nextTick(() => {
                if (this.qrcode === null) {
                    this.qrcode = new QRious({
                        element: document.querySelector('#qrCode'),
                        size: 260,
                        value: content,
                    });
                } else {
                    this.qrcode.value = content;
                }
            });
        },
        close: function () {
            this.visible = false;
        },
    };

    const qrModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#qrcode-modal',
        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>
{{end}}