template(list): download qrcode

NekoWheel · Aug 25, 2024 · 8441667 · 8441667
1 parent c5bc204
commit 8441667
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/templates/base/header.html b/templates/base/header.html
@@ -8,7 +8,12 @@
   <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/uikit/3.3.3/js/uikit.min.js"></script>
   <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/uikit/3.3.3/js/uikit-icons.min.js"></script>
   <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/dayjs/1.10.8/dayjs.min.js"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"/></script>
+  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"
+          type="application/javascript"></script>
+  <script defer src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/html2canvas/1.4.1/html2canvas.min.js"
+          type="application/javascript"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"/>
+  </script>
   {{ if .RecaptchaTurnstileStyle }}
   <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>
   <script>
@@ -49,7 +54,7 @@
 
   <meta itemprop="image" content="https://box-user-assets.n3ko.cc/public/Neko.png"/>
   <meta name="msapplication-TileImage" content="https://box-user-assets.n3ko.cc/public/Neko.png"/>
-  <link rel="shortcut icon" href="https://box-user-assets.n3ko.cc/public/Neko.png" />
+  <link rel="shortcut icon" href="https://box-user-assets.n3ko.cc/public/Neko.png"/>
   <link rel="apple-touch-icon" href="https://box-user-assets.n3ko.cc/public/Neko.png"/>
   <link rel="icon" sizes="192x192" href="https://box-user-assets.n3ko.cc/public/Neko.png">
 

diff --git a/templates/question/list.html b/templates/question/list.html
@@ -22,7 +22,57 @@ <h3>{{ .PageUser.Name }}</h3>
 <div>
   <div class="uk-card uk-card-default uk-card-small uk-card-body">
     {{ if .CanAsk }}
-    <p class="uk-text-center uk-text-small">谁都可以以匿名的形式提问</p>
+    <div style="display: flex;align-items: center;justify-content: space-between;">
+      <div style="width: 36px"></div>
+      <p class="uk-text-center uk-text-small">谁都可以以匿名的形式提问</p>
+      <a href="#qrcode-modal" class="uk-icon-button" uk-icon="social" uk-toggle></a>
+    </div>
+
+    <div id="qrcode-modal" class="uk-flex-top" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" style="max-width: 440px !important" x-data="{loading: false}">
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div style="width: 100%;padding-top: 100%;position: relative;">
+          <div id="qrcode_background"
+               style="position: absolute;max-width: 400px;max-height: 400px;top: 0;left: 0;right: 0;bottom: 0;background-image: url('https://box-user-assets.n3ko.cc/public/qrcode_template.png');background-size: 100% 100%;background-repeat: no-repeat;user-select: none;-webkit-user-select: none;">
+            <div id="qrcode" style="position: absolute;top: 16.5%;left: 26.5%;width: 47%;height: 47%;">
+              <img alt="avatar"
+                   style="position: absolute;width: 25%;height: 25%;top: 38%;left: 38%;background: #fff;border: 2px solid #ffffff;border-radius: 5%;"
+                   src="{{ .PageUser.Avatar }}?x-oss-process=image/auto-orient,1/quality,q_70/sharpen,200/resize,limit_0,m_fill,w_200,h_200/format,png"/>
+            </div>
+            <div style="position: absolute;top: 73%;width: 100%;font-size: 140%;text-align: center;color: #ffffff;">
+              {{ .PageUser.Name }} 的提问箱
+            </div>
+          </div>
+        </div>
+        <button class="uk-button uk-margin-small-top uk-button-primary uk-width-1-1 uk-margin-small-bottom" x-on:click.debounce="()=>{
+          loading = true;
+          html2canvas(document.getElementById('qrcode_background'), {
+              useCORS: true
+          }).then(function (canvas) {
+              const dataURL = canvas.toDataURL('image/png');
+              const link = document.createElement('a');
+              link.href = dataURL;
+              link.download = 'div-as-png.png';
+              link.click();
+          }).finally(() => {
+              loading = false;
+          });
+        }">
+          下载二维码 <div uk-spinner="ratio: 0.5" x-show="loading"></div>
+        </button>
+      </div>
+    </div>
+
+    <script>
+        new QRCode(document.getElementById("qrcode"), {
+            text: "{{.ExternalURL}}/_/{{ .PageUser.Domain }}",
+            width: 400,
+            height: 400,
+            colorDark: "#000000",
+            colorLight: "#ffffff",
+            correctLevel: QRCode.CorrectLevel.H
+        });
+    </script>
     {{ end }}
     {{template "base/alert" .}}
     {{template "question/new-question-template" .}}