fe / yoho-community-web · Commits

Go to a project

Authored by yyq
Commit 67a1258bc0cfc1b25068942e136fe5db37fc1bc8 1 parent e497342a

comment empty && long detail

Inline Side-by-side
Showing 10 changed files with 184 additions and 84 deletions
  1 +<template>
  2 + <div class="comment-empty-wrap">
  3 + <div class="empty-content">
  4 + <div class="empty-img"></div>
  5 + <p class="empty-tip">暂无评论，快来评论吧！</p>
  6 + </div>
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +export default {
  12 + name: 'CommentEmpty'
  13 +};
  14 +</script>
  15 +
  16 +<style lang="css" scoped>
  17 +.comment-empty-wrap {
  18 + display: flex;
  19 + align-items: center;
  20 + justify-content: center;
  21 + height: 400px;
  22 +}
  23 +
  24 +.empty-content {
  25 + margin-top: -10px;
  26 +}
  27 +
  28 +.empty-img {
  29 + width: 250px;
  30 + height: 181px;
  31 + background-image: url('~statics/image/article/comment-empty.png');
  32 + background-size: 100%;
  33 + margin: 0 auto 20px;
  34 +}
  35 +
  36 +.empty-tip {
  37 + font-size: 26px;
  38 + color: #b0b0b0;
  39 + font-weight: 300;
  40 +}
  41 +</style>
@@ -6,7 +6,8 @@ @@ -6,7 +6,8 @@
6 <Loading></Loading> 6 <Loading></Loading>
7 </div> 7 </div>
8 <Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp"> 8 <Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp">
9 - <div ref="commentList" class="comment-list"> 9 + <CommentEmpty v-if="empty"></CommentEmpty>
  10 + <div v-else ref="commentList" class="comment-list">
10 <div ref="commentListTop" class="comment-list-top"> 11 <div ref="commentListTop" class="comment-list-top">
11 <div ref="commentPre" class="comment-pre-list"> 12 <div ref="commentPre" class="comment-pre-list">
12 <div 13 <div
@@ -85,6 +86,7 @@ export default { @@ -85,6 +86,7 @@ export default {
85 commentList: [], 86 commentList: [],
86 commentPreList: [], 87 commentPreList: [],
87 firstLoading: true, 88 firstLoading: true,
  89 + empty: false,
88 scrollOption: { 90 scrollOption: {
89 bounce: false, 91 bounce: false,
90 pullUpLoad: { 92 pullUpLoad: {
@@ -149,43 +151,46 @@ export default { @@ -149,43 +151,46 @@ export default {
149 }, 151 },
150 async fetchComments(pre) { 152 async fetchComments(pre) {
151 const result = await this.fetchCommentsAsync(pre); 153 const result = await this.fetchCommentsAsync(pre);
152 - let dirty = true; 154 + let dirty = false;
153 155
154 if (result.code === 200) { 156 if (result.code === 200) {
155 const comments = get(result, 'data.commentInfos', []); 157 const comments = get(result, 'data.commentInfos', []);
156 158
157 - if (comments.length) {  
158 - this.$emit('on-page-change', {  
159 - page: result.data.page,  
160 - size: result.data.total  
161 - });  
162 -  
163 - if (pre) {  
164 - this.commentPreList.unshift(comments);  
165 - this.$nextTick(() => {  
166 - this.loadPreComment(); 159 + if (!get(result, 'data.total')) {
  160 + this.empty = true;
  161 + } else {
  162 + if (comments.length) {
  163 + this.$emit('on-page-change', {
  164 + page: result.data.page,
  165 + size: result.data.total
167 }); 166 });
168 - } else {  
169 - if (this.page <= 2) {  
170 - this.commentList = comments;  
171 -  
172 - // 将评论滚动到可视区域  
173 - if (this.commentId) {  
174 - setTimeout(() => {  
175 - let scrollHeight = this.$refs.scroll.$el.offsetHeight;  
176 - let dom = this.$refs.commentList.getElementsByClassName('comment-' + this.commentId);  
177 -  
178 - if (scrollHeight && dom.length && (dom[0].offsetHeight + dom[0].offsetTop > scrollHeight)) {  
179 - this.$refs.scroll.scrollTo(0, scrollHeight - this.$refs.commentList.offsetHeight);  
180 - }  
181 - }, 500);  
182 - } 167 +
  168 + if (pre) {
  169 + this.commentPreList.unshift(comments);
  170 + this.$nextTick(() => {
  171 + this.loadPreComment();
  172 + });
183 } else { 173 } else {
184 - this.commentList = this.commentList.concat(comments); 174 + if (this.page <= 2) {
  175 + this.commentList = comments;
  176 +
  177 + // 将评论滚动到可视区域
  178 + if (this.commentId) {
  179 + setTimeout(() => {
  180 + let scrollHeight = this.$refs.scroll.$el.offsetHeight;
  181 + let dom = this.$refs.commentList.getElementsByClassName('comment-' + this.commentId);
  182 +
  183 + if (scrollHeight && dom.length && (dom[0].offsetHeight + dom[0].offsetTop > scrollHeight)) {
  184 + this.$refs.scroll.scrollTo(0, scrollHeight - this.$refs.commentList.offsetHeight);
  185 + }
  186 + }, 500);
  187 + }
  188 + } else {
  189 + this.commentList = this.commentList.concat(comments);
  190 + }
185 } 191 }
  192 + dirty = true;
186 } 193 }
187 - } else {  
188 - dirty = false;  
189 } 194 }
190 195
191 this.firstLoading = false; 196 this.firstLoading = false;
1 import Comment from './comment'; 1 import Comment from './comment';
2 import CommentItem from './comment-item'; 2 import CommentItem from './comment-item';
  3 +import CommentEmpty from './comment-empty';
3 import CommentPlaceholder from './comment-placeholder'; 4 import CommentPlaceholder from './comment-placeholder';
4 5
5 export default [ 6 export default [
6 Comment, 7 Comment,
7 - CommentItem, 8 + CommentEmpty,
8 CommentPlaceholder 9 CommentPlaceholder
9 ]; 10 ];
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 <Layout class="article-detail"> 2 <Layout class="article-detail">
3 <RecycleScrollReveal :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch" :manual-init="true"> 3 <RecycleScrollReveal :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch" :manual-init="true">
4 <template v-slot:eternalTop> 4 <template v-slot:eternalTop>
5 - <ArticleDeatilLong v-if="articleInfo.sort == 2" ref="detailLong" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilLong>  
6 - <ArticleDeatilNote v-else ref="detailNote" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilNote> 5 + <ArticleDeatilLong v-if="articleInfo.sort == 2" ref="detailLong" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" :pos-id="posId" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilLong>
  6 + <ArticleDeatilNote v-else ref="detailNote" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" :pos-id="posId" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilNote>
7 </template> 7 </template>
8 <template class="article-item" #item="{ data }"> 8 <template class="article-item" #item="{ data }">
9 <ArticleItem2 9 <ArticleItem2
@@ -28,6 +28,7 @@ @@ -28,6 +28,7 @@
28 <script> 28 <script>
29 import {get} from 'lodash'; 29 import {get} from 'lodash';
30 30
  31 +import YAS from 'utils/yas-constants';
31 import ArticleDeatilLong from './components/detail/article-long'; 32 import ArticleDeatilLong from './components/detail/article-long';
32 import ArticleDeatilNote from './components/detail/article-note'; 33 import ArticleDeatilNote from './components/detail/article-note';
33 import ArticleItem2 from './components/article/article-item2'; 34 import ArticleItem2 from './components/article/article-item2';
@@ -46,7 +47,7 @@ export default { @@ -46,7 +47,7 @@ export default {
46 article: {}, 47 article: {},
47 listTitle: '', 48 listTitle: '',
48 colWidthForTwo: 370, 49 colWidthForTwo: 370,
49 - posId: 0 50 + posId: YAS.scene.newsDetail
50 }; 51 };
51 }, 52 },
52 activated() { 53 activated() {
@@ -208,13 +208,14 @@ export default { @@ -208,13 +208,14 @@ export default {
208 208
209 .attribution { 209 .attribution {
210 overflow: hidden; 210 overflow: hidden;
211 - height: 40px; 211 + height: 48px;
212 margin: 20px; 212 margin: 20px;
213 display: flex; 213 display: flex;
214 justify-content: space-between; 214 justify-content: space-between;
215 } 215 }
216 216
217 - .auther { 217 + .auther,
  218 + .fav {
218 display: flex; 219 display: flex;
219 align-items: center; 220 align-items: center;
220 } 221 }
@@ -69,7 +69,8 @@ export default { @@ -69,7 +69,8 @@ export default {
69 }, 69 },
70 listTitle: String, 70 listTitle: String,
71 scrollTop: Number, 71 scrollTop: Number,
72 - share: Boolean 72 + share: Boolean,
  73 + posId: Number,
73 }, 74 },
74 data() { 75 data() {
75 return { 76 return {
@@ -294,11 +295,34 @@ export default { @@ -294,11 +295,34 @@ export default {
294 color: #444; 295 color: #444;
295 line-height: 52px; 296 line-height: 52px;
296 margin-bottom: 10px; 297 margin-bottom: 10px;
  298 + font-weight: 700;
297 } 299 }
298 300
299 .context-rich-text /deep/ { 301 .context-rich-text /deep/ {
  302 + font-size: 28px;
300 line-height: 1.8!important; 303 line-height: 1.8!important;
301 - font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial!important; 304 +
  305 + * {
  306 + font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial!important;
  307 + }
  308 +
  309 + h1,
  310 + h2,
  311 + h3 {
  312 + font-weight: 700!important;
  313 + }
  314 +
  315 + h1 {
  316 + font-size: 32px!important;
  317 + }
  318 +
  319 + h2 {
  320 + font-size: 30px!important;
  321 + }
  322 +
  323 + h3 {
  324 + font-size: 28px!important;
  325 + }
302 326
303 img { 327 img {
304 max-width: 100%!important; 328 max-width: 100%!important;
@@ -310,7 +334,22 @@ export default { @@ -310,7 +334,22 @@ export default {
310 334
311 b, 335 b,
312 strong { 336 strong {
313 - font-weight: 600; 337 + font-weight: 500;
  338 + }
  339 +
  340 + blockquote {
  341 + border-left: 12px solid #b4b4b4;
  342 + background-color: #f7f7f7;
  343 + padding: 30px;
  344 + }
  345 +
  346 + ol,
  347 + ul {
  348 + padding-inline-start: 38px;
  349 +
  350 + li {
  351 + list-style: inherit;
  352 + }
314 } 353 }
315 } 354 }
316 355
@@ -18,13 +18,14 @@ @@ -18,13 +18,14 @@
18 <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup> 18 <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
19 19
20 <ArticleDetailIntro :data="introData"></ArticleDetailIntro> 20 <ArticleDetailIntro :data="introData"></ArticleDetailIntro>
21 - <div v-if="data.articleId" class="topics-wrap">  
22 - <ArticleItemTopics :data="topicsData" :share="share"></ArticleItemTopics> 21 + <ArticleItemTopics :data="topicsData" :share="share"></ArticleItemTopics>
  22 +
  23 + <div class="publish-time">
  24 + <span>{{publishTime}}</span>
23 <div class="more-wrap"> 25 <div class="more-wrap">
24 <i class="iconfont icon-more1" @click="onMore"></i> 26 <i class="iconfont icon-more1" @click="onMore"></i>
25 </div> 27 </div>
26 </div> 28 </div>
27 - <p class="publish-time">{{publishTime}}</p>  
28 <ArticleDetailCommentList ref="commentList" v-if="data.articleId && !thumb" :article-id="data.articleId" :comment-count="articleState.commentCount"></ArticleDetailCommentList> 29 <ArticleDetailCommentList ref="commentList" v-if="data.articleId && !thumb" :article-id="data.articleId" :comment-count="articleState.commentCount"></ArticleDetailCommentList>
29 </div> 30 </div>
30 31
@@ -41,7 +42,7 @@ @@ -41,7 +42,7 @@
41 :dest-id="data.articleId" 42 :dest-id="data.articleId"
42 :add-type="0" 43 :add-type="0"
43 :article-id="data.articleId" 44 :article-id="data.articleId"
44 - :pos-id="0" 45 + :pos-id="posId"
45 :column-type="1001" 46 :column-type="1001"
46 :autoUpdate="false" 47 :autoUpdate="false"
47 @on-comment="onComment"> 48 @on-comment="onComment">
@@ -81,7 +82,7 @@ export default { @@ -81,7 +82,7 @@ export default {
81 listTitle: String, 82 listTitle: String,
82 scrollTop: Number, 83 scrollTop: Number,
83 share: Boolean, 84 share: Boolean,
84 - scrollTo: Function 85 + posId: Number,
85 }, 86 },
86 data() { 87 data() {
87 return { 88 return {
@@ -119,6 +120,7 @@ export default { @@ -119,6 +120,7 @@ export default {
119 authorUid: this.data.authorUid, 120 authorUid: this.data.authorUid,
120 authorType: this.data.authorType, 121 authorType: this.data.authorType,
121 authorHeadIco: this.data.authorHeadIco, 122 authorHeadIco: this.data.authorHeadIco,
  123 + authGroupId: this.data.authGroupId,
122 hasAttention: this.articleState.hasAttention, 124 hasAttention: this.articleState.hasAttention,
123 isAuthor: this.data.isAuthor 125 isAuthor: this.data.isAuthor
124 }; 126 };
@@ -244,32 +246,25 @@ export default { @@ -244,32 +246,25 @@ export default {
244 align-items: center; 246 align-items: center;
245 } 247 }
246 248
247 -.topics-wrap { 249 +.publish-time {
  250 + font-size: 24px;
  251 + color: #b0b0b0;
  252 + padding: 20px 30px;
248 display: flex; 253 display: flex;
249 - margin-top: 40px;  
250 -  
251 - > * {  
252 - margin-top: 0;  
253 - } 254 + align-items: center;
  255 + justify-content: space-between;
254 256
255 .more-wrap { 257 .more-wrap {
256 - padding-right: 30px;  
257 display: flex; 258 display: flex;
258 align-items: center; 259 align-items: center;
259 - } 260 + color: #444;
260 261
261 - .iconfont {  
262 - font-size: 44px; 262 + .iconfont {
  263 + font-size: 44px;
  264 + }
263 } 265 }
264 } 266 }
265 267
266 -.publish-time {  
267 - display: block;  
268 - font-size: 24px;  
269 - color: #b0b0b0;  
270 - padding: 20px 30px;  
271 -}  
272 -  
273 .rec-article-title { 268 .rec-article-title {
274 padding: 14px 0 4px; 269 padding: 14px 0 4px;
275 border-top: 1px solid #f0f0f0; 270 border-top: 1px solid #f0f0f0;
1 <template> 1 <template>
2 - <div v-if="commentCount" class="comment-context">  
3 - <p class="comment-title">共{{commentCount}}条评论</p>  
4 - <div class="comment-list">  
5 - <CommentItem  
6 - v-for="comment in commentList"  
7 - :key="comment.parentComment.id"  
8 - :class="'comment-' + comment.parentComment.id"  
9 - :parent-comment="comment.parentComment"  
10 - :children-comments="comment.childrenComments"  
11 - :column-type="columnType"  
12 - :pos-id="0"  
13 - :article-id="articleId"  
14 - @on-reply="onReply">  
15 - </CommentItem>  
16 - </div>  
17 - <div v-show="showMore" class="more-comment hover-opacity" @click="onFetch">  
18 - <p class="loading-wrap" v-if="onFetching">  
19 - <Loading :size="20"></Loading>  
20 - &nbsp;&nbsp;加载中  
21 - </p>  
22 - <span v-else>展开{{page > 2 ? '更多' : moreCommentNum + '条'}}评论</span>  
23 - </div> 2 + <div class="comment-context">
  3 + <p class="comment-line"></p>
  4 + <template v-if="commentCount">
  5 + <p class="comment-title">共{{commentCount}}条评论</p>
  6 + <div class="comment-list">
  7 + <CommentItem
  8 + v-for="comment in commentList"
  9 + :key="comment.parentComment.id"
  10 + :class="'comment-' + comment.parentComment.id"
  11 + :parent-comment="comment.parentComment"
  12 + :children-comments="comment.childrenComments"
  13 + :column-type="columnType"
  14 + :pos-id="0"
  15 + :article-id="articleId"
  16 + @on-reply="onReply">
  17 + </CommentItem>
  18 + </div>
  19 + <div v-show="showMore" class="more-comment hover-opacity" @click="onFetch">
  20 + <p class="loading-wrap" v-if="onFetching">
  21 + <Loading :size="20"></Loading>
  22 + &nbsp;&nbsp;加载中
  23 + </p>
  24 + <span v-else>展开{{page > 2 ? '更多' : moreCommentNum + '条'}}评论</span>
  25 + </div>
  26 + </template>
  27 + <CommentEmpty v-else></CommentEmpty>
24 </div> 28 </div>
25 </template> 29 </template>
26 30
@@ -147,12 +151,16 @@ export default { @@ -147,12 +151,16 @@ export default {
147 </script> 151 </script>
148 152
149 <style :lang="scss" scoped> 153 <style :lang="scss" scoped>
  154 +.comment-line {
  155 + margin: 0 30px;
  156 + border-top: 1px solid #f0f0f0;
  157 +}
  158 +
150 .comment-title { 159 .comment-title {
151 font-size: 28px; 160 font-size: 28px;
152 margin: 0 30px; 161 margin: 0 30px;
153 color: #9b9b9b; 162 color: #9b9b9b;
154 line-height: 80px; 163 line-height: 80px;
155 - border-top: 1px solid #f0f0f0;  
156 } 164 }
157 165
158 .comment-list { 166 .comment-list {
@@ -48,6 +48,15 @@ export default [{ @@ -48,6 +48,15 @@ export default [{
48 statusBarColor: 'white' 48 statusBarColor: 'white'
49 } 49 }
50 }, { 50 }, {
  51 + path: '/topic/:topicId',
  52 + alias: '/topic/:topicId',
  53 + name: 'topic.id',
  54 + component: () => import(/* webpackChunkName: "article" */ './topic'),
  55 + meta: {
  56 + keepAlive: true,
  57 + statusBarColor: 'white'
  58 + }
  59 +}, {
51 path: '/article/:articleId/comment', 60 path: '/article/:articleId/comment',
52 alias: '/article/:articleId/comment', 61 alias: '/article/:articleId/comment',
53 name: 'article.comment', 62 name: 'article.comment',