From 529f04c5911ed21f000d74776d59bbc8c641797f Mon Sep 17 00:00:00 2001
From: hayu <1604366271@qq.com>
Date: Sat, 23 Aug 2025 19:47:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/standardBox/codeList.vue | 738 ++++++++++++++++++++++++++++-
 1 file changed, 727 insertions(+), 11 deletions(-)

diff --git a/src/pages/standardBox/codeList.vue b/src/pages/standardBox/codeList.vue
index eeecb5b..a3dc129 100644
--- a/src/pages/standardBox/codeList.vue
+++ b/src/pages/standardBox/codeList.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="accept page-common">
         <uni-row :gutter="24" class="search-form">
-            <uni-col :span="16">
+            <uni-col :span="14">
                 <view><uni-easyinput placeholder="请输入内容" v-model="searchValue"/></view>
             </uni-col>
             <uni-col :span="4">
@@ -9,7 +9,10 @@
             </uni-col>
             <uni-col :span="4">
                 <view class="addBtn" @click="scanStart">扫码</view>
-            </uni-col> 
+            </uni-col>
+          <uni-col :span="4">
+            <view class="addBtn" @click="openCamera">OCR</view>
+          </uni-col>
         </uni-row> 
         <div class="card" style="margin-top: 10px;"> 
             <uni-forms :model="boxInfo" label-width="200rpx" :border="true">
@@ -98,15 +101,54 @@
 			</view>
 		</uni-popup>
     </view>
+
+  <!-- 相机预览页面 -->
+  <view v-if="showCamera" class="camera-container">
+    <!-- 顶部提示 -->
+    <view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
+      <text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
+    </view>
+    <!-- 取景框 -->
+    <view class="viewfinder-container">
+    </view>
+
+    <!-- 底部控制区 -->
+    <view class="bottom-controls">
+      <view class="control-btn" @click="closeCamera">
+        <text class="control-icon">✕</text>
+      </view>
+      <view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
+        <view class="photo-btn-inner"></view>
+      </view>
+      <view class="control-btn" @click="openGallery">
+        <text class="control-icon">📷</text>
+      </view>
+    </view>
+
+    <!-- 加载提示 -->
+    <view v-if="isProcessing" class="loading-overlay">
+      <view class="loading-content">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">正在识别中...</text>
+      </view>
+    </view>
+  </view>
+  <view class="custom-toast"
+        :class="{'show': isShow, 'top': position === 'top', 'bottom': position === 'bottom'}"
+        ref="toast">
+    {{ message }}
+  </view>
+
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { onLoad,onShow } from '@dcloudio/uni-app'   
+import {onHide, onLoad, onShow, onBackPress} from '@dcloudio/uni-app'
 import { getAppBoxDetailListApi,appBindMaCodeApi,appUnbindMaCodeApi,getTransferKeepsListApi,appTransferApi } from '../../services/standard.js';
 import { getMaCodeByQrCodeApi } from '@/services/index.js';
 import { baseURL } from '@/utils/http'
 import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
+import {decryptWithSM4} from "../../utils/sm";
 const scanQrCodeRef = ref(null)
 const keeperPopup = ref(null);
 const searchValue = ref('') 
@@ -115,7 +157,24 @@ const codeList = ref([])
 const keeperList = ref([])    
 const transferUser = ref("")    
 const imgBeseUrl = ref("")    
-const bmFileInfos = ref([])//请求图片参数 
+const bmFileInfos = ref([])//请求图片参数
+
+// 相机相关状态
+const showCamera = ref(false)
+const isTaking = ref(false)
+const isProcessing = ref(false)
+const cameraStarted = ref(false)
+const isFocusing = ref(false)
+const cameraReady = ref(false)
+const isShow = ref(false)
+const message = ref('')
+const position = ref('bottom')
+const deviceReadyTimeout = ref(null)
+const pluginCheckRetries = ref(0)
+const maxRetries = ref(5)
+const focusTimeout = ref(null)
+const systemInfo = ref(null)
+
 const getCodeList = () => {
     console.log(boxInfo.value)
     let param = {
@@ -181,7 +240,7 @@ const handleScanSuccess = (result) => {
     } else {
         // 原代码中 split 处理逻辑
         const actualQrCode = qrCode.split("qrcode=")[1] || qrCode;
-        bindMa(actualQrCode)  
+        bindMa(actualQrCode,1)
     }
 }
 
@@ -191,13 +250,486 @@ const handleScanError = (error) => {
     uni.showToast({ title: error.message, icon: 'none' })
 }
 
-//绑定接口
-const bindMa = (qrCode) => {
-    console.log(qrCode) 
-    let param = {
-        "qrCode":qrCode,
-        "boxId":boxInfo.value.boxId, 
+// 相机相关方法
+const showToast = (message, position = 'top', duration = 2000) => {
+  message.value = message
+  position.value = position
+  isShow.value = true
+  setTimeout(() => {
+    isShow.value = false
+  }, duration)
+}
+
+// 初始化Cordova - 改进版本
+const initializeCordova = () => {
+  console.log('开始初始化Cordova...');
+  pluginCheckRetries.value = 0;
+  // 清除之前的超时
+  if (deviceReadyTimeout.value) {
+    clearTimeout(deviceReadyTimeout.value);
+  }
+  // 如果Cordova已经准备好，直接检查插件
+  if (isCordovaReady()) {
+    onDeviceReady();
+    return;
+  }
+  // 监听deviceready事件
+  document.addEventListener('deviceready', onDeviceReady, false);
+  // 设置超时，防止无限等待
+  deviceReadyTimeout.value = setTimeout(() => {
+    console.warn('Cordova初始化超时，尝试直接检查插件');
+    checkCameraPlugin();
+  }, 5000);
+}
+
+// 检查Cordova是否准备好
+const isCordovaReady = () => {
+  return !!(window.cordova && (
+      document.readyState === 'complete' ||
+      window.cordova.platformId
+  ));
+}
+
+// 设备准备就绪
+const onDeviceReady = () => {
+  console.log('Cordova设备准备就绪');
+  document.removeEventListener('deviceready', onDeviceReady);
+  checkCameraPlugin();
+}
+
+// 检查相机插件 - 改进版本
+const checkCameraPlugin = () => {
+  console.log(`检查相机插件... (尝试 ${pluginCheckRetries.value + 1}/${maxRetries.value})`);
+  // 按优先级检查插件可用性
+  const pluginAvailable = getCameraPlugin();
+  if (pluginAvailable) {
+    console.log('相机插件可用:', pluginAvailable);
+    cameraReady.value = true;
+    return;
+  }
+  pluginCheckRetries.value++;
+  if (pluginCheckRetries.value < maxRetries.value) {
+    // 递增延迟重试
+    const delay = Math.min(1000 * pluginCheckRetries.value, 5000);
+    console.log(`插件未就绪，${delay}ms后重试...`);
+    setTimeout(() => {
+      checkCameraPlugin();
+    }, delay);
+  } else {
+    console.error('相机插件检查失败，已达到最大重试次数');
+    cameraReady.value = false;
+    uni.showToast({
+      title: '相机插件初始化失败',
+      icon: 'none',
+      duration: 3000
+    });
+  }
+}
+
+// 获取相机插件引用
+const getCameraPlugin = () => {
+  const possiblePaths = [
+    () => window.CameraPreview
+  ];
+  for (let getPlugin of possiblePaths) {
+    try {
+      const plugin = getPlugin();
+      if (plugin && typeof plugin.startCamera === 'function') {
+        console.log('找到相机插件:', plugin);
+        return plugin;
+      }
+    } catch (e) {
+      // 忽略访问错误
     }
+  }
+  return null;
+}
+
+// 获取设备信息
+const getDeviceInfo = () => {
+  try {
+    const systemInfoData = uni.getSystemInfoSync();
+    console.log('设备信息:', systemInfoData);
+    systemInfo.value = systemInfoData;
+  } catch (error) {
+    console.error('获取设备信息失败:', error);
+  }
+}
+
+// 清理资源
+const cleanup = () => {
+  console.log('清理资源...');
+  if (cameraStarted.value) {
+    const CameraPreview = getCameraPlugin();
+    if (CameraPreview) {
+      CameraPreview.stopCamera();
+    }
+    cameraStarted.value = false;
+  }
+
+  // 清除超时
+  if (deviceReadyTimeout.value) {
+    clearTimeout(deviceReadyTimeout.value);
+    deviceReadyTimeout.value = null;
+  }
+  if (focusTimeout.value) {
+    clearTimeout(focusTimeout.value);
+    focusTimeout.value = null;
+  }
+  // 移除事件监听
+  document.removeEventListener('deviceready', onDeviceReady);
+  // 停止相机
+  if (cameraStarted.value) {
+    stopCamera().catch(console.error);
+  }
+}
+
+// 初始化相机 - 关键方法
+const initCamera = async () => {
+  return new Promise((resolve, reject) => {
+    const CameraPreview = getCameraPlugin();
+    if (!CameraPreview) {
+      reject(new Error('相机插件不可用'));
+      return;
+    }
+
+    // 获取整个相机包装器的尺寸
+    const cameraWrapper = document.querySelector('.viewfinder-container');
+    if (!cameraWrapper) {
+      reject(new Error('找不到相机容器'));
+      return;
+    }
+
+    const rect = cameraWrapper.getBoundingClientRect();
+    const options = {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+      camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
+      tapPhoto: false,
+      previewDrag: false,
+      toBack: false,  // 确保相机在WebView上层
+      alpha: 1,
+      tapFocus: true,
+      disableExifHeaderStripping: false
+    };
+    console.log('相机配置:', options);
+    CameraPreview.startCamera(
+        options,
+        (result) => {
+          console.log('相机启动成功:', result);
+          cameraStarted.value = true;
+          resolve();
+        },
+        (error) => {
+          console.error('相机启动失败:', error);
+          cameraStarted.value = false;
+          reject(new Error(`相机启动失败: ${error}`));
+        }
+    );
+  });
+}
+
+
+// 打开相机 - 修改版本
+const openCamera = async () => {
+  console.log('尝试打开相机...');
+  if (!cameraReady.value) {
+    checkCameraPlugin();
+    if (!cameraReady.value) {
+      uni.showModal({
+        title: '提示',
+        content: '相机插件未准备好，请确保应用已正确安装相机插件，或尝试重启应用',
+        showCancel: false
+      });
+      return;
+    }
+  }
+  try {
+    // 显示相机界面
+    showCamera.value = true;
+    // 等待UI更新
+    await new Promise(resolve => setTimeout(resolve, 100));
+    // 初始化相机
+    await initCamera();
+  } catch (error) {
+    console.error('打开相机失败:', error);
+    showCamera.value = false;
+    uni.showToast({
+      title: error.message || '打开相机失败',
+      icon: 'none',
+      duration: 2000
+    });
+  }
+}
+
+// 关闭相机
+const closeCamera = async () => {
+  console.log('关闭相机...');
+  try {
+    await stopCamera();
+  } catch (error) {
+    console.error('关闭相机出错:', error);
+  } finally {
+    showCamera.value = false;
+    cameraStarted.value = false;
+  }
+}
+
+// 停止相机
+const stopCamera = async () => {
+  if (!cameraStarted.value) {
+    return Promise.resolve();
+  }
+  const CameraPreview = getCameraPlugin();
+  if (!CameraPreview) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    CameraPreview.stopCamera(
+        () => {
+          console.log('相机已停止');
+          cameraStarted.value = false;
+          resolve();
+        },
+        (error) => {
+          console.error('停止相机失败:', error);
+          cameraStarted.value = false;
+          resolve();
+        }
+    );
+  });
+}
+
+// 拍照
+const takePicture = async () => {
+  if (!cameraStarted.value || isTaking.value || isFocusing.value) {
+    if (isFocusing.value) {
+      uni.showToast({
+        title: '正在聚焦，请稍候...',
+        icon: 'none',
+        duration: 1000
+      });
+    }
+    return;
+  }
+
+  console.log('开始拍照流程...');
+  isTaking.value = true;
+
+  try {
+    const CameraPreview = getCameraPlugin();
+    if (!CameraPreview) {
+      throw new Error('相机插件不可用');
+    }
+    CameraPreview.takePicture({width:640, height:540, quality: 50}, async (base64PictureData) => {
+      console.log('拍照返回数据',base64PictureData);
+      await processImage(base64PictureData);
+    });
+  } catch (error) {
+    console.error('拍照过程出错:', error);
+    uni.showToast({
+      title: error.message || '拍照失败',
+      icon: 'none'
+    });
+  } finally {
+    isTaking.value = false;
+  }
+}
+
+// 处理图片
+const processImage = async (imageData) => {
+  isProcessing.value = true;
+  try {
+    const cleanBase64 = await removeExifData(imageData);
+    console.log('清理后的纯base64:', cleanBase64);
+    console.log('开始OCR识别...');
+
+    uni.request({
+      url: '/material/app/ocr/getOcrCode',
+      method: 'POST',
+      data: {
+        image: cleanBase64,
+        jiju_type: '',
+        auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
+      },
+      header: {
+        "Content-Type": "application/json;charset=UTF-8"
+      },
+      success: async (res) => {
+        if (!res.data.code){
+          res=JSON.parse(decryptWithSM4(res.data))
+        } else {
+          res =res.data
+        }
+        const {data: resData} = res
+        if (resData.code===0){
+          if (resData.data.result) {
+            // 识别成功，将结果填入输入框并自动查询
+            // keyWord.value = resData.data.result;
+            await closeCamera();
+            // 自动触发查询
+            bindMa(resData.data.result,2)
+            uni.showToast({
+              title: '识别成功',
+              icon: 'success'
+            });
+          } else {
+            console.log('识别失败！' + resData.data.msg)
+            showToast('识别失败！', 'bottom')
+          }
+        } else {
+          showToast('识别失败！', 'bottom')
+        }
+      },
+      fail: (err) => {
+        showToast('请求失败！', 'bottom')
+      },
+    })
+  } catch (error) {
+    console.error('图片处理或OCR识别失败:', error);
+    uni.showToast({
+      title: '识别失败，请重试',
+      icon: 'none'
+    });
+  } finally {
+    isProcessing.value = false;
+  }
+}
+
+// 移除EXIF数据
+const removeExifData = (pureBase64) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
+      const cleanPureBase64 = dataUrl.split(',')[1];
+      resolve(cleanPureBase64);
+    };
+
+    img.onerror = () => reject(new Error('图像加载失败'));
+    img.src = `data:image/jpeg;base64,${pureBase64}`;
+  });
+}
+
+// 打开相册
+const openGallery = () => {
+  uni.chooseImage({
+    count: 1,
+    sourceType: ['album'],
+    success: (res) => {
+      if (res.tempFilePaths && res.tempFilePaths.length > 0) {
+        const filePath = res.tempFilePaths[0];
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', filePath, true);
+        xhr.responseType = 'blob';
+        xhr.onload = () => {
+          if (xhr.status === 200) {
+            const blob = xhr.response;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              const base64 = e.target.result.split(',')[1];
+              convertImageToBase64(base64);
+            };
+            reader.readAsDataURL(blob);
+          }
+        };
+        xhr.send();
+      }
+    },
+    fail: (error) => {
+      console.error('选择图片失败:', error);
+      uni.showToast({
+        title: '选择图片失败',
+        icon: 'none'
+      });
+    }
+  });
+}
+
+// 将图片转换为base64
+const convertImageToBase64 = async (processedBase64) => {
+  isProcessing.value = true;
+  try {
+    console.log('相册base64数据', processedBase64);
+    console.log('开始OCR识别...');
+
+    uni.request({
+      url: '/material/app/ocr/getOcrCode',
+      method: 'POST',
+      data: {
+        image: processedBase64,
+        jiju_type: '',
+        auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
+      },
+      header: {
+        "Content-Type": "application/json;charset=UTF-8"
+      },
+      success: async (res) => {
+        if (!res.data.code){
+          res=JSON.parse(decryptWithSM4(res.data))
+        } else {
+          res =res.data
+        }
+        const {data: resData} = res
+        if (resData.code===0){
+          if (resData.data.result) {
+            // 识别成功，将结果填入输入框并自动查询
+            // keyWord.value = resData.data.result;
+            await closeCamera();
+            // 自动触发查询
+            // handleSearch();
+            bindMa(resData.data.result,2)
+            uni.showToast({
+              title: '识别成功',
+              icon: 'success'
+            });
+          } else {
+            showToast('识别失败！', 'bottom')
+          }
+        } else {
+          showToast('识别失败！', 'bottom')
+        }
+      },
+      fail: (err) => {
+        uni.showToast({
+          title: '请求失败：' + err.errMsg,
+          icon: 'none',
+        })
+      },
+    });
+  } catch (error) {
+    console.error('相册图片处理或OCR识别失败:', error);
+    showToast('识别失败！', 'bottom')
+  } finally {
+    isProcessing.value = false;
+  }
+}
+
+//绑定接口
+const bindMa = (qrCode,type) => {
+    console.log(qrCode)
+  let param;
+  if (type===1){
+    param = {
+      "qrCode":qrCode,
+      "boxId":boxInfo.value.boxId,
+    }
+  } else {
+    param = {
+      "maCode":qrCode,
+      "boxId":boxInfo.value.boxId,
+    }
+  }
+
     console.log(param)
     appBindMaCodeApi(param).then(res => {
         console.log(res)
@@ -321,13 +853,197 @@ onLoad((options)=>{
     boxInfo.value.typeModelName=""; 
     console.log(boxInfo.value)
     // getCodeList()
+
+  initializeCordova()
+  getDeviceInfo()
 })
 onShow(()=>{
     getCodeList()
+  initializeCordova();
+  getDeviceInfo();
 })
+
+onHide(() => {
+  cleanup();
+});
+
+// 返回按钮处理
+onBackPress((options) => {
+  if (showCamera.value){
+    console.log('关闭相机...');
+    try {
+      closeCamera();
+    } catch (error) {
+      console.error('关闭相机出错:', error);
+    } finally {
+      showCamera.value = false;
+      cameraStarted.value = false;
+    }
+    return true;
+  }
+  return false;
+});
+
+const back = () => {
+  uni.navigateBack({
+    delta: 1,
+  })
+}
 </script>
 
 <style lang="scss">
+/* 相机相关样式 */
+.camera-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewfinder-container {
+  position: absolute;
+  width: 100%;
+  height: 40%;
+  margin-top: 150px;
+  z-index: 10001;
+}
+
+.bottom-controls {
+  position: absolute;
+  bottom: 100rpx;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  padding: 0 60rpx;
+  z-index: 3;
+}
+
+.control-btn {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2rpx solid rgba(255, 255, 255, 0.3);
+  margin: 0 20rpx;
+}
+
+.control-icon {
+  color: #fff;
+  font-size: 40rpx;
+  font-weight: bold;
+}
+
+.photo-btn {
+  width: 140rpx;
+  height: 140rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 6rpx solid rgba(255, 255, 255, 0.5);
+  transition: all 0.2s ease;
+  margin: 0 20rpx;
+}
+
+.photo-btn.taking {
+  transform: scale(0.9);
+  background-color: rgba(75, 142, 255, 0.8);
+}
+
+.photo-btn.disabled {
+  opacity: 0.5;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.photo-btn-inner {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.photo-btn.taking .photo-btn-inner {
+  background-color: #4b8eff;
+}
+
+.photo-btn.disabled .photo-btn-inner {
+  background-color: #ccc;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  pointer-events: auto;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 60rpx;
+  border-radius: 20rpx;
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 6rpx solid #f3f3f3;
+  border-top: 6rpx solid #4b8eff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 30rpx;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  color: #333;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.custom-toast {
+  position: fixed;
+  left: 0;
+  right: 0;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  text-align: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.custom-toast.top { top: 0; }
+.custom-toast.bottom { bottom: 0; }
+.custom-toast.show { opacity: 1; }
+
+
 .accept {
     padding: 10px;
     height: 95vh;