feat: 新增被评论页面的回复按钮

slimkit · May 5, 2018 · e5f8c50 · e5f8c50
1 parent a63ab75
commit e5f8c50
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 15 deletions.
diff --git a/src/page/message/children/comments/feedItem.vue b/src/page/message/children/comments/feedItem.vue
@@ -4,22 +4,30 @@
       <v-avatar :sex="comment.user.sex" :src="comment.user.avatar" />
       <section class="userInfo">
         <router-link :class="`${prefixCls}-item-top-link`" :to="`/user/${comment.user_id}`">{{ comment.user.name }}</router-link>
-         <span v-if="comment.reply_user">回复</span> <span v-else>评论了你的动态</span>
-        <router-link :class="`${prefixCls}-item-top-link`" v-if="comment.reply_user" :to="`/user/${comment.reply_user}`">{{ comment.reply.name }}</router-link>:
+         <span v-if="comment.reply_user"> 回复</span> <span v-else> 评论了你的动态</span>
+        <router-link :class="`${prefixCls}-item-top-link`" v-if="comment.reply_user" :to="`/user/${comment.reply_user}`">{{ comment.reply.name }}</router-link>
         <p>{{ comment.created_at | time2tips }}</p>
       </section>
+      <section class="msgList-status">
+        <section class="gray">
+          <span class="replay" @click.stop="showCommentInput">回复</span>
+        </section>
+      </section>
     </div>
     <div :class="`${prefixCls}-item-bottom`">
       <span class="content" @click.stop="showCommentInput">
         {{ comment.body }}
       </span>
       <section v-if="comment.commentable !== null" @click="goToFeedDetail()">
-        <div :class="`${prefixCls}-item-bottom-noImg`" class="content" v-if="!getFirstImage">
+        <div :class="`${prefixCls}-item-bottom-noImg`" class="content" v-if="!getFirstImage && !getVideo">
           {{ comment.commentable.feed_content }}
         </div>
         <div :class="`${prefixCls}-item-bottom-img`" v-else>
           <div class="img">
-            <async-file :file="getFirstImage.id">
+            <async-file v-if="getFirstImage" :file="getFirstImage.id">
+              <img slot-scope="props" :src="props.src" :alt="comment.user.name" />
+            </async-file>
+            <async-file v-if="getVideo" :file="getVideo">
               <img slot-scope="props" :src="props.src" :alt="comment.user.name" />
             </async-file>
           </div>
@@ -56,8 +64,10 @@ export default {
      * @return   {[type]}            [description]
      */
     goToFeedDetail() {
-      const { commentable: { id = 0 } } = this.comment;
-      this.$router.push(`/feed/${id}`);
+      const {
+        commentable: { id = 0 }
+      } = this.comment;
+      this.$router.push(`/feeds/${id}`);
     },
 
     sendComment(comment) {
@@ -113,6 +123,15 @@ export default {
       }
 
       return false;
+    },
+    getVideo() {
+      const { comment } = this;
+      const { video } = comment.commentable;
+      if (video != null) {
+        return video.cover_id;
+      } else {
+        return false;
+      }
     }
   },
   created() {

diff --git a/src/page/message/children/comments/groupPostItem.vue b/src/page/message/children/comments/groupPostItem.vue
@@ -4,10 +4,22 @@
       <v-avatar :sex="comment.user.sex" :src="comment.user.avatar" />
       <section class="userInfo">
         <router-link :class="`${prefixCls}-item-top-link`" :to="`/user/${comment.user_id}`">{{ comment.user.name }}</router-link>
-        <span v-if="comment.reply_user">回复</span><span v-else>评论了你的帖子</span>
-        <router-link :class="`${prefixCls}-item-top-link`" v-if="comment.reply_user" :to="`/user/${comment.reply_user}`">{{ comment.reply.name }} </router-link>:
+        <span v-if="comment.reply_user"> 回复</span>
+        <span v-else> 评论了你的帖子</span>
+        <router-link
+          :class="`${prefixCls}-item-top-link`"
+          v-if="comment.reply_user"
+          :to="`/user/${comment.reply_user}`"
+        >
+          {{ comment.reply.name }}
+        </router-link>
         <p>{{ comment.created_at | time2tips }}</p>
       </section>
+      <section class="msgList-status">
+        <section class="gray">
+          <span class="replay" @click.stop="showCommentInput">回复</span>
+        </section>
+      </section>
     </div>
     <div :class="`${prefixCls}-item-bottom`">
       <span class="content" @click.stop="showCommentInput">
@@ -32,6 +44,16 @@
     </div>
   </section>
 </template>
+<style lang="less">
+.gray {
+  span.replay {
+    background-color: #f3f4f4;
+    padding: 10px 15px;
+    color: #999;
+    margin-right: 0;
+  }
+}
+</style>
 <script>
 const prefixCls = "msgList";
 export default {
@@ -49,8 +71,10 @@ export default {
      * @return   {[type]}            [description]
      */
     goToFeedDetail() {
-      const { commentable: { id = 0, group_id: groupId = 0 } } = this.comment;
-      this.$router.push(`/group/${groupId}/feed/${id}`);
+      const {
+        commentable: { id = 0, group_id: groupId = 0 }
+      } = this.comment;
+      this.$router.push(`/groups/${groupId}/posts/${id}`);
     },
 
     sendComment(comment) {

diff --git a/src/page/message/children/comments/newsItem.vue b/src/page/message/children/comments/newsItem.vue
@@ -4,10 +4,16 @@
       <v-avatar :sex="comment.user.sex" :src="comment.user.avatar" />
       <section class="userInfo">
         <router-link :class="`${prefixCls}-item-top-link`" :to="`/user/${comment.user_id}`">{{ comment.user.name }}</router-link>
-        <span v-if="comment.reply_user">回复</span><span v-else>评论了你的文章</span>
-        <router-link :class="`${prefixCls}-item-top-link`" v-if="comment.reply_user" :to="`/user/${comment.reply_user}`">{{ comment.reply.name }} </router-link>:
+        <span v-if="comment.reply_user"> 回复 </span>
+        <span v-else> 评论了你的资讯</span>
+        <router-link :class="`${prefixCls}-item-top-link`" v-if="comment.reply_user" :to="`/user/${comment.reply_user}`">{{ comment.reply.name }} </router-link>
         <p>{{ comment.created_at | time2tips }}</p>
       </section>
+      <section class="msgList-status">
+        <section class="gray">
+          <span class="replay-show" @click.stop="showCommentInput">回复</span>
+        </section>
+      </section>
     </div>
     <div :class="`${prefixCls}-item-bottom`">
       <span class="content" @click.stop="showCommentInput">
@@ -54,7 +60,9 @@ export default {
      * @return   {[type]}            [description]
      */
     goToFeedDetail() {
-      const { commentable: { id = 0 } } = this.comment;
+      const {
+        commentable: { id = 0 }
+      } = this.comment;
       this.$router.push(`/news/${id}`);
     },
 

diff --git a/src/page/message/style.less b/src/page/message/style.less
@@ -112,7 +112,7 @@
 .@{msgList-prefix} {
     font-size: 24px;
     &-status {
-        width: 186px;
+        width: 286px;
     }
     &-loadmore {
         background: #fff;
@@ -202,7 +202,7 @@
                 margin: 0;
             }
             section.userInfo {
-                width: 450px;
+                width: 350px;
                 margin-left: 20px;
             }
             section {
@@ -215,3 +215,22 @@
         }
     }
 }
+.amount-show {
+    margin-right: 20px;
+}
+.replay-show {
+    margin-right: 0;
+    background-color: #f3f4f4;
+    padding: 10px 15px;
+}
+.audit-show {
+    margin-right: 20px;
+    color: #fca308;
+}
+.audit-operation {
+    margin-right: 0;
+    color: #4bb893;
+    border: 1px solid #4bb893; /*no*/
+    border-radius: 15px; /*no*/
+    padding: 4px 15px;
+}