fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit 138471e9087b1b102d8eaade3e1d1945de2ba008 1 parent 918d7ccd

commit

Inline Side-by-side
Showing 14 changed files with 104 additions and 95 deletions
1 <template> 1 <template>
2 <div class="comment-list"> 2 <div class="comment-list">
3 <div class="comment-content"> 3 <div class="comment-content">
4 - <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">  
5 - <CommentItem  
6 - v-for="(comment, index) in commentList"  
7 - :key="index"  
8 - :parent-comment="comment.parentComment"  
9 - :children-comments="comment.childrenComments"  
10 - :column-type="columnType"  
11 - @on-reply="onReply">  
12 - </CommentItem>  
13 - </Scroll> 4 + <LayoutRecycleList v-if="show" ref="comment" :offset="500" :on-fetch="onFetch">
  5 + <template class="article-item" v-slot:item="{ data }">
  6 + <CommentItem
  7 + :parent-comment="data.parentComment"
  8 + :children-comments="data.childrenComments"
  9 + :column-type="columnType"
  10 + @on-reply="onReply">
  11 + </CommentItem>
  12 + </template>
  13 + </LayoutRecycleList>
14 </div> 14 </div>
15 <div class="comment-footer"> 15 <div class="comment-footer">
16 <div class="comment-input" @click="onComment">参与评论</div> 16 <div class="comment-input" @click="onComment">参与评论</div>
@@ -37,49 +37,36 @@ export default { @@ -37,49 +37,36 @@ export default {
37 data() { 37 data() {
38 return { 38 return {
39 page: 1, 39 page: 1,
40 - commentList: [],  
41 - scrollOption: {  
42 - pullUpLoad: {  
43 - threshold: 200,  
44 - txt: {  
45 - more: '上拉加载',  
46 - noMore: '- 已经到底了 -'  
47 - }  
48 - }  
49 - } 40 + show: false
50 }; 41 };
51 }, 42 },
52 mounted() { 43 mounted() {
53 - this.fetchComments(); 44 + setTimeout(() => {
  45 + this.show = true;
  46 + }, 200);
54 }, 47 },
55 methods: { 48 methods: {
56 ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']), 49 ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
57 - async fetchComments(refresh) { 50 + async onFetch() {
58 const result = await this.fetchCommentList({ 51 const result = await this.fetchCommentList({
59 destId: this.destId, 52 destId: this.destId,
60 columnType: this.columnType, 53 columnType: this.columnType,
61 page: this.page, 54 page: this.page,
62 }); 55 });
63 - let dirty = true;  
64 56
65 if (result.code === 200) { 57 if (result.code === 200) {
66 - const appendComments = get(result, 'data.commentInfos', []); 58 + const comments = get(result, 'data.commentInfos', []);
67 59
68 - if (refresh) {  
69 - this.commentList = appendComments;  
70 - } else {  
71 - this.commentList = this.commentList.concat(appendComments);  
72 - }  
73 -  
74 - if (appendComments.length) { 60 + if (comments.length) {
75 this.page++; 61 this.page++;
  62 + this.$emit('on-page-change', {
  63 + page: this.page,
  64 + size: result.data.total
  65 + });
  66 + return Promise.resolve(comments);
76 } else { 67 } else {
77 - dirty = false; 68 + return Promise.resolve(false);
78 } 69 }
79 - this.$emit('on-page-change', {  
80 - page: this.page,  
81 - size: result.data.total  
82 - });  
83 } else { 70 } else {
84 this.$createToast && this.$createToast({ 71 this.$createToast && this.$createToast({
85 txt: result.message || '服务器开小差了', 72 txt: result.message || '服务器开小差了',
@@ -87,12 +74,6 @@ export default { @@ -87,12 +74,6 @@ export default {
87 time: 1000 74 time: 1000
88 }).show(); 75 }).show();
89 } 76 }
90 -  
91 - this.$refs.scroll.forceUpdate(dirty);  
92 - return result;  
93 - },  
94 - onPullingUp() {  
95 - this.fetchComments();  
96 }, 77 },
97 async onComment() { 78 async onComment() {
98 const result = await this.postComment({ 79 const result = await this.postComment({
@@ -103,7 +84,7 @@ export default { @@ -103,7 +84,7 @@ export default {
103 }); 84 });
104 85
105 if (result.code === 200) { 86 if (result.code === 200) {
106 - this.onRefresh(); 87 + this.init();
107 } else { 88 } else {
108 this.$createToast({ 89 this.$createToast({
109 txt: result.message || '服务器开小差了', 90 txt: result.message || '服务器开小差了',
@@ -112,10 +93,9 @@ export default { @@ -112,10 +93,9 @@ export default {
112 }).show(); 93 }).show();
113 } 94 }
114 }, 95 },
115 - async onRefresh() { 96 + init() {
116 this.page = 1; 97 this.page = 1;
117 - await this.fetchComments(true);  
118 - this.$refs.scroll.forceUpdate(true); 98 + this.$refs.comment.init();
119 }, 99 },
120 async onReply({commentId}) { 100 async onReply({commentId}) {
121 const result = await this.fetchReplayList({ 101 const result = await this.fetchReplayList({
  1 +<template>
  2 + <Layout class="article">
  3 + <LayoutHeader theme="white" slot='header'>
  4 + {{headerText}}
  5 + </LayoutHeader>
  6 + <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>
  7 + </Layout>
  8 +</template>
  9 +
  10 +<script>
  11 +import CommentList from './comment-list';
  12 +
  13 +export default {
  14 + name: 'ArticleCommentComponent',
  15 + props: {
  16 + destId: Number
  17 + },
  18 + data() {
  19 + return {
  20 + size: 0
  21 + };
  22 + },
  23 + computed: {
  24 + headerText() {
  25 + return this.size ? `${this.size}条评论` : '';
  26 + }
  27 + },
  28 + methods: {
  29 + onPageChange({size}) {
  30 + this.size = size;
  31 + }
  32 + },
  33 + components: {CommentList}
  34 +};
  35 +</script>
1 -import CommentList from './comment-list'; 1 +import Comment from './comment';
2 2
3 export default [ 3 export default [
4 - CommentList, 4 + Comment,
5 ]; 5 ];
@@ -53,7 +53,7 @@ export default { @@ -53,7 +53,7 @@ export default {
53 }, 53 },
54 methods: { 54 methods: {
55 onBack() { 55 onBack() {
56 - if (this.yoho.ssrLoad) { 56 + if (this.yoho.homePage) {
57 this.$yoho.finishPage({}); 57 this.$yoho.finishPage({});
58 } else { 58 } else {
59 this.$router.go(-1); 59 this.$router.go(-1);
@@ -3,6 +3,7 @@ import createReport from 'report-error'; @@ -3,6 +3,7 @@ import createReport from 'report-error';
3 3
4 import { 4 import {
5 SET_ENV, 5 SET_ENV,
  6 + ROUTE_CHANGE
6 } from 'store/yoho/types'; 7 } from 'store/yoho/types';
7 8
8 9
@@ -18,6 +19,9 @@ export default context => { @@ -18,6 +19,9 @@ export default context => {
18 router.onReady(() => { 19 router.onReady(() => {
19 const matched = router.getMatchedComponents(); 20 const matched = router.getMatchedComponents();
20 21
  22 +
  23 + store.commit(ROUTE_CHANGE, {to: router.currentRoute});
  24 +
21 if (matched.some(m => !m)) { 25 if (matched.some(m => !m)) {
22 reportError(new Error('导航组件为空')); 26 reportError(new Error('导航组件为空'));
23 router.push({name: 'error.500'}); 27 router.push({name: 'error.500'});
1 <template> 1 <template>
2 - <Layout class="article">  
3 - <LayoutHeader theme="white" slot='header'>  
4 - {{headerText}}  
5 - </LayoutHeader>  
6 - <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>  
7 - </Layout> 2 + <Comment :dest-id="destId"></Comment>
8 </template> 3 </template>
9 4
10 <script> 5 <script>
  6 +import Comment from 'components/comments/comment';
  7 +
11 export default { 8 export default {
12 name: 'ArticleComment', 9 name: 'ArticleComment',
13 data() { 10 data() {
@@ -18,19 +15,8 @@ export default { @@ -18,19 +15,8 @@ export default {
18 computed: { 15 computed: {
19 destId() { 16 destId() {
20 return parseInt(this.$route.params.articleId, 10); 17 return parseInt(this.$route.params.articleId, 10);
21 - },  
22 - headerText() {  
23 - return this.size ? `${this.size}条评论` : '';  
24 } 18 }
25 }, 19 },
26 - methods: {  
27 - onPageChange({size}) {  
28 - this.size = size;  
29 - }  
30 - } 20 + components: {Comment}
31 }; 21 };
32 </script> 22 </script>
33 -  
34 -<style>  
35 -  
36 -</style>  
@@ -31,12 +31,7 @@ export default { @@ -31,12 +31,7 @@ export default {
31 methods: { 31 methods: {
32 ...mapActions(['postComment']), 32 ...mapActions(['postComment']),
33 onGoComment() { 33 onGoComment() {
34 - this.$router.push({  
35 - name: 'article.comment',  
36 - params: {  
37 - articleId: this.data.articleId  
38 - }  
39 - }); 34 + this.$emit('on-comment');
40 }, 35 },
41 onComment() { 36 onComment() {
42 this.postComment({ 37 this.postComment({
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 <div class="opts"> 20 <div class="opts">
21 <WidgetFav :num="data.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetFav> 21 <WidgetFav :num="data.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetFav>
22 <WidgetLike :num="data.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetLike> 22 <WidgetLike :num="data.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetLike>
23 - <WidgetComment :num="data.commentCount"></WidgetComment> 23 + <WidgetComment :num="data.commentCount" @click.native="onComment"></WidgetComment>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
@@ -117,6 +117,9 @@ export default { @@ -117,6 +117,9 @@ export default {
117 }, 117 },
118 resizeScroll() { 118 resizeScroll() {
119 this.$emit('on-resize'); 119 this.$emit('on-resize');
  120 + },
  121 + onComment() {
  122 + this.$emit('on-comment');
120 } 123 }
121 } 124 }
122 }; 125 };
@@ -3,8 +3,8 @@ @@ -3,8 +3,8 @@
3 <ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader> 3 <ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
4 <ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide> 4 <ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide>
5 <ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup> 5 <ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup>
6 - <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand"></ArticleItemIntro>  
7 - <ArticleItemComment :data="commentData"></ArticleItemComment> 6 + <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand" @on-comment="onComment"></ArticleItemIntro>
  7 + <ArticleItemComment :data="commentData" @on-comment="onComment"></ArticleItemComment>
8 <div class="line"></div> 8 <div class="line"></div>
9 </div> 9 </div>
10 </template> 10 </template>
@@ -83,6 +83,9 @@ export default { @@ -83,6 +83,9 @@ export default {
83 }, 83 },
84 onExpand() { 84 onExpand() {
85 this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId}); 85 this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId});
  86 + },
  87 + onComment() {
  88 + this.$emit('on-comment', this.data);
86 } 89 }
87 }, 90 },
88 components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment} 91 components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}
@@ -18,13 +18,17 @@ @@ -18,13 +18,17 @@
18 @on-resize="onResize(data)" 18 @on-resize="onResize(data)"
19 @on-resizeing="onResizeing(data)" 19 @on-resizeing="onResizeing(data)"
20 @on-follow="follow => onFollow(data, follow)" 20 @on-follow="follow => onFollow(data, follow)"
21 - @on-expand="onExpand"></ArticleItem> 21 + @on-expand="onExpand"
  22 + @on-comment="onComment"></ArticleItem>
22 <div :id="`ph${data.index}`"></div> 23 <div :id="`ph${data.index}`"></div>
23 </template> 24 </template>
24 </LayoutRecycleList> 25 </LayoutRecycleList>
25 <slot name="thumb" v-else></slot> 26 <slot name="thumb" v-else></slot>
26 27
27 <ArticleActionSheet ref="actionSheet"></ArticleActionSheet> 28 <ArticleActionSheet ref="actionSheet"></ArticleActionSheet>
  29 + <YohoActionSheet v-if="showCommentAction" ref="commentAction" :full="true">
  30 + <Comment :destId="currentArticle.articleId"></Comment>
  31 + </YohoActionSheet>
28 </Layout> 32 </Layout>
29 </template> 33 </template>
30 34
@@ -46,6 +50,8 @@ export default { @@ -46,6 +50,8 @@ export default {
46 }, 50 },
47 data() { 51 data() {
48 return { 52 return {
  53 + articleId: 0,
  54 + showCommentAction: false,
49 shareData: {}, 55 shareData: {},
50 inx: 0, 56 inx: 0,
51 scrollTop: 0, 57 scrollTop: 0,
@@ -67,6 +73,12 @@ export default { @@ -67,6 +73,12 @@ export default {
67 } 73 }
68 }, 74 },
69 methods: { 75 methods: {
  76 + onComment({articleId}) {
  77 + console.log(articleId)
  78 + this.articleId = articleId;
  79 + this.showCommentAction = true;
  80 + this.$refs.commentAction.show();
  81 + },
70 onScroll({item, scrollTop}) { 82 onScroll({item, scrollTop}) {
71 this.scrollTop = scrollTop; 83 this.scrollTop = scrollTop;
72 if (scrollTop === 0) { 84 if (scrollTop === 0) {
@@ -10,8 +10,6 @@ @@ -10,8 +10,6 @@
10 @on-comment-click="onCommentClick" 10 @on-comment-click="onCommentClick"
11 @on-close="onClose"> 11 @on-close="onClose">
12 </ArticleFooter> 12 </ArticleFooter>
13 -  
14 - <CommentActionSheet ref="actionSheet"></CommentActionSheet>  
15 </div> 13 </div>
16 </template> 14 </template>
17 15
@@ -20,7 +18,6 @@ @@ -20,7 +18,6 @@
20 import ArticleBar from './article-bar'; 18 import ArticleBar from './article-bar';
21 import ArticleFooter from './article-footer'; 19 import ArticleFooter from './article-footer';
22 import ArticleBody from './article-body'; 20 import ArticleBody from './article-body';
23 -import CommentActionSheet from './comment-action-sheet';  
24 import { createNamespacedHelpers } from 'vuex'; 21 import { createNamespacedHelpers } from 'vuex';
25 22
26 const { mapActions, mapState } = createNamespacedHelpers('article'); 23 const { mapActions, mapState } = createNamespacedHelpers('article');
@@ -31,7 +28,6 @@ export default { @@ -31,7 +28,6 @@ export default {
31 ArticleBar, 28 ArticleBar,
32 ArticleBody, 29 ArticleBody,
33 ArticleFooter, 30 ArticleFooter,
34 - CommentActionSheet  
35 }, 31 },
36 data() { 32 data() {
37 return { 33 return {
@@ -43,8 +39,12 @@ export default { @@ -43,8 +39,12 @@ export default {
43 }, 39 },
44 methods: { 40 methods: {
45 onCommentClick() { 41 onCommentClick() {
46 - this.$refs.actionSheet.destId = this.grassId;  
47 - this.$refs.actionSheet.click(); 42 + this.$router.push({
  43 + name: 'article.comment',
  44 + params: {
  45 + articleId: this.grassId
  46 + }
  47 + });
48 }, 48 },
49 ...mapActions(['getDetail']), 49 ...mapActions(['getDetail']),
50 fetch(params) { 50 fetch(params) {
@@ -9,9 +9,6 @@ export default [{ @@ -9,9 +9,6 @@ export default [{
9 path: '/topic/:labelId', 9 path: '/topic/:labelId',
10 name: 'topic', 10 name: 'topic',
11 component: () => import(/* webpackChunkName: "article" */ './topic'), 11 component: () => import(/* webpackChunkName: "article" */ './topic'),
12 - meta: {  
13 - keepAlive: true  
14 - }  
15 }, { 12 }, {
16 path: '/article/:articleId/comment', 13 path: '/article/:articleId/comment',
17 name: 'article.comment', 14 name: 'article.comment',
@@ -26,7 +26,7 @@ export default function() { @@ -26,7 +26,7 @@ export default function() {
26 }, 26 },
27 historys: [], 27 historys: [],
28 direction: 'forword', 28 direction: 'forword',
29 - ssrLoad: true, // 是否是ssr直出的页面 29 + homePage: true
30 }, 30 },
31 mutations: { 31 mutations: {
32 [Types.SET_ENV](state, {context}) { 32 [Types.SET_ENV](state, {context}) {
@@ -39,14 +39,7 @@ export default function() { @@ -39,14 +39,7 @@ export default function() {
39 [Types.SET_TITLE](state, {title}) { 39 [Types.SET_TITLE](state, {title}) {
40 state.context.title = title; 40 state.context.title = title;
41 }, 41 },
42 - [Types.ROUTE_CHANGE](state, {to, from}) {  
43 - state.ssrLoad = false;  
44 - if (!state.historys.length) {  
45 - state.historys.push({  
46 - name: from.name,  
47 - path: from.fullPath  
48 - });  
49 - } 42 + [Types.ROUTE_CHANGE](state, {to}) {
50 const routeIndex = state.historys.findIndex(route => route.path === to.fullPath); 43 const routeIndex = state.historys.findIndex(route => route.path === to.fullPath);
51 44
52 if (routeIndex >= 0) { 45 if (routeIndex >= 0) {
@@ -59,6 +52,7 @@ export default function() { @@ -59,6 +52,7 @@ export default function() {
59 }); 52 });
60 state.direction = 'forword'; 53 state.direction = 'forword';
61 } 54 }
  55 + state.homePage = state.historys.length <= 1;
62 }, 56 },
63 [Types.SET_NEED_LOGIN](state, {needLogin}) { 57 [Types.SET_NEED_LOGIN](state, {needLogin}) {
64 state.context.needLogin = needLogin; 58 state.context.needLogin = needLogin;