fe / yoho-community-web · Commits

Go to a project

Authored by TaoHuang
Commit be866788dcbf6ba257e468e0a84371774a1077e0 1 parent 1989b058

fix comment

Inline Side-by-side
Showing 9 changed files with 188 additions and 52 deletions
<template>
<div class="comment-item">
<ImageFormat :lazy="false" :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar" @click.native="toUserPage"></ImageFormat>
<ImageFormat :lazy="false" :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"
@click.native="toUserPage"></ImageFormat>
<div class="comment">
<div class="comment-nav">
<div class="comment-nav-left">
... ... @@ -29,7 +30,11 @@
:user="parentComment.userName"
:column-type="columnType"
:share="share"
@on-comment="onReply">
:authorUid="authorUid"
:commentUid="parentComment.uid"
@on-comment="onReply"
@remove-comment="onRemoveComment"
>
{{parentComment.content}}
</CommentPlaceholderActionSheet>
<div class="reply-main" v-if="replayShowList.length">
... ... @@ -44,7 +49,11 @@
:user="reply.userName"
:column-type="columnType"
:share="share"
@on-comment="onReplyChildren">
:authorUid="authorUid"
:commentUid="reply.uid"
@on-comment="onReplyChildren"
@remove-comment="onRemoveComment"
>
<span class="reply-user">{{reply.userName}}</span>
<template v-if="reply.parentUserName">
<span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em>
... ... @@ -61,9 +70,10 @@
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
import { createNamespacedHelpers } from 'vuex';
import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet';
const {mapActions} = createNamespacedHelpers('comment');
const { mapActions } = createNamespacedHelpers('comment');
export default {
name: 'CommentItem',
... ... @@ -77,7 +87,8 @@ export default {
},
share: Boolean,
posId: Number,
articleId: Number
articleId: Number,
authorUid: Number
},
data() {
return {
... ... @@ -140,6 +151,9 @@ export default {
});
}, 300);
},
onRemoveComment({ commentId }) {
this.$emit('remove-comment', { commentId });
}
}
};
</script>
... ...
... ... @@ -5,7 +5,9 @@
<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">
... ... @@ -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,41 @@
: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');
export default {
name: 'CommentList',
... ... @@ -75,7 +88,7 @@ export default {
},
posId: Number,
articleId: Number,
commentId: Number
authorUid: Number
},
data() {
return {
... ... @@ -113,7 +126,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 +221,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 +262,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 +272,7 @@ export default {
this.firstLoading = true;
this.fetchComments();
},
async onReply({destId, parentId}) {
async onReply({ destId, parentId }) {
const commentId = parentId || destId;
if (!commentId) {
... ... @@ -286,9 +299,40 @@ export default {
},
onClose() {
this.$emit('on-close');
},
onRemoveComment({ commentId }) {
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;
}
}
},
},
components: {Scroll, CommentItem, Loading}
components: { CommentPlaceholderActionSheet, Scroll, CommentItem, Loading }
};
</script>
... ...
... ... @@ -11,9 +11,16 @@
import { createNamespacedHelpers } from 'vuex';
import CommentPlaceholder from './comment-placeholder';
import { get } from 'lodash';
const { mapActions } = createNamespacedHelpers('comment');
const ITEM = {
comment: '回复',
remove: '删除',
report: '举报'
};
export default {
name: 'CommentPlaceholderActionSheet',
components: { CommentPlaceholder },
... ... @@ -22,33 +29,80 @@ export default {
},
methods: {
...mapActions(['setCommentStatus']),
onClick() {
this.$createActionSheet({
data: [
async onClick() {
const authorUid = this.$attrs.authorUid;
const commentUid = this.$attrs.commentUid;
const uid = get(await this.$sdk.getUser(), 'uid', 0);
const commentId = this.$attrs['dest-id'];
let menu = [];
if (authorUid === uid || commentUid === uid) {
menu = [
{
content: '回复'
content: ITEM.comment
},
{
content: '删除'
content: ITEM.remove
},
{
content: '举报'
content: ITEM.report
}
];
} else {
menu = [
{
content: ITEM.comment
},
{
content: ITEM.report
}
];
}
],
cancelTxt: '',
onSelect: (item, index) => {
console.log(this.$attrs);
switch (index) {
case 0: {
this.$createActionSheet({
data: menu,
zIndex: 200,
onSelect: (item) => {
switch (item.content) {
case ITEM.comment: {
this.$refs.placeholder.openComentInput();
break;
}
case 1: {
this.setCommentStatus({ type: 1, commentId: this.$attrs['dest-id'] });
case ITEM.remove: {
this.setCommentStatus({ type: 1, commentId }).then(result => {
if (result.code === 200) {
this.$createToast({
txt: '已删除',
type: 'correct',
time: 2000,
}).show();
this.$emit('remove-comment', { commentId });
} else {
this.$createToast({
txt: '删除失败，请重试',
type: 'warn',
time: 2000,
}).show();
}
});
break;
}
case 2: {
this.setCommentStatus({ type: 2, commentId: this.$attrs['dest-id'] });
case ITEM.report: {
this.setCommentStatus({ type: 2, commentId }).then(result => {
if (result.code === 200) {
this.$createToast({
txt: '已举报',
type: 'correct',
time: 2000,
}).show();
} else {
this.$createToast({
txt: '举报失败，请重试',
type: 'warn',
time: 2000,
}).show();
}
});
break;
}
}
... ...
... ... @@ -6,7 +6,7 @@
<i class="iconfont icon-close icon" @touchend.prevent="onClose"></i>
</template>
</LayoutHeader>
<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>
<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>
</Layout>
</template>
... ... @@ -24,7 +24,8 @@ export default {
posId: Number,
articleId: Number,
commentId: Number,
commentCount: Number
commentCount: Number,
authorUid: Number
},
data() {
return {
... ...
... ... @@ -31,6 +31,7 @@
:commentCount="articleState.commentCount"
:share="share"
:pos-id="posId"
:authorUid="data.authorUid"
@on-close="onCloseComment"
@on-comment="onActionComment"></Comment>
</YohoActionSheet>
... ...
... ... @@ -22,7 +22,7 @@
<i class="iconfont icon-more1" @click="onMore"></i>
</div>
</div>
<ArticleDetailCommentList ref="commentList" v-if="data.articleId" :article-id="data.articleId" :share="share" :comment-count="articleState.commentCount" :has-comment="data.hasComment"></ArticleDetailCommentList>
<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>
</div>
<div v-if="listTitle" class="rec-article-title">
... ...
... ... @@ -14,6 +14,9 @@
:share="share"
:pos-id="0"
:article-id="articleId"
:authorUid="authorUid"
:commentUid="comment.parentComment.uid"
@remove-comment="onRemoveComment"
@on-reply="onReply">
</CommentItem>
</div>
... ... @@ -30,11 +33,11 @@
</template>
<script>
import {get, forEach, find} from 'lodash';
import {Loading} from 'cube-ui';
import {mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers} from 'vuex';
import { get, forEach, find, findIndex } from 'lodash';
import { Loading } from 'cube-ui';
import { mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers } from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');
const { mapActions } = createNamespacedHelpers('comment');
export default {
name: 'ArticleDetailCommentList',
... ... @@ -46,7 +49,8 @@ export default {
default: 1001
},
share: Boolean,
hasComment: Boolean
hasComment: Boolean,
authorUid: Number
},
data() {
return {
... ... @@ -128,7 +132,7 @@ export default {
this.onFetching = false;
}, this.page > 1 ? 800 : 0);
},
onReply({comment}) {
onReply({ comment }) {
forEach(this.commentList, (val) => {
if (val.parentComment && +val.parentComment.id === +comment.parentId) {
val.childrenComments.unshift(Object.assign(comment, {
... ... @@ -136,21 +140,37 @@ export default {
destId: this.articleId,
headIco: this.yoho.context.userHeadIco,
userName: this.yoho.context.userName,
parentUserName: get(find(val.childrenComments, {id: comment.parentId}), 'userName', '')
parentUserName: get(find(val.childrenComments, { id: comment.parentId }), 'userName', '')
}));
}
});
},
addComment(comment) {
async addComment(comment) {
this.commentList.unshift({
childrenComments: [],
parentComment: Object.assign(comment, {
id: comment.destId,
destId: this.articleId,
headIco: this.yoho.context.userHeadIco,
userName: this.yoho.context.userName
userName: this.yoho.context.userName,
uid: (await this.$sdk.getUser()).uid
})
});
},
onRemoveComment({ commentId }) {
for (let [index, val] of Object.entries(this.commentList)) {
if (val.parentComment && +val.parentComment.id === +commentId) {
this.commentList.splice(index, 1);
break;
}
const childrenIndex = findIndex(val.childrenComments, {id: +commentId});
if ((+index !== -1) && (childrenIndex !== -1)) {
this.commentList[index].childrenComments.splice(childrenIndex, 1);
break;
}
}
}
},
components: {
... ... @@ -186,11 +206,12 @@ export default {
align-items: center;
justify-content: center;
.loading-wrap {
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
}
}
</style>
... ...
... ... @@ -290,6 +290,7 @@ module.exports = {
},
'/api/grass/deleteComment': {
api: 'app.grass.delArticleComment',
auth: true,
params: {
commentId: {type: Number}
}
... ...
{
"name": "yoho-community-web",
"version": "6.9.10-beta9",
"version": "6.9.10-beta10",
"private": true,
"description": "A New Yohobuy Project With Express",
"repository": {
... ...