feat: 水牌二维码

package.json

@@ -16,6 +16,7 @@
     "core-js": "^3.8.3",
     "lottie-web": "^5.9.6",
     "pinia": "^2.0.11",
+    "qrcodejs2": "^0.0.2",
     "swiper": "^8.0.7",
     "vue": "^3.2.13",
     "vue-i18n": "^9.1.9",

public/static/offline/JSON/config.json

@@ -4,6 +4,7 @@
   "data": {
     "interfaceUrl": "https://test.iot.1000my.com/api",
     "sourceUrl": "/static/offline",
-    "backSocket": "ws://127.0.0.1:7181"
+    "backSocket": "ws://127.0.0.1:7181",
+    "mobileNav":"https://lg-cjdqwkbo-1256266248.cos.ap-shanghai.myqcloud.com/qmgo/index.html#/"
   }
 }

src/components/QRCodeFromText/QRCodeFromText.vue

@@ -0,0 +1,23 @@
+<template>
+  <div ref="domRef"></div>
+</template>
+<script setup>
+import QRCode from 'qrcodejs2'
+import { ref, watch } from 'vue'
+const domRef = ref(null)
+const props = defineProps({ size: Number, text: String })
+watch(domRef, nxt => {
+  if (nxt) {
+    nxt.innerHTML = ''
+    const { size, text } = props
+    new QRCode(nxt, {
+      width: size,
+      height: size,
+      text,
+      colorDark: '#000',
+      colorLight: '#fff'
+    })
+  }
+})
+</script>
+<style lang="scss" scoped></style>

src/views/Billboard/Billboard.vue

@@ -6,6 +6,12 @@
       <div class="r1">当前位置 <img src="./loc.png" alt="" /></div>
       <div class="r2">{{ bf }}</div>
       <div class="r3"></div>
+      <QRCodeFromText
+        v-if="currentFloor"
+        class="qrcode"
+        :size="100"
+        :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
+      ></QRCodeFromText>
     </div>
     <div class="list-container" ref="listRef">
       <div
@@ -53,6 +59,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { getBrandListByFormat } from '@/http/brand/api'
+import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
 
 const timeout = 30000
 const heights = { shop: 44, format: 49, placeholder: 40 }
@@ -61,7 +68,7 @@ const store = useStore()
 const router = useRouter()
 const shops = ref([])
 const listRef = ref(null)
-const { currentFloor, buildingList, currentFloorShopMap } = storeToRefs(store)
+const { currentFloor, buildingList, currentFloorShopMap, config } = storeToRefs(store)
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
 
 const scrollWidth = ref(0)
@@ -265,6 +272,18 @@ watch(scrollLefts, _scrollLefts => {
       height: 32px;
       background: center / cover no-repeat url(./meta.png);
     }
+    .qrcode {
+      display: flex;
+      position: absolute;
+      left: 314px;
+      top: 57px;
+      width: 120px;
+      height: 120px;
+      background: #ffffff;
+      border-radius: 12px;
+      justify-content: center;
+      align-items: center;
+    }
   }
   .list-container {
     overflow-x: scroll;