fe / yoho-community-web · Commits

Go to a project

Authored by yyq
Commit 082ac7182001a4eea071ef8dd85694a1cfc4cf93 1 parent cd261429

commit

Inline Side-by-side
Showing 6 changed files with 106 additions and 26 deletions
... ... @@ -7,7 +7,8 @@
<p class="comment-user-name" @click="toUserPage">
<span class="name">{{parentComment.userName || '&nbsp;'}}</span>
</p>
<p class="comment-time">{{parentComment.createTime | time}}</p>
<p v-if="parentComment.createTime" class="comment-time">{{parentComment.createTime | time}}</p>
<p v-else class="comment-time">刚刚</p>
</div>
<WidgetFav
class="comment-fav"
... ... @@ -34,10 +35,11 @@
v-for="(reply, replyIndex) in replayShowList"
:key="replyIndex"
:dest-id="reply.id"
:root-id="parentComment.id"
:add-type="1"
:user="reply.userName"
:column-type="columnType"
@on-comment="() => onReply({destId: parentComment.id})">
@on-comment="onReplyChildren">
<span class="reply-user">{{reply.userName}}</span>
<template v-if="reply.parentUserName">
<span>回复</span><em class="reply-to-user">@{{reply.parentUserName}}</em>
... ... @@ -102,8 +104,11 @@ export default {
onShowMore() {
this.isShowAllReply = !this.isShowAllReply;
},
async onReply({destId}) {
this.$emit('on-reply', {commentId: destId});
onReplyChildren(info) {
this.$emit('on-reply', info);
},
async onReply(info) {
this.$emit('on-reply', info);
},
toUserPage() {
this.$emit('on-close');
... ...
import {trim} from 'lodash';
import {get, trim} from 'lodash';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');
import YAS from 'utils/yas-constants';
... ... @@ -20,7 +20,12 @@ export default {
},
share: Boolean,
posId: Number,
articleId: Number
articleId: Number,
rootId: Number,
autoUpdate: {
type: Boolean,
default: true
},
},
data() {
return {
... ... @@ -94,13 +99,21 @@ export default {
};
if (result.code === 200) {
const waitData = this.addType === 0 ? this.fetchArticleUpdate({articleId: this.destId}) : Promise.resolve();
if (this.autoUpdate && this.addType === 0) {
await this.fetchArticleUpdate({articleId: this.destId});
}
await waitData;
this.$emit('on-comment', {
destId: this.destId,
addType: this.addType,
columnType: this.columnType
columnType: this.columnType,
comment: {
content,
destId: get(result, 'data', ''),
columnType: this.columnType,
parentId: this.addType === 1 ? this.destId : void 0,
rootId: this.rootId || void 0
}
});
this.reportComment(this.destId);
... ...
... ... @@ -18,7 +18,10 @@
<ArticleItemTopics class="topics-wrap" :data="topicsData" :share="share"></ArticleItemTopics>
<p class="publish-time">{{publishTime}}</p>
<ArticleDetailCommentList ref="commentList" v-if="data.commentCount" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
<LayoutTitle v-if="listTitle" class="rec-article-title">{{listTitle}}</LayoutTitle>
<div v-if="listTitle" class="rec-article-title">
<LayoutTitle>{{listTitle}}</LayoutTitle>
</div>
</div>
<ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="toCommentList">
<template v-slot:before>
... ... @@ -32,6 +35,7 @@
:article-id="data.articleId"
:pos-id="0"
:column-type="1001"
:autoUpdate="false"
@on-comment="onComment">
添加评论...
</CommentPlaceholder>
... ... @@ -150,8 +154,8 @@ export default {
onChangeSlide({index}) {
this.slideIndex = index;
},
onComment() {
onComment({comment}) {
this.$refs.commentList && this.$refs.commentList.addComment(comment);
},
toCommentList() {
if (this.data.commentCount) {
... ... @@ -216,7 +220,7 @@ export default {
}
.rec-article-title {
margin: 14px 0 4px;
padding: 14px 0 4px;
border-top: 1px solid #f0f0f0;
}
... ...
<template>
<div class="comment-context">
<p class="comment-title">共{{commentCount}}条评论</p>
<p class="comment-title">共{{totalComment}}条评论</p>
<div class="comment-list">
<CommentItem
v-for="comment in commentList"
... ... @@ -15,19 +15,19 @@
</CommentItem>
</div>
<div v-show="showMore" class="more-comment hover-opacity" @click="onFetch">
<p class="loading" v-if="onFetching">
<p class="loading-wrap" v-if="onFetching">
<Loading :size="20"></Loading>
&nbsp;&nbsp;加载中
</p>
<span v-else>展开{{page > 2 ? '更多' : commentCount + '条'}}评论</span>
<span v-else>展开{{page > 2 ? '更多' : moreCommentNum + '条'}}评论</span>
</div>
</div>
</template>
<script>
import {get, forEach, find} from 'lodash';
import {Loading} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';
import {mapState as mapYohoState, mapActions as mapYohoActions, createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');
... ... @@ -47,13 +47,30 @@ export default {
commentList: [],
page: 1,
onFetching: false,
showMore: false
showMore: false,
addCommentNum: 0,
moreCommentNum: 0
}
},
mounted() {
if (!this.yoho.context.userHeadIco) {
this.$sdk.getUser().then(user => {
if (user && user.uid) {
this.fetchUserProfile();
}
});
}
this.init();
},
computed: {
...mapYohoState(['yoho']),
totalComment() {
return this.commentCount + this.addCommentNum;
}
},
methods: {
...mapYohoActions(['fetchUserProfile']),
...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
init() {
this.commentList.length = 0;
... ... @@ -62,6 +79,15 @@ export default {
this.onFetch();
},
updateMoreCommentNum(list = []) {
let moreCommentNum = this.commentCount;
forEach(list, val => {
val.childrenComments = val.childrenComments || [];
moreCommentNum -= (val.childrenComments.length + 1);
});
this.moreCommentNum = moreCommentNum;
},
async onFetch() {
if (this.onFetching || (this.page > 1 && !this.showMore)) {
return;
... ... @@ -79,16 +105,45 @@ export default {
setTimeout(() => {
if (result.code === 200) {
this.showMore = result.data.totalPage > this.page;
this.commentList = this.commentList.concat(result.data.commentInfos || []);
if (this.page === 1) {
this.updateMoreCommentNum(result.data.commentInfos);
}
this.page++;
this.commentList = this.commentList.concat(result.data.commentInfos || []);
}
this.onFetching = false;
}, 800);
}, this.page > 1 ? 800 : 0);
},
onReply() {
onReply({comment}) {
const parentId = comment.rootId || comment.parentId;
forEach(this.commentList, (val, index) => {
if (val.parentComment && val.parentComment.id == comment.parentId) {
this.addCommentNum++;
val.childrenComments.unshift(Object.assign(comment, {
id: comment.destId,
destId: this.articleId,
headIco: this.yoho.context.userHeadIco,
userName: this.yoho.context.userName,
parentUserName: get(find(val.childrenComments, {id: comment.parentId}), 'userName', '')
}));
}
});
},
addComment(comment) {
this.addCommentNum++;
this.commentList.unshift({
childrenComments: [],
parentComment: Object.assign(comment, {
id: comment.destId,
destId: this.articleId,
headIco: this.yoho.context.userHeadIco,
userName: this.yoho.context.userName
})
});
}
},
components: {
... ... @@ -120,7 +175,7 @@ export default {
align-items: center;
justify-content: center;
.loading {
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
... ...
... ... @@ -17,7 +17,8 @@ export default function(state = {}) {
path: '',
needLogin: false,
isLogin: false,
userHeadIco: ''
userHeadIco: '',
userName: ''
},
window: {
statusBarStatus: false,
... ... @@ -92,8 +93,9 @@ export default function(state = {}) {
state.window.statusBarColor = color || 'black';
}
},
[Types.FETCH_USER_INFO_SUCCESS](state, {head_ico}) {
[Types.FETCH_USER_INFO_SUCCESS](state, {head_ico, nickname}) {
state.context.userHeadIco = head_ico;
state.context.userName = nickname;
},
[Types.FETCH_USER_INFO_FAILD](state) {
state.context.userHeadIco = '';
... ...
... ... @@ -12,7 +12,8 @@ module.exports = {
auth: true,
params: {},
fields: {
head_ico: {default: ''}
head_ico: {default: ''},
nickname: {default: ''}
}
},
'/api/grass/labelRealtedArticleDetail': {
... ...