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">小程序扫描</text>
        <view class="placeholder"></view>
      </view>
    </view>
    
    <!-- 扫描区域 -->
    <view class="scan-area">
      <camera 
        device-position="back" 
        flash="off" 
        class="camera"
        @error="handleCameraError"
      >
        <!-- 扫描框 -->
        <view class="scan-frame">
          <view class="corner corner-tl"></view>
          <view class="corner corner-tr"></view>
          <view class="corner corner-bl"></view>
          <view class="corner corner-br"></view>
        </view>
      </camera>
      
      <!-- 底部操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn" @click="handleSelectImage">
          <image class="btn-icon" src="/static/pages/scan/image.png" mode="aspectFit" />
          <text class="btn-text">导入图片</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/file.png" mode="aspectFit" />
          <text class="btn-text">导入文档</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

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

onMounted(() => {
  // 获取系统信息 - 使用新API
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight || 0
})

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

// 相机错误处理
const handleCameraError = (e) => {
  console.error('相机错误:', e)
  uni.showToast({
    title: '相机启动失败',
    icon: 'none'
  })
}

// 拍照
const handleCapture = () => {
  const ctx = uni.createCameraContext()
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      console.log('拍照成功:', res.tempImagePath)
      uni.showToast({
        title: '拍照成功',
        icon: 'success'
      })
      // TODO: 处理拍照后的图片
    },
    fail: (err) => {
      console.error('拍照失败:', err)
      uni.showToast({
        title: '拍照失败',
        icon: 'none'
      })
    }
  })
}

// 导入图片
const handleSelectImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: (res) => {
      console.log('选择图片成功:', res.tempFilePaths)
      uni.showToast({
        title: '图片导入成功',
        icon: 'success'
      })
      // TODO: 处理选择的图片
    },
    fail: (err) => {
      console.error('选择图片失败:', err)
    }
  })
}

// 导入文档
const handleSelectFile = () => {
  uni.chooseMessageFile({
    count: 1,
    type: 'file',
    success: (res) => {
      console.log('选择文件成功:', res.tempFiles)
      uni.showToast({
        title: '文档导入成功',
        icon: 'success'
      })
      // TODO: 处理选择的文件
    },
    fail: (err) => {
      console.error('选择文件失败:', err)
    }
  })
}
</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;
      
      // 扫描框
      .scan-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500rpx;
        height: 500rpx;
        
        .corner {
          position: absolute;
          width: 60rpx;
          height: 60rpx;
          border-color: #1ec9c9;
          border-style: solid;
          
          &.corner-tl {
            top: 0;
            left: 0;
            border-width: 6rpx 0 0 6rpx;
            border-radius: 12rpx 0 0 0;
          }
          
          &.corner-tr {
            top: 0;
            right: 0;
            border-width: 6rpx 6rpx 0 0;
            border-radius: 0 12rpx 0 0;
          }
          
          &.corner-bl {
            bottom: 0;
            left: 0;
            border-width: 0 0 6rpx 6rpx;
            border-radius: 0 0 0 12rpx;
          }
          
          &.corner-br {
            bottom: 0;
            right: 0;
            border-width: 0 6rpx 6rpx 0;
            border-radius: 0 0 12rpx 0;
          }
        }
      }
    }
    
    // 底部操作按钮
    .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>