Merge branch 'master' of cloudzqy/comment into master

README.md

@@ -201,6 +201,8 @@ main();
 | token            | string         |                                    | false    | [deprecated] token，用于身份认证，非必须。默认使用 cookie                             |
 | pageType         | string         | more                               | false    | 分页类别， more-加载更多 pagination-页码                                              |
 | page             | number         |                                    | false    | 页码受控模式,如果传递了此参数,则需要通过onPageChange回调手动维护page.                 |
+| limit             | number         |10                                  | false    | 一次加载的评论数量            |
+| onGetMoreBtnClick      | function() |                                    | false    | 点击查看更多按钮的回调                            |
 | onPageChange     | function(page) |                                    | false    | 页码发生变化时的回调,注意:分页数据获取还是在组件内部处理的                            |
 | onDelete         | function(type) |                                    | false    | 评论或回复删除成功后的回调, type: "comment" \| "reply" , 用于区分删除的是评论还是回复 |
 

src/App.js

@@ -92,10 +92,10 @@ class App extends Component {
   sGetComment({ page = 1 } = {}) {
     const { pageType } = this.props;
     this.handleChangeLoading("sGetComment", true);
-    const { API, type, businessId } = this.props;
+    const { API, type, businessId, limit } = this.props;
     this.axios
       .get(
-        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
+        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${limit}`
       )
       .then(response => {
         const { list, page, total } = response.data;
@@ -136,9 +136,9 @@ class App extends Component {
    */
   sGetReply({ commentId, page = 1 } = {}) {
     this.handleChangeLoading("sGetReply", true);
-    const { API } = this.props;
+    const { API, limit } = this.props;
     this.axios
-      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
+      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${limit}`)
       .then(response => {
         if (!response.data.list) {
           message.info("没有更多数据了！");
@@ -442,7 +442,9 @@ App.propTypes = {
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
   pageType: PropTypes.string, // 分页类型
   page: PropTypes.number, // 页码
+  limit: PropTypes.number, // 一次加载评论数量
   onPageChange: PropTypes.func, // 页码变化回调
+  onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
   onDelete: PropTypes.func
 };
 
@@ -455,6 +457,8 @@ App.defaultProps = {
   showAlertFavor: false,
   showError: true,
   pageType: "more",
+  limit: LIMIT,
+  onGetMoreBtnClick: () => {},
   onPageChange: page => {},
   onDelete: () => {}
 };

src/components/CommentList/index.js

@@ -3,7 +3,6 @@ import { Spin, Pagination } from "antd";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 import "./index.css";
-import { LIMIT } from "../../constant";
 
 class CommentList extends Component {
   constructor(props) {
@@ -21,11 +20,20 @@ class CommentList extends Component {
       total,
       page,
       pageType,
+      limit,
       isNoMoreComment,
       sGetComment,
-      onPageChange
+      onPageChange,
+      onGetMoreBtnClick
     } = this.props.app;
-    if (pageType === "more") {
+    if (pageType === "slice") {
+      // 截断多余评论，通过点击查看更多跳转
+      return (
+        <div className="comment-list-show-more" onClick={onGetMoreBtnClick}>
+          <span>查看更多</span>
+        </div>
+      );
+    } else if (pageType === "more") {
       if (!isNoMoreComment && list.length !== total) {
         return (
           <div
@@ -45,7 +53,7 @@ class CommentList extends Component {
       return (
         <div className="comment-list-pagination">
           <Pagination
-            pageSize={LIMIT}
+            pageSize={limit}
             current={page}
             total={total}
             onChange={p => {