问题修改

src/pages/devicesSearch/OcrCamera.vue

@@ -79,14 +79,14 @@ export default {
         return;
       }
 
-      document.addEventListener('deviceready', () => {
+      // document.addEventListener('deviceready', () => {
-        if (cordova.plugins && cordova.plugins.camerapreview) {
+      //   if (cordova.plugins && cordova.plugins.camerapreview) {
-          window.CameraPreview = cordova.plugins.camerapreview;
+      //     window.CameraPreview = cordova.plugins.camerapreview;
           this.startCamera();
-        } else {
+      //   } else {
-          console.error('CameraPreview插件未加载');
+      //     console.error('CameraPreview插件未加载');
-        }
+      //   }
-      }, false);
+      // }, false);
     },
 
     // 启动相机预览

src/pages/devicesSearch/camera.vue

@@ -21,7 +21,7 @@ export default {
   methods: {
     // 打开相机
     openCamera() {
-      this.$cordova.plugins.cameraPreview.startCamera({
+      window.CameraPreview.startCamera({
         x: 0,
         y: 0,
         width: window.screen.width,

src/pages/devicesSearch/ocrSearch2.vue

@@ -76,10 +76,16 @@
       </view>
     </view>
 
+    <!-- 相机预览页面 - 修改为固定全屏 -->
     <!-- 相机预览页面 -->
-    <view v-if="showCamera" class="camera-container">
+    <view v-if="showCamera" class="camera-wrapper">
-      <!-- 底部控制区 -->
+      <!-- 相机预览容器 - 单独放置 -->
-      <view class="bottom-controls">
+      <view class="camera-preview-container"></view>
+
+      <!-- UI控制层 - 独立于相机预览 -->
+      <view class="camera-ui-layer">
+        <!-- 底部控制区 -->
+        <view class="bottom-controls">
         <view class="control-btn" @click="closeCamera">
           <text class="control-icon">✕</text>
         </view>
@@ -99,12 +105,7 @@
         </view>
       </view>
     </view>
-
+  </view>
-    <!-- 隐藏的canvas用于图片处理 -->
-    <canvas
-        canvas-id="imageCanvas"
-        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
-    ></canvas>
   </view>
 </template>
 
@@ -163,25 +164,6 @@ export default {
       }
     },
 
-    // 设置全屏模式（仅Android）
-    setFullscreenMode(enable) {
-      try {
-        // #ifdef APP-PLUS
-        if (this.systemInfo && this.systemInfo.platform === 'android') {
-          if (enable) {
-            // 隐藏状态栏和导航栏
-            plus.navigator.setFullscreen(true);
-          } else {
-            // 恢复状态栏和导航栏
-            plus.navigator.setFullscreen(false);
-          }
-        }
-        // #endif
-      } catch (error) {
-        console.error('设置全屏模式失败:', error);
-      }
-    },
-
     // 初始化Cordova - 改进版本
     initializeCordova() {
       console.log('开始初始化Cordova...');
@@ -259,10 +241,7 @@ export default {
     getCameraPlugin() {
       // 按照插件注册的实际路径检查
       const possiblePaths = [
-        () => window.CameraPreview,  // 全局注册的路径
+        () => window.CameraPreview  // 全局注册的路径
-        () => window.cordova?.plugins?.CameraPreview,
-        () => window.plugins?.CameraPreview,
-        () => cordova?.plugins?.CameraPreview
       ];
       for (let getPlugin of possiblePaths) {
         try {
@@ -311,59 +290,45 @@ export default {
       }
     },
 
-    // 初始化相机 - 改进版本，添加聚焦支持
+    // 初始化相机 - 关键修改
+    // 初始化相机 - 调整坐标计算
     async initCamera() {
       return new Promise((resolve, reject) => {
-        console.log('初始化相机预览...');
         const CameraPreview = this.getCameraPlugin();
         if (!CameraPreview) {
           reject(new Error('相机插件不可用'));
           return;
         }
 
-        // 获取屏幕尺寸和状态栏高度
+        // 获取整个相机包装器的尺寸
-        const systemInfo = this.systemInfo || uni.getSystemInfoSync();
+        const cameraWrapper = document.querySelector('.camera-wrapper');
-        const screenWidth = systemInfo.screenWidth;
+        if (!cameraWrapper) {
-        const screenHeight = systemInfo.screenHeight;
+          reject(new Error('找不到相机容器'));
-        const statusBarHeight = systemInfo.statusBarHeight || 0;
+          return;
-
+        }
-        // 相机预览配置 - 始终使用全屏背景模式
-        let cameraY = 0;
-        let cameraHeight = screenHeight;
-        let toBack = true; // 设置为背景层，让UI元素显示在上方
-
-        console.log('屏幕信息:', {
-          platform: systemInfo.platform,
-          screenWidth,
-          screenHeight,
-          statusBarHeight,
-          cameraY,
-          cameraHeight,
-          toBack
-        });
 
+        const rect = cameraWrapper.getBoundingClientRect();
         const options = {
-          x: 0,
+          x: rect.left,
-          y: cameraY,
+          y: rect.top,
-          width: screenWidth,
+          width: rect.width,
-          height: cameraHeight,
+          height: rect.height,
           camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
           tapPhoto: false,
           previewDrag: false,
-          toBack: toBack,  // 根据平台动态设置
+          toBack: false,  // 确保相机在WebView上层
           alpha: 1,
-          tapFocus: true,  // 启用点击聚焦
+          tapFocus: true,
           disableExifHeaderStripping: false
         };
 
         console.log('相机配置:', options);
+
         CameraPreview.startCamera(
             options,
             (result) => {
               console.log('相机启动成功:', result);
               this.cameraStarted = true;
-              // 启动后进行一次自动聚焦
-              this.performAutoFocus();
               resolve();
             },
             (error) => {
@@ -375,153 +340,27 @@ export default {
       });
     },
 
-    // 执行自动聚焦
+    // 处理覆盖层点击事件
-    async performAutoFocus() {
+    handleOverlayClick(event) {
-      if (!this.cameraStarted || !this.autoFocusEnabled) {
+      // 计算点击位置相对于相机的坐标
-        return;
+      const rect = event.currentTarget.getBoundingClientRect();
-      }
+      const x = event.touches[0].clientX - rect.left;
+      const y = event.touches[0].clientY - rect.top;
 
-      const CameraPreview = this.getCameraPlugin();
+      // 调用聚焦功能
-      if (!CameraPreview || typeof CameraPreview.setFocus !== 'function') {
+      this.tapToFocus(x, y);
-        console.log('相机插件不支持聚焦功能');
-        return;
-      }
-
-      try {
-        this.isFocusing = true;
-        this.focusSuccess = false;
-
-        // 清除之前的聚焦超时
-        if (this.focusTimeout) {
-          clearTimeout(this.focusTimeout);
-        }
-
-        console.log('开始自动聚焦...');
-
-        await new Promise((resolve, reject)=> {
-          // 设置聚焦超时
-          this.focusTimeout = setTimeout(() => {
-            console.log('聚焦超时');
-            this.isFocusing = false;
-            resolve();
-          }, 3000);
-
-          CameraPreview.setFocus(
-              (result) => {
-                console.log('自动聚焦成功:', result);
-                if (this.focusTimeout) {
-                  clearTimeout(this.focusTimeout);
-                  this.focusTimeout = null;
-                }
-                this.isFocusing = false;
-                this.focusSuccess = true;
-                // 显示聚焦成功状态一段时间
-                setTimeout(() => {
-                  this.focusSuccess = false;
-                }, 1000);
-                resolve();
-              },
-              (error) => {
-                console.error('自动聚焦失败:', error);
-                if (this.focusTimeout) {
-                  clearTimeout(this.focusTimeout);
-                  this.focusTimeout = null;
-                }
-                this.isFocusing = false;
-                resolve(); // 即使聚焦失败也继续
-              }
-          );
-        });
-      } catch (error) {
-        console.error('聚焦过程出错:', error);
-        this.isFocusing = false;
-      }
     },
 
-    // 处理点击聚焦
+    // 点击聚焦
-    async handleTapToFocus(event) {
+    tapToFocus(x, y) {
-      if (!this.cameraStarted || this.isFocusing) {
-        return;
-      }
-
       const CameraPreview = this.getCameraPlugin();
-      if (!CameraPreview || typeof CameraPreview.tapToFocus !== 'function') {
+      if (CameraPreview && this.cameraStarted) {
-        console.log('相机插件不支持点击聚焦功能');
+        CameraPreview.tapToFocus(
-        return;
+            x,
-      }
+            y,
-
+            () => console.log('聚焦成功'),
-      try {
+            (error) => console.error('聚焦失败', error)
-        // 获取点击位置
+        );
-        const rect = event.currentTarget.getBoundingClientRect();
-        const x = event.detail.x - rect.left;
-        const y = event.detail.y - rect.top;
-
-        // 转换为相对坐标 (0-1)
-        const relativeX = x / rect.width;
-        const relativeY = y / rect.height;
-
-        console.log('点击聚焦位置:', { x: relativeX, y: relativeY });
-
-        // 显示聚焦指示器
-        this.showFocusIndicator = true;
-        this.focusIndicatorStyle = {
-          left: `${x - 30}rpx`,
-          top: `${y - 30}rpx`
-        };
-
-        this.isFocusing = true;
-        this.focusSuccess = false;
-
-        // 清除之前的聚焦超时
-        if (this.focusTimeout) {
-          clearTimeout(this.focusTimeout);
-        }
-
-        await new Promise((resolve, reject)=> {
-              // 设置聚焦超时
-              this.focusTimeout = setTimeout(() => {
-                console.log('点击聚焦超时');
-                this.isFocusing = false;
-                this.showFocusIndicator = false;
-                resolve();
-              }, 3000);
-
-              CameraPreview.tapToFocus(
-                  relativeX,
-                  relativeY,
-                  (result) => {
-                    console.log('点击聚焦成功:', result);
-                    if (this.focusTimeout) {
-                      clearTimeout(this.focusTimeout);
-                      this.focusTimeout = null;
-                    }
-                    this.isFocusing = false;
-                    this.focusSuccess = true;
-                    // 显示聚焦成功状态
-                    setTimeout(() => {
-                      this.focusSuccess = false;
-                      this.showFocusIndicator = false;
-                    }, 1000);
-                    resolve();
-                  },
-                  (error) => {
-                    console.error('点击聚焦失败:', error);
-                    if (this.focusTimeout) {
-                      clearTimeout(this.focusTimeout);
-                      this.focusTimeout = null;
-                    }
-                    this.isFocusing = false;
-                    this.showFocusIndicator = false;
-                    resolve(); // 即使聚焦失败也继续
-                  }
-              );
-            }
-        )
-        ;
-      } catch (error) {
-        console.error('点击聚焦过程出错:', error);
-        this.isFocusing = false;
-        this.showFocusIndicator = false;
       }
     },
 
@@ -900,6 +739,15 @@ export default {
     // 清理资源
     cleanup() {
       console.log('清理资源...');
+      if (this.cameraStarted) {
+        const CameraPreview = this.getCameraPlugin();
+        if (CameraPreview) {
+          CameraPreview.setOnView(null); // 解除元素绑定
+          CameraPreview.stopCamera();
+        }
+        this.cameraStarted = false;
+      }
+
       // 清除超时
       if (this.deviceReadyTimeout) {
         clearTimeout(this.deviceReadyTimeout);
@@ -923,6 +771,37 @@ export default {
 </script>
 
 <style>
+/* 新增相机包装器样式 */
+.camera-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000; /* 基础层级 */
+}
+
+/* 相机预览容器 - 无内容，仅用于定位 */
+.camera-preview-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1; /* 较低层级 */
+}
+
+/* UI控制层 - 显示在相机之上 */
+.camera-ui-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2; /* 高于相机预览 */
+  pointer-events: none; /* 允许点击穿透到相机 */
+}
+
 .page-container {
   display: flex;
   height: auto;
@@ -964,27 +843,43 @@ export default {
 
 /* 相机预览样式 */
 .camera-container {
-  position: fixed;
+  position: relative;
-  top: 0;
+  width: 100%;
-  left: 0;
+  height: 70vh; /* 增加高度 */
-  width: 100vw;
+  background-color: #000;
-  height: 100vh;
+  overflow: hidden;
-  background-color: #000000;
+  z-index: 1000; /* 确保在H5层级中 */
-  z-index: 100000; /* 增加相机预览层级 */
 }
 
-/* 控制区 */
+.camera-preview {
-.bottom-controls {
   position: absolute;
-  bottom: 100rpx;
+  top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
-  display: flex;
+  height: 100%;
-  flex-direction: row;
+  z-index: 1; /* 相机预览在底层 */
-  justify-content: space-between;
+}
-  align-items: center;
+
-  padding: 0 100rpx;
+/* 透明覆盖层 - 关键 */
-  z-index: 100001; /* 底部控制按钮层级 */
+.camera-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2; /* 覆盖层在上层 */
+  pointer-events: auto; /* 捕获点击事件 */
+}
+
+/* 控制按钮区域 - 需要单独设置可点击 */
+.bottom-controls {
+  /* 原有样式保持不变 */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3; /* 控制按钮在最高层 */
+  pointer-events: auto; /* 启用点击事件 */
 }
 
 .control-btn {
@@ -1042,17 +937,15 @@ export default {
   background-color: #ccc;
 }
 
+/* 加载层 */
 .loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 100; /* 加载层在最高层 */
-  display: flex;
+  pointer-events: auto; /* 阻止底层交互 */
-  justify-content: center;
-  align-items: center;
-  z-index: 10003; /* 加载层级最高 */
 }
 
 .loading-content {