comment empty && long detail

yyq
Commit 67a1258bc0cfc1b25068942e136fe5db37fc1bc8 1 parent e497342a
Showing 10 changed files with 133 additions and 33 deletions
apps/components/comments/comment-empty.vue
apps/components/comments/comment-list.vue
apps/components/comments/index.js
apps/pages/article/article-detail.vue
apps/pages/article/components/article/article-item2.vue
apps/pages/article/components/detail/article-long.vue
apps/pages/article/components/detail/article-note.vue
apps/pages/article/components/detail/comment-list.vue
apps/pages/article/index.js
apps/statics/image/article/comment-empty.png
--- a/apps/components/comments/comment-empty.vue 0 → 100644
View file @67a1258
+++ b/apps/components/comments/comment-empty.vue 0 → 100644
View file @67a1258
+<template>
+  <div class="comment-empty-wrap">
+    <div class="empty-content">
+      <div class="empty-img"></div>
+      <p class="empty-tip">暂无评论，快来评论吧！</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommentEmpty'
+};
+</script>
+
+<style lang="css" scoped>
+.comment-empty-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+}
+
+.empty-content {
+  margin-top: -10px;
+}
+
+.empty-img {
+  width: 250px;
+  height: 181px;
+  background-image: url('~statics/image/article/comment-empty.png');
+  background-size: 100%;
+  margin: 0 auto 20px;
+}
+
+.empty-tip {
+  font-size: 26px;
+  color: #b0b0b0;
+  font-weight: 300;
+}
+</style>
--- a/apps/components/comments/comment-list.vue
View file @67a1258
+++ b/apps/components/comments/comment-list.vue
View file @67a1258
@@ -6,7 +6,8 @@
           <Loading></Loading>
         </div>
         <Scroll v-else ref="scroll" :data="commentList" :scroll-events="['scroll', 'scroll-end']" :options="scrollOption" @scroll="onScrollHandle" @scroll-end="onScrollEndHandle" @pulling-up="onPullingUp">
-          <div ref="commentList" class="comment-list">
+          <CommentEmpty v-if="empty"></CommentEmpty>
+          <div v-else ref="commentList" class="comment-list">
             <div ref="commentListTop" class="comment-list-top">
               <div ref="commentPre" class="comment-pre-list">
                 <div
@@ -85,6 +86,7 @@ export default {
       commentList: [],
       commentPreList: [],
       firstLoading: true,
+      empty: false,
       scrollOption: {
         bounce: false,
         pullUpLoad: {
@@ -149,11 +151,14 @@ export default {
     },
     async fetchComments(pre) {
       const result = await this.fetchCommentsAsync(pre);
-      let dirty = true;
+      let dirty = false;
       if (result.code === 200) {
         const comments = get(result, 'data.commentInfos', []);
+        if (!get(result, 'data.total')) {
+          this.empty = true;
+        } else {
           if (comments.length) {
             this.$emit('on-page-change', {
               page: result.data.page,
@@ -184,8 +189,8 @@ export default {
                 this.commentList = this.commentList.concat(comments);
               }
             }
-        } else {
-          dirty = false;
+            dirty = true;
+          }
         }
         this.firstLoading = false;
--- a/apps/components/comments/index.js
View file @67a1258
+++ b/apps/components/comments/index.js
View file @67a1258
 import Comment from './comment';
 import CommentItem from './comment-item';
+import CommentEmpty from './comment-empty';
 import CommentPlaceholder from './comment-placeholder';
 export default [
   Comment,
-  CommentItem,
+  CommentEmpty,
   CommentPlaceholder
 ];
--- a/apps/pages/article/article-detail.vue
View file @67a1258
+++ b/apps/pages/article/article-detail.vue
View file @67a1258
@@ -2,8 +2,8 @@
   <Layout class="article-detail">
     <RecycleScrollReveal :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch" :manual-init="true">
       <template v-slot:eternalTop>
-        <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>
-        <ArticleDeatilNote v-else ref="detailNote" :data="articleInfo" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo" @on-show-more="onShowMore" @on-follow="onFollowAuthor"></ArticleDeatilNote>
+        <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>
+        <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>
       </template>
       <template class="article-item" #item="{ data }">
         <ArticleItem2
@@ -28,6 +28,7 @@
 <script>
 import {get} from 'lodash';
+import YAS from 'utils/yas-constants';
 import ArticleDeatilLong from './components/detail/article-long';
 import ArticleDeatilNote from './components/detail/article-note';
 import ArticleItem2 from './components/article/article-item2';
@@ -46,7 +47,7 @@ export default {
       article: {},
       listTitle: '',
       colWidthForTwo: 370,
-      posId: 0
+      posId: YAS.scene.newsDetail
     };
   },
   activated() {
--- a/apps/pages/article/components/article/article-item2.vue
View file @67a1258
+++ b/apps/pages/article/components/article/article-item2.vue
View file @67a1258
@@ -208,13 +208,14 @@ export default {
   .attribution {
     overflow: hidden;
-    height: 40px;
+    height: 48px;
     margin: 20px;
     display: flex;
     justify-content: space-between;
   }
-  .auther {
+  .auther,
+  .fav {
     display: flex;
     align-items: center;
   }
--- a/apps/pages/article/components/detail/article-long.vue
View file @67a1258
+++ b/apps/pages/article/components/detail/article-long.vue
View file @67a1258
@@ -69,7 +69,8 @@ export default {
     },
     listTitle: String,
     scrollTop: Number,
-    share: Boolean
+    share: Boolean,
+    posId: Number,
   },
   data() {
     return {
@@ -294,11 +295,34 @@ export default {
   color: #444;
   line-height: 52px;
   margin-bottom: 10px;
+  font-weight: 700;
 }
 .context-rich-text /deep/ {
+  font-size: 28px;
   line-height: 1.8!important;
+
+  * {
     font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial!important;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-weight: 700!important;
+  }
+
+  h1 {
+    font-size: 32px!important;
+  }
+
+  h2 {
+    font-size: 30px!important;
+  }
+
+  h3 {
+    font-size: 28px!important;
+  }
   img {
     max-width: 100%!important;
@@ -310,7 +334,22 @@ export default {
   b,
   strong {
-    font-weight: 600;
+    font-weight: 500;
+  }
+
+  blockquote {
+    border-left: 12px solid #b4b4b4;
+    background-color: #f7f7f7;
+    padding: 30px;
+  }
+
+  ol,
+  ul {
+    padding-inline-start: 38px;
+
+    li {
+      list-style: inherit;
+    }
   }
 }
--- a/apps/pages/article/components/detail/article-note.vue
View file @67a1258
+++ b/apps/pages/article/components/detail/article-note.vue
View file @67a1258
@@ -18,13 +18,14 @@
       <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
       <ArticleDetailIntro :data="introData"></ArticleDetailIntro>
-      <div v-if="data.articleId" class="topics-wrap">
       <ArticleItemTopics :data="topicsData" :share="share"></ArticleItemTopics>
+
+      <div class="publish-time">
+        <span>{{publishTime}}</span>
         <div class="more-wrap">
           <i class="iconfont icon-more1" @click="onMore"></i>
         </div>
       </div>
-      <p class="publish-time">{{publishTime}}</p>
       <ArticleDetailCommentList ref="commentList" v-if="data.articleId && !thumb" :article-id="data.articleId" :comment-count="articleState.commentCount"></ArticleDetailCommentList>
     </div>
@@ -41,7 +42,7 @@
             :dest-id="data.articleId"
             :add-type="0"
             :article-id="data.articleId"
-            :pos-id="0"
+            :pos-id="posId"
             :column-type="1001"
             :autoUpdate="false"
             @on-comment="onComment">
@@ -81,7 +82,7 @@ export default {
     listTitle: String,
     scrollTop: Number,
     share: Boolean,
-    scrollTo: Function
+    posId: Number,
   },
   data() {
     return {
@@ -119,6 +120,7 @@ export default {
         authorUid: this.data.authorUid,
         authorType: this.data.authorType,
         authorHeadIco: this.data.authorHeadIco,
+        authGroupId: this.data.authGroupId,
         hasAttention: this.articleState.hasAttention,
         isAuthor: this.data.isAuthor
       };
@@ -244,30 +246,23 @@ export default {
   align-items: center;
 }
-.topics-wrap {
+.publish-time {
+  font-size: 24px;
+  color: #b0b0b0;
+  padding: 20px 30px;
   display: flex;
-  margin-top: 40px;
-
-  > * {
-    margin-top: 0;
-  }
+  align-items: center;
+  justify-content: space-between;
   .more-wrap {
-    padding-right: 30px;
     display: flex;
     align-items: center;
-  }
+    color: #444;
     .iconfont {
       font-size: 44px;
     }
-}
-
-.publish-time {
-  display: block;
-  font-size: 24px;
-  color: #b0b0b0;
-  padding: 20px 30px;
+  }
 }
 .rec-article-title {
--- a/apps/pages/article/components/detail/comment-list.vue
View file @67a1258
+++ b/apps/pages/article/components/detail/comment-list.vue
View file @67a1258
 <template>
-  <div v-if="commentCount" class="comment-context">
+  <div class="comment-context">
+    <p class="comment-line"></p>
+    <template v-if="commentCount">
       <p class="comment-title">共{{commentCount}}条评论</p>
       <div class="comment-list">
         <CommentItem
@@ -21,6 +23,8 @@
         </p>
         <span v-else>展开{{page > 2 ? '更多' : moreCommentNum + '条'}}评论</span>
       </div>
+    </template>
+    <CommentEmpty v-else></CommentEmpty>
   </div>
 </template>
@@ -147,12 +151,16 @@ export default {
 </script>
 <style :lang="scss" scoped>
+.comment-line {
+  margin: 0 30px;
+  border-top: 1px solid #f0f0f0;
+}
+
 .comment-title {
   font-size: 28px;
   margin: 0 30px;
   color: #9b9b9b;
   line-height: 80px;
-  border-top: 1px solid #f0f0f0;
 }
 .comment-list {
--- a/apps/pages/article/index.js
View file @67a1258
+++ b/apps/pages/article/index.js
View file @67a1258
@@ -48,6 +48,15 @@ export default [{
     statusBarColor: 'white'
   }
 }, {
+  path: '/topic/:topicId',
+  alias: '/topic/:topicId',
+  name: 'topic.id',
+  component: () => import(/* webpackChunkName: "article" */ './topic'),
+  meta: {
+    keepAlive: true,
+    statusBarColor: 'white'
+  }
+}, {
   path: '/article/:articleId/comment',
   alias: '/article/:articleId/comment',
   name: 'article.comment',
--- a/apps/statics/image/article/comment-empty.png 0 → 100644
View file @67a1258
+++ b/apps/statics/image/article/comment-empty.png 0 → 100644
View file @67a1258