ry_app/pages/enter/enter.vue

<template>
  <view class="input-list-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="nav-title">录入清单</view>
      <view class="nav-right" @click="goRecord">
        <uni-icons type="redo" size="18" color="#fff"></uni-icons>
        <text class="record-text">记录</text>
      </view>
    </view>

    <!-- 功能操作栏 -->
    <view class="operation-bar">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input type="text" placeholder="搜索商品名称、条码" placeholder-class="search-placeholder" />
      </view>
      <button class="btn batch-import" @click="goImport">批量导入</button>
      <button class="btn no-code">无码/生鲜</button>
    </view>

    <!-- 条码扫描区域 【修复：调整定位和层级】 -->
    <view class="scan-area">
      <view class="scan-tip">对准商品条码，自动识别</view>
      
      <!-- App环境使用扫码控件 【这里的view只做占位，扫码控件是原生图层叠加】 -->
      <!-- #ifdef APP-PLUS -->
      <view class="scan-view" id="barcode-view"></view>
      <view class="scan-status" v-if="isScanning">
        <view class="scan-line"></view>
        <text class="scan-status-text">正在扫描...</text>
      </view>
      <view class="scan-controls" v-if="isScanning">
        <view class="control-item" @click.stop="toggleFlash">
          <uni-icons type="flash" size="22" color="#fff"></uni-icons>
          <text class="control-text">{{ flashOn ? '关闭手电' : '开启手电' }}</text>
        </view>
        <view class="control-item" @click.stop="pauseScan">
          <uni-icons type="pause" size="22" color="#fff"></uni-icons>
          <text class="control-text">{{ scanPaused ? '继续扫码' : '暂停扫码' }}</text>
        </view>
        <view class="control-item" @click.stop="openFullscreenScan">
          <uni-icons type="scan" size="22" color="#fff"></uni-icons>
          <text class="control-text">全屏扫码</text>
        </view>
      </view>
      <!-- #endif -->
      
      <!-- H5环境显示提示 -->
      <!-- #ifndef APP-PLUS -->
      <view class="h5-tip">
        <text class="tip-text">扫码功能需要在App中使用</text>
        <button class="scan-btn" @click="startScan">开始扫码</button>
      </view>
      <!-- #endif -->
    </view>

    <!-- 空状态区域 -->
    <view class="empty-area">
      <image src="/static/empty-icon.png" mode="widthFix" class="empty-icon"></image>
      <text class="empty-title">暂未录入商品</text>
      <text class="empty-desc">请在上方选择商品录入方式</text>
      <uni-icons type="arrowup" size="14" color="#ccc"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flashOn: false,
      scanPaused: false,
      isScanning: false,
      barcodeInstance: null
    };
  },
  // ✅ 修复核心：用mounted初始化，页面DOM渲染完成后再创建扫码控件
  mounted() {
    // #ifdef APP-PLUS
    console.log('=== 扫码页面 mounted ===');
    this.initScan();
    // #endif
  },
  onShow() {
    // #ifdef APP-PLUS
    console.log('=== 扫码页面 onShow ===');
    // 每次页面显示时都检查权限并初始化（处理从设置返回的情况）
    this.initScan();
    // #endif
  },
  onUnload() {
    this.destroyScan(); // 统一销毁扫码控件
  },
  methods: {
    goBack() {
      this.destroyScan(); // 返回时销毁
      uni.navigateBack({ delta: 1 });
    },
    
    goRecord() {
      uni.showToast({ title: '记录功能开发中', icon: 'none' });
    },
    
    goImport() {
      uni.navigateTo({
        url: '/pages/Import /Import '
      });
    },

    // ✅ 新增：统一的初始化方法（处理权限和扫码初始化）
    initScan() {
      console.log('开始初始化扫码流程...');
      console.log('当前平台:', uni.getSystemInfoSync().platform);
      console.log('plus对象是否存在:', !!plus);
      console.log('plus.barcode是否存在:', !!(plus && plus.barcode));
      
      // 先申请相机权限，再初始化扫码
      this.requestCameraAuth().then(() => {
        console.log('相机权限已获取，开始初始化扫码');
        this.initBarcodeScan();
      }).catch(err => {
        console.error('相机权限获取失败:', err);
        
        // 显示友好的权限提示
        uni.showModal({
          title: '权限提示',
          content: '需要相机权限才能使用扫码功能\n\n请点击"去设置"开启相机权限',
          confirmText: '去设置',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              // 跳转到系统设置页面
              if (uni.getSystemInfoSync().platform === 'android') {
                const Intent = plus.android.importClass('android.content.Intent');
                const Settings = plus.android.importClass('android.provider.Settings');
                const Uri = plus.android.importClass('android.net.Uri');
                
                const intent = new Intent();
                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                const uri = Uri.fromParts('package', plus.android.runtimeActivity.getPackageName(), null);
                intent.setData(uri);
                
                plus.android.runtimeMainActivity().startActivity(intent);
              } else {
                // iOS 跳转到设置
                plus.runtime.openURL('app-settings:');
              }
            } else {
              // 用户取消，返回上一页
              uni.navigateBack({ delta: 1 });
            }
          }
        });
      });
    },

    // ✅ 新增：统一销毁扫码控件，防止内存泄漏
    destroyScan() {
      if (this.barcodeInstance) {
        this.barcodeInstance.close();
        this.barcodeInstance = null;
      }
      this.isScanning = false;
      this.scanPaused = false;
      this.flashOn = false;
    },

    // ✅ 新增：动态申请相机权限（支持 Android 和 iOS）
    requestCameraAuth() {
      return new Promise((resolve, reject) => {
        try {
          const platform = uni.getSystemInfoSync().platform;
          console.log('当前平台:', platform);
          
          if (platform === 'android') {
            // Android 平台权限申请
            console.log('Android 平台，开始申请相机权限...');
            
            // 先检查是否已有权限
            const main = plus.android.runtimeMainActivity();
            const Permission = plus.android.importClass('android.Manifest.permission');
            const PackageManager = plus.android.importClass('android.content.pm.PackageManager');
            
            const permission = Permission.CAMERA;
            const result = main.checkSelfPermission(permission);
            
            console.log('Android 权限检查结果:', result);
            
            if (result === PackageManager.PERMISSION_GRANTED) {
              console.log('Android 已有相机权限');
              resolve();
            } else {
              console.log('Android 需要申请相机权限');
              plus.android.requestPermissions(
                ['android.permission.CAMERA'],
                (res) => {
                  console.log('Android 权限请求回调:', res);
                  if (res && res.length > 0) {
                    const authResult = res[0].granted;
                    console.log('Android 相机权限授予结果:', authResult);
                    if (authResult) {
                      resolve();
                    } else {
                      reject('用户拒绝了相机权限');
                    }
                  } else {
                    reject('权限请求返回异常');
                  }
                },
                (err) => {
                  console.error('Android 权限请求失败:', err);
                  reject(err);
                }
              );
            }
          } else if (platform === 'ios') {
            // iOS 平台权限申请
            console.log('iOS 平台，相机权限在使用时自动申请');
            
            // iOS 的相机权限通常在第一次使用相机时自动申请
            // 我们可以直接尝试初始化扫码，如果权限被拒绝会触发系统弹窗
            resolve();
          } else {
            console.log('非移动端平台，跳过权限申请');
            resolve();
          }
        } catch (error) {
          console.error('权限申请异常:', error);
          reject(error);
        }
      });
    },
    
    // ✅ 修复所有参数错误的扫码初始化核心方法
    initBarcodeScan() {
      if (!plus) {
        console.log('plus 对象不存在，无法初始化扫码');
        return;
      }
      
      // 如果已有扫码实例，先销毁再重新创建
      if (this.barcodeInstance) {
        console.log('已存在扫码实例，先销毁再重新创建');
        this.destroyScan();
      }
      
      console.log('开始初始化扫码控件');
      this.isScanning = true;
      this.scanPaused = false;

      // 获取屏幕宽高和系统信息，适配所有机型【无单位纯数字，核心修复】
      const sysInfo = uni.getSystemInfoSync();
      const statusBarHeight = sysInfo.statusBarHeight || 0;
      const navBarHeight = 44;
      const totalNavBarHeight = statusBarHeight + navBarHeight;
      
      const scanWidth = sysInfo.windowWidth - 30; // 左右各留15px边距
      const scanHeight = sysInfo.windowWidth * 0.7; // 宽高比适配，扫码框更美观
      const scanTop = totalNavBarHeight + 80; // 动态计算顶部距离（导航栏+操作栏+间距）

      console.log('系统信息:', {
        statusBarHeight,
        navBarHeight,
        totalNavBarHeight,
        scanTop,
        scanWidth,
        scanHeight
      });

      // 创建扫码控件 【修复：所有尺寸参数为纯数字，无px】
      const barcode = plus.barcode.create('barcode', 
        [plus.barcode.CODE_128, plus.barcode.EAN_13, plus.barcode.EAN_8, plus.barcode.QR], // 增加常用码制，识别更广
        {
          top: scanTop,
          left: 15,
          width: scanWidth,
          height: scanHeight,
          scanbarColor: '#e60012', // 扫码线颜色
          background: '#000',
          frameColor: '#e60012', // 扫码框颜色
          scanbarRate: 2, // 扫码线速度
          scanbarStyle: 'style-radar', // 扫码线样式
          conserve: true, // 保持扫码状态
          filename: '_doc/barcode/' // 保存路径
        }
      );
      
      console.log('扫码控件创建成功');

      // 扫码成功回调
      barcode.onmarked = (type, result) => {
        if (!result) return; // 过滤空结果
        console.log('识别成功:', result);
        this.isScanning = false;
        uni.showModal({
          title: '扫码成功',
          content: `获取到的编码号：${result}`,
          showCancel: false,
          success: () => {
            // ✅ 修复：扫码成功后完整重置状态+继续扫码
            this.isScanning = true;
            this.resumeScan();
          }
        });
      };
      
      // 扫码错误回调
      barcode.onerror = (error) => {
        console.error('扫码错误:', error);
        uni.showToast({ title: '扫码异常，请重试', icon: 'none' });
      };
      
      // 挂载到当前页面
      const currentWebview = plus.webview.currentWebview();
      console.log('当前webview:', currentWebview);
      console.log('扫码控件配置:', {
        top: scanTop,
        left: 15,
        width: scanWidth,
        height: scanHeight
      });
      
      currentWebview.append(barcode);
      console.log('✅ 扫码控件已成功挂载到webview');
      
      // 启动扫码并添加回调处理
      barcode.start((result) => {
        console.log('扫码启动回调:', result);
        if (result.code === 0) {
          console.log('✅ 扫码已成功启动，相机画面应该显示');
          this.barcodeInstance = barcode;
          
          // 延迟检查扫码控件状态
          setTimeout(() => {
            console.log('扫码控件状态检查:', {
              exists: !!this.barcodeInstance,
              isScanning: this.isScanning
            });
          }, 1000);
        } else {
          console.error('❌ 扫码启动失败:', result.message);
          uni.showModal({
            title: '扫码启动失败',
            content: `错误信息: ${result.message || '未知错误'}\n请检查相机权限是否已开启`,
            showCancel: false
          });
        }
      });
      
      console.log('扫码控件已挂载，正在启动...');
    },
    
    // H5环境扫码（不变，兼容用）
    startScan() {
      uni.scanCode({
        success: (res) => {
          uni.showModal({ title: '扫码成功', content: `获取到的编码号：${res.result}`, showCancel: false });
        },
        fail: () => uni.showToast({ title: '扫码失败', icon: 'none' })
      });
    },
    
    // 暂停/继续扫码（逻辑优化）
    pauseScan() {
      if (!this.barcodeInstance) return;
      this.scanPaused = !this.scanPaused;
      this.scanPaused ? this.barcodeInstance.pause() : this.barcodeInstance.resume();
      uni.showToast({ title: this.scanPaused ? '扫码已暂停' : '扫码已继续', icon: 'none' });
    },
    
    // 恢复扫码
    resumeScan() {
      if (this.barcodeInstance && this.scanPaused) {
        this.barcodeInstance.resume();
        this.scanPaused = false;
        this.isScanning = true;
      }
    },
    
    // 手电开关（不变，逻辑正常）
    toggleFlash() {
      if (!this.barcodeInstance) return;
      this.flashOn = !this.flashOn;
      this.barcodeInstance.setFlash(this.flashOn);
      uni.showToast({ title: this.flashOn ? '手电已开启' : '手电已关闭', icon: 'none' });
    },
    
    // 打开全屏扫码（使用 uni.scanCode 原生API）
    openFullscreenScan() {
      console.log('打开全屏扫码');
      
      // 暂停嵌入式扫码
      if (this.barcodeInstance) {
        this.barcodeInstance.pause();
      }
      
      // 调用 uniapp 原生扫码API，核心配置
      uni.scanCode({
        scanType: ['barCode', 'qrCode'], // 支持条形码和二维码
        onlyFromCamera: true, // 只使用相机，不从相册选择
        success: (res) => {
          console.log('全屏扫码成功:', res);
          
          // 显示扫码结果
          uni.showModal({
            title: '扫码成功',
            content: `获取到的编码号：${res.result}`,
            showCancel: false,
            success: () => {
              // 恢复嵌入式扫码
              this.resumeScan();
            }
          });
        },
        fail: (err) => {
          console.error('全屏扫码失败:', err);
          
          // 恢复嵌入式扫码
          this.resumeScan();
          
          if (err.errMsg !== 'scanCode:fail cancel') {
            uni.showToast({
              title: '扫码失败，请重试',
              icon: 'none'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.input-list-page {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.navbar {
  width: 100%;
  height: calc(var(--status-bar-height) + 44px);
  background-color: #e60012;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  color: #fff;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.record-text {
  font-size: 14px;
  margin-left: 5px;
  color: #fff;
}

.operation-bar {
  margin-top: var(--status-bar-height) + 44px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #fff;
  gap: 10px;
}

.search-box {
  flex: 1;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: #f9f9f9;
}

.search-placeholder {
  font-size: 14px;
  color: #999;
}

.btn {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ 修复：扫码区域样式优化，适配原生扫码图层 */
.scan-area {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  min-height: 350px;
  margin-top: 10px;
  background-color: transparent;
}

.scan-tip {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 10;
  pointer-events: none;
}

.scan-view {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #000;
  border: 2px solid #e60012;
}

.scan-status {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9;
  pointer-events: none; /* 不遮挡扫码识别 */
}

.scan-line {
  width: 80%;
  height: 2px;
  background-color: #e60012;
  animation: scanMove 2s infinite;
}

@keyframes scanMove {
  0% { transform: translateY(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(250px); opacity: 0; }
}

.scan-status-text {
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
}

.scan-controls {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 10;
}

.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  min-width: 60px;
}

.control-item:active {
  background-color: rgba(230, 0, 18, 0.6);
  transform: scale(0.95);
}

.control-text {
  font-size: 12px;
  margin-top: 5px;
  text-align: center;
}

.h5-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: #fff;
  border-radius: 12px;
}

.tip-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.scan-btn {
  padding: 12px 30px;
  background-color: #e60012;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
}

.empty-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
	color: #999;
	margin-bottom: 10px;
}
</style>