intelligent-etmf-system-applet/pages/scan/index.vue

<template>
  <view class="scan-page">
    <!-- 顶部导航栏 -->
    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="back-btn" @click="handleBack">
          <text class="back-icon">‹</text>
        </view>
        <text class="header-title">{{ t('scan.title') }}</text>
        <view class="placeholder"></view>
      </view>
    </view>
    
    <!-- 扫描区域 -->
    <view class="scan-area">
      <camera 
        device-position="back" 
        flash="off" 
        class="camera"
        @error="handleCameraError"
      >
      </camera>
      
      <!-- 模式切换按钮 - 在底部操作栏上方 -->
      <view class="mode-switch-wrapper">
        <view class="mode-switch">
          <view 
            class="mode-btn" 
            :class="{ active: scanMode === 'single' }"
            @click="switchToSingle"
          >
            <text class="mode-text">{{ t('scan.singlePage') }}</text>
          </view>
          <view 
            class="mode-btn" 
            :class="{ active: scanMode === 'multiple' }"
            @click="switchToMultiple"
          >
            <text class="mode-text">{{ t('scan.multiplePage') }}</text>
          </view>
        </view>
      </view>
      
      <!-- 多页模式缩略图列表 -->
      <view v-if="scanMode === 'multiple' && pdfDataList.length > 0" class="thumbnail-list">
        <scroll-view scroll-x class="thumbnail-scroll">
          <view class="thumbnail-wrapper">
            <view 
              v-for="(item, index) in pdfDataList" 
              :key="index" 
              class="thumbnail-item"
              @click="handleViewAllPdf"
            >
              <view class="pdf-thumbnail-icon">
                <image src="/static/icon/pdf.svg" mode="aspectFit" class="pdf-icon-img" />
              </view>
              <view class="thumbnail-delete" @click.stop="handleDeletePdf(index)">
                <text class="delete-icon">×</text>
              </view>
              <view class="thumbnail-index">{{ index + 1 }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 上传按钮（多页模式且有图片时显示�?-->
      <view 
        v-if="scanMode === 'multiple' && imageBase64List.length > 0" 
        class="upload-btn"
        @click="handleMultipleUpload"
      >
        <text class="upload-text">{{ t('scan.upload') }}</text>
      </view>
      
      <!-- PDF缩略图预览（右下角） -->
      <view v-if="showPdfThumbnail" class="pdf-thumbnail" @click="handleOpenPdf">
        <view class="pdf-close" @click.stop="handleClosePdf">
          <text class="close-icon">×</text>
        </view>
        <image class="pdf-icon" src="/static/icon/pdf.svg" mode="aspectFit" />
        <text class="pdf-text">PDF</text>
      </view>
      
      <!-- 底部操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn" @click="handleSelectImage">
          <image class="btn-icon" src="/static/pages/scan/import-pic.svg" mode="aspectFit" />
          <text class="btn-text">{{ t('scan.importImage') }}</text>
        </view>
        
        <view class="capture-btn" @click="handleCapture">
          <view class="capture-inner"></view>
        </view>
        
        <view class="action-btn" @click="handleSelectFile">
          <image class="btn-icon" src="/static/pages/scan/import-doc.svg" mode="aspectFit" />
          <text class="btn-text">{{ t('scan.importDocument') }}</text>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { scanUpload } from '@/apis/scan'

const { t } = useI18n()

// 状态栏高度
const statusBarHeight = ref(0)

// 扫描模式：single-单页，multiple-多页
const scanMode = ref('single')

// 图片base64数组（用于多页模式）
const imageBase64List = ref([])

// 图片临时路径数组（用于显示缩略图�?
const imageTempPaths = ref([])

// PDF数据数组（多页模式，包含路径和base64�?
const pdfDataList = ref([])

// 缓存的ossId
const cachedOssId = ref(null)

// PDF文件路径（用于预览）
const pdfFilePath = ref('')

// 是否显示PDF缩略图
const showPdfThumbnail = ref(false)

// 暂存扫描的PDF base64（用于单页模式）
const scannedPdfBase64 = ref('')

// 相机上下文
let cameraContext = null

onMounted(() => {
  // 获取系统信息
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight || 0
  
  // 初始化相机上下文
  cameraContext = uni.createCameraContext()
})

onUnmounted(() => {
  // 清理资源
})

// 返回上一页
const handleBack = () => {
  uni.reLaunch({
    url: '/pages/home/index'
  })
}

// 切换扫描模式
const toggleScanMode = () => {
  scanMode.value = scanMode.value === 'single' ? 'multiple' : 'single'
  
  uni.showToast({
    title: scanMode.value === 'single' ? '已切换到单页模式' : '已切换到多页模式',
    icon: 'none',
    duration: 1500
  })
}

// 切换到单页模式
const switchToSingle = () => {
  if (scanMode.value === 'single') return
  scanMode.value = 'single'
  
  uni.showToast({
    title: t('scan.switchToSingle'),
    icon: 'none',
    duration: 1500
  })
}

// 切换到多页模式
const switchToMultiple = () => {
  if (scanMode.value === 'multiple') return
  scanMode.value = 'multiple'
  
  uni.showToast({
    title: t('scan.switchToMultiple'),
    icon: 'none',
    duration: 1500
  })
}

// 相机错误处理
const handleCameraError = (e) => {
  console.error('相机错误:', e)
  uni.showToast({
    title: t('scan.cameraError'),
    icon: 'none'
  })
}

// 拍照
const handleCapture = () => {
  if (!cameraContext) return
  
  cameraContext.takePhoto({
    quality: 'high',
    success: async (res) => {
      try {
        uni.showLoading({
          title: t('scan.processing'),
          mask: true
        })
        
        // 将图片转换为base64
        const base64Data = await imageToBase64(res.tempImagePath)
        
        if (scanMode.value === 'single') {
          // 单页模式：直接上传
          await uploadSingleImage(base64Data)
        } else {
          // 多页模式：立即上传并扫描
          await uploadAndScanImage(base64Data)
        }
      } catch (error) {
        uni.hideLoading()
        console.error('处理图片失败:', error)
        uni.showToast({
          title: t('scan.processFailed'),
          icon: 'none'
        })
      }
    },
    fail: (err) => {
      console.error('拍照失败:', err)
      uni.showToast({
        title: t('scan.captureFailed'),
        icon: 'none'
      })
    }
  })
}

// 导入图片
const handleSelectImage = async () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: async (res) => {
      try {
        uni.showLoading({
          title: t('scan.processing'),
          mask: true
        })
        
        // 将图片转换为base64
        const base64Data = await imageToBase64(res.tempFilePaths[0])
        
        if (scanMode.value === 'single') {
          // 单页模式：直接上传
          await uploadSingleImage(base64Data)
        } else {
          // 多页模式：立即上传并扫描
          await uploadAndScanImage(base64Data)
        }
      } catch (error) {
        uni.hideLoading()
        console.error('处理图片失败:', error)
        uni.showToast({
          title: t('scan.processFailed'),
          icon: 'none'
        })
      }
    }
  })
}

// 导入文档
const handleSelectFile = () => {
  uni.chooseMessageFile({
    count: 1,
    type: 'file',
    extension: ['.pdf'],
    success: async (res) => {
      try {
        uni.showLoading({
          title: t('scan.processing'),
          mask: true
        })
        
        const file = res.tempFiles[0]
        
        // 将文件转换为base64
        const base64Data = await fileToBase64(file.path)
        
        if (scanMode.value === 'single') {
          // 单页模式：直接处理文档
          await handleDocumentUpload(base64Data)
        } else {
          // 多页模式：添加到列表
          await handleDocumentInMultipleMode(base64Data, file.name)
        }
      } catch (error) {
        uni.hideLoading()
        console.error('处理文档失败:', error)
        uni.showToast({
          title: t('scan.processFailed'),
          icon: 'none'
        })
      }
    },
    fail: (err) => {
      console.error('选择文档失败:', err)
      uni.showToast({
        title: t('scan.selectDocumentFailed'),
        icon: 'none'
      })
    }
  })
}

// 将文件转换为base64
const fileToBase64 = (filePath) => {
  return new Promise((resolve, reject) => {
    uni.getFileSystemManager().readFile({
      filePath: filePath,
      encoding: 'base64',
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 单页模式处理文档
const handleDocumentUpload = async (base64Data) => {
  try {
    // 直接将文档base64存储到全局数据中（作为数组）
    getApp().globalData.scannedFileBase64List = [base64Data]
    
    uni.hideLoading()
    
    uni.showToast({
      title: t('scan.documentImportSuccess'),
      icon: 'success',
      duration: 1500
    })
    
    // 延迟跳转到文件选择页面
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/scan/fileSelect/index'
      })
    }, 1500)
  } catch (error) {
    uni.hideLoading()
    console.error('处理文档失败:', error)
    uni.showToast({
      title: error.message || t('scan.processFailed'),
      icon: 'none'
    })
  }
}

// 多页模式处理文档
const handleDocumentInMultipleMode = async (base64Data, fileName) => {
  try {
    // 生成临时文件路径用于显示
    const tempPath = await base64ToTempFile(base64Data)
    
    // 添加到PDF数据列表
    pdfDataList.value.push({
      path: tempPath,
      base64: base64Data,
      name: fileName || `文档_${Date.now()}`
    })
    
    uni.hideLoading()
    
    uni.showToast({
      title: t('scan.added', { count: pdfDataList.value.length }),
      icon: 'success',
      duration: 1500
    })
  } catch (error) {
    uni.hideLoading()
    console.error('处理文档失败:', error)
    uni.showToast({
      title: error.message || t('scan.processFailed'),
      icon: 'none'
    })
  }
}

// 将图片转换为base64
const imageToBase64 = (filePath) => {
  return new Promise((resolve, reject) => {
    uni.getFileSystemManager().readFile({
      filePath: filePath,
      encoding: 'base64',
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 单页模式上传
const uploadSingleImage = async (base64Data) => {
  try {
    // 调用上传接口（单个文件）
    const response = await scanUpload({
      file: base64Data
    })
    
    uni.hideLoading()
    
    if (response.code === 200 && response.data) {
      // 缓存ossId
      cachedOssId.value = response.data.ossId
      
      // 暂存扫描的PDF base64
      if (response.data.fileBase64) {
        scannedPdfBase64.value = response.data.fileBase64
        
        // 将fileBase64存储到全局数据中（作为数组）
        getApp().globalData.scannedFileBase64List = [response.data.fileBase64]
        
        // 跳转到文件选择页面
        uni.navigateTo({
          url: '/pages/scan/fileSelect/index'
        })
      } else {
        uni.showToast({
          title: t('scan.uploadSuccess'),
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      throw new Error(response.msg || t('scan.uploadFailed'))
    }
  } catch (error) {
    uni.hideLoading()
    console.error('上传失败:', error)
    uni.showToast({
      title: error.message || t('scan.uploadFailed'),
      icon: 'none'
    })
  }
}

// 多页模式批量上传
const handleMultipleUpload = async () => {
  if (imageBase64List.value.length === 0) {
    uni.showToast({
      title: t('scan.addImage'),
      icon: 'none'
    })
    return
  }
  
  try {
    uni.showLoading({
      title: t('scan.uploading'),
      mask: true
    })
    
    // 调用上传接口
    const response = await scanUpload({
      files: imageBase64List.value
    })
    
    uni.hideLoading()
    
    if (response.code === 200 && response.data) {
      // 缓存ossId
      cachedOssId.value = response.data.ossId
      
      // 清空数组
      imageBase64List.value = []
      imageTempPaths.value = []
      
      // 处理PDF预览
      if (response.data.fileBase64) {
        await handlePdfPreview(response.data.fileBase64)
      } else {
        uni.showToast({
          title: t('scan.uploadSuccess'),
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      throw new Error(response.msg || t('scan.uploadFailed'))
    }
  } catch (error) {
    uni.hideLoading()
    console.error('上传失败:', error)
    uni.showToast({
      title: error.message || t('scan.uploadFailed'),
      icon: 'none'
    })
  }
}

// 多页模式：上传并扫描单张图片
const uploadAndScanImage = async (base64Data) => {
  try {
    // 调用上传接口（单个文件）
    const response = await scanUpload({
      file: base64Data
    })
    
    uni.hideLoading()
    
    if (response.code === 200 && response.data && response.data.fileBase64) {
      // 将PDF转换为临时文件
      const pdfPath = await base64ToTempFile(response.data.fileBase64)
      
      // 生成文件名（使用时间戳或从服务器返回的文件名
      const fileName = response.data.fileName || response.data.originalName || `扫描文档_${Date.now()}`
      
      // 添加到PDF数据列表（包含路径、base64和文件名
      pdfDataList.value.push({
        path: pdfPath,
        base64: response.data.fileBase64,
        name: fileName
      })
      
      uni.showToast({
        title: t('scan.scanned', { count: pdfDataList.value.length }),
        icon: 'success',
        duration: 1500
      })
    } else {
      throw new Error(response.msg || '扫描失败')
    }
  } catch (error) {
    uni.hideLoading()
    console.error('扫描失败:', error)
    uni.showToast({
      title: t('scan.scanFailed'),
      icon: 'none'
    })
  }
}

// 删除指定图片
const handleDeleteImage = (index) => {
  imageBase64List.value.splice(index, 1)
  imageTempPaths.value.splice(index, 1)
  
  uni.showToast({
    title: t('scan.deleted'),
    icon: 'success',
    duration: 1000
  })
}

// 删除指定PDF
const handleDeletePdf = (index) => {
  pdfDataList.value.splice(index, 1)
  
  uni.showToast({
    title: t('scan.deleted'),
    icon: 'success',
    duration: 1000
  })
}

// 查看所有PDF
const handleViewAllPdf = () => {
  if (pdfDataList.value.length === 0) {
    uni.showToast({
      title: t('scan.noPdf'),
      icon: 'none'
    })
    return
  }
  
  // 使用全局数据存储PDF数据（包含路径和base64�?
  getApp().globalData.pdfData = pdfDataList.value
  
  uni.navigateTo({
    url: '/pages/scan/pdfViewer/index'
  })
}

// 处理PDF预览
const handlePdfPreview = async (base64Data) => {
  try {
    // 将base64转换为临时文件
    const filePath = await base64ToTempFile(base64Data)
    pdfFilePath.value = filePath
    showPdfThumbnail.value = true
    
    uni.showToast({
      title: t('scan.uploadSuccess'),
      icon: 'success',
      duration: 2000
    })
  } catch (error) {
    console.error('处理PDF失败:', error)
    uni.showToast({
      title: t('scan.processPdfFailed'),
      icon: 'none'
    })
  }
}

// 将base64转换为临时文件
const base64ToTempFile = (base64Data) => {
  return new Promise((resolve, reject) => {
    const fs = uni.getFileSystemManager()
    const fileName = `scan_${Date.now()}.pdf`
    const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`
    
    fs.writeFile({
      filePath: filePath,
      data: base64Data,
      encoding: 'base64',
      success: () => {
        resolve(filePath)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 打开PDF预览
const handleOpenPdf = () => {
  if (!pdfFilePath.value) return
  
  uni.openDocument({
    filePath: pdfFilePath.value,
    fileType: 'pdf',
    showMenu: true,
    success: () => {
      // 预览成功
    },
    fail: (err) => {
      console.error('打开文档失败:', err)
      uni.showToast({
        title: t('scan.openDocumentFailed'),
        icon: 'none'
      })
    }
  })
}

// 关闭PDF缩略图
const handleClosePdf = () => {
  showPdfThumbnail.value = false
  pdfFilePath.value = ''
}
</script>

<style lang="scss" scoped>
.scan-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  
  // 顶部导航栏
  .header-bg {
    background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
    position: relative;
    z-index: 100;
    
    .header-content {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      
      .back-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        
        .back-icon {
          font-size: 56rpx;
          color: #ffffff;
          font-weight: 300;
        }
      }
      
      .header-title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
      }
      
      .placeholder {
        width: 60rpx;
      }
    }
  }
  
  // 扫描区域
  .scan-area {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    
    .camera {
      flex: 1;
      width: 100%;
      position: relative;
    }
    
    .camera-placeholder {
      flex: 1;
      width: 100%;
      background: #000000;
    }
    
    // 模式切换按钮 - 在底部操作栏上方
    .mode-switch-wrapper {
      position: absolute;
      bottom: 280rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      
      .mode-switch {
        display: flex;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 40rpx;
        padding: 6rpx;
        backdrop-filter: blur(10rpx);
        
        .mode-btn {
          padding: 12rpx 32rpx;
          border-radius: 34rpx;
          transition: all 0.3s;
          
          .mode-text {
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
            transition: all 0.3s;
          }
          
          &.active {
            background: rgba(255, 255, 255, 0.9);
            
            .mode-text {
              color: #333333;
              font-weight: 600;
            }
          }
          
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
    
    // 多页模式缩略图列�?
    .thumbnail-list {
      position: absolute;
      bottom: 220rpx;
      left: 0;
      right: 0;
      height: 160rpx;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(10rpx);
      
      .thumbnail-scroll {
        height: 100%;
        white-space: nowrap;
        
        .thumbnail-wrapper {
          display: inline-flex;
          padding: 20rpx;
          gap: 16rpx;
          
          .thumbnail-item {
            position: relative;
            width: 120rpx;
            height: 120rpx;
            border-radius: 12rpx;
            overflow: hidden;
            background: #ffffff;
            border: 2rpx solid #e0e0e0;
            
            .thumbnail-image {
              width: 100%;
              height: 100%;
            }
            
            .pdf-thumbnail-icon {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #f5f5f5;
              
              .pdf-icon-img {
                width: 60rpx;
                height: 60rpx;
              }
            }
            
            .thumbnail-delete {
              position: absolute;
              top: 4rpx;
              right: 4rpx;
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
              background: rgba(0, 0, 0, 0.7);
              display: flex;
              align-items: center;
              justify-content: center;
              
              .delete-icon {
                font-size: 32rpx;
                color: #ffffff;
                line-height: 1;
              }
            }
            
            .thumbnail-index {
              position: absolute;
              bottom: 4rpx;
              left: 4rpx;
              padding: 2rpx 8rpx;
              background: rgba(0, 0, 0, 0.7);
              border-radius: 8rpx;
              font-size: 20rpx;
              color: #ffffff;
            }
          }
        }
      }
    }
    
    // 上传按钮
    .upload-btn {
      position: absolute;
      bottom: 240rpx;
      right: 32rpx;
      width: 120rpx;
      height: 80rpx;
      background: #1ec9c9;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 16rpx rgba(30, 201, 201, 0.4);
      z-index: 20;
      
      &:active {
        transform: scale(0.95);
      }
      
      .upload-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #ffffff;
      }
    }
    
    // PDF缩略图
    .pdf-thumbnail {
      position: absolute;
      bottom: 240rpx;
      right: 32rpx;
      width: 140rpx;
      height: 140rpx;
      background: #ffffff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 20;
      
      &:active {
        transform: scale(0.95);
      }
      
      .pdf-close {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #ff4444;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(255, 68, 68, 0.3);
        
        .close-icon {
          font-size: 36rpx;
          color: #ffffff;
          line-height: 1;
          font-weight: 300;
        }
      }
      
      .pdf-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 8rpx;
      }
      
      .pdf-text {
        font-size: 24rpx;
        color: #666666;
        font-weight: 500;
      }
    }
    
    // 底部操作按钮
    .action-buttons {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      padding: 32rpx 40rpx;
      padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        
        .btn-icon {
          width: 48rpx;
          height: 48rpx;
        }
        
        .btn-text {
          font-size: 24rpx;
          color: #666666;
        }
      }
      
      .capture-btn {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background: #1ec9c9;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 16rpx rgba(30, 201, 201, 0.4);
        
        &:active {
          transform: scale(0.95);
        }
        
        .capture-inner {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background: #ffffff;
        }
      }
    }
  }
}
</style>