# @mas.io/adc-evaluation

> @alipay/adc-evaluation 的组件描述

Latest version **1.0.1** (published 2021-07-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @mas.io/adc-evaluation
pnpm add @mas.io/adc-evaluation
yarn add @mas.io/adc-evaluation
bun add @mas.io/adc-evaluation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-07-01 |
| First published | 2021-07-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 62.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mas-author |
| Maintainers | bingjian.guo |

## Links

- npm: https://www.npmjs.com/package/@mas.io/adc-evaluation
- npm.io page: https://npm.io/package/@mas.io/adc-evaluation

## Dependencies (3)

- [mini-ali-ui](https://npm.io/package/mini-ali-ui.md) ^1.3.4
- [@mas.io/falcon-core](https://npm.io/package/@mas.io/falcon-core.md) ^1.0.5
- [@mas.io/adc-flat-list](https://npm.io/package/@mas.io/adc-flat-list.md) ^1.0.2

## Recent versions

- 1.0.1 (latest) — 2021-07-01

## README

# 安装
```bash
tnpm install --save @alipay/adc-evaluation
```

# 组件介绍

行业小程序评论组件。实现了评论系统在渲染层面的一套完整解决方案。
使用限制：
1. 暂不支持对二级评论的点赞。
2. ios下，由于小程序不能使textarea自动聚焦唤起键盘，因此在发送消息时的交互上有缺陷。

# 参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例
--|:--:|:--:|:--:|:--: | :-:
comments | 是 | Object | 所有的评论数据。 | { total: 0, data: [] }, | 见详解
mode | 否 | 'A' \| 'B' \| 'C' | 模式A：最简单的模式，完全根据comments的数据一次性全部渲染。此模式的demo在/demo/pages/index。 模式B：一级评论支持上拉分页加载。需要传onFetchComment数据加载方法配合使用。 模式C：在模式B的基础上，使二级评论的展开使用弹窗㫫示，并支持上拉分页加载。需要传onFetchChildComment数据加载方法配合使用 | 'A' | --
article | 否 | Array | 主题相关数据。likesCount：点赞数，liked：本人是否点了赞，collected：本人是否点了收藏 | { likesCount: 0, liked: false, collected: false } | --
user | 是 | Object | 用户（本人）的id和name | -- | { id: 123, name: 'XXXX' }
author | 是 | Object | 主题文章作者的id和name | -- | { id: 123, name: 'XXXX' }
messageConfig | 否 | Object | min设置回复消息的最小长度，max设置回复消息textarea的maxlength | { min: 1, max: -1 } | --
childCommentFoldLimit | 否 | Number | 二级评论的折叠限度。超过以后会显“剩余X条回复” | 2 | --
limit | 否 | Number | 分页请求每页条数 | 10 | --
loadContent | 否 | Array | 加载时的底部提示 |  ['马不停蹄加载更多数据中...', '-- 已经到底了，加不了咯 --'] | --
autoScroll | 否 | Boolean | 插入新评论后，如果不在可视区域，是否自动滚动（mode B C生效） | true | --
showComplain | 否 | Boolean | 底部选项弹窗是否显示投拆按钮 | true | --
extraBottomOptions | 否 | Array | 底部选项弹窗可新增的自定义按钮 | [] | ['复制', '转发']
footerIcons | 否 | Object | 底部输入框右侧的图标按钮显示配置。设为false则不显示 | { liked: true, collect: true, share: true } | --
useDefaultFooterIcons | 否 | Boolean | 若要使用底部输入框右侧的图标的自定义插槽，需要设为false | true | --
defaultPlaceholder | 否 | String | 底部输入框的默认placeholder | '说点什么…' | --
className | 否 | String | 组件容器自定义类名 | -- | --
onTapLikes | 否 | Function | 评论点赞事件。(commentId) => void;  | null | --
onUserTap | 否 | Function | 用户头像、名称点击事件。(user: Object) => void; user是comments中的相应user数据  | null | --
onLoadMore | 否 | Function | 折叠的二级评论点击展开事件。(commentId) => void;  | null | --
onIconTap | 否 | Function | 底部输入框右侧的图标按钮点击事件。(type: 'likes' \| 'collect' \| 'share') => void;  | null | --
onSendMessage | 否 | Function | 新消息发送事件，成功后需返回新评论的id。(msgData: Object) => id; msgData包含：commentId: 回复评论的id。如果回复的是主题，为null。message: 回复内容。replyToAuthor: 回复对象的信息。replyType: 'author' \| 'self' \| 'others' | null | --
onDelete | 否 | Function | 删除事件。只有自已的评论才能删除。删除成功后需返回true。(commentId, childCommentId) => boolean;  | null | --
onComplain | 否 | Function | 投诉事件。(commentId, childCommentId) => void;  | null | --
onBottomPopupTap | 否 | Function | 底部选项弹窗自定义事件。 | null | --
onFetchComment | 是(mode B C) | Function | 评论数据请求; (page: number, limit: number) => Promise < { total(数据总数): number, list(数据): [] }>;使用方法详见demo  | null | --
onFetchChildComment | 是(mode C) | Function | 二级评论数据请求; (page: number, limit: number, commentId) => Promise < { total(数据总数): number, list(数据): [] }>; 使用方法详见demo  | null | --


# comments详解

comments.data是所有的评论数据，comments.total是所有评论的数量。
组件为受控组件，只负责数据渲染与基本的交互，因此所有相关的操作都需要使用方自已处理comments数据。
comments.data的内容示例如下：

```json
[{
  "id": 893699089, // 评论id
  "content": "原来吃得饱真的会容易犯困😂", // 评论内容
  "createdTime": 1585838087000, // 创建时间
  "hot": true, // 热评标记
  "author": { // 评论作者
    "id": "1989c9da524485b28b221c90ea43a755",// 作者id
    "name": "Micky", // 作者名称
    "avatarUrl": "https://pic2.zhimg.com/da8e974dc.jpg?source=06d4cd63" // 作者头像
  },
  "likesCount": 97, // 点赞数
  "liked": false, // 本人是否点赞
  "childCommentCount": 4, // 子评论总条数
  "childComments": [ // 子评论数据
    {
      "id": 893717955,
      "content": "所以记住吃八分饱哦～加餐补充能量",
      "createdTime": 1585839133000,
      "author": {
        "id": "5b9b52904d577fb91a65f88896aa758b",
        "name": "杨布豆",
        "avatarUrl": "https://pic2.zhimg.com/v2-88b0739e47e888591ae3052d4640fa7f.jpg?source=06d4cd63"
      },
      "replyToAuthor": { // 子评论的回复对象
        "id": "1989c9da524485b28b221c90ea43a755",
        "name": "Micky",
        "avatarUrl": "https://pic1.zhimg.com/da8e974dc.jpg?source=06d4cd63"
      }
    }
  ]
}]
```


# Slot

Name | 说明 | 是否必传
--|:--:|:--:
header | B、C模式使用，文章正文需要放在此插槽内 | B、C模式必传
footerIcons | 底部输入框右侧的图标按钮的自定义插槽，使用时需设置useDefaultFooterIcons为false | 否


# 附带的投诉页面

组件附带的投诉页面，需要使用方自行创建页面，实现跳转。
页面只需要引入投诉组件就可以了。详细示例见demo。

### 投诉页面参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例
--|:--:|:--:|:--:|:--: | :-:
className | 否 | String | 组件容器自定义类名 | -- | --
options | 否 | Array | 投诉选项 | ['含有广告信息', '含有色情、淫秽内容', '含有低俗、辱骂内容', '含有反社会、暴力等内容'] | --
onSubmit | 是 | Function | 提交事件。(option: string) => void; | null | --


# 时间格式显示规则

距当前时间
1. 一分钟内，显示为 刚刚
2. 一小时内，显示为 xx 分钟前
3. 小于 24 小时，显示为 xx 小时 xx 分钟前（整小时不显示分钟）
4. 间隔超过 24 小时，并且处于昨天，显示：昨天 xx：xx
5. 同一年，显示：xx 月 xx 日 xx：xx
6. 跨年，显示：xxxx 年 xx 月 xx 日 xx：xx

# 在小程序中使用

主组件
```json
{
  "usingComponents": {
    "adc-evaluation": "/components/es/index"
  }
}
```

投诉页面
```json
{
  "usingComponents": {
    "adc-evaluation-complain": "/components/es/sub_components/complain/index"
  }
}
```

在 page.axml 中引用组件

A模式
```html
<!-- 页面使用方式 -->
<view>
  <view class="article">
    文章正文
  </view>
  <adc-evaluation mode="A"
    comments="{{comments}}"
    article="{{article}}"
    user="{{user}}"
    author="{{author}}"
    onTapLikes="onTapLikes"
    onLoadMore="onLoadMore"
    onIconTap="onIconTap"
    onUserTap="onUserTap"
    onSendMessage="onSendMessage"
    onDelete="onDelete"
    onComplain="onComplain">
  </adc-evaluation>
</view>
```

B、C模式
```html
<!-- 页面使用方式 -->
<adc-evaluation mode="C"
  comments="{{comments}}"
  article="{{article}}"
  user="{{user}}"
  author="{{author}}"
  onTapLikes="onTapLikes"
  onIconTap="onIconTap"
  onSendMessage="onSendMessage"
  onDelete="onDelete"
  onComplain="onComplain"
  onFetchComment="onFetchComment"
  onFetchChildComment="onFetchChildComment">
  <view slot="header"
    class="article">
    文章正文，需要用slot插入
  </view>
</adc-evaluation>
```

## Badges

[![TNPM version][tnpm-image]][tnpm-url]
[![TNPM downloads][tnpm-downloads-image]][tnpm-url]
[![install size][install-size-image]][install-size-url]

[tnpm-image]: https://npm.alibaba-inc.com/badge/v/@alipay/adc-evaluation.svg
[tnpm-url]: https://npm.alibaba-inc.com/package/@alipay/adc-evaluation
[tnpm-downloads-image]: https://npm.alibaba-inc.com/badge/d/@alipay/adc-evaluation.svg

--------------------

---
_Source: https://npm.io/package/@mas.io/adc-evaluation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._