CInputScanCode 扫码输入框组件

功能说明

CInputScanCode 是一个扫码输入框组件，集成了文本输入框和扫码按钮。用户可以通过点击扫码按钮调用设备的扫码功能，将扫描结果自动填入输入框中。

引用方式

import { CInputScanCode } from '@components/forms/input';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• placeholder (String，可选)：输入框占位提示文本
• readOnly (Boolean，可选)：只读模式，默认为 false，设置为 true 时扫码按钮将被禁用
• onScaning (Function，可选)：由业务层调用 app 的扫码功能时的回调函数，主要用于非小程序环境
• onBlur (Function，可选)：输入框失去焦点时的回调函数

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="barcode" label="条形码">
      <CInputScanCode placeholder="请扫描条形码" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CInputScanCode } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CInputScanCode
  },
  data() {
    return {
      form: {
        barcode: ''
      }
    };
  }
};
</script>

在 App 中使用（非小程序环境）

<template>
  <CForm :form="form">
    <CFormItem name="barcode" label="条形码">
      <CInputScanCode 
        placeholder="请扫描条形码" 
        :onScaning="handleScaning" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CInputScanCode } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CInputScanCode
  },
  data() {
    return {
      form: {
        barcode: ''
      }
    };
  },
  methods: {
    handleScaning(callback) {
      // 调用 App 原生的扫码功能
      // 示例：通过 JSBridge 调用原生扫码
      if (window.JSBridge) {
        window.JSBridge.callNative('scanBarcode', {}, (result) => {
          if (result && result.code) {
            callback(result.code);
          } else {
            this.$toast('扫码失败');
            callback(null);
          }
        });
      } else {
        this.$toast('当前环境不支持扫码');
        callback(null);
      }
    }
  }
};
</script>

只读模式

<CFormItem name="barcode" label="条形码">
  <CInputScanCode placeholder="请扫描条形码" :readOnly="true" />
</CFormItem>

注意事项

1. 组件会根据运行环境自动选择扫码方式：

• 在小程序环境中，使用 Taro.scanCode API
• 在 H5 环境中的微信浏览器内，也使用 Taro.scanCode API
• 在其他浏览器环境中，通过 onScaning 回调函数调用 App 原生的扫码功能

1. 扫码过程中，扫码按钮会显示加载状态
2. 扫码取消或失败时，会显示相应的提示信息
3. 在只读模式下，扫码按钮将被禁用
4. 使用此组件时，需要确保应用有相应的扫码权限