李红攀：V2.6.969，扫码出库

env/.env

@@ -1,7 +1,7 @@
 VITE_APP_TITLE = '亚为mom小程序'
 VITE_APP_PORT = 9000
 
-VITE_UNI_APPID = '__UNI__D1E5001'
+VITE_UNI_APPID = '__UNI__2EB12DE'
 VITE_WX_APPID = 'wx1a832d51073d3a35'
 
 # h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base
@@ -10,8 +10,8 @@ VITE_WX_APPID = 'wx1a832d51073d3a35'
 VITE_APP_PUBLIC_BASE=/
 
 # 后台请求地址
-VITE_SERVER_BASEURL = 'http://localhost:48080/admin-api'
+VITE_SERVER_BASEURL = 'http://192.168.1.107:48080/admin-api'
-VITE_UPLOAD_BASEURL = 'http://localhost:48080/upload'
+VITE_UPLOAD_BASEURL = 'http://192.168.1.107:48080/upload'
 # 备注：如果后台带统一前缀，则也要加到后面，eg: https://ukw0y1.laf.run/api
 
 # 注意，如果是微信小程序，还有一套请求地址的配置，根据 develop、trial、release 分别设置上传地址，见 `src/utils/index.ts`。

env/.env.development

@@ -6,4 +6,4 @@ VITE_DELETE_CONSOLE = false
 VITE_SHOW_SOURCEMAP = false
 
 # 后台请求地址
-# VITE_SERVER_BASEURL = 'http://localhost:48080'
+# VITE_SERVER_BASEURL = 'http://192.168.1.107:48080'

src/pages-erp/stock-out/index.vue

@@ -131,6 +131,16 @@
       @click="handleAdd"
     />
 
+    <!-- 扫码出库按钮 -->
+    <wd-fab
+      v-if="hasAccessByCodes(['erp:stock-out:create'])"
+      position="left-bottom"
+      type="warning"
+      :expandable="false"
+      icon="scan"
+      @click="handleScanOut"
+    />
+
     <!-- 搜索弹窗 -->
     <wd-popup v-model="searchVisible" position="top" @close="searchVisible = false">
       <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
@@ -302,6 +312,11 @@ function handleAdd() {
   uni.navigateTo({ url: '/pages-erp/stock-out/form/index' })
 }
 
+/** 扫码出库 */
+function handleScanOut() {
+  uni.navigateTo({ url: '/pages-erp/stock-out/scan/index' })
+}
+
 /** 编辑 */
 function handleEdit(item: StockOut) {
   uni.navigateTo({ url: `/pages-erp/stock-out/form/index?id=${item.id}` })

src/pages-erp/stock-out/scan/index.vue

@@ -0,0 +1,936 @@
+<template>
+  <view class="yd-page-container scan-page">
+    <wd-navbar
+      title="扫码出库"
+      left-arrow
+      placeholder
+      safe-area-inset-top
+      fixed
+      @click-left="handleBack"
+    />
+
+    <view class="scan-page__content">
+      <!-- 顶部上下文条 -->
+      <ScanContextBar
+        :warehouse-name="currentWarehouse?.name"
+        :scanned-count="scannedTotalCount"
+        :record-count="records.length"
+      />
+
+      <!-- 扫码工作台 -->
+      <view class="scan-workbench">
+        <!-- 扫码面板 -->
+        <view class="scan-panel">
+          <!-- 步骤指示器 -->
+          <view class="scan-step-indicator">
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'idle', 'done': step !== 'idle' }">
+              <view class="scan-step-indicator__dot">1</view>
+              <text>扫仓库</text>
+            </view>
+            <view class="scan-step-indicator__line" :class="{ 'done': step !== 'idle' }" />
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'warehouse-scanned' }">
+              <view class="scan-step-indicator__dot">2</view>
+              <text>扫产品</text>
+            </view>
+          </view>
+
+          <!-- 当前作业提示 -->
+          <view class="scan-current-hint">
+            <text v-if="step === 'idle'">请扫描仓库条码</text>
+            <text v-else>产品已扫描，请确认出库</text>
+          </view>
+
+          <!-- 仓库扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step !== 'idle' }">
+            <input
+              v-model="warehouseBarCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step === 'idle' }"
+              placeholder="扫描仓库条码"
+              confirm-type="next"
+              :focus="warehouseInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleWarehouseBlur"
+              @confirm="(e) => handleWarehouseScan(e.detail.value)"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading" @tap="handleCameraScan('warehouse')">
+              拍
+            </button>
+          </view>
+
+          <!-- 仓库预览 -->
+          <view class="scan-location-preview" v-if="currentWarehouse">
+            <view class="scan-location-preview__row">
+              <text class="scan-location-preview__label">仓库</text>
+              <text class="scan-location-preview__value scan-location-preview__value--code">
+                {{ currentWarehouse.name }}
+              </text>
+            </view>
+          </view>
+
+          <!-- 产品扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step === 'idle' }">
+            <input
+              v-model="productBarCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step !== 'idle' }"
+              placeholder="扫描产品条码"
+              confirm-type="done"
+              :focus="productInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleProductBlur"
+              @confirm="(e) => handleProductScan(e.detail.value)"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading || step === 'idle'" @tap="handleCameraScan('product')">
+              拍
+            </button>
+          </view>
+
+          <!-- 产品预览 -->
+          <view class="scan-product-preview" v-if="productPreview">
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">产品</text>
+              <text class="scan-product-preview__value scan-product-preview__value--name">
+                {{ productPreview.name }}
+              </text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">规格</text>
+              <text class="scan-product-preview__value">{{ productPreview.standard || '-' }}</text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">条码</text>
+              <text class="scan-product-preview__value">{{ productPreview.barCode || '-' }}</text>
+            </view>
+            <!-- 出库数量 -->
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">数量</text>
+              <view class="scan-product-preview__count">
+                <text class="count-btn" @tap="decreaseCount">-</text>
+                <input
+                  v-model.number="outCount"
+                  class="count-input"
+                  type="number"
+                  @blur="validateCount"
+                >
+                <text class="count-btn" @tap="increaseCount">+</text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 确认按钮 -->
+          <view v-if="productPreview" class="scan-confirm-row">
+            <button class="scan-confirm-btn" :disabled="outCount <= 0" @tap="handleConfirm">
+              确认出库
+            </button>
+          </view>
+
+          <ScanFeedbackBar :tone="feedbackTone" :message="feedbackMessage" />
+        </view>
+
+        <!-- 扫码记录列表 -->
+        <view class="scan-panel scan-panel--list">
+          <view class="scan-panel__header">
+            <view class="scan-panel__title">扫码记录</view>
+            <view class="scan-panel__meta">共 {{ records.length }} 条</view>
+          </view>
+          <RecentScanList
+            :records="records"
+            :latest-index="latestRecordIndex"
+            @delete="handleDeleteRecord"
+            @increase="handleIncreaseCount"
+            @decrease="handleDecreaseCount"
+          />
+        </view>
+
+        <!-- 提交栏 -->
+        <view class="scan-footer">
+          <button class="scan-footer__clear" @tap="handleClearAll">清空记录</button>
+          <button class="scan-footer__submit scan-footer__submit--out" :loading="submitting" @tap="handleSubmit">提交出库</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { getWarehouseByBarCode } from '@/api/erp/warehouse'
+import { getProductByBarCode, type ProductByBarCode } from '@/api/erp/product'
+import { createStockOut } from '@/api/erp/stock-out'
+import ScanFeedbackBar from '@/pages-erp/stock-in/scan/components/scan-feedback-bar.vue'
+import RecentScanList from '@/pages-erp/stock-in/scan/components/recent-scan-list.vue'
+import ScanContextBar from '@/pages-erp/stock-in/scan/components/scan-context-bar.vue'
+import { navigateBackPlus } from '@/utils'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+/** 扫码出库记录 */
+export interface ScanRecord {
+  id?: number
+  productId?: number
+  productName?: string
+  productSpec?: string
+  productBarCode?: string
+  productUnit?: string
+  productPrice?: number
+  warehouseId?: number
+  warehouseName?: string
+  scanCount: number
+  scanTime?: string
+}
+
+type Step = 'idle' | 'warehouse-scanned'
+
+const toast = useToast()
+
+// 扫码步骤
+const step = ref<Step>('idle')
+
+// 扫码数据
+const warehouseBarCode = ref('')
+const currentWarehouse = ref<{ id: number; name: string } | null>(null)
+const productBarCode = ref('')
+const productPreview = ref<ProductByBarCode | null>(null)
+
+// 出库数量
+const outCount = ref(1)
+
+// 状态
+const scanLoading = ref(false)
+const submitting = ref(false)
+const records = ref<ScanRecord[]>([])
+const feedbackTone = ref<'success' | 'error' | 'idle'>('idle')
+const feedbackMessage = ref('')
+
+// 输入框焦点控制
+const warehouseInputFocus = ref(false)
+const productInputFocus = ref(false)
+
+// 计算属性
+const scannedTotalCount = computed(() =>
+  records.value.reduce((sum, r) => sum + Number(r.scanCount || 0), 0),
+)
+
+const latestRecordIndex = computed(() => {
+  if (records.value.length === 0) return undefined
+  return records.value.length - 1
+})
+
+/** 返回上一页 */
+function handleBack() {
+  if (records.value.length > 0) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要退出吗？未保存的数据将丢失',
+      success: (res) => {
+        if (res.confirm) {
+          navigateBackPlus('/pages-erp/stock-out/index')
+        }
+      },
+    })
+  } else {
+    navigateBackPlus('/pages-erp/stock-out/index')
+  }
+}
+
+/** 初始化页面 */
+onMounted(async () => {
+  await nextTick()
+  setTimeout(() => {
+    focusWarehouseInput()
+  }, 300)
+})
+
+const ERROR_DISPLAY_MS = 2000
+
+/** 聚焦仓库码输入框 */
+function focusWarehouseInput() {
+  productInputFocus.value = false
+  warehouseInputFocus.value = false
+  nextTick(() => {
+    warehouseInputFocus.value = true
+  })
+}
+
+/** 仓库输入框失焦处理 */
+function handleWarehouseBlur() {
+  if (step.value === 'idle' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'idle') {
+        focusWarehouseInput()
+      }
+    }, 100)
+  }
+}
+
+/** 产品输入框失焦处理 */
+function handleProductBlur() {
+  if (step.value === 'warehouse-scanned' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'warehouse-scanned') {
+        focusProductInput()
+      }
+    }, 100)
+  }
+}
+
+/** 增加出库数量 */
+function increaseCount() {
+  outCount.value += 1
+}
+
+/** 减少出库数量 */
+function decreaseCount() {
+  if (outCount.value > 1) {
+    outCount.value -= 1
+  }
+}
+
+/** 验证出库数量 */
+function validateCount() {
+  if (outCount.value < 1 || !outCount.value) {
+    outCount.value = 1
+  }
+}
+
+/** 扫仓库码（相机扫码调用） */
+async function handleWarehouseScan(rawValue?: string) {
+  const code = normalizeScanCode(rawValue || warehouseBarCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描仓库条码')
+    return
+  }
+
+  scanLoading.value = true
+  try {
+    try {
+      const warehouse = await getWarehouseByBarCode(code)
+      currentWarehouse.value = warehouse
+    } catch {
+      setErrorFeedback(`仓库码 ${code} 不存在`)
+      resetToIdle()
+      return
+    }
+
+    if (!currentWarehouse.value?.id) {
+      setErrorFeedback(`仓库码 ${code} 未找到对应仓库`)
+      resetToIdle()
+      return
+    }
+
+    warehouseBarCode.value = code
+    step.value = 'warehouse-scanned'
+    productBarCode.value = ''
+    productPreview.value = null
+    outCount.value = 1
+    clearFeedback()
+
+    focusProductInput()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 聚焦产品码输入框 */
+function focusProductInput() {
+  warehouseInputFocus.value = false
+  productInputFocus.value = false
+  nextTick(() => {
+    productInputFocus.value = true
+  })
+}
+
+/** 扫产品码（相机扫码调用） */
+async function handleProductScan(rawValue?: string) {
+  const code = normalizeScanCode(rawValue || productBarCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描产品条码')
+    return
+  }
+
+  if (!currentWarehouse.value) {
+    setErrorFeedback('请先扫描仓库条码')
+    step.value = 'idle'
+    return
+  }
+
+  scanLoading.value = true
+  try {
+    try {
+      productPreview.value = await getProductByBarCode(code)
+    } catch {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    if (!productPreview.value?.id) {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    productBarCode.value = code
+    outCount.value = 1
+    clearFeedback()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 确认出库 */
+async function handleConfirm() {
+  if (!currentWarehouse.value || !productPreview.value) return
+  if (outCount.value < 1) {
+    toast.warning('出库数量不能小于1')
+    return
+  }
+
+  // 检查是否已存在相同记录
+  const existingIndex = records.value.findIndex(r =>
+    r.warehouseId === currentWarehouse.value!.id &&
+    r.productId === productPreview.value!.id
+  )
+
+  if (existingIndex >= 0) {
+    records.value[existingIndex].scanCount += outCount.value
+  } else {
+    const record: ScanRecord = {
+      id: Date.now(),
+      productId: productPreview.value!.id,
+      productName: productPreview.value!.name,
+      productSpec: productPreview.value!.standard,
+      productBarCode: productPreview.value!.barCode,
+      productUnit: productPreview.value!.unitName,
+      productPrice: Number(productPreview.value!.minPrice || 0),
+      warehouseId: currentWarehouse.value!.id,
+      warehouseName: currentWarehouse.value!.name,
+      scanCount: outCount.value,
+      scanTime: new Date().toISOString(),
+    }
+    records.value.push(record)
+  }
+
+  const productName = productPreview.value!.name
+  clearScanInputs()
+  setSuccessFeedback(`${productName} × ${outCount.value} → ${currentWarehouse.value!.name} 出库成功`)
+
+  await nextTick()
+  focusProductInput()
+}
+
+/** 重置到初始状态 */
+function resetToIdle() {
+  clearScanInputs()
+  currentWarehouse.value = null
+  productPreview.value = null
+  step.value = 'idle'
+  setTimeout(() => {
+    clearFeedback()
+    focusWarehouseInput()
+  }, ERROR_DISPLAY_MS)
+}
+
+/** 重置到产品扫码阶段 */
+function resetToProductScan() {
+  productBarCode.value = ''
+  productPreview.value = null
+  outCount.value = 1
+  setTimeout(() => {
+    clearFeedback()
+    focusProductInput()
+  }, ERROR_DISPLAY_MS)
+}
+
+/** 相机扫码 */
+function handleCameraScan(target: 'warehouse' | 'product') {
+  if (scanLoading.value) return
+
+  // #ifdef APP-PLUS
+  plus.android.requestPermissions(
+    ['android.permission.CAMERA'],
+    function(result) {
+      const granted = result.granted
+      if (granted && granted.length > 0) {
+        doScan(target)
+      } else {
+        toast.error('请在设置中开启相机权限')
+        uni.openSetting()
+      }
+    },
+    function() {
+      toast.error('相机权限获取失败')
+    },
+  )
+  // #endif
+
+  // #ifndef APP-PLUS
+  doScan(target)
+  // #endif
+}
+
+function doScan(target: 'warehouse' | 'product') {
+  uni.scanCode({
+    onlyFromCamera: true,
+    success: async (result) => {
+      const code = normalizeScanResult(result)
+      if (!code) return
+
+      if (target === 'warehouse') {
+        warehouseBarCode.value = code
+        await handleWarehouseScan()
+      } else {
+        productBarCode.value = code
+        await handleProductScan()
+      }
+    },
+    fail: (error) => {
+      if (String(error?.errMsg || '').includes('cancel')) return
+      toast.error('相机扫码失败，请重试')
+    },
+  })
+}
+
+/** 删除单条记录 */
+function handleDeleteRecord(index: number) {
+  records.value.splice(index, 1)
+}
+
+/** 增加数量 */
+function handleIncreaseCount(index: number) {
+  if (records.value[index]) {
+    records.value[index].scanCount += 1
+  }
+}
+
+/** 减少数量 */
+function handleDecreaseCount(index: number) {
+  if (records.value[index] && records.value[index].scanCount > 1) {
+    records.value[index].scanCount -= 1
+  }
+}
+
+/** 清空所有记录 */
+function handleClearAll() {
+  if (records.value.length === 0) return
+  uni.showModal({
+    title: '确认清空',
+    content: '确定要清空所有扫码记录吗？',
+    success: (res) => {
+      if (!res.confirm) return
+      records.value = []
+      clearFeedback()
+    },
+  })
+}
+
+/** 提交出库单 */
+async function handleSubmit() {
+  if (records.value.length === 0) {
+    toast.warning('暂无扫码记录')
+    return
+  }
+
+  submitting.value = true
+  try {
+    const items = records.value.map(r => ({
+      warehouseId: r.warehouseId,
+      productId: r.productId,
+      productPrice: r.productPrice,
+      count: r.scanCount,
+    }))
+
+    await createStockOut({
+      outTime: new Date().toISOString(),
+      items,
+    })
+
+    toast.success(`已提交 ${records.value.length} 条出库记录`)
+    records.value = []
+    clearFeedback()
+    resetToIdle()
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** 清空本次扫码输入 */
+function clearScanInputs() {
+  warehouseBarCode.value = ''
+  productBarCode.value = ''
+  productPreview.value = null
+  outCount.value = 1
+}
+
+function setSuccessFeedback(message: string) {
+  feedbackTone.value = 'success'
+  feedbackMessage.value = message
+}
+
+function setErrorFeedback(message: string) {
+  feedbackTone.value = 'error'
+  feedbackMessage.value = message
+}
+
+function clearFeedback() {
+  feedbackTone.value = 'idle'
+  feedbackMessage.value = ''
+}
+
+/** 规范化扫码结果 */
+function normalizeScanCode(value: string): string {
+  if (!value) return ''
+  let result = value.trim()
+  const prefixes = ['CODE128:', 'CODE39:', 'EAN13:', 'QR:', 'DATA:', 'MECARD:', 'VCARD:']
+  for (const prefix of prefixes) {
+    if (result.startsWith(prefix)) {
+      result = result.substring(prefix.length)
+      break
+    }
+  }
+  return result
+}
+
+/** 规范化相机扫码结果 */
+function normalizeScanResult(result: UniApp.ScanCodeSuccessRes): string {
+  if (!result) return ''
+  const value = result.result || result.code || ''
+  return normalizeScanCode(value)
+}
+</script>
+
+<style lang="scss" scoped>
+.scan-page {
+  background: #f4f6f8;
+  min-height: 100vh;
+
+  &__content {
+    padding: 24rpx;
+    padding-top: calc(24rpx + env(safe-area-inset-top) + 88rpx);
+    box-sizing: border-box;
+  }
+}
+
+.scan-workbench {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.scan-panel {
+  padding: 24rpx;
+  border-radius: 18rpx;
+  background: #fff;
+
+  &--list {
+    padding-bottom: 8rpx;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+  }
+
+  &__title {
+    color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__meta {
+    color: #86909c;
+    font-size: 22rpx;
+  }
+}
+
+// 步骤指示器
+.scan-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+
+    text {
+      font-size: 22rpx;
+      color: #86909c;
+    }
+
+    &.active text {
+      color: #1677ff;
+      font-weight: 600;
+    }
+
+    &.done text {
+      color: #52c41a;
+    }
+  }
+
+  &__dot {
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    border-radius: 50%;
+    background: #f2f3f5;
+    color: #86909c;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  &__item.active &__dot {
+    background: #1677ff;
+    color: #fff;
+  }
+
+  &__item.done &__dot {
+    background: #52c41a;
+    color: #fff;
+  }
+
+  &__line {
+    flex: 1;
+    height: 2rpx;
+    background: #e5e6eb;
+    margin: 0 12rpx;
+    margin-bottom: 28rpx;
+    max-width: 80rpx;
+
+    &.done {
+      background: #52c41a;
+    }
+  }
+}
+
+// 当前作业提示
+.scan-current-hint {
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1f2329;
+  margin-bottom: 20rpx;
+}
+
+// 输入行
+.scan-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+  transition: opacity 0.2s;
+
+  &--dim {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+.scan-field {
+  flex: 1;
+  height: 88rpx;
+  padding: 0 24rpx;
+  line-height: 88rpx;
+  border: 2rpx solid #e5e6eb;
+  border-radius: 14rpx;
+  background: #f7f8fa;
+  color: #1f2329;
+  box-sizing: border-box;
+  font-size: 28rpx;
+
+  &--active {
+    border-color: #1677ff;
+    background: #fff;
+    box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1);
+  }
+}
+
+.scan-camera-btn {
+  width: 88rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 14rpx;
+  background: #1677ff;
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 600;
+  padding: 0;
+  border: none;
+  flex-shrink: 0;
+
+  &:active { opacity: 0.85; }
+  &[disabled] { background: #d9d9d9; }
+}
+
+// 仓库预览
+.scan-location-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #f6fff0;
+  border: 2rpx solid #b7eb8f;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+
+    &--code {
+      color: #52c41a;
+      font-size: 28rpx;
+      font-weight: 700;
+    }
+  }
+}
+
+// 产品预览
+.scan-product-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #fff7e6;
+  border: 2rpx solid #ffbb40;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    text-align: right;
+
+    &--name {
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+
+  &__count {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+
+    .count-btn {
+      width: 48rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      text-align: center;
+      background: #ffbb40;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+
+    .count-input {
+      width: 100rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      text-align: center;
+      background: #fff;
+      border: 2rpx solid #e5e6eb;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+// 确认按钮
+.scan-confirm-row {
+  margin-top: 16rpx;
+}
+
+.scan-confirm-btn {
+  width: 100%;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 14rpx;
+  background: #ff6b00;
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 600;
+  border: none;
+
+  &:active { opacity: 0.85; }
+  &[disabled] { background: #d9d9d9; }
+}
+
+// 底部栏
+.scan-footer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
+  background: #f4f6f8;
+
+  &__clear {
+    flex: 1;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    color: #4e5969;
+    font-size: 28rpx;
+    border: 2rpx solid #e5e6eb;
+  }
+
+  &__submit {
+    flex: 2;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #1677ff;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: 600;
+
+    &--out {
+      background: #ff4d4f;
+    }
+  }
+}
+</style>

src/pages/index/index.ts

@@ -154,6 +154,14 @@ const menuGroupsData: MenuGroup[] = [
         iconColor: '#1890ff',
         permission: 'erp:stock-in:create',
       },
+      {
+        key: 'stockOutScan',
+        name: '扫码出库',
+        icon: 'scan',
+        url: '/pages-erp/stock-out/scan/index',
+        iconColor: '#ff4d4f',
+        permission: 'erp:stock-out:create',
+      },
       {
         key: 'stockOut',
         name: '其他出库',