feat: 完成视频评论框大部分功能需求

src/App.css

@@ -2,6 +2,8 @@
   width: 100%;
   padding: 10px;
   margin-bottom: 100px;
+  background: rgba(0, 0, 0, 0.59);
+  color: white;
 }
 
 .comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {

src/App.js

@@ -463,14 +463,14 @@ class App extends Component {
       this.state.initDone && (
         <CommentContext.Provider value={value}>
           <div className="comment">
-            {this.props.showEditor && (
-              <CommentInput content={this.props.children} />
-            )}
             {this.props.showList && (
-              <div style={{ marginTop: 20 }}>
+              <div>
                 <CommentList />
               </div>
             )}
+            {this.props.showEditor && (
+              <CommentInput content={this.props.children} />
+            )}
           </div>
         </CommentContext.Provider>
       )

src/components/CommentBox/index.js

@@ -4,6 +4,7 @@ import { Icon } from "antd";
 import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import ContentItem from "./../ContentItem";
+import ReplyItem from "./../ReplyItem";
 import "./index.css";
 
 class CommentBox extends Component {
@@ -11,12 +12,14 @@ class CommentBox extends Component {
     super(props);
     this.state = {
       showReply: true,
-      page: 1
+      page: 1,
+      isShowOver3: false
     };
 
     this.handleToggleReply = this.handleToggleReply.bind(this);
     this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
     this.renderReplies = this.renderReplies.bind(this);
+    this.handleClickCollapse = this.handleClickCollapse.bind(this);
   }
 
   /**
@@ -26,6 +29,14 @@ class CommentBox extends Component {
     this.setState({ showReply: !this.state.showReply });
   }
 
+  /**
+   * 点击收起按钮的时候只展示最多三条留言
+   */
+  handleClickCollapse() {
+    this.setState({ isShowOver3: !this.state.isShowOver3 });
+    console.log("this.isMore", this.state.isShowOver3);
+  }
+
   /**
    * 获取更多评论
    * @param {string} commentId comment id
@@ -43,56 +54,133 @@ class CommentBox extends Component {
    * @param {number} replies 回复的数量
    * @param {boolean} isNoMoreReply 是否没有更多回复
    */
+  // renderReplies(replies, replyCount, isNoMoreReply) {
+  //   console.log('replies', replies);
+  //   console.log('replyCount', replyCount);
+  //   console.log('isNoMoreReply', isNoMoreReply);
+  //   const { commentId } = this.props;
+  //   const { showReply } = this.state;
+  //   if (showReply && replies && replies.length) {
+  //     const len = replies.length;
+  //     return (
+  //       <div style={{ marginLeft: 50 }}>
+  //         {replies.map((item, index) => {
+  //           if (index === len - 1) {
+  //             return [
+  //               <ContentItem
+  //                 commentId={commentId}
+  //                 replyId={item.id}
+  //                 key={item.id}
+  //                 content={item}
+  //                 action="replyToReply" // 回复的回复
+  //               />,
+  //               <div className="comment-more-box" key="show_more_button">
+  //                 {!isNoMoreReply && replyCount !== len && (
+  //                   <span
+  //                     className="comment-show-more"
+  //                     onClick={() => this.handleGetMoreReply(commentId)}
+  //                   >
+  //                     {intl.get("reply.moreReply")}
+  //                   </span>
+  //                 )}
+
+  //                 <a
+  //                   style={{ float: "right" }}
+  //                   onClick={this.handleToggleReply}
+  //                 >
+  //                   <Icon type="up" /> {intl.get("reply.collapse")}
+  //                 </a>
+  //               </div>
+  //             ];
+  //           }
+  //           return (
+  //             <ContentItem
+  //               commentId={commentId}
+  //               replyId={item.id}
+  //               key={item.id}
+  //               content={item}
+  //               action="replyToReply" // 评论的回复
+  //             />
+  //           );
+  //         })}
+  //       </div>
+  //     );
+  //   }
+  //   return null;
+  // }
+
+  /**
+   * 渲染回复 DOM
+   * @param {array} replies 回复列表
+   * @param {number} replyCount 回复的数量
+   * @param {boolean} isNoMoreReply 是否没有更多回复
+   */
   renderReplies(replies, replyCount, isNoMoreReply) {
+    console.log("this.isMore3", this.state.isShowOver3);
     const { commentId } = this.props;
     const { showReply } = this.state;
+    console.log("replies", replies);
+    console.log("replyCount", replyCount);
+    console.log("isNoMoreReply", isNoMoreReply);
     if (showReply && replies && replies.length) {
+      console.log("showReply", showReply);
       const len = replies.length;
       return (
-        <div style={{ marginLeft: 50 }}>
+        <div
+          style={{
+            marginLeft: 50,
+            borderTop: "1px solid #e3e3e3",
+            paddingTop: 15,
+            marginTop: -5
+          }}
+        >
           {replies.map((item, index) => {
             if (index === len - 1) {
               return [
-                <ContentItem
-                  commentId={commentId}
-                  replyId={item.id}
-                  key={item.id}
-                  content={item}
-                  action="replyToReply" // 回复的回复
-                />,
-                <div className="comment-more-box" key="show_more_button">
+                <ReplyItem replyItem={item} key={item.id} />,
+                <div key="show_more_button">
                   {!isNoMoreReply && replyCount !== len && (
                     <span
-                      className="comment-show-more"
+                      // className="comment-show-more"
                       onClick={() => this.handleGetMoreReply(commentId)}
                     >
-                      {intl.get("reply.moreReply")}
+                      展开更多评论
+                      <Icon type="down" />
+                    </span>
+                  )}
+                  {replyCount === len && (
+                    <span
+                      // className="comment-show-more"
+                      onClick={() => this.handleClickCollapse()}
+                    >
+                      收起
+                      <Icon type="up" />
                     </span>
                   )}
 
-                  <a
+                  {/* <a
                     style={{ float: "right" }}
                     onClick={this.handleToggleReply}
                   >
                     <Icon type="up" /> {intl.get("reply.collapse")}
-                  </a>
+                  </a> */}
                 </div>
               ];
             }
-            return (
-              <ContentItem
-                commentId={commentId}
-                replyId={item.id}
-                key={item.id}
-                content={item}
-                action="replyToReply" // 评论的回复
-              />
-            );
+            if (this.state.isShowOver3) {
+              console.log("11111");
+              return <ReplyItem replyItem={item} key={item.id} />;
+            }
+            if (!this.state.isShowOver3 && index < 3) {
+              console.log("222222");
+              return <ReplyItem replyItem={item} key={item.id} />;
+            }
+            console.log("3333");
+            return null;
           })}
         </div>
       );
     }
-    return null;
   }
 
   render() {

src/components/CommentList/index.js

@@ -77,7 +77,7 @@ class CommentList extends Component {
       <div>
         <Spin spinning={spinning}>
           {/* <div>共 {total} 条评论</div> */}
-          <div>{intl.get("comment.totalComment", { total })}</div>
+          {/* <div>{intl.get("comment.totalComment", { total })}</div> */}
           {list.map(item => (
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}

src/components/ContentItem/index.css

@@ -1,7 +1,7 @@
 .comment-item-box {
   margin: 10px 0 0 0;
   padding: 15px 5px 0 5px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #d5d5d5;
 }
 
 .comment-item-left {
@@ -14,11 +14,11 @@
   display: inline-block;
   width: 90%;
   margin-left: 10px;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
 }
 
 .comment-item-content {
-  margin: 10px 0;
+  margin: 10px 0 20px 0;
   word-break: break-all;
 }
 
@@ -38,7 +38,7 @@
 }
 
 .comment-favor {
-  font-size: 20px;
+  /* font-size: 20px; */
 }
 
 .comment-favored {
@@ -81,6 +81,11 @@
   margin-right: 10px;
 }
 
+.comment-item-icon {
+  float: right;
+  margin-left: 10px;
+}
+
 @media screen and (max-width: 616px) and (min-width: 449px) {
   .comment-item-right {
     display: inline-block;

src/components/ContentItem/index.js

@@ -14,7 +14,7 @@ import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
 
-// dayjs.locale("zh-cn");
+dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
 
 const LOCALES = {
@@ -122,8 +122,10 @@ class CommentItem extends Component {
             {/* <a href={`/${content.user_id}`}>
               {content.user_name || "暂无昵称"}
             </a> */}
-            <strong>{content.user_name || intl.get("comment.tourist")}</strong>
-            <span style={{ marginLeft: 10 }}>
+            <strong style={{ color: "#75ACFF" }}>
+              {content.user_name || intl.get("comment.tourist")}
+            </strong>
+            {/* <span style={{ marginLeft: 10 }}>
               <Tooltip
                 placement="top"
                 title={dayjs(content.created * 1000).format(
@@ -136,8 +138,39 @@ class CommentItem extends Component {
                       .fromNow()
                   : dayjs(content.created * 1000).fromNow()}
               </Tooltip>
+            </span> */}
+            <span
+              className="comment-item-icon"
+              onClick={this.handleToggleInput}
+            >
+              <Icon type="message" />
+              &nbsp; {content.reply_count}
+            </span>
+            <span className="comment-item-icon">
+              <Icon
+                type="heart"
+                onClick={() => {
+                  if (replyId) {
+                    // 如果有 replyId，则说明是评论的回复
+                    app.sReplyFavor(content.id, commentId, content.favored);
+                    return;
+                  }
+                  app.sCommentFavor(content.id, content.favored);
+                }}
+                className={
+                  content.favored
+                    ? "comment-favor comment-favored"
+                    : "comment-favor"
+                }
+              />
+              &nbsp; {content.favor_count}
             </span>
           </div>
+          <div style={{ color: "#D5D5D5" }}>
+            {dayjs(content.created * 1000).format("MM-DD HH:mm:ss")}
+          </div>
+        </div>
+        <div>
           <div
             className="comment-item-content"
             dangerouslySetInnerHTML={{
@@ -194,12 +227,21 @@ class CommentItem extends Component {
               <div className="clearfix" />
             </div>
           )}
-          <div className="comment-item-bottom">
+          {/* <div className="comment-item-bottom">
+            {content.reply_count ? (
+              <div>
+                <a className="comment-item-bottom-left" onClick={onShowReply}>
+                  {content.reply_count} 条回复
+                  {showReply ? <Icon type="up" /> : <Icon type="down" />}
+                </a>
+              </div>
+            ) : null}
+          </div> */}
+          {/* <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>
                 <a className="comment-item-bottom-left" onClick={onShowReply}>
-                  {/* {content.reply_count} 条回复 */}
-                  {intl.get("reply.totalReply", { total: content.reply_count })}
+                  {content.reply_count} 条回复
                   {showReply ? <Icon type="up" /> : <Icon type="down" />}
                 </a>
               </div>
@@ -250,7 +292,7 @@ class CommentItem extends Component {
               />
               &nbsp;{content.favor_count}
             </div>
-          </div>
+          </div> */}
         </div>
 
         {showInput && (

src/components/Editor/index.css

@@ -100,3 +100,11 @@
 .clearfix {
   clear: both;
 }
+
+.submitBtn {
+  width: 88px;
+  height: 30px;
+  background: rgba(252, 71, 71, 1);
+  border-radius: 15px;
+  color: #fff;
+}

src/components/Editor/index.js

@@ -120,8 +120,8 @@ class Editor extends React.Component {
     const { maxLength } = this.props;
     let { value, fileMap, fileList } = this.state;
     if (value.length > maxLength) {
-      // message.error(`字数不得超过${maxLength}字`);
-      message.error(intl.get("editor.maxLength", { maxLength }));
+      message.error(`字数不得超过${maxLength}字`);
+      // message.error(intl.get("editor.maxLength", { maxLength }));
       return;
     }
     const files = [];
@@ -183,8 +183,8 @@ class Editor extends React.Component {
       maxLength,
       autoFocus
     } = this.props;
-    let placeholder = this.props.placeholder || intl.get("editor.placeholder");
-    let btnSubmitText = this.props.placeholder || intl.get("editor.SubmitBtn");
+    let placeholder = this.props.placeholder || "快发表评论吧！";
+    let btnSubmitText = this.props.placeholder || "发表评论";
     const handleSubmit = this.handleSubmit;
     const disabledSubmit =
       btnDisabled ||
@@ -192,18 +192,14 @@ class Editor extends React.Component {
     const inputValue = value || this.state.value;
     return (
       <div className="comment-editor-container">
-        <div
+        {/* <div
           className={classnames({
             "comment-editor-toolbar": true,
             "comment-editor-toolbar-error": inputValue.length > maxLength
           })}
         >
-          {intl.get("editor.alreadyEntered", {
-            count: inputValue.length,
-            maxLength
-          })}
-          {/* 已输入 {inputValue.length} / {maxLength} 字 */}
-        </div>
+          已输入 {inputValue.length} / {maxLength} 字
+        </div> */}
         <div className="comment-editor">
           <TextArea
             value={inputValue}
@@ -316,6 +312,9 @@ class Editor extends React.Component {
             </div>
 
             <div className="comment-toolbar-right">
+              <span style={{ marginRight: 10 }}>
+                {inputValue.length} / {maxLength}
+              </span>
               {button ? (
                 React.cloneElement(button, {
                   onClick: button.props.onClick || handleSubmit
@@ -323,7 +322,8 @@ class Editor extends React.Component {
               ) : (
                 <Button
                   onClick={() => this.handleSubmit()}
-                  type="primary"
+                  // type="primary"
+                  className="submitBtn"
                   loading={btnLoading}
                   disabled={disabledSubmit}
                 >

src/components/ReplyItem/index.css

@@ -0,0 +1,13 @@
+.reply-item {
+  margin-bottom: 20px;
+  /* margin-top: 5px; */
+  color: #d5d5d5;
+}
+
+.reply-item-content {
+  margin-bottom: 10px;
+}
+
+.reply-item-span {
+  margin-right: 25px;
+}

src/components/ReplyItem/index.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+// import PropTypes from 'prop-type';
+import { Icon } from "antd";
+import Comment from "../../Comment";
+import CommentInput from "../CommentInput";
+import "./index.css";
+
+class ReplyItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showInput: false
+    };
+    this.handleToggleInput = this.handleToggleInput.bind(this);
+  }
+
+  handleToggleInput() {
+    this.setState({ showInput: !this.state.showInput });
+  }
+
+  render() {
+    const { commentId, replyItem, replyId, action, app } = this.props;
+
+    const { showInput } = this.state;
+
+    return (
+      <div className="reply-item">
+        <div className="reply-item-content">
+          @<strong>{replyItem.user_name}</strong>
+          {replyItem.reply ? ` 回复 @${replyItem.reply.user_name}` : null}:
+          &nbsp;
+          {replyItem.content}
+        </div>
+        <div className="reply-item-icon">
+          <span className="reply-item-span">
+            <Icon
+              type="heart"
+              onClick={() => {
+                if (replyId) {
+                  // 如果有 replyId，则说明是评论的回复
+                  app.sReplyFavor(replyItem.id, commentId, replyItem.favored);
+                  return;
+                }
+                app.sCommentFavor(replyItem.id, replyItem.favored);
+              }}
+              className={
+                replyItem.favored
+                  ? "comment-favor comment-favored"
+                  : "comment-favor"
+              }
+            />
+            &nbsp; {replyItem.favor_count}
+          </span>
+          <span className="reply-item-span">
+            <Icon type="message" onClick={this.handleToggleInput} /> &nbsp;{" "}
+            {replyItem.reply_count || 0}
+          </span>
+        </div>
+        {showInput && (
+          <CommentInput
+            content={app.children}
+            action={action}
+            replyId={replyId}
+            commentId={commentId}
+            callback={this.handleToggleInput}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export default Comment(ReplyItem);