Browse Source

Merge branch 'master' of cloudzqy/comment into master

node 6 years ago
parent
commit
100065d5ce
3 changed files with 22 additions and 8 deletions
  1. 2
    0
      README.md
  2. 8
    4
      src/App.js
  3. 12
    4
      src/components/CommentList/index.js

+ 2
- 0
README.md View File

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

+ 8
- 4
src/App.js View File

92
   sGetComment({ page = 1 } = {}) {
92
   sGetComment({ page = 1 } = {}) {
93
     const { pageType } = this.props;
93
     const { pageType } = this.props;
94
     this.handleChangeLoading("sGetComment", true);
94
     this.handleChangeLoading("sGetComment", true);
95
-    const { API, type, businessId } = this.props;
95
+    const { API, type, businessId, limit } = this.props;
96
     this.axios
96
     this.axios
97
       .get(
97
       .get(
98
-        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
98
+        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${limit}`
99
       )
99
       )
100
       .then(response => {
100
       .then(response => {
101
         const { list, page, total } = response.data;
101
         const { list, page, total } = response.data;
136
    */
136
    */
137
   sGetReply({ commentId, page = 1 } = {}) {
137
   sGetReply({ commentId, page = 1 } = {}) {
138
     this.handleChangeLoading("sGetReply", true);
138
     this.handleChangeLoading("sGetReply", true);
139
-    const { API } = this.props;
139
+    const { API, limit } = this.props;
140
     this.axios
140
     this.axios
141
-      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
141
+      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${limit}`)
142
       .then(response => {
142
       .then(response => {
143
         if (!response.data.list) {
143
         if (!response.data.list) {
144
           message.info("没有更多数据了!");
144
           message.info("没有更多数据了!");
442
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
442
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
443
   pageType: PropTypes.string, // 分页类型
443
   pageType: PropTypes.string, // 分页类型
444
   page: PropTypes.number, // 页码
444
   page: PropTypes.number, // 页码
445
+  limit: PropTypes.number, // 一次加载评论数量
445
   onPageChange: PropTypes.func, // 页码变化回调
446
   onPageChange: PropTypes.func, // 页码变化回调
447
+  onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
446
   onDelete: PropTypes.func
448
   onDelete: PropTypes.func
447
 };
449
 };
448
 
450
 
455
   showAlertFavor: false,
457
   showAlertFavor: false,
456
   showError: true,
458
   showError: true,
457
   pageType: "more",
459
   pageType: "more",
460
+  limit: LIMIT,
461
+  onGetMoreBtnClick: () => {},
458
   onPageChange: page => {},
462
   onPageChange: page => {},
459
   onDelete: () => {}
463
   onDelete: () => {}
460
 };
464
 };

+ 12
- 4
src/components/CommentList/index.js View File

3
 import Comment from "../../Comment";
3
 import Comment from "../../Comment";
4
 import CommentBox from "../CommentBox";
4
 import CommentBox from "../CommentBox";
5
 import "./index.css";
5
 import "./index.css";
6
-import { LIMIT } from "../../constant";
7
 
6
 
8
 class CommentList extends Component {
7
 class CommentList extends Component {
9
   constructor(props) {
8
   constructor(props) {
21
       total,
20
       total,
22
       page,
21
       page,
23
       pageType,
22
       pageType,
23
+      limit,
24
       isNoMoreComment,
24
       isNoMoreComment,
25
       sGetComment,
25
       sGetComment,
26
-      onPageChange
26
+      onPageChange,
27
+      onGetMoreBtnClick
27
     } = this.props.app;
28
     } = this.props.app;
28
-    if (pageType === "more") {
29
+    if (pageType === "slice") {
30
+      // 截断多余评论,通过点击查看更多跳转
31
+      return (
32
+        <div className="comment-list-show-more" onClick={onGetMoreBtnClick}>
33
+          <span>查看更多</span>
34
+        </div>
35
+      );
36
+    } else if (pageType === "more") {
29
       if (!isNoMoreComment && list.length !== total) {
37
       if (!isNoMoreComment && list.length !== total) {
30
         return (
38
         return (
31
           <div
39
           <div
45
       return (
53
       return (
46
         <div className="comment-list-pagination">
54
         <div className="comment-list-pagination">
47
           <Pagination
55
           <Pagination
48
-            pageSize={LIMIT}
56
+            pageSize={limit}
49
             current={page}
57
             current={page}
50
             total={total}
58
             total={total}
51
             onChange={p => {
59
             onChange={p => {