|
...
|
...
|
@@ -5,14 +5,16 @@ |
|
|
|
<div class="loading" v-if="firstLoading">
|
|
|
|
<Loading></Loading>
|
|
|
|
</div>
|
|
|
|
<Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp">
|
|
|
|
<Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']"
|
|
|
|
:options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle"
|
|
|
|
@pulling-up="onPullingUp">
|
|
|
|
<CommentEmpty v-if="empty"></CommentEmpty>
|
|
|
|
<div v-else ref="commentList" class="comment-list">
|
|
|
|
<div ref="commentListTop" class="comment-list-top">
|
|
|
|
<div ref="commentPre" class="comment-pre-list">
|
|
|
|
<div
|
|
|
|
v-for="(comments, index) in commentPreList"
|
|
|
|
:key="commentPreList.length - index">
|
|
|
|
v-for="(comments, index) in commentPreList"
|
|
|
|
:key="commentPreList.length - index">
|
|
|
|
<CommentItem
|
|
|
|
v-for="comment in comments"
|
|
|
|
:key="comment.parentComment.id"
|
|
...
|
...
|
@@ -21,8 +23,12 @@ |
|
|
|
:column-type="columnType"
|
|
|
|
:pos-id="posId"
|
|
|
|
:article-id="articleId"
|
|
|
|
:authorUid="authorUid"
|
|
|
|
:commentUid="comment.parentComment.uid"
|
|
|
|
@on-reply="onReply"
|
|
|
|
@on-close="onClose">
|
|
|
|
@on-close="onClose"
|
|
|
|
@remove-comment="onRemoveComment"
|
|
|
|
>
|
|
|
|
</CommentItem>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -36,34 +42,42 @@ |
|
|
|
:column-type="columnType"
|
|
|
|
:pos-id="posId"
|
|
|
|
:article-id="articleId"
|
|
|
|
:authorUid="authorUid"
|
|
|
|
:commentUid="comment.parentComment.uid"
|
|
|
|
@on-reply="onReply"
|
|
|
|
@on-close="onClose">
|
|
|
|
@on-close="onClose"
|
|
|
|
@remove-comment="onRemoveComment"
|
|
|
|
>
|
|
|
|
</CommentItem>
|
|
|
|
</div>
|
|
|
|
</Scroll>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="comment-footer" v-if="!firstLoading">
|
|
|
|
<CommentPlaceholder
|
|
|
|
<CommentPlaceholderActionSheet
|
|
|
|
class="comment-input"
|
|
|
|
:dest-id="destId"
|
|
|
|
:pos-id="posId"
|
|
|
|
:article-id="articleId"
|
|
|
|
:add-type="0"
|
|
|
|
:column-type="columnType"
|
|
|
|
:authorUid="authorUid"
|
|
|
|
@on-comment="onComment">
|
|
|
|
参与评论
|
|
|
|
</CommentPlaceholder>
|
|
|
|
</CommentPlaceholderActionSheet>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import CommentItem from './comment-item.vue';
|
|
|
|
import {Scroll, Loading} from 'cube-ui';
|
|
|
|
import {get, throttle} from 'lodash';
|
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
const {mapActions} = createNamespacedHelpers('comment');
|
|
|
|
import { Scroll, Loading } from 'cube-ui';
|
|
|
|
import { get, throttle, findIndex } from 'lodash';
|
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
|
import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet';
|
|
|
|
|
|
|
|
const { mapActions } = createNamespacedHelpers('comment');
|
|
|
|
const {mapMutations: articleMapMutations } = createNamespacedHelpers('article');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'CommentList',
|
|
...
|
...
|
@@ -75,7 +89,7 @@ export default { |
|
|
|
},
|
|
|
|
posId: Number,
|
|
|
|
articleId: Number,
|
|
|
|
commentId: Number
|
|
|
|
authorUid: Number
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
...
|
...
|
@@ -105,6 +119,7 @@ export default { |
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
|
|
|
|
...articleMapMutations(['SUB_ARTICLE_COMMENT_COUNT']),
|
|
|
|
async fetchCommentsAsync(pre) {
|
|
|
|
let params = {
|
|
|
|
destId: this.destId,
|
|
...
|
...
|
@@ -113,7 +128,7 @@ export default { |
|
|
|
};
|
|
|
|
|
|
|
|
if (params.page < 1 || params.page > this.totalPage) {
|
|
|
|
return {code: 200};
|
|
|
|
return { code: 200 };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.commentId && (this.prePage === this.page)) {
|
|
...
|
...
|
@@ -208,7 +223,7 @@ export default { |
|
|
|
type: 'warn',
|
|
|
|
time: 1000
|
|
|
|
}).show();
|
|
|
|
this.$emit('on-page-ready', {success: false});
|
|
|
|
this.$emit('on-page-ready', { success: false });
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
},
|
|
...
|
...
|
@@ -249,7 +264,7 @@ export default { |
|
|
|
this.totalPage = 1;
|
|
|
|
this.$refs.scroll.scrollTo(0, 0, 200);
|
|
|
|
this.fetchComments();
|
|
|
|
this.$emit('on-comment', {destId: this.destId});
|
|
|
|
this.$emit('on-comment', { destId: this.destId });
|
|
|
|
},
|
|
|
|
async init() {
|
|
|
|
this.page = 1;
|
|
...
|
...
|
@@ -259,7 +274,7 @@ export default { |
|
|
|
this.firstLoading = true;
|
|
|
|
this.fetchComments();
|
|
|
|
},
|
|
|
|
async onReply({destId, parentId}) {
|
|
|
|
async onReply({ destId, parentId }) {
|
|
|
|
const commentId = parentId || destId;
|
|
|
|
|
|
|
|
if (!commentId) {
|
|
...
|
...
|
@@ -286,9 +301,42 @@ export default { |
|
|
|
},
|
|
|
|
onClose() {
|
|
|
|
this.$emit('on-close');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onRemoveComment({ commentId, subCount }) {
|
|
|
|
for (let comments of this.commentPreList) {
|
|
|
|
for (let [index, comment] of Object.entries(comments)) {
|
|
|
|
if (comment.parentComment && +comment.parentComment.id === +commentId) {
|
|
|
|
comments.splice(index, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
const childrenIndex = findIndex(comment.childrenComments, { id: +commentId });
|
|
|
|
|
|
|
|
if ((+index !== -1) && (childrenIndex !== -1)) {
|
|
|
|
comments[index].childrenComments.splice(childrenIndex, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let [index, comment] of Object.entries(this.commentList)) {
|
|
|
|
if (comment.parentComment && +comment.parentComment.id === +commentId) {
|
|
|
|
this.commentList.splice(index, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
const childrenIndex = findIndex(comment.childrenComments, { id: +commentId });
|
|
|
|
|
|
|
|
if ((+index !== -1) && childrenIndex !== -1) {
|
|
|
|
this.commentList[index].childrenComments.splice(childrenIndex, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.SUB_ARTICLE_COMMENT_COUNT({ articleId: this.articleId, subCount });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {Scroll, CommentItem, Loading}
|
|
|
|
components: { CommentPlaceholderActionSheet, Scroll, CommentItem, Loading }
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
...
|
...
|
|
