|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<Layout class="article">
|
|
|
|
<TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic"></TopicHeader>
|
|
|
|
<TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic">
|
|
|
|
<template v-if="tabBlockSuctionTop" v-slot:suctionTop>
|
|
|
|
<TopicTabBlock :active-type="activeTopicListType" @on-change-tab="onChangeTab"></TopicTabBlock>
|
|
|
|
</template>
|
|
|
|
</TopicHeader>
|
|
|
|
|
|
|
|
<RecycleScrollReveal :size="5" :thumbs="thumbs" ref="scroll" @scroll="onScroll" :offset="800" :on-fetch="onFetch" :manual-init="true"
|
|
|
|
@on-inited="onInited">
|
|
|
|
<template v-slot:eternalTop>
|
|
|
|
<TopicBanner ref="topicHead" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic"></TopicBanner>
|
|
|
|
<TopicBanner ref="topicBanner" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic"></TopicBanner>
|
|
|
|
<TopicTabBlock :active-type="activeTopicListType" @on-change-tab="onChangeTab"></TopicTabBlock>
|
|
|
|
</template>
|
|
|
|
<template class="article-item" #item="{ data }">
|
|
|
|
<ArticleItem2
|
|
...
|
...
|
@@ -31,17 +36,6 @@ |
|
|
|
立即参与
|
|
|
|
</a>
|
|
|
|
</Layout>
|
|
|
|
<ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
|
|
|
|
<YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
|
|
|
|
<Comment ref="comment"
|
|
|
|
:destId="articleId"
|
|
|
|
:popup="true"
|
|
|
|
:article-id="articleId"
|
|
|
|
:pos-id="posId"
|
|
|
|
@on-close="onClose"
|
|
|
|
@on-comment="onActionComment"></Comment>
|
|
|
|
</YohoActionSheet>
|
|
|
|
<MoreActionSheet transfer ref="moreAction" @on-follow="onFollow" @on-delete="onDelete"></MoreActionSheet>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
...
|
...
|
@@ -55,6 +49,7 @@ import ArticleActionSheet from './components/detail/article-action-sheet'; |
|
|
|
import MoreActionSheet from './components/detail/more-action-sheet';
|
|
|
|
import TopicHeader from './components/topic/header';
|
|
|
|
import TopicBanner from './components/topic/banner';
|
|
|
|
import TopicTabBlock from './components/topic/tab-block';
|
|
|
|
import {mapState as mapYohoState, mapActions as mapYohoActions, mapMutations as mapYohoMutations, createNamespacedHelpers} from 'vuex';
|
|
|
|
const {mapState, mapMutations, mapActions} = createNamespacedHelpers('article');
|
|
|
|
|
|
...
|
...
|
@@ -70,14 +65,8 @@ export default { |
|
|
|
topicId: 0,
|
|
|
|
topicName: '',
|
|
|
|
headerAnimateStep: 0,
|
|
|
|
articleId: 0,
|
|
|
|
articleIndex: -1,
|
|
|
|
showCommentAction: false,
|
|
|
|
showCommentActioning: false,
|
|
|
|
showArticleDetailAction: false,
|
|
|
|
showMoreAction: true,
|
|
|
|
scrollTop: 0,
|
|
|
|
currentId: 0,
|
|
|
|
activeTopicListType: 2,
|
|
|
|
colWidthForTwo: 0,
|
|
|
|
scrolling: false
|
|
|
|
};
|
|
...
|
...
|
@@ -140,11 +129,25 @@ export default { |
|
|
|
return this.topicInfo[this.topicId] || {};
|
|
|
|
},
|
|
|
|
publishUrl() {
|
|
|
|
return this.topicId ? `?openby:yohobuy＝{"action":"go.grasspublish","params":{"topicId":"${this.topicId}","topicName":"${this.topicName}"}}` : '';
|
|
|
|
let params = {};
|
|
|
|
|
|
|
|
if (this.topicId) {
|
|
|
|
params.topicId = this.topicId;
|
|
|
|
params.topicName = this.topicName;
|
|
|
|
|
|
|
|
if (+this.topicSimpleInfo.isReward === 1) {
|
|
|
|
params.rewardNotice = this.topicSimpleInfo.rewardNotice;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return `?openby:yohobuy＝{"action":"go.grasspublish","params":${JSON.stringify(params)}}`;
|
|
|
|
},
|
|
|
|
topicTitle() {
|
|
|
|
return this.topicName || this.topicSimpleInfo.topicName || '';
|
|
|
|
},
|
|
|
|
tabBlockSuctionTop() {
|
|
|
|
return this.scrollTop >= (this._topicHeaderHeight - this._headerHeight);
|
|
|
|
},
|
|
|
|
headerBgOpacity() {
|
|
|
|
return this.headerAnimateStep / 100;
|
|
|
|
}
|
|
...
|
...
|
@@ -152,78 +155,38 @@ export default { |
|
|
|
methods: {
|
|
|
|
...mapYohoActions(['fetchUserProfile']),
|
|
|
|
...mapYohoMutations(['SET_STATUS_BAR_COLOR']),
|
|
|
|
...mapActions(['fetchTopicSimpleInfo', 'fetchTopicRelatedArticles', 'fetchArticleProductFavs']),
|
|
|
|
...mapMutations(['ASYNC_ARTICLE_COMMENT', 'CHANGE_AUTHOR_FOLLOW', 'CHANGE_TOPIC_FOLLOW']),
|
|
|
|
onShowComment({articleId, index}) {
|
|
|
|
this.articleId = articleId;
|
|
|
|
this.articleIndex = index;
|
|
|
|
this.showCommentAction = true;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.showCommentActioning) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.showCommentActioning = true;
|
|
|
|
this.$refs.comment.init();
|
|
|
|
this.$refs.commentAction.show();
|
|
|
|
setTimeout(() => {
|
|
|
|
this.showCommentActioning = false;
|
|
|
|
}, 300);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onShowMore({article, index}) {
|
|
|
|
this.$refs.moreAction.show(article, this.userUid, index);
|
|
|
|
},
|
|
|
|
onDelete(index) {
|
|
|
|
this.$refs.scroll.delete(index);
|
|
|
|
},
|
|
|
|
onPageReady({success}) {
|
|
|
|
if (success && this.showCommentAction) {
|
|
|
|
this.$refs.commentAction.show();
|
|
|
|
setTimeout(() => {
|
|
|
|
this.showCommentActioning = false;
|
|
|
|
}, 300);
|
|
|
|
} else {
|
|
|
|
this.showCommentActioning = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onUnlockHeight(params) {
|
|
|
|
this.$refs.scroll.unlockHight(params);
|
|
|
|
},
|
|
|
|
onClose() {
|
|
|
|
this.$refs.commentAction.hide();
|
|
|
|
},
|
|
|
|
onActionComment() {
|
|
|
|
this.ASYNC_ARTICLE_COMMENT({articleId: this.articleId, type: this.type});
|
|
|
|
this.onResize(this.articleIndex);
|
|
|
|
...mapActions(['fetchTopicSimpleInfo', 'fetchTopicRelatedArticles']),
|
|
|
|
...mapMutations(['CHANGE_AUTHOR_FOLLOW', 'CHANGE_TOPIC_FOLLOW']),
|
|
|
|
onChangeTab({type}) {
|
|
|
|
this.page = 1;
|
|
|
|
this.activeTopicListType = type;
|
|
|
|
this.$refs.scroll && this.$refs.scroll.init();
|
|
|
|
},
|
|
|
|
onScroll(params) {
|
|
|
|
onScroll({item, scrollTop, startIndex, items}) {
|
|
|
|
this.scrolling = true;
|
|
|
|
this._scTimer && clearTimeout(this._scTimer);
|
|
|
|
this._scTimer = setTimeout(() => {
|
|
|
|
this.scrolling = false;
|
|
|
|
}, 400);
|
|
|
|
|
|
|
|
this.scrollEvent(params);
|
|
|
|
this._ttTimer && clearTimeout(this._ttTimer);
|
|
|
|
this._ttTimer = setTimeout(() => {
|
|
|
|
this.scrollEvent(params);
|
|
|
|
}, throttleTime);
|
|
|
|
this.updateHeadAnimateStep(scrollTop);
|
|
|
|
this.scrollTop = scrollTop || 0;
|
|
|
|
this.scrollEvent({item, scrollTop, startIndex, items});
|
|
|
|
},
|
|
|
|
onDounceScroll({item, scrollTop, startIndex, items}) {
|
|
|
|
updateHeadAnimateStep(scrollTop) {
|
|
|
|
if (this.scrollTop === scrollTop) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.scrollTop = scrollTop || 0;
|
|
|
|
this._headerHeight = this._headerHeight || this.$refs.header.$el.offsetHeight;
|
|
|
|
this._topicHeaderHeight = this._topicHeaderHeight || this.$refs.topicHead.$el.offsetHeight;
|
|
|
|
|
|
|
|
let step = Math.round((scrollTop - 10) / (this._topicHeaderHeight - this._headerHeight) * 100);
|
|
|
|
this._topicHeaderHeight = this._topicHeaderHeight || this.$refs.topicBanner.$el.offsetHeight;
|
|
|
|
|
|
|
|
if (step && this.topicSimpleInfo.topicImageUrl) {
|
|
|
|
let step = Math.round((scrollTop - 4) / (this._topicHeaderHeight - this._headerHeight - 10) * 100);
|
|
|
|
if (step) {
|
|
|
|
this.headerAnimateStep = Math.max(Math.min(step, 100), 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
onDounceScroll({items}) {
|
|
|
|
this.reportArticleShow(items);
|
|
|
|
},
|
|
|
|
init() {
|
|
...
|
...
|
@@ -254,9 +217,13 @@ export default { |
|
|
|
this.headerAnimateStep = 100;
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
this.fetchTopicRelatedArticles({topicId: this.topicId, page: 1}).then(res => {
|
|
|
|
this.fetchTopicRelatedArticles({
|
|
|
|
topicId: this.topicId,
|
|
|
|
type: this.activeTopicListType,
|
|
|
|
page: 1
|
|
|
|
}).then(res => {
|
|
|
|
if (res.code === 200) {
|
|
|
|
this.listPreCache[`${this.topicId}-1`] = res;
|
|
|
|
this.listPreCache[`${this.topicId}-${this.activeTopicListType}-1`] = res;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
]);
|
|
...
|
...
|
@@ -271,12 +238,15 @@ export default { |
|
|
|
this.fetching = true;
|
|
|
|
this.page = this.page || 1;
|
|
|
|
|
|
|
|
let result = get(this.listPreCache, `${this.topicId}-${this.page}`);
|
|
|
|
let result = get(this.listPreCache, `${this.topicId}-${this.activeTopicListType}-${this.page}`);
|
|
|
|
|
|
|
|
if (!result) {
|
|
|
|
if (result) {
|
|
|
|
this.listPreCache = {};
|
|
|
|
} else {
|
|
|
|
result = await this.fetchTopicRelatedArticles({
|
|
|
|
topicId,
|
|
|
|
page: this.page
|
|
|
|
page: this.page,
|
|
|
|
type: this.activeTopicListType
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -304,24 +274,10 @@ export default { |
|
|
|
onInited(items) {
|
|
|
|
this.reportArticleShow(items);
|
|
|
|
},
|
|
|
|
onFollow(data, follow) {
|
|
|
|
this.CHANGE_AUTHOR_FOLLOW({authorUid: data.authorUid, authorType: data.authorType, follow, type: this.type});
|
|
|
|
},
|
|
|
|
onFollowTopic(follow) {
|
|
|
|
this.CHANGE_TOPIC_FOLLOW({topicId: this.topicId, follow});
|
|
|
|
follow && this.reportTopicFollow();
|
|
|
|
},
|
|
|
|
onResize(index) {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs.scroll.resize(index);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onShowGuang(params) {
|
|
|
|
this.showArticleDetailAction = true;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs.actionSheet.show(params);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
setPageShareInfo({topicName, topicImageUrl, topicDesc}) {
|
|
|
|
if (this.share) {
|
|
|
|
document && (document.title = topicName || '话题');
|
|
...
|
...
|
@@ -392,75 +348,62 @@ export default { |
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
ArticleItem,
|
|
|
|
ArticleItem2,
|
|
|
|
ArticleActionSheet,
|
|
|
|
MoreActionSheet,
|
|
|
|
TopicHeader,
|
|
|
|
TopicBanner
|
|
|
|
TopicBanner,
|
|
|
|
TopicTabBlock
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
/deep/ .recycle-scroll-reveal-main {
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
/deep/ .recycle-scroll-reveal-main {
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
|
|
|
|
.scroll-reveal-list {
|
|
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
.scroll-reveal-list {
|
|
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .att-click-wrap {
|
|
|
|
opacity: 0;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
/deep/ .cube-recycle-list-items {
|
|
|
|
padding-top: 54PX;
|
|
|
|
|
|
|
|
/deep/ .cube-recycle-list-items {
|
|
|
|
padding-top: 54PX;
|
|
|
|
|
|
|
|
.cube-recycle-list-item:first-child {
|
|
|
|
margin-top: -54PX;
|
|
|
|
}
|
|
|
|
.cube-recycle-list-item:first-child {
|
|
|
|
margin-top: -54PX;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.publish-btn {
|
|
|
|
width: 260px;
|
|
|
|
height: 80px;
|
|
|
|
border-radius: 42px;
|
|
|
|
font-size: 30px;
|
|
|
|
color: #fff;
|
|
|
|
background: #D0021B;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 100px;
|
|
|
|
left: calc(50% - 130px);
|
|
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
transition: all 600ms ease-in-out;
|
|
|
|
|
|
|
|
&.scroll-opacity {
|
|
|
|
opacity: 0.3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.publish-btn {
|
|
|
|
width: 260px;
|
|
|
|
height: 80px;
|
|
|
|
border-radius: 42px;
|
|
|
|
font-size: 30px;
|
|
|
|
color: #fff;
|
|
|
|
background: #D0021B;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 100px;
|
|
|
|
left: calc(50% - 130px);
|
|
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
transition: all 600ms ease-in-out;
|
|
|
|
|
|
|
|
&.scroll-opacity {
|
|
|
|
opacity: 0.3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-block {
|
|
|
|
width: 52px;
|
|
|
|
height: 52px;
|
|
|
|
margin: 14px 30px 14px 14px;
|
|
|
|
border-radius: 50%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.avatar-block {
|
|
|
|
width: 52px;
|
|
|
|
height: 52px;
|
|
|
|
margin: 14px 30px 14px 14px;
|
|
|
|
border-radius: 50%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
