npm package: @shihuo/image-pool-component
Description: 后台图片池物料
Latest version: 4.2.3

# 图片池组件

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

#### 外放API

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

##### setUpCompare

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

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

设置后的功能表现：

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

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



##### clearCompare

清空compare对象



######  核心数据结构

```javascript
// 推荐图片 | 渠道图片 | 
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,
}]
```



###### 部分函数用法解析

```js

// 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);
}}
```





###### 其他

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