ocr
This commit is contained in:
		
							parent
							
								
									8694a607ff
								
							
						
					
					
						commit
						81d89ca6e7
					
				| 
						 | 
				
			
			@ -77,6 +77,9 @@
 | 
			
		|||
    </view>
 | 
			
		||||
    <!-- 相机预览页面 -->
 | 
			
		||||
    <view v-if="showCamera" class="camera-container">
 | 
			
		||||
      <!-- 相机预览容器 -->
 | 
			
		||||
      <view class="camera-preview-container" id="cameraPreview"></view>
 | 
			
		||||
 | 
			
		||||
      <!-- 顶部提示 -->
 | 
			
		||||
      <view class="top-tip">
 | 
			
		||||
        <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
			
		||||
| 
						 | 
				
			
			@ -254,47 +257,6 @@ export default {
 | 
			
		|||
      return null;
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 检查相机权限 - 改进版本
 | 
			
		||||
    async checkCameraPermission() {
 | 
			
		||||
      return new Promise((resolve) => {
 | 
			
		||||
        // 检查权限插件是否可用
 | 
			
		||||
        const permissions = window.cordova?.plugins?.permissions;
 | 
			
		||||
 | 
			
		||||
        if (!permissions) {
 | 
			
		||||
          console.warn('权限插件不可用,跳过权限检查');
 | 
			
		||||
          resolve(true);
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        permissions.checkPermission(
 | 
			
		||||
            permissions.CAMERA,
 | 
			
		||||
            (status) => {
 | 
			
		||||
              if (status.hasPermission) {
 | 
			
		||||
                console.log('相机权限已授予');
 | 
			
		||||
                resolve(true);
 | 
			
		||||
              } else {
 | 
			
		||||
                console.log('请求相机权限...');
 | 
			
		||||
                permissions.requestPermission(
 | 
			
		||||
                    permissions.CAMERA,
 | 
			
		||||
                    (status) => {
 | 
			
		||||
                      console.log('权限请求结果:', status.hasPermission);
 | 
			
		||||
                      resolve(status.hasPermission);
 | 
			
		||||
                    },
 | 
			
		||||
                    (error) => {
 | 
			
		||||
                      console.error('请求权限失败:', error);
 | 
			
		||||
                      resolve(false);
 | 
			
		||||
                    }
 | 
			
		||||
                );
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
            (error) => {
 | 
			
		||||
              console.error('检查权限失败:', error);
 | 
			
		||||
              resolve(true); // 权限检查失败时假设有权限
 | 
			
		||||
            }
 | 
			
		||||
        );
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 打开相机 - 改进版本
 | 
			
		||||
    async openCamera() {
 | 
			
		||||
      console.log('尝试打开相机...');
 | 
			
		||||
| 
						 | 
				
			
			@ -314,17 +276,6 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
 | 
			
		||||
      try {
 | 
			
		||||
        // 检查权限
 | 
			
		||||
        const hasPermission = await this.checkCameraPermission();
 | 
			
		||||
        if (!hasPermission) {
 | 
			
		||||
          uni.showToast({
 | 
			
		||||
            title: '需要相机权限才能使用此功能',
 | 
			
		||||
            icon: 'none',
 | 
			
		||||
            duration: 2000
 | 
			
		||||
          });
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        // 显示相机界面
 | 
			
		||||
        this.showCamera = true;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -348,46 +299,73 @@ export default {
 | 
			
		|||
    // 初始化相机 - 改进版本
 | 
			
		||||
    async initCamera() {
 | 
			
		||||
      return new Promise((resolve, reject) => {
 | 
			
		||||
        console.log('初始化相机预览...');
 | 
			
		||||
 | 
			
		||||
        const CameraPreview = this.getCameraPlugin();
 | 
			
		||||
        if (!CameraPreview) {
 | 
			
		||||
          reject(new Error('相机插件不可用'));
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        // 获取屏幕尺寸
 | 
			
		||||
        const screenWidth = uni.getSystemInfoSync().screenWidth;
 | 
			
		||||
        const screenHeight = uni.getSystemInfoSync().screenHeight;
 | 
			
		||||
        // 使用setTimeout确保DOM更新完成
 | 
			
		||||
        setTimeout(() => {
 | 
			
		||||
          const query = uni.createSelectorQuery().in(this);
 | 
			
		||||
          query.select('.camera-preview-container').boundingClientRect(data => {
 | 
			
		||||
            if (!data) {
 | 
			
		||||
              reject(new Error('无法获取相机容器尺寸'));
 | 
			
		||||
              return;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // 计算实际像素值(某些平台需要px而非rpx)
 | 
			
		||||
            const pixelRatio = uni.getSystemInfoSync().pixelRatio || 1;
 | 
			
		||||
            const width = data.width * pixelRatio;
 | 
			
		||||
            const height = data.height * pixelRatio;
 | 
			
		||||
 | 
			
		||||
            const options = {
 | 
			
		||||
          x: 0,
 | 
			
		||||
          y: 0,
 | 
			
		||||
          width: window.innerWidth || 375,
 | 
			
		||||
          height: window.innerHeight || 667,
 | 
			
		||||
              x: data.left,
 | 
			
		||||
              y: data.top,
 | 
			
		||||
              width: data.width,
 | 
			
		||||
              height: data.height,
 | 
			
		||||
              camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
 | 
			
		||||
              tapPhoto: false,
 | 
			
		||||
              previewDrag: false,
 | 
			
		||||
          toBack: false,  // 改为 false,让相机显示在前面
 | 
			
		||||
              toBack: true,
 | 
			
		||||
              alpha: 1,
 | 
			
		||||
              tapFocus: true
 | 
			
		||||
            };
 | 
			
		||||
 | 
			
		||||
            console.log('相机配置:', options);
 | 
			
		||||
 | 
			
		||||
            // 先停止已有相机(如果有)
 | 
			
		||||
            CameraPreview.stopCamera(() => {
 | 
			
		||||
              // 启动新相机
 | 
			
		||||
              CameraPreview.startCamera(
 | 
			
		||||
                  options,
 | 
			
		||||
            (result) => {
 | 
			
		||||
              console.log('相机启动成功:', result);
 | 
			
		||||
                  () => {
 | 
			
		||||
                    console.log('相机启动成功');
 | 
			
		||||
                    this.cameraStarted = true;
 | 
			
		||||
                    resolve();
 | 
			
		||||
                  },
 | 
			
		||||
                  (error) => {
 | 
			
		||||
                    console.error('相机启动失败:', error);
 | 
			
		||||
              this.cameraStarted = false;
 | 
			
		||||
              reject(new Error(`相机启动失败: ${error}`));
 | 
			
		||||
                    reject(new Error('相机启动失败'));
 | 
			
		||||
                  }
 | 
			
		||||
              );
 | 
			
		||||
            }, () => {
 | 
			
		||||
              // 即使停止失败也继续启动
 | 
			
		||||
              CameraPreview.startCamera(
 | 
			
		||||
                  options,
 | 
			
		||||
                  () => {
 | 
			
		||||
                    console.log('相机启动成功');
 | 
			
		||||
                    this.cameraStarted = true;
 | 
			
		||||
                    resolve();
 | 
			
		||||
                  },
 | 
			
		||||
                  (error) => {
 | 
			
		||||
                    console.error('相机启动失败:', error);
 | 
			
		||||
                    reject(new Error('相机启动失败'));
 | 
			
		||||
                  }
 | 
			
		||||
              );
 | 
			
		||||
            });
 | 
			
		||||
          }).exec();
 | 
			
		||||
        }, 300); // 适当延迟确保DOM更新
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -416,6 +394,10 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
 | 
			
		||||
      return new Promise((resolve) => {
 | 
			
		||||
        // 先隐藏相机预览
 | 
			
		||||
        CameraPreview.hideCamera(() => {
 | 
			
		||||
          console.log('相机已隐藏');
 | 
			
		||||
          // 然后停止相机
 | 
			
		||||
          CameraPreview.stopCamera(
 | 
			
		||||
              () => {
 | 
			
		||||
                console.log('相机已停止');
 | 
			
		||||
| 
						 | 
				
			
			@ -425,9 +407,25 @@ export default {
 | 
			
		|||
              (error) => {
 | 
			
		||||
                console.error('停止相机失败:', error);
 | 
			
		||||
                this.cameraStarted = false;
 | 
			
		||||
              resolve(); // 即使失败也继续
 | 
			
		||||
                resolve();
 | 
			
		||||
              }
 | 
			
		||||
          );
 | 
			
		||||
        }, (error) => {
 | 
			
		||||
          console.error('隐藏相机失败:', error);
 | 
			
		||||
          // 即使隐藏失败也继续停止
 | 
			
		||||
          CameraPreview.stopCamera(
 | 
			
		||||
              () => {
 | 
			
		||||
                console.log('相机已停止');
 | 
			
		||||
                this.cameraStarted = false;
 | 
			
		||||
                resolve();
 | 
			
		||||
              },
 | 
			
		||||
              (error) => {
 | 
			
		||||
                console.error('停止相机失败:', error);
 | 
			
		||||
                this.cameraStarted = false;
 | 
			
		||||
                resolve();
 | 
			
		||||
              }
 | 
			
		||||
          );
 | 
			
		||||
        });
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -662,6 +660,19 @@ export default {
 | 
			
		|||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
.camera-preview-container {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  z-index: 1; /* 低于其他UI元素 */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 确保其他UI元素的z-index高于相机预览 */
 | 
			
		||||
.top-tip, .viewfinder-container, .bottom-controls {
 | 
			
		||||
  z-index: 10;
 | 
			
		||||
}
 | 
			
		||||
.page-container {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  height: auto;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue