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 68 additions and 51 deletions
@@ -24,27 +24,13 @@ @@ -24,27 +24,13 @@
24 </span> 24 </span>
25 <div class="author-section"> 25 <div class="author-section">
26 <ul class="author-fans"> 26 <ul class="author-fans">
27 - <li>  
28 - <span class="num">{{baseData.attCount || 0}}</span>  
29 - <p class="name">  
30 - <span>关注</span>  
31 - </p>  
32 - </li>  
33 - <li>  
34 - <span class="num">{{baseData.fansCount || 0}}</span>  
35 - <p class="name">  
36 - <span>粉丝</span>  
37 - </p>  
38 - </li>  
39 - <li>  
40 - <span class="num">{{baseData.praiseAndfavorite || 0}}</span>  
41 - <p class="name">  
42 - <span>获赞与收藏</span>  
43 - </p> 27 + <li v-for="(item, key) in fansList" :key="key">
  28 + <span class="num">{{baseData[key] || 0}}</span>
  29 + <p class="name"><span>{{item}}</span></p>
44 </li> 30 </li>
45 </ul> 31 </ul>
46 <div class="operate-wrap"> 32 <div class="operate-wrap">
47 - <label v-if="isOwner" class="operate-btn btn-user-edit" @click="goUserInfoEdit">编辑个人资料</label> 33 + <router-link v-if="isOwner" class="operate-btn btn-user-edit" to="//m.yohobuy.com/home/mydetails?openby:yohobuy＝{'action':'go.mineinfo'}">编辑个人资料</router-link>
48 <WidgetFollow v-else class="operate-btn" :author-uid="autherInfo.authorUid" :follow="isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow> 34 <WidgetFollow v-else class="operate-btn" :author-uid="autherInfo.authorUid" :follow="isAttention" @on-follow="follow => onFollow(follow)"></WidgetFollow>
49 </div> 35 </div>
50 </div> 36 </div>
@@ -54,7 +40,7 @@ @@ -54,7 +40,7 @@
54 <FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock> 40 <FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
55 </cube-sticky-ele> 41 </cube-sticky-ele>
56 <div class="contant-list"> 42 <div class="contant-list">
57 - <WaterFall class="pannel-wrap" :list="list" :pos="scrollY" :link-tpl="linkTpl"></WaterFall> 43 + <WaterFall class="pannel-wrap" :list="list" :pos="scrollY" :query="linkQueryString"></WaterFall>
58 </div> 44 </div>
59 45
60 <div v-if="loadStatus" class="loading"> 46 <div v-if="loadStatus" class="loading">
@@ -86,6 +72,11 @@ @@ -86,6 +72,11 @@
86 autherInfo: {}, 72 autherInfo: {},
87 scrollEvents: ['scroll'], 73 scrollEvents: ['scroll'],
88 scrollY: 0, 74 scrollY: 0,
  75 + fansList: {
  76 + attCount: '关注',
  77 + fansCount: '粉丝',
  78 + praiseAndfavorite: '获赞与收藏'
  79 + },
89 baseData: {}, 80 baseData: {},
90 isAttention: false, 81 isAttention: false,
91 isOwner: false, 82 isOwner: false,
@@ -95,12 +86,10 @@ @@ -95,12 +86,10 @@
95 loadStatus: '' 86 loadStatus: ''
96 } 87 }
97 }, 88 },
98 - created() {  
99 - this._apiNamePre = 'auther'; 89 + mounted() {
  90 + let $dom = this.$refs.headerAuthor;
100 91
101 if (!this.$route.params.id) { 92 if (!this.$route.params.id) {
102 - this._apiNamePre += 'Mine';  
103 -  
104 try { 93 try {
105 this.$sdk.getUser().then(res => { 94 this.$sdk.getUser().then(res => {
106 if (get(res, 'uid') > 0) { 95 if (get(res, 'uid') > 0) {
@@ -117,17 +106,6 @@ @@ -117,17 +106,6 @@
117 } 106 }
118 } 107 }
119 108
120 - this.autherInfo = {  
121 - authorUid: this.$route.params.id,  
122 - authorType: this.$route.params.type || 1  
123 - };  
124 -  
125 - this.fetchBaseInfo();  
126 - this.fetchList();  
127 - },  
128 - mounted() {  
129 - let $dom = this.$refs.headerAuthor;  
130 -  
131 if ($dom.offsetHeight) { 109 if ($dom.offsetHeight) {
132 this._animeDuration = 300; 110 this._animeDuration = 300;
133 import('animejs').then(({default: anime}) => { 111 import('animejs').then(({default: anime}) => {
@@ -141,6 +119,19 @@ @@ -141,6 +119,19 @@
141 }); 119 });
142 } 120 }
143 }, 121 },
  122 + activated() {
  123 + console.log('activated');
  124 + if (this.$route.params.id !== this.autherInfo.authorUid) {
  125 + this.init(this.$route.params);
  126 + }
  127 + },
  128 + beforeRouteUpdate(to, from, next) {
  129 + console.log('beforeRouteUpdate');
  130 + if (this.$route.params.id !== to.params.labelId) {
  131 + this.init(to.params);
  132 + }
  133 + next();
  134 + },
144 watch: { 135 watch: {
145 scrollY(top) { 136 scrollY(top) {
146 let animePlayed = false; 137 let animePlayed = false;
@@ -179,6 +170,11 @@ @@ -179,6 +170,11 @@
179 list() { 170 list() {
180 return get(this.fetchInfo, `${this.activeIndex}.list`) || []; 171 return get(this.fetchInfo, `${this.activeIndex}.list`) || [];
181 }, 172 },
  173 + linkQueryString() {
  174 + return assign({}, this.autherInfo, {
  175 + type: ['publish', 'fav'][this.activeIndex]
  176 + })
  177 + },
182 linkTpl() { 178 linkTpl() {
183 return `/grass/article/{articleId}?authorUid=${this.autherInfo.authorUid}&authorType=${this.autherInfo.authorType}&type=${['publish', 'fav'][this.activeIndex]}`; 179 return `/grass/article/{articleId}?authorUid=${this.autherInfo.authorUid}&authorType=${this.autherInfo.authorType}&type=${['publish', 'fav'][this.activeIndex]}`;
184 }, 180 },
@@ -188,6 +184,22 @@ @@ -188,6 +184,22 @@
188 }, 184 },
189 methods: { 185 methods: {
190 ...mapActions(['autherBaseInfo', 'autherAritcleNum', 'autherPubList', 'autherFavList', 'autherMineBaseInfo', 'autherMineAritcleNum', 'autherMinePubList', 'autherMineFavList']), 186 ...mapActions(['autherBaseInfo', 'autherAritcleNum', 'autherPubList', 'autherFavList', 'autherMineBaseInfo', 'autherMineAritcleNum', 'autherMinePubList', 'autherMineFavList']),
  187 + init(params) {
  188 + params = params || {};
  189 +
  190 + this._apiNamePre = 'auther';
  191 + if (!params.id) {
  192 + this._apiNamePre += 'Mine';
  193 + }
  194 +
  195 + this.autherInfo = {
  196 + authorUid: params.id,
  197 + authorType: params.type || 1
  198 + };
  199 +
  200 + this.fetchBaseInfo();
  201 + this.fetchList();
  202 + },
191 scrollHandler({ y }) { 203 scrollHandler({ y }) {
192 this.scrollY = -y; 204 this.scrollY = -y;
193 205
1 <template> 1 <template>
2 <div class="wf-list" :style="{'height': listHeight + 'px'}"> 2 <div class="wf-list" :style="{'height': listHeight + 'px'}">
3 - <div  
4 - v-for="i in viewList"  
5 - :key="`${i._temporary ? '_' : ''}${i.articleId}`" 3 + <div v-for="i in viewList" :key="`${i._temporary ? '_' : ''}${i.articleId}`"
6 class="wf-item" 4 class="wf-item"
7 :class="{'wf-item-default': i._default, 'wf-item-temp': i._temporary}" 5 :class="{'wf-item-default': i._default, 'wf-item-temp': i._temporary}"
8 - :style="`width: ${100 / cols}%;transform: translate(${i.left}px, ${i.top}px)`"> 6 + :style="`width: ${100 / cols}%;transform: translate(${i.left}px, ${i.top}px)`"
  7 + @click="toArticle(i.articleId)">
9 <div class="wf-item-mid"> 8 <div class="wf-item-mid">
10 - <router-link :to="link(i)">  
11 <div class="layer-image" :style="{'height': i.coverHeight + 'px'}"> 9 <div class="layer-image" :style="{'height': i.coverHeight + 'px'}">
12 <ImageFormat v-if="!i._temporary" :mode="1" :src="i[srcKey]" :width="coverImageWidth" :height="i.coverHeight"></ImageFormat> 10 <ImageFormat v-if="!i._temporary" :mode="1" :src="i[srcKey]" :width="coverImageWidth" :height="i.coverHeight"></ImageFormat>
13 </div> 11 </div>
14 <div class="description"> 12 <div class="description">
15 <p>{{i.content}}</p> 13 <p>{{i.content}}</p>
16 </div> 14 </div>
17 - </router-link>  
18 15
19 <div class="attribution"> 16 <div class="attribution">
20 - <router-link :to="link(i)" class="auther"> 17 + <div class="auther">
21 <span class="avatar"> 18 <span class="avatar">
22 <WidgetAvatar v-if="!i._temporary" :src="i.authorHeadIco" :width="70" :height="70"></WidgetAvatar> 19 <WidgetAvatar v-if="!i._temporary" :src="i.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
23 </span> 20 </span>
24 <span class="name">{{i.authorName}}</span> 21 <span class="name">{{i.authorName}}</span>
25 - </router-link> 22 + </div>
26 23
27 <div class="fav"> 24 <div class="fav">
28 <WidgetFav :articleId="i.articleId" :num="i.praiseCount" :option="favOption"></WidgetFav> 25 <WidgetFav :articleId="i.articleId" :num="i.praiseCount" :option="favOption"></WidgetFav>
@@ -71,7 +68,7 @@ export default { @@ -71,7 +68,7 @@ export default {
71 type: Number, 68 type: Number,
72 default: 2 69 default: 2
73 }, 70 },
74 - linkTpl: String 71 + query: Object
75 }, 72 },
76 mounted() { 73 mounted() {
77 this.$on('calced', (nlist) => { 74 this.$on('calced', (nlist) => {
@@ -96,7 +93,7 @@ export default { @@ -96,7 +93,7 @@ export default {
96 watch: { 93 watch: {
97 pos() { 94 pos() {
98 this.timer && clearTimeout(this.timer); 95 this.timer && clearTimeout(this.timer);
99 - this.timer = setTimeout(this.resetViewList, 0); 96 + this.timer = setTimeout(this.resetViewList, 100);
100 }, 97 },
101 list(newList, oldList) { 98 list(newList, oldList) {
102 if (oldList.length > newList.length || 99 if (oldList.length > newList.length ||
@@ -283,8 +280,12 @@ export default { @@ -283,8 +280,12 @@ export default {
283 this.viewIndex = viewIndex; 280 this.viewIndex = viewIndex;
284 } 281 }
285 }, 282 },
286 - link(item) {  
287 - return (this.linkTpl || '').replace('{articleId}', item.articleId); 283 + toArticle(id) {
  284 + this.$router.push({
  285 + name: 'article',
  286 + params: {id},
  287 + query: this.query
  288 + });
288 } 289 }
289 } 290 }
290 }; 291 };
@@ -22,10 +22,13 @@ export default { @@ -22,10 +22,13 @@ export default {
22 let classNames = ['yoho-grass-prompt-wrap', ...this.classNames]; 22 let classNames = ['yoho-grass-prompt-wrap', ...this.classNames];
23 23
24 return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [ 24 return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [
25 - h(this.url ? 'router-link' : 'div', { 25 + h(this.url ? 'a' : 'div', {
26 class: classNames, 26 class: classNames,
  27 + attrs: {
  28 + href: this.url || '',
  29 + },
27 on: { 30 on: {
28 - click: () => { 31 + 'click.stop': () => {
29 this.onClick && this.onClick(); 32 this.onClick && this.onClick();
30 } 33 }
31 } 34 }
@@ -65,15 +68,16 @@ export default { @@ -65,15 +68,16 @@ export default {
65 } 68 }
66 69
67 Vue.prototype.$grassPrompt = function(data = {}, time) { 70 Vue.prototype.$grassPrompt = function(data = {}, time) {
68 - let {img, title, desc, type, className, onClick} = data; 71 + let {img, title, desc, url, type, className, onClick} = data;
69 72
70 if (!promptVM) { 73 if (!promptVM) {
71 creatPromptVM(this); 74 creatPromptVM(this);
72 } 75 }
73 76
74 promptVM.img = img || ''; 77 promptVM.img = img || '';
75 - promptVM.title = title;  
76 - promptVM.desc = desc; 78 + promptVM.title = title || '';
  79 + promptVM.desc = desc || '';
  80 + promptVM.url = url;
77 promptVM.type = type || 'bottom'; 81 promptVM.type = type || 'bottom';
78 82
79 if (className && !isArray(className)) { 83 if (className && !isArray(className)) {