@aliretail/react-material-selector

material-selector

素材选择器

API

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import MaterialSelector from '@aliretail/react-material-selector';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
  }
  render() {
    const props = {
      apis: {
        // 内容去查询接口
        // materialSearchURL:'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
        materialSearchURL: 'https://mall-design-sit.vgktq.cn/mall-portal/material/search',

        // 树形结构内容渲染接口
        // dirQueryURL : 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/materialDir/query',
        dirQueryURL: 'https://mall-design-sit.vgktq.cn/mall-portal/materialDir/query',

        // 获取上传oss信息的api的url
        // getOssSignature: 'http://tny.dev.retailcloud.zacz.cn/file/dubbo/getOssSignature',
        getOssSignature: 'https://mall-design-sit.vgktq.cn/mall-portal/material/sign',

        // 上传oss接口
        ossUpload: 'https://cz-item.oss-cn-hangzhou.aliyuncs.com/',

        // 素材创建
        // materialCreate: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/create',
        materialCreate: 'https://mall-design-sit.vgktq.cn/mall-portal/material/create',

        //前往素材管理的地址(废弃，使用下方的 linkToMaterialCenter)
        materialAddress:
          'https://tny.epochdev.zacz.cn/ui/retailforce_oms/tab_nav_layout?tab=user_center#/retailforce_crm/member-MediaMaterials',
      },
      // 是否展示素材选择弹窗，默认为true
      showDialog: this.state.visible,
      // 是否展示上传按钮
      showUpload: true,
      // 支持多选
      multiSelect: true,
      // 支持批量上传
      multiUpload: true,
      // 修改弹框标题
      title: '选择素材',
      // 是否显示上传按钮
      uploader: true,

      // 样式名称
      className: 'style1',

      // 是否展示所有类型的素材，不传都展示，传了展示对应的tab
      showTabs: ['img', 'icon', 'video', 'other'],

      //上传
      // 限制图片上传格式及提示信息
      imgType: ['jpg', 'jpeg', 'jpe', 'bmp', 'gif', 'png'],
      imgTypeErrorMessage: '只允许上传.jpg/.jpeg/.jpe/.bmp/.gif/.png格式的图片',
      imgUploadSize: 3145728,
      imgUploadSizeErrorMessage: '只允许上传小于3M的图片',
      //图片上传像素限制
      imgUploadWidth: 2976,
      imgUploadWidthErrorMessage: '上传不符合尺寸',
      imgUploadHeight: 3968,
      imgUploadHeightErrorMessage: '上传不符合尺寸',

      // 限制icon上传格式及提示信息
      iconType: ['svg'],
      iconTypeErrorMessage: '只允许上传.svg格式的图片',
      // 限制icon上传文件大小
      iconUploadSize: 10485760,
      iconUploadSizeErrorMessage: '只允许上传小于10M的图标',

      //限制视频上传格式及提示信息
      videoType: ['mp4'],
      videoTypeErrorMessage: '只允许上传.mp4格式的视频',
      //视频上传大小限制
      videoUploadSize: 31457280,
      videoUploadSizeErrorMessage: '只允许上传小于30M的视频',
      //视频上传时长限制
      videoUploadDuration: 61,
      videoUploadDurationErrorMessage: '视频时长不得超过60s',

      //选中
      //文件选择数量
      tabNumbers: 10,
      //选中图片像素宽，文件像素高
      imgWidth: null,
      imgWidthErrorMessage: '选中不符合宽',
      imgHeight: '',
      imgHeightErrorMessage: '选中不符合高',

      //全局选中限制
      // selectAllFormat:['svg'],
      // selectAllFormatErrorMessage:'只能选.svg格式图片',

      // 选中的图片格式限制
      imgSelectFormat: ['jpg', 'jpeg', 'jpe', 'bmp', 'gif', 'png'],
      imgSelectFormatErrorMessage: '只允许选择.jpg/.jpeg/.jpe/.bmp/.gif/.png格式的图片',
      imgSelectSize: 31457280,
      imgSelectSizeErrorMessage: '只允许选择小于3m的图片',

      // 选中的icon素材格式限制
      iconSelectFormat: ['svg'],
      iconSelectFormatErrorMessage: '只允许选择.svg格式的图片',

      //选中的视频式限制
      videoSelectFormat: ['mp4'],
      videoSelectFormatErrorMessage: '只能选择格式MP4的视频',
      //选择单个视频大小限制及错误信息提示,单位字节
      videoSelectSize: 31457280,
      videoSelectErrorMessage: '只能选择小于30M的视频',
      //选择单个视频时长限制，单位秒
      videoSelectDuration: 61,
      videoSelectDurationErrorMessage: '时长不得超61s',

      // 业务场景 -
      bizName: 'crm',
      // 业务类型 -
      bizType: 'articleMaterial',
      // 选择素材后的回调，result见出参
      onComplete: (result) => {
        console.log('result: ', result);
        this.setState({ visible: false });
      },
      // 取消回调
      onCancel: () => {
        console.log('cancel');
        this.setState({ visible: false });
      },
      // 关闭回调
      onClose: () => {
        console.log('close');
        this.setState({ visible: false });
      },
      // 空素材的时候，点击跳转到素材中心的事件
      linkToMaterialCenter: () => {
        location.href = 'http://www.aliyun.com';
      },
      // 选择素材后的回调，result保存在这个里面，再次打开会显示已经被选中的素材
      value: [],
    };

    return (
      <div>
        <MaterialSelector {...props} />
      </div>
    );
  }
}

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