product-selector

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import EditorToolsProductSelector from '@aliretail/react-product-selector';
import { Button } from '@alifd/next';

class App extends Component {
  state = {
    visible: false,
  };

  render() {
    const { visible } = this.state;
    const data = {
      tabIndex: '1',
      toolCode: 'periodBuy',
      groupId: '',
      itemType: '2',
      activityType: '2',
      toolDesc: '',
      showDesc: '1234(240216872368403072)|哈哈哈(242785964010960186)',
      toolText: '',
      memberToolText: '',
      memberToolCode: null,
      memberToolDesc: '',
      categoryType: '240216872368403072',
      categoryId: '242785964010960186',
      categoryName: '哈哈哈',
      categorySource: '0-1-1',
    };
    return (
      <div>
        <Button
          onClick={() => {
            this.setState({ visible: true });
          }}
        >
          打开弹窗
        </Button>
        <EditorToolsProductSelector
          data={data}
          tabs={['1', '2', '3']} // 1 商品，2， 营销活动  3,  会员
          activeTabs={['1', '2']} // 营销活动下筛选, 1 商品类; 2 卡券类;
          activityItemTypes={['periodBuy']} // 活动类型-商品类-活动类型 筛选 拼团 groupBuy; 周期购 periodBuy; 助力券boostFission; 砍价 bargain
          productTabs={['1', '2']} // 商品下筛选 1. 商品分组地图; 2. 前台类目
          apis={{
            group_tree: 'https://mall-design.vgktq.cn/mall-portal/group/tree', // 查询分组地图 > 商品(type=1)|营销活动(type=2) 接口, type在组件内赋值
            widget_activity: 'https://mall-design.vgktq.cn/mall-portal/widget/activity', // 营销活动 > 商品类 根据活动类型查询活动名称
            widget_categoryMap: 'https://mall-design.vgktq.cn/mall-portal/widget/categoryMap', // 前台类目 类型下拉框
            widget_category: 'https://mall-design.vgktq.cn/mall-portal/widget/category', // 前台类目 树形选择器
            member_activity:
              'https://rap2api.alibaba-inc.com/app/mock/6295/mall-portal/widget/crm/activity',
          }}
          // memberActivityTypes={[0, 1]} //0-"会员签到,1-"图文互动,2-"问卷调查,3-"话题互动,4-"创意征集,5-"投票,6-"大转盘
          visible={visible}
          dialogProps={{
            onOk: (obj) => {
              console.log('商品对象', JSON.stringify(obj), obj.showDesc);
              this.setState({ visible: false });
            },
            onCancel: (obj) => this.setState({ visible: false }),
            onClose: (obj) => this.setState({ visible: false }),
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);