CouponApplicateScope

优惠券适用范围选择组件，支持自定义标签、随单发放条件说明、只读模式等功能。

安装

npm install coupon-applicate-scope

导入

import CouponApplicateScope from 'coupon-applicate-scope';

使用

import React from 'react';
import { Form } from 'antd';
import CouponApplicateScope from 'coupon-applicate-scope';

const App = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <CouponApplicateScope
        formRef={form}
        initNum={1}
        label="适用商品"
        tooltip="选择商品适用范围"
        disabled={false}
        onlyview={false}
      />
    </Form>
  );
};

export default App;

Props

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | formRef | any | 表单引用 | 必需 | | initNum | number | 初始化次数 | 必需 | | showScope5 | boolean | 是否显示指定商品不可用选项 | false | | disabled | boolean | 是否禁用 | false | | onlyview | boolean | 是否只读模式 | false | | fromPage | 'prize' | 来源页面 | undefined | | label | string | 自定义标签 | '适用商品' | | tooltip | string | 说明文案 | undefined |

功能

1. 支持选择全部商品、指定品牌、指定品类、指定商品等多种适用范围
2. 支持自定义标签和说明文案
3. 支持只读模式，所有操作不可编辑
4. 支持随单发放条件说明
5. 支持业务线切换时清空适用商品相关信息

注意事项

1. 组件依赖 antd 5.x 版本
2. 组件需要配合 Form 使用，需要传入 formRef
3. 当 onlyview 为 true 时，所有操作都会被禁用，包括选择、删除、清空等