动态生成二维码

package.json

@@ -16,6 +16,7 @@
     "html2canvas": "^1.3.3",
     "install": "^0.13.0",
     "js-base64": "^3.7.5",
+    "qrcode": "^1.5.3",
     "swiper": "^8.4.4",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.14",

public/static/js/Hot.js

@@ -37,8 +37,8 @@ window.initHot = function (model) {
   var getCommonHotspotUrl = function (link) {
     var querySectionInLink = link.split('?')[1]
     var langParam = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""
-    return `http://192.168.20.16:8084/#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
-    // return `/XuzhouHanStoneReliefArtMuseum/hotspot/index.html#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
+    // return `http://192.168.20.16:8084/#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
+    return `/wenlange/hotspot/index.html#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
   }
   var removeSrcPostMark = function (url) {//去除texture.load时自动加上的'?'
     var index = url.indexOf('?')

src/views/gui/Share.vue

@@ -71,13 +71,11 @@
       </div>
       <div class="splitter" />
       <div class="QRCode">
-        <img
-          class=""
-          src="@/assets/images/floor-3.png"
-          alt=""
+        <canvas
+          id="qrcode-canvas"
           draggable="false"
-        >
-        <p>长按识别二维码</p>
+        />
+        <p>扫描二维码</p>
         <p>云游西湖文澜阁</p>
       </div>
       <img
@@ -107,6 +105,7 @@
 
 <script>
 import html2canvas from "html2canvas"
+import QRCode from 'qrcode'
 
 export default {
   data() {
@@ -138,6 +137,13 @@ export default {
     globalApi.getAnswerRecord().then((res) => {
       this.answerNumber = res.length
     })
+    this.$nextTick(() => {
+      var canvas = document.getElementById('qrcode-canvas')
+
+      QRCode.toCanvas(canvas, `location.origin${process.env.BASE_URL}index.html#/?m=768`, function (error) {
+        if (error) console.error('qrcode生成失败：', error)
+      })
+    })
   },
   methods: {
     onClickSave: globalUtils.throttle(function() {
@@ -291,11 +297,9 @@ export default {
     }
     > .QRCode {
       margin-top: 22px;
-      width: 124px;
+      width: fit-content;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      > img {
-        width: 124px;
-        height: 124px;
+      > .qrcode-canvas {
       }
       > p {
         margin-top: 6px;