fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit 99cfdd2cf51b4249b553ecebbaf6f71dd5fad6a2 2 parents 3e8076a8 b07c41a9

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

Inline Side-by-side
Showing 7 changed files with 132 additions and 108 deletions
... ... @@ -90,7 +90,7 @@ export default {
.action-sheet-fade-enter-active,
.action-sheet-fade-leave-active {
transition: all 0.2s ease-in-out;
transition: all 0.7s ease-in-out;
}
.action-sheet-move-enter,
... ... @@ -100,7 +100,7 @@ export default {
.action-sheet-move-enter-active,
.action-sheet-move-leave-active {
transition: all 0.2s ease-in-out;
transition: all 0.7s ease-in-out;
}
.yoho-popup {
... ...
... ... @@ -69,8 +69,13 @@ export default {
this.prompt = this.$grassPrompt({
img: this.product.productImage,
title: '收藏成功',
desc: '可在 [我的-商品收藏] 页面查看'
});
desc: '可在 [我的-商品收藏] 页面查看',
onClick: () => {
this.$yoho.goPage('go.fav', {
favType: 0
});
}
}, 1000);
} else {
this.prompt && this.prompt.hide();
this.$createToast({
... ...
... ... @@ -15,6 +15,8 @@ export default {
<style :lang="scss" scoped>
.item {
margin-bottom: 10px;
margin-bottom: 20px;
margin-left: 20px;
}
</style>
... ...
... ... @@ -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
});
}
}
};
... ...
import {isArray} from 'lodash';
import { isArray } from 'lodash';
export default {
install(Vue) {
... ... @@ -6,57 +6,60 @@ export default {
let promptEle = null;
let timer = null;
function creatPromptVM(self) {
function createPromptVM(self) {
let tpl = Vue.extend({
data: function () {
return {
type: '',
img: '',
title: '',
desc: '',
onClick: null,
classNames: []
}
},
render: function(h) {
let classNames = ['yoho-grass-prompt-wrap', ...this.classNames];
data: function() {
return {
type: '',
img: '',
title: '',
desc: '',
onClick: null,
classNames: []
};
},
render: function(h) {
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', {
class: classNames,
on: {
click: () => {
this.onClick && this.onClick();
}
return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [
h(this.url ? 'a' : 'div', {
class: classNames,
attrs: {
href: this.url || '',
},
on: {
'click.stop': () => {
this.onClick && this.onClick();
}
}, [
h('ImageFormat', {
class: ['prompt-thumb'],
props: {
src: this.img,
lazy: false,
width: 100,
height: 100
}
}, [
h('ImageFormat', {
class: ['prompt-thumb'],
props: {
src: this.img,
lazy: false,
width: 100,
height: 100
}
}),
h('div', { class: ['prompt-info'] }, [
h('p', {
class: ['prompt-info-title'],
domProps: {
innerHTML: this.title
}
}),
h('div', {class: ['prompt-info']}, [
h('p', {
class: ['prompt-info-title'],
domProps: {
innerHTML: this.title
}
}),
h('p', {
class: ['prompt-info-desc'],
domProps: {
innerHTML: this.desc
}
})
]),
h('span', {class: ['iconfont', 'icon-right', 'prompt-icon']})
])
h('p', {
class: ['prompt-info-desc'],
domProps: {
innerHTML: this.desc
}
})
]),
h('span', { class: ['iconfont', 'icon-right', 'prompt-icon'] })
])
}
]);
}
});
promptVM = new tpl();
... ... @@ -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);
createPromptVM(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)) {
... ...
... ... @@ -294,7 +294,7 @@ function processProductList(list, favsList) {
}
// fav
const fav = favsList.find(i => `${i.id}` === `${product.product_skn}`);
const fav = favsList.find(i => `${i.id}` === `${product.product_id}`);
product.id = product.product_id;
product.productType = 1;
... ...