haha/haha-admin-mp/src/pages/replenish/scan.vue

<template>
  <view class="page">
    <camera
      class="camera-view"
      device-position="back"
      flash="off"
      mode="scanCode"
      @scancode="onScanCode"
      @error="onCameraError"
    />

    <!-- 对焦框覆盖层 -->
    <view class="scan-overlay">
      <view class="scan-mask top"></view>
      <view class="scan-mid">
        <view class="scan-mask left"></view>
        <view class="scan-frame">
          <!-- 四角 -->
          <view class="corner tl"></view>
          <view class="corner tr"></view>
          <view class="corner bl"></view>
          <view class="corner br"></view>
          <!-- 扫描线 -->
          <view class="scan-line"></view>
        </view>
        <view class="scan-mask right"></view>
      </view>
      <view class="scan-mask bottom">
        <text class="scan-hint">将二维码放入框内，即可自动扫描</text>
      </view>
    </view>

    <!-- 底部关闭 -->
    <view class="close-btn" @click="handleClose">
      <text>关闭</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { openDeviceDoor } from '@/api/replenish';

let scanned = false;

function onScanCode(e: any) {
  if (scanned) return;
  scanned = true;

  const result = (e.detail?.result || '').trim();
  if (!result) {
    uni.showToast({ title: '未识别到二维码', icon: 'none' });
    scanned = false;
    return;
  }

  // 与 haha-mp 一致的 deviceId 提取逻辑
  let deviceId = '';
  try {
    const urlPattern = /\/([A-Z0-9]+)(\?|$)/;
    const match = result.match(urlPattern);
    if (match && match[1]) {
      deviceId = match[1];
    } else {
      try {
        const qrData = JSON.parse(result);
        if (qrData.deviceId) deviceId = qrData.deviceId;
      } catch (e) {
        deviceId = result;
      }
    }
    if (!deviceId) throw new Error('无法解析设备ID');
  } catch {
    uni.showToast({ title: '二维码格式错误', icon: 'none' });
    scanned = false;
    return;
  }

  // 开门
  uni.showLoading({ title: '开门中...', mask: true });
  openDeviceDoor(deviceId).then(() => {
    uni.hideLoading();
    uni.showActionSheet({
      itemList: ['设备补货', '库存盘点'],
      success: (sheetRes: any) => {
        if (sheetRes.tapIndex === 0) {
          uni.navigateTo({ url: `/pages/replenish/operation?deviceId=${deviceId}` });
        } else if (sheetRes.tapIndex === 1) {
          uni.navigateTo({ url: `/pages/replenish/audit?deviceId=${deviceId}` });
        }
      },
      fail: () => { scanned = false; }
    });
  }).catch(() => {
    uni.hideLoading();
    uni.showToast({ title: '开门失败，请重试', icon: 'none' });
    scanned = false;
  });
}

function onCameraError(e: any) {
  console.error('相机错误:', e.detail);
  uni.showToast({ title: '相机启动失败，请授权后重试', icon: 'none' });
  setTimeout(() => uni.navigateBack(), 1000);
}

function handleClose() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.page { width: 100vw; height: 100vh; background: #000; position: relative; }

.camera-view { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.scan-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; }

.scan-mask { background: rgba(0, 0, 0, 0.5); }
.scan-mask.top, .scan-mask.bottom { flex: 1; }
.scan-mask.left, .scan-mask.right { flex: 1; }

.scan-mid { display: flex; height: 500rpx; }

.scan-frame { width: 500rpx; height: 500rpx; position: relative; }

.corner { position: absolute; width: 40rpx; height: 40rpx; border-color: $primary-color; border-style: solid; z-index: 1;
  &.tl { top: 0; left: 0; border-width: 6rpx 0 0 6rpx; border-radius: 8rpx 0 0 0; }
  &.tr { top: 0; right: 0; border-width: 6rpx 6rpx 0 0; border-radius: 0 8rpx 0 0; }
  &.bl { bottom: 0; left: 0; border-width: 0 0 6rpx 6rpx; border-radius: 0 0 0 8rpx; }
  &.br { bottom: 0; right: 0; border-width: 0 6rpx 6rpx 0; border-radius: 0 0 8rpx 0; }
}

.scan-line { position: absolute; left: 20rpx; right: 20rpx; height: 3rpx; background: $primary-color; box-shadow: 0 0 10rpx rgba(255,193,7,0.6); animation: scanAnim 2s ease-in-out infinite; }

@keyframes scanAnim {
  0%, 100% { top: 20rpx; }
  50% { top: calc(100% - 20rpx); }
}

.scan-mask.bottom { display: flex; align-items: center; justify-content: center; padding-bottom: 120rpx; }
.scan-hint { font-size: 28rpx; color: rgba(255,255,255,0.8); text-align: center; }

.close-btn { position: absolute; bottom: calc(60rpx + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20; padding: 20rpx 64rpx; border-radius: 48rpx; background: rgba(255,255,255,0.15);
  text { font-size: 30rpx; color: #fff; }
  &:active { background: rgba(255,255,255,0.25); }
}
</style>