fe / yoho-community-web · Commits

Go to a project

Authored by TaoHuang
Commit f252bea752a1fb4c92759ef98582f55064594751 2 parents e90164d5 39eaf568

Merge branch 'master' of http://git.yoho.cn/fe/yoho-community-web

Inline Side-by-side
Showing 13 changed files with 158 additions and 63 deletions
... ... @@ -18,7 +18,7 @@ export default {
this.$emit('click', {uid: user.uid});
} else {
this.$emit('cancel');
this.$sdk.goLogin();
this.$yoho.goLogin();
}
}
},
... ...
... ... @@ -117,6 +117,7 @@ export default {
justify-content: center;
font-size: 18PX;
letter-spacing: 0.09PX;
overflow: hidden;
}
.opts {
... ...
... ... @@ -193,26 +193,29 @@ export default {
if (this.viewOption.canSelect) {
this.changeBtnStatus();
const backFn = (res) => {
this.syncing = false;
if (res.code !== 200) {
this.changeBtnStatus();
this.$createToast && this.$createToast({
txt: res.message || '服务器开小差了',
type: 'warn',
time: 1000
}).show();
}
};
this.syncing = true;
this.syncService(this.syncFnName, {
articleId: this.articleId,
commentId: this.commentId,
status: this.btnSelected
}).then(backFn).catch(backFn);
if (this.syncFnName) {
const backFn = (res) => {
this.syncing = false;
if (res.code !== 200) {
this.changeBtnStatus();
this.$createToast && this.$createToast({
txt: res.message || '服务器开小差了',
type: 'warn',
time: 1000
}).show();
}
};
this.syncing = true;
this.syncService(this.syncFnName, {
articleId: this.articleId,
commentId: this.commentId,
status: this.btnSelected
}).then(backFn).catch(backFn);
}
}
this.viewOption.emitName && this.$emit(this.viewOption.emitName, evt);
... ...
<template>
<Article ref="article" :on-fetch="onFetch" @on-follow="onFollow" @on-slide="onSlide" @on-scroll-change="onScrollChange"></Article>
<Article
ref="article"
:on-fetch="onFetch"
@on-follow="onFollow"
@on-slide="onSlide"
@on-comment="onComment"
@on-scroll-change="onScrollChange">
</Article>
</template>
<script>
... ... @@ -46,7 +53,7 @@ export default {
},
methods: {
...mapMutations(['CHANGE_AUTHOR_FOLLOW', 'CHANGE_ARTICLE_LIST_SLIDE', 'CHANGE_ARTICLE_LIST_SCROLL']),
...mapActions(['fetchArticleList', 'fetchArticleProductFavs']),
...mapActions(['fetchArticleList', 'fetchArticleProductFavs', 'fetchArticleListUpdate']),
init() {
this.page = 1;
this.$refs.article.init();
... ... @@ -90,6 +97,12 @@ export default {
},
onScrollChange({articleId}) {
this.CHANGE_ARTICLE_LIST_SCROLL({articleId});
},
async onComment({articleId}) {
await this.fetchArticleListUpdate({
articleId,
});
this.$refs.article.resize();
}
},
components: {
... ...
... ... @@ -17,12 +17,13 @@
class="comment-input hover-opacity"
:dest-id="data.articleId"
:add-type="0"
:column-type="1001">
:column-type="1001"
@on-comment="onComment">
添加回复：赞美是一种美德
</CommentPlaceholder>
</div>
<div class="total-comment">
<div class="total hover-opacity" @click="onGoComment">查看{{data.commentCount}}条评论</div>
<div class="total hover-opacity" @click="onShowComment">查看{{data.commentCount}}条评论</div>
<div class="last-time">{{data.date}}</div>
</div>
</div>
... ... @@ -44,16 +45,13 @@ export default {
},
methods: {
...mapActions(['postComment']),
onGoComment() {
this.$emit('on-comment');
onShowComment() {
if (this.data.commentCount) {
this.$emit('on-show-comment');
}
},
onComment() {
this.postComment({
content: '这还是一条测试回复',
destId: this.data.articleId,
addType: 0,
columnType: this.columnType
});
this.$emit('on-comment');
}
},
components: {CubeInput: Input}
... ...
... ... @@ -2,7 +2,7 @@
<div class="article-item-header">
<router-link class="avatar" :to="`/grass/author/${data.authorType}/${data.authorUid}`">
<WidgetAvatar :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
<span class="name">{{data.authorName}}</span>
<span class="user-name">{{data.authorName}}</span>
</router-link>
<div class="opts">
<WidgetFollow :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention === 'Y'" @on-follow="onFollow"></WidgetFollow>
... ... @@ -62,9 +62,13 @@ export default {
overflow: hidden;
background-color: #fff;
.name {
.user-name {
font-size: 24px;
margin-left: 20px;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.widget-avatar {
... ...
... ... @@ -2,8 +2,8 @@
<div class="article-item-intro">
<div ref="intro" v-if="intro" class="intro hover-opacity" :class="introClass" :style="introStyle" @click="onExpand">
{{intro}}
<span class="expand" v-if="!isExpand && isEllipsis">…展开</span>
<span class="expand collapse" v-if="isExpand && isEllipsis">收起</span>
<span class="expand" v-if="showExpand">…展开</span>
<span class="expand collapse" v-if="showCollapse">收起</span>
</div>
<div class="topics">
<WidgetTopic
... ... @@ -20,7 +20,7 @@
<div class="opts">
<WidgetFav :num="data.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetFav>
<WidgetLike :num="data.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetLike>
<WidgetComment :num="data.commentCount" @click.native="onComment"></WidgetComment>
<WidgetComment :num="data.commentCount" @click.native="onShowComment"></WidgetComment>
</div>
</div>
</div>
... ... @@ -41,19 +41,22 @@ export default {
},
data() {
return {
isEllipsis: true,
isExpand: false,
isExpanding: false,
introCollapseHeight: 0,
introHeight: 0
};
},
created() {
if (this.data.intro.length < 66) {
this.isEllipsis = false;
}
},
computed: {
showExpand() {
return (!this.isExpand && this.isEllipsis) || this.data.articleType === 2;
},
showCollapse() {
return this.isExpand && this.isEllipsis;
},
isEllipsis() {
return this.data.intro.length >= 66;
},
intro() {
if (this.isExpand || this.data.intro.length < 66) {
return this.data.intro;
... ... @@ -64,6 +67,7 @@ export default {
introClass() {
return {
'intro-expand': this.isExpand,
'no-more': !this.isEllipsis
};
},
introStyle() {
... ... @@ -101,14 +105,14 @@ export default {
this.$yoho.share({
title: '逛资讯',
imgUrl: this.data.imageUrl,
link: `http://yoho-community-web.test3.ingress.dev.yohocorp.com/article/${this.data.articleId}`,
link: `http://yoho-community-web.test3.ingress.dev.yohocorp.com/article/${this.data.articleId}?isShare=1`,
desc: this.data.intro,
hideType: ['7', '8', '9']
});
},
onExpand() {
if (this.data.articleType === 2) {
this.$emit('on-expand');
return;
return this.$emit('on-expand');
}
if (!this.isEllipsis) {
return;
... ... @@ -128,8 +132,10 @@ export default {
resizeScroll() {
this.$emit('on-resize');
},
onComment() {
this.$emit('on-comment');
onShowComment() {
if (this.data.commentCount) {
this.$emit('on-show-comment');
}
}
}
};
... ... @@ -160,6 +166,10 @@ export default {
padding-bottom: 40px;
// overflow-y: auto;
}
&.no-more {
height: auto;
}
}
.expand {
... ...
... ... @@ -3,8 +3,8 @@
<ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
<ArticleItemSlide :data="slideData" :slide-index="data.blockIndex" :lazy="lazy" @on-slide="onSlide"></ArticleItemSlide>
<ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup>
<ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand" @on-comment="onComment"></ArticleItemIntro>
<ArticleItemComment :data="commentData" @on-comment="onComment"></ArticleItemComment>
<ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand" @on-show-comment="onShowComment"></ArticleItemIntro>
<ArticleItemComment :data="commentData" @on-show-comment="onShowComment" @on-comment="onComment"></ArticleItemComment>
<div class="line"></div>
</div>
</template>
... ... @@ -86,11 +86,14 @@ export default {
onExpand() {
this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId});
},
onComment() {
this.$emit('on-comment', this.data);
onShowComment() {
this.$emit('on-show-comment', this.data);
},
onSlide({index}) {
this.$emit('on-slide', {articleId: this.data.articleId, index});
},
onComment() {
this.$emit('on-comment', this.data);
}
},
components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}
... ...
... ... @@ -22,6 +22,7 @@
@on-resizeing="onResizeing(data)"
@on-follow="follow => onFollow(data, follow)"
@on-expand="onExpand"
@on-show-comment="onShowComment"
@on-comment="onComment"
@on-slide="onSlide"></ArticleItem>
<div :id="`ph${data.index}`"></div>
... ... @@ -80,7 +81,7 @@ export default {
}
},
methods: {
onComment({articleId}) {
onShowComment({articleId}) {
this.articleId = articleId;
this.showCommentAction = true;
this.$nextTick(() => {
... ... @@ -88,6 +89,9 @@ export default {
this.$refs.commentAction.show();
});
},
onComment({articleId}) {
this.$emit('on-comment', {articleId});
},
onClose() {
this.$refs.commentAction.hide();
},
... ... @@ -131,6 +135,9 @@ export default {
$phItem.innerHTML = '';
$phItem.status = 0;
this.resize();
},
resize() {
this.$refs.scroll.resize();
},
onResizeing(data) {
... ... @@ -194,5 +201,9 @@ export default {
margin-left: 10px;
font-size: 24px;
color: #000;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
... ...
<template>
<Article ref="article" :on-fetch="onFetch" @on-follow="onFollow" @on-slide="onSlide" @on-scroll-change="onScrollChange"></Article>
<Article
ref="article"
:on-fetch="onFetch"
@on-follow="onFollow"
@on-slide="onSlide"
@on-comment="onComment"
@on-scroll-change="onScrollChange">
</Article>
</template>
<script>
... ... @@ -36,16 +43,10 @@ export default {
},
computed: {
...mapState(['articleListByTopic']),
currentList() {
if (this.articleListByTopic.length > 2) {
return this.articleListByTopic.slice(0, 2);
}
return this.articleListByTopic;
}
},
methods: {
...mapMutations(['CHANGE_AUTHOR_TOPIC_FOLLOW', 'CHANGE_ARTICLE_TOPIC_SLIDE', 'CHANGE_ARTICLE_TOPIC_SCROLL']),
...mapActions(['fetchArticleListByTopic']),
...mapActions(['fetchArticleListByTopic', 'fetchArticleProductFavs', 'fetchArticleTopicUpdate']),
init() {
this.page = 1;
this.$refs.article.init();
... ... @@ -64,6 +65,9 @@ export default {
if (result.code === 200) {
if (get(result, 'data.detailList', []).length) {
this.page++;
this.fetchArticleProductFavs({
articles: result.data.detailList
});
return new Promise(resolve => {
if (this.page === 2) {
setTimeout(() => {
... ... @@ -91,6 +95,12 @@ export default {
},
onScrollChange({articleId}) {
this.CHANGE_ARTICLE_TOPIC_SCROLL({articleId});
},
async onComment({articleId}) {
await this.fetchArticleTopicUpdate({
articleId,
});
this.$refs.article.resize();
}
},
components: {
... ...
... ... @@ -36,6 +36,34 @@ export default {
}
return result;
},
async fetchArticleListUpdate({commit}, {articleId}) {
const result = await this.$api.get('/api/grass/columnArticleDetail', {
articleId,
limit: 1,
page: 1,
columnType: 1001
});
const articleData = get(result, 'data.detailList[0]');
if (articleData) {
commit(Types.FETCH_ARTICLE_LIST_UPDATE, {data: articleData});
}
},
async fetchArticleTopicUpdate({commit}, {articleId}) {
const result = await this.$api.get('/api/grass/columnArticleDetail', {
articleId,
limit: 1,
page: 1,
columnType: 1001
});
const articleData = get(result, 'data.detailList[0]');
if (articleData) {
commit(Types.FETCH_ARTICLE_TOPIC_UPDATE, {data: articleData});
}
},
async fetchArticleProductFavs({commit}, {articles}) {
const products = [], ufoProducts = [];
... ...
... ... @@ -94,6 +94,17 @@ export default {
}
});
},
[Types.FETCH_ARTICLE_LIST_UPDATE](state, {data}) {
const find = state.articleList.find(article => article.articleId === data.articleId);
if (find) {
find.commentCount = data.commentCount;
find.comments = data.comments;
}
},
[Types.FETCH_ARTICLE_TOPIC_UPDATE](state, {data}) {
},
[Types.CHANGE_ARTICLE_TOPIC_SCROLL](state, {articleId}) {
let inx;
... ...
... ... @@ -20,4 +20,7 @@ export const CHANGE_ARTICLE_TOPIC_SCROLL = 'CHANGE_ARTICLE_TOPIC_SCROLL';
export const FETCH_ARTICLE_TOPIC_REQUEST = 'FETCH_ARTICLE_TOPIC_REQUEST';
export const FETCH_ARTICLE_TOPIC_FAILD = 'FETCH_ARTICLE_TOPIC_FAILD';
export const FETCH_ARTICLE_TOPIC_SUCCESS = 'FETCH_ARTICLE_TOPIC_SUCCESS';
\ No newline at end of file
export const FETCH_ARTICLE_TOPIC_SUCCESS = 'FETCH_ARTICLE_TOPIC_SUCCESS';
export const FETCH_ARTICLE_LIST_UPDATE = 'FETCH_ARTICLE_LIST_UPDATE';
export const FETCH_ARTICLE_TOPIC_UPDATE = 'FETCH_ARTICLE_TOPIC_UPDATE';
... ...