fe / yoho-community-web · Commits

Go to a project

Authored by TaoHuang
Commit ac12cab5fe0bdd4c2e23fe388ff87a304b66ea87 1 parent e94144c6

fix

Inline Side-by-side
Showing 10 changed files with 102 additions and 64 deletions
<template>
<div class="comment-empty-wrap">
<div class="empty-content">
<div class="empty-img" @click="OPEN_COMENT_INPUT"></div>
<p class="empty-tip">暂无评论，快来评论吧！</p>
<CommentPlaceholder v-bind="$attrs" v-on="$listeners">
<div class="comment-empty-wrap">
<div class="empty-content">
<div class="empty-img"></div>
<p class="empty-tip">暂无评论，快来评论吧！</p>
</div>
</div>
</div>
</CommentPlaceholder>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const article = createNamespacedHelpers('article');
import CommentPlaceholder from './comment-placeholder';
export default {
name: 'CommentEmpty',
props: {
click: {
type: Function,
required: false
}
},
methods: {
...article.mapMutations(['OPEN_COMENT_INPUT'])
components: {
CommentPlaceholder
}
};
</script>
... ...
... ... @@ -8,7 +8,16 @@
<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>
<CommentEmpty v-if="empty"
:dest-id="articleId"
:article-id="articleId"
:authorUid="authorUid"
:column-type="columnType"
:add-type="0"
:user="authorName"
@on-reply="onReply"
>
</CommentEmpty>
<div v-else ref="commentList" class="comment-list">
<div ref="commentListTop" class="comment-list-top">
<div ref="commentPre" class="comment-pre-list">
... ... @@ -77,7 +86,7 @@ import { createNamespacedHelpers } from 'vuex';
import CommentPlaceholderActionSheet from './comment-placeholder-actionsheet';
const { mapActions } = createNamespacedHelpers('comment');
const {mapMutations: articleMapMutations } = createNamespacedHelpers('article');
const { mapMutations: articleMapMutations } = createNamespacedHelpers('article');
export default {
name: 'CommentList',
... ... @@ -89,7 +98,8 @@ export default {
},
posId: Number,
articleId: Number,
authorUid: Number
authorUid: Number,
authorName: String
},
data() {
return {
... ...
... ... @@ -34,25 +34,15 @@ export default {
posting: false
};
},
computed: {
...articleMapState(['comentInputVisable'])
},
watch: {
comentInputVisable: function() {
if (this.comentInputVisable ?? false) {
this.openComentInput();
this.INIT_COMENT_INPUT?.();
}
}
},
methods: {
...commentMapActions(['postComment']),
...articleMapActions(['fetchArticleUpdate']),
...articleMapMutations(['UPDATE_ARTICLE_COMMENT_COUNT', 'INIT_COMENT_INPUT']),
...articleMapMutations(['UPDATE_ARTICLE_COMMENT_COUNT']),
async openComentInput() {
if (this.share) {
return this.$links.toDownloadApp();
}
// if (this.share) {
// return this.$links.toDownloadApp();
// }
const user = await this.$sdk.getUser();
if (user && user.uid) {
... ... @@ -117,10 +107,6 @@ export default {
if (result.code === 200) {
this.UPDATE_ARTICLE_COMMENT_COUNT({articleId: this.articleId});
if (this.autoUpdate && this.addType === 0) {
await this.fetchArticleUpdate({articleId: this.articleId});
}
this.$emit('on-comment', {
destId: this.destId,
parentId: this.rootId || void 0,
... ... @@ -135,6 +121,10 @@ export default {
}
});
if (this.autoUpdate && this.addType === 0) {
await this.fetchArticleUpdate({articleId: this.articleId});
}
this.reportComment(this.destId);
} else {
Object.assign(toastInfo, {
... ...
... ... @@ -6,7 +6,19 @@
<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" :authorUid="authorUid"></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"
:authorName="authorName">
</CommentList>
</Layout>
</template>
... ... @@ -25,7 +37,8 @@ export default {
articleId: Number,
commentId: Number,
commentCount: Number,
authorUid: Number
authorUid: Number,
authorName: String
},
data() {
return {
... ... @@ -38,7 +51,7 @@ export default {
}
},
methods: {
onPageChange({size}) {
onPageChange({ size }) {
this.size = size;
},
onPageReady(params) {
... ... @@ -55,7 +68,7 @@ export default {
this.$emit('on-comment', params);
}
},
components: {CommentList}
components: { CommentList }
};
</script>
... ...
... ... @@ -70,6 +70,7 @@
:pos-id="posId"
:column-type="1001"
:autoUpdate="false"
:user="articleInfo.authorName"
@on-comment="onCommentInput">
添加评论...
</CommentPlaceholder>
... ...
... ... @@ -32,6 +32,7 @@
:share="share"
:pos-id="posId"
:authorUid="data.authorUid"
:authorName="data.authorName"
@on-close="onCloseComment"
@on-comment="onActionComment"></Comment>
</YohoActionSheet>
... ...
<template>
<div class="article-detail-notes">
<ArticleItemHeader v-if="share" :share="share" :data="authorData" :lazy="lazy" :more="false" @on-follow="onFollowAuthor"></ArticleItemHeader>
<ArticleItemHeader v-if="share" :share="share" :data="authorData" :lazy="lazy" :more="false"
@on-follow="onFollowAuthor"></ArticleItemHeader>
<LayoutHeader v-else ref="header" style="visibility: hidden;"></LayoutHeader>
<div v-if="data.empty" class="article-empty">
{{data.emptyTip || '文章不存在或文章被删除'}}
</div>
<div v-else class="article-context">
<VideoPlayer v-if="+data.sort === 4" class="note-video" :source="data.videoUrl" :cover="data.coverUrl" :width="data.width" :height="data.height"></VideoPlayer>
<ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
<ProductGroup name="articleTwoColumn" :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
<VideoPlayer v-if="+data.sort === 4" class="note-video" :source="data.videoUrl" :cover="data.coverUrl"
:width="data.width" :height="data.height"></VideoPlayer>
<ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy"
@on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
<ProductGroup name="articleTwoColumn" :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb"
v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
<div class="context-title">{{data.articleTitle}}</div>
... ... @@ -22,7 +26,16 @@
<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" :authorUid="data.authorUid"></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"
:authorName="data.authorName">
</ArticleDetailCommentList>
</div>
<div v-if="listTitle" class="rec-article-title">
... ... @@ -32,15 +45,16 @@
</template>
<script>
import {get} from 'lodash';
import { get } from 'lodash';
import ArticleDetailCommentList from './comment-list';
import ArticleItemHeader from '../article/article-item-header';
import ArticleItemSlide from '../article/article-item-slide';
import ArticleItemTopics from '../article/article-item-topics';
import ArticleDetailIntro from './article-intro';
import dayjs from 'utils/day';
import {createNamespacedHelpers} from 'vuex';
const {mapState} = createNamespacedHelpers('article');
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('article');
export default {
name: 'ArticleDetailNote',
... ... @@ -72,7 +86,7 @@ export default {
const articleState = this.articleStates[this.data.articleId] || this.data;
const authorState = this.authorStates[`${this.data.authorUid}-${this.data.authorType}`] || this.data;
return Object.assign({...articleState}, {hasAttention: authorState.hasAttention});
return Object.assign({ ...articleState }, { hasAttention: authorState.hasAttention });
},
thumb() {
return !!this.data.thumb;
... ... @@ -134,15 +148,15 @@ export default {
onPraise() {
this.$emit('on-praise');
},
onChangeSlide({index}) {
onChangeSlide({ index }) {
this.slideIndex = index;
},
onComment({comment}) {
onComment({ comment }) {
this.$refs.commentList && this.$refs.commentList.addComment(comment);
},
toCommentList() {
if (this.$refs.commentList && this.scrollTo) {
this.scrollTo({scrollTop: this.$refs.commentList.$el.offsetTop - get(this.$refs, 'header.$el.offsetHeight', 0)});
this.scrollTo({ scrollTop: this.$refs.commentList.$el.offsetTop - get(this.$refs, 'header.$el.offsetHeight', 0) });
}
},
onMore() {
... ...
... ... @@ -28,7 +28,16 @@
<span v-else>{{moreBtnText}}</span>
</div>
</template>
<CommentEmpty v-else></CommentEmpty>
<CommentEmpty
:dest-id="articleId"
:column-type="columnType"
:article-id="articleId"
:authorUid="authorUid"
:add-type="0"
:user="authorName"
@on-comment="addCommentByComment"
v-else>
</CommentEmpty>
</div>
</template>
... ... @@ -50,7 +59,8 @@ export default {
},
share: Boolean,
hasComment: Boolean,
authorUid: Number
authorUid: Number,
authorName: String
},
data() {
return {
... ... @@ -162,6 +172,9 @@ export default {
})
});
},
addCommentByComment({ comment }) {
this.addComment(comment);
},
onRemoveComment({ commentId }) {
for (let [index, val] of Object.entries(this.commentList)) {
if (val.parentComment && +val.parentComment.id === +commentId) {
... ... @@ -211,11 +224,12 @@ export default {
align-items: center;
justify-content: center;
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
}
</style>
... ...
... ... @@ -130,7 +130,8 @@ export default {
articleId,
limit: 1,
page: 1,
columnType: 1001
columnType: 1001,
singleDetail: 'Y'
});
let articleData = get(result, 'data.detailList[0]');
... ...
{
"name": "yoho-community-web",
"version": "6.9.11-beta14",
"version": "6.9.11-beta15",
"private": true,
"description": "A New Yohobuy Project With Express",
"repository": {
... ...