feat: 扫码功能

src/pages/scan/index.vue

@@ -1,56 +1,49 @@
 <script setup>
+import {Html5QrcodeScanner, Html5Qrcode, Html5QrcodeSupportedFormats, Html5QrcodeScanType} from 'html5-qrcode'
+
+const router = useRouter()
 definePageMeta({
   layout: 'scan'
 })
 
-import {Html5Qrcode, Html5QrcodeSupportedFormats} from "html5-qrcode";
-
-const router = useRouter()
-
-const emit = defineEmits('oSuccess', 'onError')
-
 let scanInstance = null; // 扫码实例
 let results = ref(null); // 扫码结果
-
+const formatsToSupport = [
+  Html5QrcodeSupportedFormats.QR_CODE,
+  Html5QrcodeSupportedFormats.UPC_A,
+  Html5QrcodeSupportedFormats.UPC_E,
+  Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
+];
 const initScanInstance = () => {
   if (!scanInstance) {
     // reader放置扫码功能的元素ID
-    scanInstance = new Html5Qrcode('qr-reader', {
-      formatsToSupport: [
-        Html5QrcodeSupportedFormats.QR_CODE,
-      ],
-    })
+    scanInstance = new Html5Qrcode('qr-reader')
   }
 }
 const openQrcode = async () => {
   Html5Qrcode.getCameras()
       .then(devices => {
+        initScanInstance()
+        const config = {
+          fps: 10, //  二维码扫描每秒帧数
+          qrbox: { // UI框的大小
+            width: 250,
+            height: 250,
+          },
+          aspectRatio: window.visualViewport.height / window.visualViewport.width,
+        }
         if (devices && devices.length) {// 当前环境下能识别出摄像头，并且摄像头的数据可能不止一个
-          initScanInstance()
-          scanInstance.start(
-              {facingMode: "environment"},
-              {
-                focusMode: 'continuous',
-                fps: 1, // 可选，每n秒帧扫描一次
-                qrbox: { // 扫描的UI框
-                  width: 250,
-                  height: 250
-                },
-                videoConstraints: {
-                  // width: 375,
-                  // height: (window.visualViewport.height - 50),
-                  aspectRatio: window.visualViewport.height / window.visualViewport.width,
-                  facingMode: "environment",
-                }
-              },
-              (decodedText, decodedResult) => {
-                showToast('识别成功')
-                handleSuccess({decodedText, decodedResult})
-              },
-              (errorMessage, error) => {
-                closeQrcode(errorMessage)
-              }
-          )
+          let cameraId = devices[devices.length - 1].id //后置摄像头，一般最后一个是后置摄像头
+          scanInstance
+              .start({deviceId: {exact: cameraId}}, config, handleSuccess)
+              .catch((errorMessage) => {
+                handleFail(errorMessage)
+              })
+        } else {
+          scanInstance.start({facingMode: "environment"}, config, handleSuccess)
+              .catch((errorMessage) => {
+                handleFail(errorMessage)
+              })
         }
       })
       .catch((err) => {
@@ -75,9 +68,10 @@ const openQrcode = async () => {
         showToast(errorStr)
       })
 }
-const scanLoadImg = (e) => {
+const scanLoadImg = async (e) => {
   try {
     initScanInstance()
+    await stopScan()
     scanInstance.scanFile(e.file, false)
         .then(result => {
           // 二维码结果
@@ -85,7 +79,7 @@ const scanLoadImg = (e) => {
           handleSuccess(result)
         })
         .catch(err => {
-          console.error(err, '上传扫码失败')
+          handleFail(err)
         })
   } catch (e) {
     console.error(e, '失败')
@@ -131,27 +125,42 @@ const handleSuccess = (result) => {
   })
 }
 
-const closeQrcode = () => {
-  if (scanInstance && scanInstance.isScanning) scanInstance.stop()
+const handleFail = (err) => {
+  router.replace({
+    path: '/chat/qr-results',
+    query: {success: false, groupId: null, overTime: false}
+  })
+}
+
+const stopScan = async () => {
+  return new Promise((resolve, reject) => {
+    if (scanInstance && scanInstance.isScanning) {
+      scanInstance.stop().finally(() => {
+        resolve()
+      })
+    } else {
+      resolve()
+    }
+  })
+}
+const closeQrcode = async () => {
+  await stopScan()
   router.back()
 }
 
 onMounted(async () => {
-  initScanInstance()
   await nextTick()
+  initScanInstance()
   await openQrcode()
 })
 onUnmounted(() => {
-  if (scanInstance && scanInstance.isScanning) scanInstance.stop()
+  stopScan()
 })
 
 </script>
 
 <template>
   <div>
-    <div v-if="false" class="h-200">
-      {{ results }}
-    </div>
     <div class="overlay">
       <div class="absolute w-full z-30 flex flex-row items-center justify-center p-12">
         <div class="absolute left-12 font-bold" @click="closeQrcode">
@@ -163,8 +172,8 @@ onUnmounted(() => {
       </div>
       <div class="relative qr-reader z-20" id="qr-reader"></div>
       <p class="absolute w-full p-12 text-center bottom-100 z-30 text-sm text-[#fff]">请将二维码对准扫码框中心</p>
-      <div id="qr-code-file"
-           class="absolute w-54 h-54 grid place-items-center bottom-40 z-30 rounded-full bg-[#000]/80 text-white left-1/2 -translate-x-1/2">
+      <div
+          class="absolute w-54 h-54 grid place-items-center bottom-40 z-30 rounded-full bg-[#000]/80 text-white left-1/2 -translate-x-1/2">
         <van-uploader
             :preview-image="false"
             :after-read="scanLoadImg"