fe / yoho-community-web · Commits

Go to a project

Authored by yyq
Commit b42ef16b0a9d77c6aa2071d2129fd1d23db48cea 1 parent c053600e

fetch wait

Inline Side-by-side
Showing 10 changed files with 161 additions and 74 deletions
... ... @@ -25,7 +25,7 @@ export default {
},
computed: {
imageSrc() {
return this.src || 'http://img11.static.yhbimg.com/yhb-img01/2016/07/05/13/017ec560b82c132ab2fdb22f7cf6f42b83.png?imageView/2/w/{width}/h/{height}';
return this.src || '//img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif??imageView/2/w/{width}/h/{height}';
}
}
};
... ...
... ... @@ -76,10 +76,7 @@ export default {
};
},
created() {
forEach(defaultOption, (value, key) => {
this.viewOption[key] = this.option.hasOwnProperty(key) ? this.option[key] : defaultOption[key];
});
this.viewOption = {...this.viewOption};
this.setOptions();
},
computed: {
syncFnName() {
... ... @@ -105,6 +102,7 @@ export default {
if (this.actionClass) {
return this.actionClass;
}
if (classMap[this.type]) {
const currentClass = classMap[this.type];
... ... @@ -152,6 +150,15 @@ export default {
}
}
},
watch: {
option(val) {
if (this.viewOption.selected !== this.option.selected) {
this.actionClass = '';
}
this.setOptions();
}
},
methods: {
...mapActions(['followArticle', 'praiseArticle', 'praiseComment']),
...articleMapActions(['fetchArticleUpdate']),
... ... @@ -168,6 +175,12 @@ export default {
return px + 'px';
}
},
setOptions() {
forEach(defaultOption, (value, key) => {
this.viewOption[key] = this.option.hasOwnProperty(key) ? this.option[key] : defaultOption[key];
});
this.viewOption = {...this.viewOption};
},
changeBtnStatus() {
this.btnSelected = !this.btnSelected;
... ...
... ... @@ -3,15 +3,15 @@
<LayoutHeader slot='header' theme="white" class="author-page-header">
<div ref="headerAuthor" class="header-author">
<div class="h-name flex">
<span class="h-name-b">{{baseData.nickName}}</span>
<span v-if="baseData.sex" class="iconfont icon-women author-sex-icon" :class="`icon-${baseData.sex}`"></span>
<span class="h-name-b">{{authorBaseData.nickName}}</span>
<span v-if="authorBaseData.sex" class="iconfont icon-women author-sex-icon" :class="`icon-${authorBaseData.sex}`"></span>
</div>
<div class="h-more">
<div class="flex">
<WidgetAvatar v-if="baseData.headIco" class="h-headico" :src="baseData.headIco" :width="100" :height="100"></WidgetAvatar>
<WidgetAvatar v-if="authorBaseData.headIco" class="h-headico" :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>
</div>
<div v-if="!isOwner" class="h-follow flex">
<WidgetFollow class="widget-follow" :author-uid="autherInfo.authorUid" :follow="isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
<WidgetFollow class="widget-follow" :author-uid="autherInfo.authorUid" :follow="authorBaseData.isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
</div>
</div>
</div>
... ... @@ -29,22 +29,22 @@
@scroll-end="onScrollEndHandle">
<div ref="authorProfile" class="author-profile">
<span class="avatar-box">
<WidgetAvatar v-if="baseData.headIco" :src="baseData.headIco" :width="100" :height="100"></WidgetAvatar>
<WidgetAvatar :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>
</span>
<div class="author-section">
<ul class="author-fans">
<li v-for="(item, key) in fansList" :key="key">
<span class="num">{{baseData[key] || 0}}</span>
<span class="num">{{authorBaseData[key] || 0}}</span>
<p class="name"><span>{{item}}</span></p>
</li>
</ul>
<div class="operate-wrap">
<a v-if="isOwner" class="operate-btn btn-user-edit" :href="mineInfoUrl">编辑个人资料</a>
<WidgetFollow v-else class="operate-btn" :author-uid="autherInfo.authorUid" :follow="isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
<WidgetFollow v-else class="operate-btn" :author-uid="autherInfo.authorUid" :follow="authorBaseData.isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
</div>
</div>
</div>
<p v-if="baseData.signature" class="author-desc">{{baseData.signature}}</p>
<p v-if="authorBaseData.signature" class="author-desc">{{authorBaseData.signature}}</p>
<FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
<div ref="contantList" class="contant-list">
<p v-if="emptyTip" class="empty-tip" :height="emptyTipHeight">{{emptyTip}}</p>
... ... @@ -67,7 +67,7 @@
import WaterFall from './components/scroll-reveal';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('user');
const {mapState, mapActions, mapMutations} = createNamespacedHelpers('user');
export default {
name: 'userpage',
... ... @@ -81,9 +81,6 @@
fansCount: '粉丝',
praiseAndfavorite: '获赞与收藏'
},
baseData: {},
isAttention: false,
isOwner: false,
tabFixed: false,
tabsNum: [0, 0],
activeIndex: 0,
... ... @@ -94,15 +91,34 @@
}
},
created() {
this.isOwner = !this.$route.params.id;
this.CHANGE_AUTHOR_OWNER_STATUS(!this.$route.params.id);
this._apiNamePre = 'auther';
if (!this.$route.params.id) {
this._apiNamePre += 'Mine';
}
this.autherInfo = {
authorUid: this.$route.params.id,
authorType: this.$route.params.type || 1
};
this.fetchBaseInfo();
},
mounted() {
let $dom = this.$refs.headerAuthor;
let i = 1;
this.emptyTipHeight = this.$el.offsetHeight - this.$refs.contantList.offsetTop - $dom.offsetHeight - 40;
if (!this.$route.params.id) {
this.checkLogin(uid => {
this.fetchList(true);
});
} else {
this.fetchList(true);
}
this.init(this.$route.params);
this.emptyTipHeight = this.$el.offsetHeight - this.$refs.contantList.offsetTop - $dom.offsetHeight - 40;
if ($dom.offsetHeight) {
this._animeDuration = 300;
... ... @@ -118,17 +134,22 @@
}
},
activated() {
console.log('activated');
if (this.$route.params.id && this.$route.params.id !== this.autherInfo.authorUid) {
console.log('activated2222');
this.init(this.$route.params);
}
},
beforeRouteUpdate(to, from, next) {
console.log('beforeRouteUpdate');
if (this.$route.params.id !== to.params.authorUid) {
this.init(to.params);
}
next();
},
computed: {
...mapState(['authorBaseData', 'isOwner']),
list() {
return get(this.fetchInfo, `${this.activeIndex}.list`) || [];
},
... ... @@ -140,7 +161,7 @@
authorUid: this.autherInfo.authorUid,
},
query: {
userName: this.baseData.nickName
userName: this.authorBaseData.nickName
}
};
},
... ... @@ -149,13 +170,14 @@
}
},
methods: {
...mapMutations(['CHANGE_AUTHOR_OWNER_STATUS', 'CHANGE_AUTHOR_ATTENTION_STATUS']),
...mapActions(['autherBaseInfo', 'autherAritcleNum', 'autherPubList', 'autherFavList', 'autherMineBaseInfo', 'autherMineAritcleNum', 'autherMinePubList', 'autherMineFavList']),
init(params) {
params = params || {};
this._apiNamePre = 'auther';
this.isOwner = !params.id;
this.CHANGE_AUTHOR_OWNER_STATUS(!this.$route.params.id);
this.tabFixed = false;
this.tabsNum = [0, 0];
this.activeIndex = 0;
... ... @@ -166,25 +188,31 @@
if (!params.id) {
this._apiNamePre += 'Mine';
try {
this.$sdk.getUser().then(res => {
if (get(res, 'uid') > 0) {
this.fetchData(res.uid, 1);
} else {
this.$sdk.goLogin();
}
});
} catch(e){
console.log(e);
}
this.checkLogin(uid => {
this.fetchData(uid, 1);
});
} else {
this.fetchData(params.id, params.type || 1);
}
},
fetchData(authorUid, authorType) {
fetchData(authorUid, authorType, noBase) {
this.autherInfo = {authorUid, authorType};
this.fetchBaseInfo();
this.fetchList();
this.fetchList(true);
},
checkLogin(cb) {
try {
this.$sdk.getUser().then(res => {
if (get(res, 'uid') > 0) {
return cb && cb(res.uid);
} else {
this.$sdk.goLogin();
}
});
} catch(e){
console.log(e);
}
},
onScrollHandle({y}) {
this.scrollY = -y;
... ... @@ -252,19 +280,13 @@
}
},
fetchBaseInfo() {
this[this._apiNamePre + 'BaseInfo'](this.autherInfo).then(res => {
if (res.code === 200) {
this.baseData = res.data;
this.isOwner = +res.data.userType === 1;
this.isAttention = res.data.hasAttention === 'Y';
}
});
this[this._apiNamePre + 'BaseInfo'](this.autherInfo);
this[this._apiNamePre + 'AritcleNum'](this.autherInfo).then(res => {
this.tabsNum = [get(res, 'data.articleCount'), get(res, 'data.favoriteCount')];
});
},
async fetchList() {
async fetchList(wait) {
this.fetchInfo = this.fetchInfo || [];
if (this.syncing) {
... ... @@ -281,6 +303,8 @@
return;
}
this.loadStatus = 1;
let syncServiceName;
if (this.activeIndex === 1) {
... ... @@ -299,7 +323,7 @@
this.syncing = false;
}
if (result.code === 200) {
if (result && result.code === 200) {
if (info.page === 1) {
info.list = [];
}
... ... @@ -316,18 +340,18 @@
}
}
if (info.page > info.totalPage) {
this.loadStatus = 2;
} else {
this.loadStatus = 1;
}
this.fetchInfo[this.activeIndex] = info;
setTimeout(() => {
if (info.page > info.totalPage) {
this.loadStatus = 2;
}
this.fetchInfo = {...this.fetchInfo};
this.fetchInfo[this.activeIndex] = info;
this.fetchInfo = {...this.fetchInfo};
setTimeout(() => {
this.$refs.scroll.refresh();
}, 100);
setTimeout(() => {
this.$refs.scroll.refresh();
}, 100);
}, wait ? 200 : 0);
},
setEmptyTip(list, totalCount) {
let tip = '';
... ... @@ -346,7 +370,7 @@
this.emptyTip = tip;
},
onFollow(follow) {
this.isAttention = follow;
this.CHANGE_AUTHOR_ATTENTION_STATUS(follow);
}
},
components: {
... ...
... ... @@ -5,12 +5,12 @@
<div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
<ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
</div>
<div v-if="data.content" class="description" @click="onClick">
<div v-if="data.content" class="description" @click="onClick('article')">
<p>{{data.content}}</p>
</div>
<div class="attribution">
<div class="auther" @click="onClick">
<div class="auther" @click="onClick('author')">
<span class="avatar">
<WidgetAvatar :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
</span>
... ... @@ -50,8 +50,8 @@ export default {
}
},
methods: {
onClick() {
this.$emit('click', this.data);
onClick(type) {
this.$emit('click', {data: this.data, type});
}
}
};
... ...
... ... @@ -2,7 +2,7 @@
<div class="sr-list">
<div class="sr-col" v-for="(col, index) in colsList" :key="index" :style="`width:${100/cols}%`">
<template v-if="col.length">
<ArticleItem v-for="item in col" :key="item.articleId" class="sr-item" :data="item" @click="toArticle"></ArticleItem>
<ArticleItem v-for="item in col" :key="item.articleId" class="sr-item" :data="item" @click="onClick"></ArticleItem>
</template>
<ArticleItem class="sr-temp" :temporary="true"></ArticleItem>
</div>
... ... @@ -12,7 +12,7 @@
<script>
import ArticleItem from './author-article-item';
import {assign, get, forEach, fill} from 'lodash';
import {assign, get, forEach} from 'lodash';
import {getArticleImageSize} from 'utils/image-handler';
export default {
... ... @@ -138,6 +138,27 @@ export default {
this.colsList = list;
},
onClick({data, type}) {
if (type === 'author') {
this.toAuthor(data)
} else {
this.toArticle(data);
}
},
toAuthor({authorUid, authorType}) {
console.log(get(this.params, 'params.authorUid'), authorUid);
if (get(this.params, 'params.authorUid') === authorUid) {
return;
}
this.$router.push({
name: 'author',
params: {
id: authorUid,
type: authorType
}
});
},
toArticle({articleId}) {
let router = {
name: 'article.user',
... ...
... ... @@ -15,13 +15,4 @@ export default [{
meta: {
keepAlive: true
},
},
{
path: '/author2/:type/:id',
alias: '/author2/:type/:id',
name: 'author2',
component: () => import(/* webpackChunkName: "author2" */ './author2'),
meta: {
keepAlive: true
}
}];
... ...
import * as Types from './types';
export default {
async followUser(actions, {followUid, status, authorType}) {
const result = await this.$api.post('/api/grass/updateAttention', {
... ... @@ -42,12 +44,22 @@ export default {
return result;
},
async autherBaseInfo(actions, {authorUid, authorType}) {
async autherBaseInfo({commit}, {authorUid, authorType}) {
commit(Types.FETCH_AUTHOR_INFO_REQUEST);
const result = await this.$api.get('/api/grass/getGrassUserBaseInfo', {
authorUid,
authorType
});
if (result && result.code === 200) {
if (!result.data) {
result.data = {};
}
commit(Types.FETCH_AUTHOR_INFO_SUCCESS, result);
} else {
commit(Types.FETCH_AUTHOR_INFO_FAILD);
}
return result;
},
async autherAritcleNum(actions, {authorUid, authorType}) {
... ...
... ... @@ -5,6 +5,9 @@ export default function() {
return {
namespaced: true,
state: {
authorBaseData: {},
isAttention: false,
isOwner: false
},
actions,
mutations
... ...
import * as Types from './types';
export default {
[Types.FETCH_AUTHOR_INFO_REQUEST](state) {
state.fetchAuthorInfo = true;
},
[Types.FETCH_AUTHOR_INFO_FAILD](state) {
state.authorBaseData = {};
state.isOwner = false;
state.fetchAuthorInfo = false;
},
[Types.FETCH_AUTHOR_INFO_SUCCESS](state, {data}) {
data.isAttention = data.hasAttention === 'Y';
state.authorBaseData = data;
state.isOwner = +data.userType === 1;
state.fetchAuthorInfo = true;
},
[Types.CHANGE_AUTHOR_OWNER_STATUS](state, isOwner) {
state.isOwner = isOwner;
},
[Types.CHANGE_AUTHOR_ATTENTION_STATUS](state, isAttention) {
state.authorBaseData.isAttention = isAttention;
},
};
... ...
export const FETCH_ARTICLE_LIST_REQUEST = 'FETCH_ARTICLE_LIST_REQUEST';
export const FETCH_ARTICLE_LIST_FAILD = 'FETCH_ARTICLE_LIST_FAILD';
export const FETCH_ARTICLE_LIST_SUCCESS = 'FETCH_ARTICLE_LIST_SUCCESS';
\ No newline at end of file
export const FETCH_AUTHOR_INFO_REQUEST = 'FETCH_AUTHOR_INFO_REQUEST';
export const FETCH_AUTHOR_INFO_FAILD = 'FETCH_AUTHOR_INFO_FAILD';
export const FETCH_AUTHOR_INFO_SUCCESS = 'FETCH_AUTHOR_INFO_SUCCESS';
export const CHANGE_AUTHOR_OWNER_STATUS = 'CHANGE_AUTHOR_OWNER_STATUS';
export const CHANGE_AUTHOR_ATTENTION_STATUS = 'CHANGE_AUTHOR_ATTENTION_STATUS';
... ...