Merge branch 'fanghuisheng' of uskycloud/usky-web-mobile into master

package.json

@@ -55,6 +55,7 @@
     "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020320240703001",
     "@microsoft/fetch-event-source": "^2.0.1",
     "echarts": "^5.3.3",
+    "html5-qrcode": "^2.3.8",
     "jsencrypt": "^3.3.2",
     "pinia": "2.0.14",
     "pinia-plugin-persistedstate": "^3.1.0",

src/components/oa-scan/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <view class="scan-page" :data-theme="'theme-' + (proxy.$settingStore.themeColor?.name || 'rf')">
+    <u-navbar
+      title="扫一扫"
+      :autoBack="true"
+      :placeholder="true"
+      :safeAreaInsetTop="true"
+      :bgColor="proxy.$settingStore.themeColor?.color || '#149eff'"
+      :titleStyle="{ color: '#fff' }"
+    >
+      <template #left>
+        <view class="u-navbar__content__left__item">
+          <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
+        </view>
+      </template>
+    </u-navbar>
+
+    <!-- #ifdef H5 -->
+    <view class="scan-body">
+      <view id="reader" class="reader"></view>
+      <view class="tip">将二维码放入框内</view>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, onUnmounted } from "vue";
+import { onShow, onUnload } from "@dcloudio/uni-app";
+// #ifdef H5
+import { Html5Qrcode } from "html5-qrcode";
+import { finishScanSuccess, finishScanFail, cancelScan } from "@/utils/oaScanCode.js";
+// #endif
+
+const { proxy } = getCurrentInstance();
+
+onShow(() => {
+  proxy.$settingStore.systemThemeColor([1]);
+});
+
+// #ifdef H5
+let scanner = null;
+let handled = false;
+
+function deliverResult(result) {
+  if (handled) return;
+  handled = true;
+  finishScanSuccess(result);
+}
+
+async function startScan() {
+  try {
+    scanner = new Html5Qrcode("reader");
+    await scanner.start(
+      { facingMode: "environment" },
+      {
+        fps: 10,
+        qrbox: { width: 250, height: 250 },
+      },
+      (decodedText) => {
+        scanner
+          ?.stop()
+          .then(() => {
+            scanner?.clear();
+            scanner = null;
+            deliverResult(decodedText);
+          })
+          .catch(() => {
+            deliverResult(decodedText);
+          });
+      },
+      () => {}
+    );
+  } catch (e) {
+    uni.showToast({ title: "摄像头权限被拒", icon: "none" });
+    finishScanFail(e);
+  }
+}
+
+onMounted(() => {
+  startScan();
+});
+
+onUnload(() => {
+  cancelScan();
+});
+
+onUnmounted(() => {
+  if (scanner) {
+    scanner.stop().catch(() => {});
+    scanner.clear();
+    scanner = null;
+  }
+});
+// #endif
+</script>
+
+<style lang="scss" scoped>
+.scan-page {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: #000;
+}
+
+.scan-body {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.reader {
+  width: 100%;
+  height: 100%;
+
+  :deep(video) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+
+  :deep(#qr-shaded-region) {
+    border-width: 0 !important;
+  }
+}
+
+.tip {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50% + 137px);
+  z-index: 2;
+  text-align: center;
+  font-size: 28rpx;
+  line-height: 1.5;
+  color: #fff;
+  pointer-events: none;
+  text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.45);
+  animation: tip-breathe 2.2s ease-in-out infinite;
+}
+
+@keyframes tip-breathe {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.85;
+  }
+}
+</style>

src/pages.json

@@ -19,6 +19,14 @@
                 "navigationBarTextStyle": "black"
             }
         },
+        {
+            "path": "components/oa-scan/index",
+            "style": {
+                "navigationBarTitleText": "扫一扫",
+                "navigationStyle": "custom",
+                "enablePullDownRefresh": false
+            }
+        },
         {
             "path": "pages/register",
             "style": {

src/pages/business/meeting/index.vue

@@ -137,6 +137,7 @@ import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarBut
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
 /*----------------------------------接口引入-----------------------------------*/
 import { MeetingRoomList, MeetingRoomReservationList, deviceApi, signOnOut } from "@/api/business/meeting.js";
+import { oaScanCode } from "@/utils/oaScanCode.js";
 /*----------------------------------组件引入-----------------------------------*/
 import timeSlot from "./components/timeSlot.vue";
 import switchSlot from "./components/switchSlot.vue";
@@ -314,10 +315,9 @@ function changeSheet(e) {
   } else if (e.name == "我的会议") {
     proxy.$tab.navigateTo(`/pages/business/meeting/my/index`).then(() => {});
   } else if (e.name == "扫一扫") {
-    uni.scanCode({
+    oaScanCode({
       autoZoom: false,
       scanType: ["qrCode"],
-      // onlyFromCamera: true,
       success: (res) => {
         if (res.result == "会议空闲中") {
           proxy.$modal.msg("当前无可参加的会议！");

src/utils/oaScanCode.js

@@ -0,0 +1,58 @@
+/**
+ * 与 uni.scanCode 参数一致；H5 跳转摄像头扫码页，其它端走原生 uni.scanCode
+ */
+
+let pending = null;
+
+export function oaScanCode(options = {}) {
+  // #ifdef H5
+  pending = options;
+  uni.navigateTo({
+    url: "/components/oa-scan/index",
+    fail: (err) => {
+      finishScanFail(err);
+    },
+  });
+  return;
+  // #endif
+
+  // #ifndef H5
+  uni.scanCode(options);
+  // #endif
+}
+
+/** 扫码页成功时调用 */
+export function finishScanSuccess(result) {
+  const opts = pending;
+  pending = null;
+  const run = () => {
+    opts?.success?.({ result });
+    opts?.complete?.();
+  };
+  uni.navigateBack({
+    success: run,
+    fail: run,
+  });
+}
+
+/** 扫码页失败时调用 */
+export function finishScanFail(err) {
+  const opts = pending;
+  pending = null;
+  const run = () => {
+    opts?.fail?.(err);
+    opts?.complete?.();
+  };
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack({ complete: run });
+  } else {
+    run();
+  }
+}
+
+/** 用户返回未扫码 */
+export function cancelScan() {
+  if (!pending) return;
+  finishScanFail({ errMsg: "scanCode:fail cancel" });
+}