Authored by TaoHuang

fix comment

1 <template> 1 <template>
2 <div class="comment-item"> 2 <div class="comment-item">
3 - <ImageFormat :lazy="false" :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar" @click.native="toUserPage"></ImageFormat> 3 + <ImageFormat :lazy="false" :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"
  4 + @click.native="toUserPage"></ImageFormat>
4 <div class="comment"> 5 <div class="comment">
5 <div class="comment-nav"> 6 <div class="comment-nav">
6 <div class="comment-nav-left"> 7 <div class="comment-nav-left">
@@ -29,7 +30,11 @@ @@ -29,7 +30,11 @@
29 :user="parentComment.userName" 30 :user="parentComment.userName"
30 :column-type="columnType" 31 :column-type="columnType"
31 :share="share" 32 :share="share"
32 - @on-comment="onReply"> 33 + :authorUid="authorUid"
  34 + :commentUid="parentComment.uid"
  35 + @on-comment="onReply"
  36 + @remove-comment="onRemoveComment"
  37 + >
33 {{parentComment.content}} 38 {{parentComment.content}}
34 </CommentPlaceholderActionSheet> 39 </CommentPlaceholderActionSheet>
35 <div class="reply-main" v-if="replayShowList.length"> 40 <div class="reply-main" v-if="replayShowList.length">
@@ -44,7 +49,11 @@ @@ -44,7 +49,11 @@
44 :user="reply.userName" 49 :user="reply.userName"
45 :column-type="columnType" 50 :column-type="columnType"
46 :share="share" 51 :share="share"
47 - @on-comment="onReplyChildren"> 52 + :authorUid="authorUid"
  53 + :commentUid="reply.uid"
  54 + @on-comment="onReplyChildren"
  55 + @remove-comment="onRemoveComment"
  56 + >
48 <span class="reply-user">{{reply.userName}}</span> 57 <span class="reply-user">{{reply.userName}}</span>
49 <template v-if="reply.parentUserName"> 58 <template v-if="reply.parentUserName">
50 <span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em> 59 <span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em>
@@ -61,9 +70,10 @@ @@ -61,9 +70,10 @@
61 </template> 70 </template>
62 71
63 <script> 72 <script>
64 -import {createNamespacedHelpers} from 'vuex'; 73 +import { createNamespacedHelpers } from 'vuex';
65 import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet'; 74 import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet';
66 -const {mapActions} = createNamespacedHelpers('comment'); 75 +
  76 +const { mapActions } = createNamespacedHelpers('comment');
67 77
68 export default { 78 export default {
69 name: 'CommentItem', 79 name: 'CommentItem',
@@ -77,7 +87,8 @@ export default { @@ -77,7 +87,8 @@ export default {
77 }, 87 },
78 share: Boolean, 88 share: Boolean,
79 posId: Number, 89 posId: Number,
80 - articleId: Number 90 + articleId: Number,
  91 + authorUid: Number
81 }, 92 },
82 data() { 93 data() {
83 return { 94 return {
@@ -140,6 +151,9 @@ export default { @@ -140,6 +151,9 @@ export default {
140 }); 151 });
141 }, 300); 152 }, 300);
142 }, 153 },
  154 + onRemoveComment({ commentId }) {
  155 + this.$emit('remove-comment', { commentId });
  156 + }
143 } 157 }
144 }; 158 };
145 </script> 159 </script>
@@ -5,14 +5,16 @@ @@ -5,14 +5,16 @@
5 <div class="loading" v-if="firstLoading"> 5 <div class="loading" v-if="firstLoading">
6 <Loading></Loading> 6 <Loading></Loading>
7 </div> 7 </div>
8 - <Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp"> 8 + <Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']"
  9 + :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle"
  10 + @pulling-up="onPullingUp">
9 <CommentEmpty v-if="empty"></CommentEmpty> 11 <CommentEmpty v-if="empty"></CommentEmpty>
10 <div v-else ref="commentList" class="comment-list"> 12 <div v-else ref="commentList" class="comment-list">
11 <div ref="commentListTop" class="comment-list-top"> 13 <div ref="commentListTop" class="comment-list-top">
12 <div ref="commentPre" class="comment-pre-list"> 14 <div ref="commentPre" class="comment-pre-list">
13 <div 15 <div
14 - v-for="(comments, index) in commentPreList"  
15 - :key="commentPreList.length - index"> 16 + v-for="(comments, index) in commentPreList"
  17 + :key="commentPreList.length - index">
16 <CommentItem 18 <CommentItem
17 v-for="comment in comments" 19 v-for="comment in comments"
18 :key="comment.parentComment.id" 20 :key="comment.parentComment.id"
@@ -21,8 +23,12 @@ @@ -21,8 +23,12 @@
21 :column-type="columnType" 23 :column-type="columnType"
22 :pos-id="posId" 24 :pos-id="posId"
23 :article-id="articleId" 25 :article-id="articleId"
  26 + :authorUid="authorUid"
  27 + :commentUid="comment.parentComment.uid"
24 @on-reply="onReply" 28 @on-reply="onReply"
25 - @on-close="onClose"> 29 + @on-close="onClose"
  30 + @remove-comment="onRemoveComment"
  31 + >
26 </CommentItem> 32 </CommentItem>
27 </div> 33 </div>
28 </div> 34 </div>
@@ -36,34 +42,41 @@ @@ -36,34 +42,41 @@
36 :column-type="columnType" 42 :column-type="columnType"
37 :pos-id="posId" 43 :pos-id="posId"
38 :article-id="articleId" 44 :article-id="articleId"
  45 + :authorUid="authorUid"
  46 + :commentUid="comment.parentComment.uid"
39 @on-reply="onReply" 47 @on-reply="onReply"
40 - @on-close="onClose"> 48 + @on-close="onClose"
  49 + @remove-comment="onRemoveComment"
  50 + >
41 </CommentItem> 51 </CommentItem>
42 </div> 52 </div>
43 </Scroll> 53 </Scroll>
44 </div> 54 </div>
45 </div> 55 </div>
46 <div class="comment-footer" v-if="!firstLoading"> 56 <div class="comment-footer" v-if="!firstLoading">
47 - <CommentPlaceholder 57 + <CommentPlaceholderActionSheet
48 class="comment-input" 58 class="comment-input"
49 :dest-id="destId" 59 :dest-id="destId"
50 :pos-id="posId" 60 :pos-id="posId"
51 :article-id="articleId" 61 :article-id="articleId"
52 :add-type="0" 62 :add-type="0"
53 :column-type="columnType" 63 :column-type="columnType"
  64 + :authorUid="authorUid"
54 @on-comment="onComment"> 65 @on-comment="onComment">
55 参与评论 66 参与评论
56 - </CommentPlaceholder> 67 + </CommentPlaceholderActionSheet>
57 </div> 68 </div>
58 </div> 69 </div>
59 </template> 70 </template>
60 71
61 <script> 72 <script>
62 import CommentItem from './comment-item.vue'; 73 import CommentItem from './comment-item.vue';
63 -import {Scroll, Loading} from 'cube-ui';  
64 -import {get, throttle} from 'lodash';  
65 -import {createNamespacedHelpers} from 'vuex';  
66 -const {mapActions} = createNamespacedHelpers('comment'); 74 +import { Scroll, Loading } from 'cube-ui';
  75 +import { get, throttle, findIndex } from 'lodash';
  76 +import { createNamespacedHelpers } from 'vuex';
  77 +import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet';
  78 +
  79 +const { mapActions } = createNamespacedHelpers('comment');
67 80
68 export default { 81 export default {
69 name: 'CommentList', 82 name: 'CommentList',
@@ -75,7 +88,7 @@ export default { @@ -75,7 +88,7 @@ export default {
75 }, 88 },
76 posId: Number, 89 posId: Number,
77 articleId: Number, 90 articleId: Number,
78 - commentId: Number 91 + authorUid: Number
79 }, 92 },
80 data() { 93 data() {
81 return { 94 return {
@@ -113,7 +126,7 @@ export default { @@ -113,7 +126,7 @@ export default {
113 }; 126 };
114 127
115 if (params.page < 1 || params.page > this.totalPage) { 128 if (params.page < 1 || params.page > this.totalPage) {
116 - return {code: 200}; 129 + return { code: 200 };
117 } 130 }
118 131
119 if (this.commentId && (this.prePage === this.page)) { 132 if (this.commentId && (this.prePage === this.page)) {
@@ -208,7 +221,7 @@ export default { @@ -208,7 +221,7 @@ export default {
208 type: 'warn', 221 type: 'warn',
209 time: 1000 222 time: 1000
210 }).show(); 223 }).show();
211 - this.$emit('on-page-ready', {success: false}); 224 + this.$emit('on-page-ready', { success: false });
212 } 225 }
213 return result; 226 return result;
214 }, 227 },
@@ -249,7 +262,7 @@ export default { @@ -249,7 +262,7 @@ export default {
249 this.totalPage = 1; 262 this.totalPage = 1;
250 this.$refs.scroll.scrollTo(0, 0, 200); 263 this.$refs.scroll.scrollTo(0, 0, 200);
251 this.fetchComments(); 264 this.fetchComments();
252 - this.$emit('on-comment', {destId: this.destId}); 265 + this.$emit('on-comment', { destId: this.destId });
253 }, 266 },
254 async init() { 267 async init() {
255 this.page = 1; 268 this.page = 1;
@@ -259,7 +272,7 @@ export default { @@ -259,7 +272,7 @@ export default {
259 this.firstLoading = true; 272 this.firstLoading = true;
260 this.fetchComments(); 273 this.fetchComments();
261 }, 274 },
262 - async onReply({destId, parentId}) { 275 + async onReply({ destId, parentId }) {
263 const commentId = parentId || destId; 276 const commentId = parentId || destId;
264 277
265 if (!commentId) { 278 if (!commentId) {
@@ -286,9 +299,40 @@ export default { @@ -286,9 +299,40 @@ export default {
286 }, 299 },
287 onClose() { 300 onClose() {
288 this.$emit('on-close'); 301 this.$emit('on-close');
289 - } 302 + },
  303 + onRemoveComment({ commentId }) {
  304 + for (let comments of this.commentPreList) {
  305 + for (let [index, comment] of Object.entries(comments)) {
  306 + if (comment.parentComment && +comment.parentComment.id === +commentId) {
  307 + comments.splice(index, 1);
  308 + break;
  309 + }
  310 +
  311 + const childrenIndex = findIndex(comment.childrenComments, { id: +commentId });
  312 +
  313 + if ((+index !== -1) && (childrenIndex !== -1)) {
  314 + comments[index].childrenComments.splice(childrenIndex, 1);
  315 + break;
  316 + }
  317 + }
  318 + }
  319 +
  320 + for (let [index, comment] of Object.entries(this.commentList)) {
  321 + if (comment.parentComment && +comment.parentComment.id === +commentId) {
  322 + this.commentList.splice(index, 1);
  323 + break;
  324 + }
  325 +
  326 + const childrenIndex = findIndex(comment.childrenComments, { id: +commentId });
  327 +
  328 + if ((+index !== -1) && childrenIndex !== -1) {
  329 + this.commentList[index].childrenComments.splice(childrenIndex, 1);
  330 + break;
  331 + }
  332 + }
  333 + },
290 }, 334 },
291 - components: {Scroll, CommentItem, Loading} 335 + components: { CommentPlaceholderActionSheet, Scroll, CommentItem, Loading }
292 }; 336 };
293 </script> 337 </script>
294 338
@@ -11,9 +11,16 @@ @@ -11,9 +11,16 @@
11 11
12 import { createNamespacedHelpers } from 'vuex'; 12 import { createNamespacedHelpers } from 'vuex';
13 import CommentPlaceholder from './comment-placeholder'; 13 import CommentPlaceholder from './comment-placeholder';
  14 +import { get } from 'lodash';
14 15
15 const { mapActions } = createNamespacedHelpers('comment'); 16 const { mapActions } = createNamespacedHelpers('comment');
16 17
  18 +const ITEM = {
  19 + comment: '回复',
  20 + remove: '删除',
  21 + report: '举报'
  22 +};
  23 +
17 export default { 24 export default {
18 name: 'CommentPlaceholderActionSheet', 25 name: 'CommentPlaceholderActionSheet',
19 components: { CommentPlaceholder }, 26 components: { CommentPlaceholder },
@@ -22,33 +29,80 @@ export default { @@ -22,33 +29,80 @@ export default {
22 }, 29 },
23 methods: { 30 methods: {
24 ...mapActions(['setCommentStatus']), 31 ...mapActions(['setCommentStatus']),
25 - onClick() {  
26 - this.$createActionSheet({  
27 - data: [ 32 + async onClick() {
  33 + const authorUid = this.$attrs.authorUid;
  34 + const commentUid = this.$attrs.commentUid;
  35 + const uid = get(await this.$sdk.getUser(), 'uid', 0);
  36 + const commentId = this.$attrs['dest-id'];
  37 + let menu = [];
  38 +
  39 + if (authorUid === uid || commentUid === uid) {
  40 + menu = [
  41 + {
  42 + content: ITEM.comment
  43 + },
28 { 44 {
29 - content: '回复' 45 + content: ITEM.remove
30 }, 46 },
31 { 47 {
32 - content: '删除' 48 + content: ITEM.report
  49 + }
  50 + ];
  51 + } else {
  52 + menu = [
  53 + {
  54 + content: ITEM.comment
33 }, 55 },
34 { 56 {
35 - content: '举报' 57 + content: ITEM.report
36 } 58 }
37 - ],  
38 - cancelTxt: '',  
39 - onSelect: (item, index) => {  
40 - console.log(this.$attrs);  
41 - switch (index) {  
42 - case 0: { 59 + ];
  60 + }
  61 +
  62 + this.$createActionSheet({
  63 + data: menu,
  64 + zIndex: 200,
  65 + onSelect: (item) => {
  66 + switch (item.content) {
  67 + case ITEM.comment: {
43 this.$refs.placeholder.openComentInput(); 68 this.$refs.placeholder.openComentInput();
44 break; 69 break;
45 } 70 }
46 - case 1: {  
47 - this.setCommentStatus({ type: 1, commentId: this.$attrs['dest-id'] }); 71 + case ITEM.remove: {
  72 + this.setCommentStatus({ type: 1, commentId }).then(result => {
  73 + if (result.code === 200) {
  74 + this.$createToast({
  75 + txt: '已删除',
  76 + type: 'correct',
  77 + time: 2000,
  78 + }).show();
  79 + this.$emit('remove-comment', { commentId });
  80 + } else {
  81 + this.$createToast({
  82 + txt: '删除失败,请重试',
  83 + type: 'warn',
  84 + time: 2000,
  85 + }).show();
  86 + }
  87 + });
48 break; 88 break;
49 } 89 }
50 - case 2: {  
51 - this.setCommentStatus({ type: 2, commentId: this.$attrs['dest-id'] }); 90 + case ITEM.report: {
  91 + this.setCommentStatus({ type: 2, commentId }).then(result => {
  92 + if (result.code === 200) {
  93 + this.$createToast({
  94 + txt: '已举报',
  95 + type: 'correct',
  96 + time: 2000,
  97 + }).show();
  98 + } else {
  99 + this.$createToast({
  100 + txt: '举报失败,请重试',
  101 + type: 'warn',
  102 + time: 2000,
  103 + }).show();
  104 + }
  105 + });
52 break; 106 break;
53 } 107 }
54 } 108 }
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <i class="iconfont icon-close icon" @touchend.prevent="onClose"></i> 6 <i class="iconfont icon-close icon" @touchend.prevent="onClose"></i>
7 </template> 7 </template>
8 </LayoutHeader> 8 </LayoutHeader>
9 - <CommentList ref="commentList" :dest-id="destId" :pos-id="posId" :article-id="articleId" :comment-id="commentId" :column-type="1001" @on-page-change="onPageChange" @on-comment="onComment" @on-page-ready="onPageReady" @on-close="onClose"></CommentList> 9 + <CommentList ref="commentList" :dest-id="destId" :pos-id="posId" :article-id="articleId" :comment-id="commentId" :column-type="1001" @on-page-change="onPageChange" @on-comment="onComment" @on-page-ready="onPageReady" @on-close="onClose" :authorUid="authorUid"></CommentList>
10 </Layout> 10 </Layout>
11 </template> 11 </template>
12 12
@@ -24,7 +24,8 @@ export default { @@ -24,7 +24,8 @@ export default {
24 posId: Number, 24 posId: Number,
25 articleId: Number, 25 articleId: Number,
26 commentId: Number, 26 commentId: Number,
27 - commentCount: Number 27 + commentCount: Number,
  28 + authorUid: Number
28 }, 29 },
29 data() { 30 data() {
30 return { 31 return {
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 :commentCount="articleState.commentCount" 31 :commentCount="articleState.commentCount"
32 :share="share" 32 :share="share"
33 :pos-id="posId" 33 :pos-id="posId"
  34 + :authorUid="data.authorUid"
34 @on-close="onCloseComment" 35 @on-close="onCloseComment"
35 @on-comment="onActionComment"></Comment> 36 @on-comment="onActionComment"></Comment>
36 </YohoActionSheet> 37 </YohoActionSheet>
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 <i class="iconfont icon-more1" @click="onMore"></i> 22 <i class="iconfont icon-more1" @click="onMore"></i>
23 </div> 23 </div>
24 </div> 24 </div>
25 - <ArticleDetailCommentList ref="commentList" v-if="data.articleId" :article-id="data.articleId" :share="share" :comment-count="articleState.commentCount" :has-comment="data.hasComment"></ArticleDetailCommentList> 25 + <ArticleDetailCommentList ref="commentList" v-if="data.articleId" :article-id="data.articleId" :share="share" :comment-count="articleState.commentCount" :has-comment="data.hasComment" :authorUid="data.authorUid"></ArticleDetailCommentList>
26 </div> 26 </div>
27 27
28 <div v-if="listTitle" class="rec-article-title"> 28 <div v-if="listTitle" class="rec-article-title">
@@ -14,6 +14,9 @@ @@ -14,6 +14,9 @@
14 :share="share" 14 :share="share"
15 :pos-id="0" 15 :pos-id="0"
16 :article-id="articleId" 16 :article-id="articleId"
  17 + :authorUid="authorUid"
  18 + :commentUid="comment.parentComment.uid"
  19 + @remove-comment="onRemoveComment"
17 @on-reply="onReply"> 20 @on-reply="onReply">
18 </CommentItem> 21 </CommentItem>
19 </div> 22 </div>
@@ -30,11 +33,11 @@ @@ -30,11 +33,11 @@
30 </template> 33 </template>
31 34
32 <script> 35 <script>
33 -import {get, forEach, find} from 'lodash';  
34 -import {Loading} from 'cube-ui';  
35 -import {mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers} from 'vuex'; 36 +import { get, forEach, find, findIndex } from 'lodash';
  37 +import { Loading } from 'cube-ui';
  38 +import { mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers } from 'vuex';
36 39
37 -const {mapActions} = createNamespacedHelpers('comment'); 40 +const { mapActions } = createNamespacedHelpers('comment');
38 41
39 export default { 42 export default {
40 name: 'ArticleDetailCommentList', 43 name: 'ArticleDetailCommentList',
@@ -46,7 +49,8 @@ export default { @@ -46,7 +49,8 @@ export default {
46 default: 1001 49 default: 1001
47 }, 50 },
48 share: Boolean, 51 share: Boolean,
49 - hasComment: Boolean 52 + hasComment: Boolean,
  53 + authorUid: Number
50 }, 54 },
51 data() { 55 data() {
52 return { 56 return {
@@ -128,7 +132,7 @@ export default { @@ -128,7 +132,7 @@ export default {
128 this.onFetching = false; 132 this.onFetching = false;
129 }, this.page > 1 ? 800 : 0); 133 }, this.page > 1 ? 800 : 0);
130 }, 134 },
131 - onReply({comment}) { 135 + onReply({ comment }) {
132 forEach(this.commentList, (val) => { 136 forEach(this.commentList, (val) => {
133 if (val.parentComment && +val.parentComment.id === +comment.parentId) { 137 if (val.parentComment && +val.parentComment.id === +comment.parentId) {
134 val.childrenComments.unshift(Object.assign(comment, { 138 val.childrenComments.unshift(Object.assign(comment, {
@@ -136,21 +140,37 @@ export default { @@ -136,21 +140,37 @@ export default {
136 destId: this.articleId, 140 destId: this.articleId,
137 headIco: this.yoho.context.userHeadIco, 141 headIco: this.yoho.context.userHeadIco,
138 userName: this.yoho.context.userName, 142 userName: this.yoho.context.userName,
139 - parentUserName: get(find(val.childrenComments, {id: comment.parentId}), 'userName', '') 143 + parentUserName: get(find(val.childrenComments, { id: comment.parentId }), 'userName', '')
140 })); 144 }));
141 } 145 }
142 }); 146 });
143 }, 147 },
144 - addComment(comment) { 148 + async addComment(comment) {
145 this.commentList.unshift({ 149 this.commentList.unshift({
146 childrenComments: [], 150 childrenComments: [],
147 parentComment: Object.assign(comment, { 151 parentComment: Object.assign(comment, {
148 id: comment.destId, 152 id: comment.destId,
149 destId: this.articleId, 153 destId: this.articleId,
150 headIco: this.yoho.context.userHeadIco, 154 headIco: this.yoho.context.userHeadIco,
151 - userName: this.yoho.context.userName 155 + userName: this.yoho.context.userName,
  156 + uid: (await this.$sdk.getUser()).uid
152 }) 157 })
153 }); 158 });
  159 + },
  160 + onRemoveComment({ commentId }) {
  161 + for (let [index, val] of Object.entries(this.commentList)) {
  162 + if (val.parentComment && +val.parentComment.id === +commentId) {
  163 + this.commentList.splice(index, 1);
  164 + break;
  165 + }
  166 +
  167 + const childrenIndex = findIndex(val.childrenComments, {id: +commentId});
  168 +
  169 + if ((+index !== -1) && (childrenIndex !== -1)) {
  170 + this.commentList[index].childrenComments.splice(childrenIndex, 1);
  171 + break;
  172 + }
  173 + }
154 } 174 }
155 }, 175 },
156 components: { 176 components: {
@@ -186,11 +206,12 @@ export default { @@ -186,11 +206,12 @@ export default {
186 align-items: center; 206 align-items: center;
187 justify-content: center; 207 justify-content: center;
188 208
189 - .loading-wrap {  
190 - display: flex;  
191 - align-items: center;  
192 - justify-content: center;  
193 - color: #999;  
194 - } 209 +.loading-wrap {
  210 + display: flex;
  211 + align-items: center;
  212 + justify-content: center;
  213 + color: #999;
  214 +}
  215 +
195 } 216 }
196 </style> 217 </style>
@@ -290,6 +290,7 @@ module.exports = { @@ -290,6 +290,7 @@ module.exports = {
290 }, 290 },
291 '/api/grass/deleteComment': { 291 '/api/grass/deleteComment': {
292 api: 'app.grass.delArticleComment', 292 api: 'app.grass.delArticleComment',
  293 + auth: true,
293 params: { 294 params: {
294 commentId: {type: Number} 295 commentId: {type: Number}
295 } 296 }
1 { 1 {
2 "name": "yoho-community-web", 2 "name": "yoho-community-web",
3 - "version": "6.9.10-beta9", 3 + "version": "6.9.10-beta10",
4 "private": true, 4 "private": true,
5 "description": "A New Yohobuy Project With Express", 5 "description": "A New Yohobuy Project With Express",
6 "repository": { 6 "repository": {