图片池组件

@shihuo/image-pool-component

后台图片池物料

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ----------------- | ------------------------------------------------------------ | ---- | -------- | ------ | ------------------------------------------------------------ | | activeKey | 指定激活的tab | | enum | rec | rec | supplier | | ruler | 指定线框类型 | | enum | | shoes | clothes | expand | brand | | goodsId | 商品ID | 是 | number | | | | styleId | 配色ID | 是 | number | | | | buttons | 图片池图片可被引用至的图片类型 | | object[] | [] | button数据结构参照下方 | | compare | 被比较的图片对象 | | object | null | 传入时会对应开放部分功能，如：1、可直接对推荐渠道图片进行使用。2、放开图片对比按钮。3、推荐图片将会被排序，命中图片类型的图片将往前排4、进行分数比较，渠道图片分数较高时将会被标记数据结构参照下方该属性再v2.0.18版本废弃 | | onInitLoad | 各个类型tab内容初次加载时触发 | | function | | 接收参数列表：1、activeKey2、state：当前展示内容下包含的状态数据3、queryParams：当前查询条件（仅渠道图片池tab具备）该属性再v2.0.18版本废弃 | | onRecLoad | 推荐属性池tab内容初次加载时触发 | | function | | 同onInitLoad | | onSupplierLoad | 渠道属性池tab内容初次加载时触发 | | function | | 同onInitLoad | | onTabChange | 切换类型tab时触发 | | function | | | | onSearch | 重新触发查询时触发 | | function | | 接收参数列表：1、activeKey2、state：当前展示内容下包含的状态数据3、queryParams：当前查询条件注意：推荐图片tab激活时不触发 | | onButtonClick | 当引用按钮buttons中元素被点击时或传入compare状态下点击[使用]按钮触发 | | function | | 接收参数列表：1、activeKey2、button/compare：当前被点击的按钮/传入的compare对象3、image：当前被使用的图片对象 | | from | 来源 | | string | | 供埋点上报使用，不传默认空字符 | | axios | axios实例 | | | | 自定义axios实例 | | beforeCompare | 对比方法 | | function | | 该方法用于获取被对比的图片列表，需要返回被对比的图片数组，图片数据结构可见下方compare数据类型。方法接收参数image，为当前图片池中等待对比的图片对象，数据类型同上v2.0.18新增 | | onWaitUseCallback | 当前图片池列表中是否存在高于指定图片类型的分数的工具函数 | | function | | 具体用法可查看下方。v2.0.23新增 | | supplierId | | | number | | 指定渠道ID，属于特殊场景字段，非必填。传入有效的渠道ID时在渠道图片池中会新增渠道下图片tab，供业务方使用。v2.0.29新增 | | lazyLoad | 图片池tab开启懒加载 | | boolean | false | v4.0.8新增 | | volume | 文件大小限制 | | number | | 文件大小最大限制，可输入浮点数单位：Mps.使用图片时触发校验 | | ratio | 宽高比 | | string/number/Array | | 预设 1:1、3:4选项支持传入字符串格式 "数字:数字"如：10:7 表示宽/高必须10/7支持传入数字：值表示宽/高支持传入数组：其中一种宽高比通过即校验通过ps.使用图片时触发校验 | | widthRange | 宽度范围 | | number/string/Array | | null表示不限宽number以及字符串数字表示固定宽度ps.使用图片时触发校验 | | heightRange | 高度范围 | | number/string/Array | | 同withRangeps.使用图片时触发校验 | | tabs | 受控的图片池模块展示 | | Array | ['rec', 'supplier', 'mat', 'quick'] | rec: 推荐模块supplier: 渠道图片池mat: 素材库quick: 快速找图 |

外放API

通过ref获取组件实例后，可调用部分功能函数

setUpCompare

设置目标图片对象，改方法替换原有compare属性能力。

入参：compare对象，数据结构见下方

设置后的功能表现：

1、推荐图片栏：将图片列表重新排序，根据图片类型进行置顶。

2、渠道图片池栏：设置指定图片类型进行重新查询。

clearCompare

清空compare对象

核心数据结构

// 推荐图片 | 渠道图片 | 
const image = {
    "goods_id": 0, // 所属商品id
    "style_id": 0, // 所属配色id
    "image_url": "", // 图片链接
    "image_size": 146081, // 图片大小
    "image_height": 800, // 宽
    "image_width": 800, // 高
    "image_type": 7, // 主类型
    "image_child_type": 71, // 子类型
    "image_type_name": "侧面图", // 图片类型中文展示
    "score": 80.5, // 字节分
    "byte_score": 80.5, // 字节分
    "source": "pool", // 图片来源
    "source_id": 480, // 图片为一标记
    "supplier_id": 15466792, // 渠道id
    "store": "天猫", // 商城
    "channel_type": 2
}

// compare必须属性
const compare = {
  	"image_url": "",
    "image_type": 0,
    "image_child_type": 0,
  	"byte_score": 0,
  	"image_type_name": ""
}

// buttons元素结构
const buttons = [{
  	"label": "按钮名称",
  	"image_type": 0,
    "image_child_type": 0,
}]

部分函数用法解析

// compare必须属性
const compare = {
  "image_type": 7,
  "image_child_type": 71,
  "byte_score": 20
}

onWaitUseCallback={(triggerCompareCallback) => {
  const isAllowUse = triggerCompareCallback(compare);
  this.setState({ triggerCompareCallback });
  console.log('是否在图片池中具备高于当前传入的图片分数的图片', isAllowUse);
}}

其他

• 图片池组件一般使用左右分布场景下使用，如左侧展示业务类内容展示，右侧展示图片池组件。
• 若希望图片池中仅内部产生滚动，则需要在图片池组件的外侧父级容器设置固定高度即可