feat: (#322) 新增 圈子 - 帖子 - 基础操作 (#327) 重构 动态

src_v2/page/feed/components/commentInput.vue → src_v2/components/feed/components/commentInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div @click.stop='' class="comment-input">
-        <textarea :style='textareaStyles' :maxlength="maxlength" :placeholder="placeholder" ref='input' autofocus="true" :value="currentValue" @keyup.enter="handleEnter" @input="handleInput" />
+        <textarea :style='textareaStyles' :maxlength="maxlength" :placeholder="placeholder" ref='input' autofocus="true" :value="currentValue" @keyup.ctrl.enter="handleEnter" @input="handleInput" />
         <div class="comment-input-append">
             <template v-if='len > 200'>
                 <p>{{ len }}/{{maxlength}}</p>
@@ -51,6 +51,11 @@ export default {
             this.setCurrentValue(value);
             this.$emit('on-change', event);
         },
+        handleEnter() {
+            if(this.currentValue) {
+                this.$emit('on-ok', this.currentValue);
+            }
+        },
         handleChange(event) {
             this.$emit('on-input-change', event);
         },

src_v2/page/feed/components/feedCommentItem.vue → src_v2/components/feed/components/feedCommentItem.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="feed_comment_item" @click.stop='commentAction'>
-        <a @click.stop="to(`/user/${user.id}`)" class="user_name">{{ user.name }}</a>
-        <template v-if='reply_user'>
+    <div class="feed-comment-item" v-if='user.id' @click.stop='commentAction'>
+        <a @click.stop="to(`/user/${user.id}`)" class="user-name">{{ user.name }}</a>
+        <template v-if='replyUser'>
             回复
-            <a @click.stop='to(`/user/${reply_user.id}`)' class="user_name">{{ reply_user }}</a>
+            <a @click.stop='to(`/user/${replyUser.id}`)' class="user-name">{{ replyUser.name }}</a>
         </template>
         <span class="content">{{ body }}</span>
     </div>
@@ -18,34 +18,39 @@ export default {
     },
     computed: {
         user() {
-            return this.comment.user || {};
+            const { user, user_id } = this.comment;
+            const usr = user ? user : this.$store.getter.getUserById(usr);
+            if(usr.id === user_id) {
+                return user;
+            }
+            return {};
         },
-        reply_user() {
-            return this.comment.reply_user || 0
+        replyUser() {
+            return this.comment.reply;
         },
         body() {
             let r = this.comment.body;
-            return r.length > 60 ? r.slice(0, 57) + '...' : r;
+            return r.length > 60 ? r.slice(0, 57) + '…' : r;
         }
     },
     methods: {
         to(path) {
             this.$router.push({ path });
         },
         commentAction() {
-            this.$emit('action', this.user.id, this.user.name);
+            this.$emit('action', this.user.id, this.user.name, this.comment.id);
         }
     }
 }
 </script>
 <style lang='less'>
-.feed_comment_item {
+.feed-comment-item {
     color: #999;
     font-size: 26px;
     line-height: 1.4;
     max-height: 26*1.4*3px;
     overflow-y: hidden;
-    .user_name {
+    .user-name {
         padding: 0 5px;
         color: #333;
         &:last-of-type:after {

src_v2/page/feed/components/feedImages.vue → src_v2/components/feed/components/feedImages.vue

@@ -121,11 +121,14 @@ export default {
             content: '长图';
             display: block;
             position: absolute;
-            bottom: 1px;/*no*/
-            right: 1px;/*no*/
+            bottom: 1px;
+            /*no*/
+            right: 1px;
+            /*no*/
             padding: 0 5px;
             height: 30px;
-            border-radius: 1px; /*no*/
+            border-radius: 1px;
+            /*no*/
             line-height: 30px;
             font-size: 20px;
             z-index: 1;
@@ -202,79 +205,4 @@ export default {
         }
     }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*.puzzle {
-        width: 100%;
-        height: 100%;
-        div {
-            float: left;
-            overflow: hidden;
-            position: relative;
-        }
-        .vertical {
-            background-repeat: no-repeat;
-            background-size: 100% auto;
-            background-position: center center;
-        }
-        .horizontal {
-            background-repeat: no-repeat;
-            background-size: auto 100%;
-            background-position: center center;
-        }
-    }
-    .puzzle-size (@height, @width) {
-        height: @height;
-        width: @width;
-    }
-    .puzzle-5 {
-        .puzzle();
-        .box:nth-child(1) {
-            .puzzle-size(66.5%, 66.7%);
-        }
-        .box:nth-child(2), .box:nth-child(3) {
-            .puzzle-size(50%, 33.3%);
-        }
-        .box:nth-child(3) {
-            float: right;
-        }
-        .box:nth-child(4), .box:nth-child(5) {
-            .puzzle-size(33.3%, 33.3%);
-        }
-    }*/
 </style>

src_v2/page/feed/components/feedTool.vue → src_v2/components/feed/components/feedTools.vue

@@ -1,19 +1,19 @@
 <template>
-    <div class="feed_tool">
-        <div class="feed_tool_item" :class='{has_like}' @click.stop='likeFeed'>
-            <v-icon :type='`${ has_like ? "feed-like":"feed-unlike"}`' class='feed_tool_icon'></v-icon>
-            <span>{{ like_count }}</span>
+    <div class="feed-tool">
+        <div class="feed-tool-item" :class='{hasLike}' @click.stop='likeFeed'>
+            <v-icon :type='`${ hasLike ? "feed-like":"feed-unlike"}`' class='feed-tool-icon'></v-icon>
+            <span>{{ likeCount }}</span>
         </div>
-        <div class="feed_tool_item" @click.stop='commentFeed'>
-            <v-icon type='feed-comment' class='feed_tool_icon'></v-icon>
-            <span>{{ comment_count }}</span>
+        <div class="feed-tool-item" @click.stop='commentFeed'>
+            <v-icon type='feed-comment' class='feed-tool-icon'></v-icon>
+            <span>{{ commentCount }}</span>
         </div>
-        <div class="feed_tool_item">
-            <v-icon type='feed-eye' class='feed_tool_icon'></v-icon>
-            <span>{{ like_count }}</span>
+        <div class="feed-tool-item">
+            <v-icon type='feed-eye' class='feed-tool-icon'></v-icon>
+            <span>{{ viewCount }}</span>
         </div>
-        <div class="feed_tool_item" @click.stop='moreAction'>
-            <v-icon type='feed-more' class='feed_tool_icon'></v-icon>
+        <div class="feed-tool-item" @click.stop='moreAction'>
+            <v-icon type='feed-more' class='feed-tool-icon'></v-icon>
         </div>
     </div>
 </template>
@@ -26,17 +26,22 @@ const isNum = {
 export default {
     name: 'feedTool',
     props: {
-        has_like: {
+        hasLike: {
             type: Boolean,
-            default: false,
             required: true
         },
-        like_count: {
+        likeCount: {
             type: [Number, String],
             required: true,
             ...isNum
         },
-        comment_count: {
+        viewCount: {
+            type: [Number, String],
+            required: true,
+            ...isNum
+        },
+
+        commentCount: {
             type: [Number, String],
             required: true,
             ...isNum
@@ -47,7 +52,7 @@ export default {
             this.$emit('likeFeed');
         },
         commentFeed() {
-            this.$emit('commentFeed');
+            this.$emit('commentFeed', this.com);
         },
         moreAction() {
             this.$emit('moreAction');
@@ -56,26 +61,26 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-@prefix: feed_tool;
+@prefix: feed-tool;
 .@{prefix} {
     width: 100%;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    &_item {
+    &-item {
         display: flex;
         color: #b3b3b3;
         font-size: 24px;
         align-items: center;
         span {
             margin-left: 10px;
         }
-        &.has_like{
+        &.hasLike {
             color: #f4504d
         }
     }
-    &_icon {
+    &-icon {
         width: 40px;
         height: 40px;
     }