fe / yoho-community-web · Commits

Go to a project

Authored by yyq
Commit 1ace64ca86fbc8d9417973f04766c802c598bdc0 1 parent 8671da72

fix

Inline Side-by-side
Showing 3 changed files with 74 additions and 57 deletions
... ... @@ -24,27 +24,13 @@
</span>
<div class="author-section">
<ul class="author-fans">
<li>
<span class="num">{{baseData.attCount || 0}}</span>
<p class="name">
<span>关注</span>
</p>
</li>
<li>
<span class="num">{{baseData.fansCount || 0}}</span>
<p class="name">
<span>粉丝</span>
</p>
</li>
<li>
<span class="num">{{baseData.praiseAndfavorite || 0}}</span>
<p class="name">
<span>获赞与收藏</span>
</p>
<li v-for="(item, key) in fansList" :key="key">
<span class="num">{{baseData[key] || 0}}</span>
<p class="name"><span>{{item}}</span></p>
</li>
</ul>
<div class="operate-wrap">
<label v-if="isOwner" class="operate-btn btn-user-edit" @click="goUserInfoEdit">编辑个人资料</label>
<router-link v-if="isOwner" class="operate-btn btn-user-edit" to="//m.yohobuy.com/home/mydetails?openby:yohobuy＝{'action':'go.mineinfo'}">编辑个人资料</router-link>
<WidgetFollow v-else class="operate-btn" :author-uid="autherInfo.authorUid" :follow="isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
</div>
</div>
... ... @@ -54,7 +40,7 @@
<FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
</cube-sticky-ele>
<div class="contant-list">
<WaterFall class="pannel-wrap" :list="list" :pos="scrollY" :link-tpl="linkTpl"></WaterFall>
<WaterFall class="pannel-wrap" :list="list" :pos="scrollY" :query="linkQueryString"></WaterFall>
</div>
<div v-if="loadStatus" class="loading">
... ... @@ -86,6 +72,11 @@
autherInfo: {},
scrollEvents: ['scroll'],
scrollY: 0,
fansList: {
attCount: '关注',
fansCount: '粉丝',
praiseAndfavorite: '获赞与收藏'
},
baseData: {},
isAttention: false,
isOwner: false,
... ... @@ -95,12 +86,10 @@
loadStatus: ''
}
},
created() {
this._apiNamePre = 'auther';
mounted() {
let $dom = this.$refs.headerAuthor;
if (!this.$route.params.id) {
this._apiNamePre += 'Mine';
try {
this.$sdk.getUser().then(res => {
if (get(res, 'uid') > 0) {
... ... @@ -117,17 +106,6 @@
}
}
this.autherInfo = {
authorUid: this.$route.params.id,
authorType: this.$route.params.type || 1
};
this.fetchBaseInfo();
this.fetchList();
},
mounted() {
let $dom = this.$refs.headerAuthor;
if ($dom.offsetHeight) {
this._animeDuration = 300;
import('animejs').then(({default: anime}) => {
... ... @@ -141,6 +119,19 @@
});
}
},
activated() {
console.log('activated');
if (this.$route.params.id !== this.autherInfo.authorUid) {
this.init(this.$route.params);
}
},
beforeRouteUpdate(to, from, next) {
console.log('beforeRouteUpdate');
if (this.$route.params.id !== to.params.labelId) {
this.init(to.params);
}
next();
},
watch: {
scrollY(top) {
let animePlayed = false;
... ... @@ -179,6 +170,11 @@
list() {
return get(this.fetchInfo, `${this.activeIndex}.list`) || [];
},
linkQueryString() {
return assign({}, this.autherInfo, {
type: ['publish', 'fav'][this.activeIndex]
})
},
linkTpl() {
return `/grass/article/{articleId}?authorUid=${this.autherInfo.authorUid}&authorType=${this.autherInfo.authorType}&type=${['publish', 'fav'][this.activeIndex]}`;
},
... ... @@ -188,6 +184,22 @@
},
methods: {
...mapActions(['autherBaseInfo', 'autherAritcleNum', 'autherPubList', 'autherFavList', 'autherMineBaseInfo', 'autherMineAritcleNum', 'autherMinePubList', 'autherMineFavList']),
init(params) {
params = params || {};
this._apiNamePre = 'auther';
if (!params.id) {
this._apiNamePre += 'Mine';
}
this.autherInfo = {
authorUid: params.id,
authorType: params.type || 1
};
this.fetchBaseInfo();
this.fetchList();
},
scrollHandler({ y }) {
this.scrollY = -y;
... ...
<template>
<div class="wf-list" :style="{'height': listHeight + 'px'}">
<div
v-for="i in viewList"
:key="`${i._temporary ? '_' : ''}${i.articleId}`"
<div v-for="i in viewList" :key="`${i._temporary ? '_' : ''}${i.articleId}`"
class="wf-item"
:class="{'wf-item-default': i._default, 'wf-item-temp': i._temporary}"
:style="`width: ${100 / cols}%;transform: translate(${i.left}px, ${i.top}px)`">
:style="`width: ${100 / cols}%;transform: translate(${i.left}px, ${i.top}px)`"
@click="toArticle(i.articleId)">
<div class="wf-item-mid">
<router-link :to="link(i)">
<div class="layer-image" :style="{'height': i.coverHeight + 'px'}">
<ImageFormat v-if="!i._temporary" :mode="1" :src="i[srcKey]" :width="coverImageWidth" :height="i.coverHeight"></ImageFormat>
</div>
<div class="description">
<p>{{i.content}}</p>
</div>
</router-link>
<div class="layer-image" :style="{'height': i.coverHeight + 'px'}">
<ImageFormat v-if="!i._temporary" :mode="1" :src="i[srcKey]" :width="coverImageWidth" :height="i.coverHeight"></ImageFormat>
</div>
<div class="description">
<p>{{i.content}}</p>
</div>
<div class="attribution">
<router-link :to="link(i)" class="auther">
<div class="auther">
<span class="avatar">
<WidgetAvatar v-if="!i._temporary" :src="i.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
</span>
<span class="name">{{i.authorName}}</span>
</router-link>
</div>
<div class="fav">
<WidgetFav :articleId="i.articleId" :num="i.praiseCount" :option="favOption"></WidgetFav>
... ... @@ -71,7 +68,7 @@ export default {
type: Number,
default: 2
},
linkTpl: String
query: Object
},
mounted() {
this.$on('calced', (nlist) => {
... ... @@ -96,7 +93,7 @@ export default {
watch: {
pos() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(this.resetViewList, 0);
this.timer = setTimeout(this.resetViewList, 100);
},
list(newList, oldList) {
if (oldList.length > newList.length ||
... ... @@ -283,8 +280,12 @@ export default {
this.viewIndex = viewIndex;
}
},
link(item) {
return (this.linkTpl || '').replace('{articleId}', item.articleId);
toArticle(id) {
this.$router.push({
name: 'article',
params: {id},
query: this.query
});
}
}
};
... ...
... ... @@ -22,10 +22,13 @@ export default {
let classNames = ['yoho-grass-prompt-wrap', ...this.classNames];
return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [
h(this.url ? 'router-link' : 'div', {
h(this.url ? 'a' : 'div', {
class: classNames,
attrs: {
href: this.url || '',
},
on: {
click: () => {
'click.stop': () => {
this.onClick && this.onClick();
}
}
... ... @@ -65,15 +68,16 @@ export default {
}
Vue.prototype.$grassPrompt = function(data = {}, time) {
let {img, title, desc, type, className, onClick} = data;
let {img, title, desc, url, type, className, onClick} = data;
if (!promptVM) {
creatPromptVM(this);
}
promptVM.img = img || '';
promptVM.title = title;
promptVM.desc = desc;
promptVM.title = title || '';
promptVM.desc = desc || '';
promptVM.url = url;
promptVM.type = type || 'bottom';
if (className && !isArray(className)) {
... ...