article detail

yyq
Commit 413365f35a25104517d9f117b79736a39d14442a 1 parent a4ba8cd7
Showing 8 changed files with 134 additions and 141 deletions
apps/components/products/product-group-item.vue
apps/components/products/product-group.vue
apps/components/widgets/widget-follow.vue
apps/components/widgets/widget-topic.vue
apps/pages/article/components/article/article-item-comment.vue
apps/pages/article/components/article/article-item-header.vue
apps/pages/article/components/article/article-item-intro.vue
apps/pages/article/components/article/article-item-slide.vue
--- a/apps/components/products/product-group-item.vue
View file @413365f
+++ b/apps/components/products/product-group-item.vue
View file @413365f
@@ -7,7 +7,7 @@
       <div class="product-info">
         <p class="product-name">{{product.productName}}</p>
         <div class="price">
-          ￥{{product.salesPrice}}
+          <span>￥{{product.salesPrice}}</span>
           <div class="btn-right btn-buy hover-opacity">
             <span class="iconfont icon-cart"></span>购买
           </div>
@@ -18,9 +18,7 @@
 </template>
 <script>
-import {createNamespacedHelpers} from 'vuex';
 import YAS from 'utils/yas-constants';
-const {mapActions} = createNamespacedHelpers('product');
 export default {
   name: 'ProductGroupItem',
@@ -58,57 +56,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['postProductFav']),
-    async onFav() {
-      if (this.share) {
-        return this.$links.toDownloadApp();
-      }
-      if (this.posting) {
-        return;
-      }
-
-      this.posting = true;
-      const favorite = !this.favorite;
-
-      const result = await this.postProductFav({
-        productId: this.product.productId,
-        productSkn: this.product.productSkn,
-        favorite,
-        productType: this.product.productType
-      });
-
-      this.posting = false;
-
-      if (result.code === 200) {
-        if (favorite) {
-          this.prompt = this.$grassPrompt({
-            img: this.product.productImage,
-            title: '收藏成功',
-            desc: '可在 [我的-商品收藏] 页面查看',
-            onClick: () => {
-              this.$yoho.goPage('go.fav', {
-                favType: 0
-              });
-            }
-          }, 3000);
-        } else {
-          this.prompt && this.prompt.hide();
-          this.$createToast({
-            txt: '取消收藏成功',
-            type: 'success',
-            time: 1000
-          }).show();
-        }
-
-        this.favorite = favorite;
-      } else {
-        this.$createToast({
-          txt: result.message || '服务器开小差了',
-          type: 'warn',
-          time: 1000
-        }).show();
-      }
-    },
     onClick(e) {
       if (e.timeStamp - this._lastTime < 1200) {
         return;
@@ -150,15 +97,13 @@ export default {
 <style lang="scss" scoped>
 .product-item {
-  margin-top: 20px;
   margin-right: 20px;
   margin-left: 30px;
   height: 180px;
   width: 580px;
   background-color: #fff;
-  box-shadow: 0 5px 10px 0 rgba(107, 95, 95, 0.2);
+  border: 1px solid #f0f0f0;
   display: inline-block;
-  padding: 10px 20px;
   white-space: initial;
   &:last-child {
@@ -172,14 +117,15 @@ export default {
 .product-content {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 .product-image {
   width: 136px;
   height: 180px;
-  margin-top: -30px;
 }
 .product-info {
@@ -189,25 +135,31 @@ export default {
   .product-name {
     font-size: 24px;
     color: #9b9b9b;
-    letter-spacing: -0.25PX;
-    height: 104px;
-    display: flex;
-    align-content: center;
+    height: 68px;
+    padding-right: 10px;
+    margin-bottom: 30px;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
   }
   .price {
-    font-size: 32px;
-    color: #d0021b;
-    letter-spacing: -0.34PX;
+    font-size: 28px;
+    color: #222;
+    font-weight: 500;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 }
 .btn-right {
-  float: right;
-  margin-right: -40px;
   width: 120px;
   height: 50px;
-  padding: 0;
   font-size: 24px;
   background-size: contain;
   display: flex;
@@ -218,7 +170,7 @@ export default {
 }
 .btn-buy {
-  background-color: #ce0a24;
+  background-color: #222;
   .iconfont {
     font-size: 30px;
--- a/apps/components/products/product-group.vue
View file @413365f
+++ b/apps/components/products/product-group.vue
View file @413365f
@@ -54,9 +54,8 @@ export default {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
-  height: 276px;
-  padding-top: 40px;
-  padding-bottom: 40px;
+  height: 180px;
+  margin: 40px 0;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
 }
--- a/apps/components/widgets/widget-follow.vue
View file @413365f
+++ b/apps/components/widgets/widget-follow.vue
View file @413365f
 <template>
   <AuthComponent class="btn-follow hover-opacity" :class="followClass" @click="onFollow">
-    {{followText}}
+    <span>{{followText}}</span>
   </AuthComponent>
 </template>
@@ -91,22 +91,26 @@ export default {
 <style lang="scss" scoped>
 .btn-follow {
-  width: 120px;
+  min-width: 110px;
   height: 50px;
-  padding: 0;
-  font-size: 26px;
-  border-radius: 3PX;
-  background-color: #222;
-  color: #fff;
+  padding: 0 10px;
+  font-size: 24px;
+  color: #222;
+  border-radius: 25px;
+  border: solid 1px #222;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   &.follow {
-    border: solid 1px #4a4a4a;
-    background-color: #fff;
-    color: #000;
+    border-color: #b0b0b0;
+    color: #b0b0b0;
+  }
+
+  > span {
+    line-height: 1;
   }
 }
 </style>
--- a/apps/components/widgets/widget-topic.vue
View file @413365f
+++ b/apps/components/widgets/widget-topic.vue
View file @413365f
 <template>
   <div v-if="topic" class="topic-wrap" @click="onClick">
-    <div class="topic-icon">
-      <span class="iconfont icon-tag"></span>
-    </div>
+    <div class="topic-icon">#</div>
     <span class="topic-text">{{topic}}</span>
   </div>
 </template>
@@ -25,8 +23,8 @@ export default {
   .topic-wrap {
     display: inline-block;
     vertical-align: middle;
-    height: 44px;
-    line-height: 44px;
+    height: 48px;
+    line-height: 48px;
     background-color: #f0f0f0;
     border-radius: 22px;
     box-sizing: border-box;
@@ -37,13 +35,17 @@ export default {
     }
     .topic-icon {
-      width: 34px;
-      height: 34px;
-      line-height: 34px;
-      border-radius: 17px;
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      font-size: 28px;
+      border-radius: 19px;
       margin: 5px;
       text-align: center;
-      background-color: #d0d0d0;
+      color: #fff;
+      background-color: #222;
+      transform: scale(0.8, 0.8);
+
       .iconfont {
         font-size: 24px;
@@ -54,8 +56,10 @@ export default {
     }
     .topic-text {
-      font-size: 22px;
-      color: #9B9B9B;
+      font-size: 26px;
+      font-weight: 500;
+      color: #222;
+      margin-left: -4px;
       margin-right: 16px;
       max-width: 310px;
       overflow: hidden;
--- a/apps/pages/article/components/article/article-item-comment.vue
View file @413365f
+++ b/apps/pages/article/components/article/article-item-comment.vue
View file @413365f
 <template>
   <div class="article-item-comment">
+    <div v-if="data.comments && data.comments.length" class="comment-list">
       <CommentPlaceholder
         :share="share"
         tag="p"
@@ -15,7 +16,12 @@
         <span class="user-name">{{comment.userName}}：</span>
         <span class="comment-content">{{getCommentContent(comment.content)}}</span>
       </CommentPlaceholder>
+    </div>
+    <div v-if="!invisible" class="total-comment">
+      <div class="total hover-opacity" @click="onShowComment">查看{{data.commentCount}}条评论</div>
+    </div>
     <div class="comment">
+      <WidgetAvatar :lazy="true" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
       <CommentPlaceholder
         :share="share"
         class="comment-input hover-opacity"
@@ -27,9 +33,6 @@
         @on-comment="onComment">
         添加评论...
       </CommentPlaceholder>
-    </div>
-    <div class="total-comment">
-      <div class="total hover-opacity" :class="invisibleClass" @click="onShowComment">查看{{data.commentCount}}条评论</div>
       <div class="last-time">{{data.date}}</div>
     </div>
   </div>
@@ -55,11 +58,9 @@ export default {
     articleId: [Number, String]
   },
   computed: {
-    invisibleClass() {
-      return {
-        invisible: this.thumb || (this.data.commentCount <= 2)
-      };
-    },
+    invisible() {
+      return this.thumb || (this.data.commentCount <= 2);
+    }
   },
   methods: {
     ...mapMutations(['ASYNC_ARTICLE_COMMENT']),
@@ -91,12 +92,15 @@ export default {
 .article-item-comment {
   padding: 30px;
+  .comment-list {
+    margin-bottom: 26px;
+  }
+
   .comment-item {
     font-size: 24px;
     color: #4a4a4a;
     letter-spacing: 0.06PX;
-    line-height: 36px;
-    margin-bottom: 6px;
+    line-height: 38px;
     > * {
       display: inline-block;
@@ -113,33 +117,34 @@ export default {
   }
   .total-comment {
-    padding-top: 30px;
-    display: flex;
     font-size: 24px;
     color: #b0b0b0;
     letter-spacing: 0.06px;
-
-    .total {
-      width: 50%;
-    }
-
-    .last-time {
-      width: 50%;
-      text-align: right;
-    }
+    margin-bottom: 26px;
   }
   .comment {
-    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+
+    .widget-avatar {
+      width: 50px;
+      height: 50px;
+    }
     .comment-input {
-      padding: 0 20px;
-      background: #f0f0f0;
-      height: 60px;
-      line-height: 60px;
+      flex-grow: 1;
+      padding-left: 12px;
+      height: 50px;
+      line-height: 50px;
       color: #b0b0b0;
       font-size: 24px;
     }
+
+    .last-time {
+      color: #b0b0b0;
+    }
   }
 }
 </style>
--- a/apps/pages/article/components/article/article-item-header.vue
View file @413365f
+++ b/apps/pages/article/components/article/article-item-header.vue
View file @413365f
@@ -2,7 +2,12 @@
   <div class="article-item-header">
     <div class="avatar" @click="toUserPage">
       <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
-      <span class="user-name">{{data.authorName}}</span>
+      <div class="user-info">
+        <p class="user-name">{{data.authorName}}</p>
+        <p v-if="data.authorRank" class="user-rank">
+          <span class="rank-name">{{data.authorRank}}</span>
+        </p>
+      </div>
     </div>
     <div class="opts">
       <WidgetFollow :class="invisibleClass" :share="share" :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention === 'Y'" @on-follow="onFollow" :pos-id="posId"></WidgetFollow>
@@ -79,30 +84,50 @@ export default {
 <style lang="scss" scoped>
 .article-item-header {
   display: flex;
+  justify-content: center;
+  height: 110px;
+  overflow: hidden;
+  background-color: #fff;
 }
 .avatar {
   display: flex;
   align-items: center;
-  padding: 16px 30px;
+  padding-left: 30px;
   width: 400px;
-  height: 100px;
   overflow: hidden;
-  background-color: #fff;
-  .user-name {
-    font-size: 24px;
-    line-height: 1.2;
-    margin-left: 20px;
+  .widget-avatar {
+    width: 70px;
+    height: 70px;
+    display: block;
+  }
+
+  .user-info {
     max-width: 250px;
+    margin-left: 20px;
+
+    > * {
+      line-height: 1.5;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+  }
-  .widget-avatar {
-    width: 70px;
-    height: 70px;
+  .user-name {
+    font-size: 24px;
+  }
+
+  .user-rank {
+    margin-top: 8px;
+  }
+
+  .rank-name {
+    font-size: 20px;
+    transform: scale(0.9, 0.9);
+    color: #4a4a4a;
+    display: inline-block;
   }
 }
--- a/apps/pages/article/components/article/article-item-intro.vue
View file @413365f
+++ b/apps/pages/article/components/article/article-item-intro.vue
View file @413365f
@@ -3,7 +3,7 @@
     <div ref="intro" v-if="intro" class="intro" :class="introClass" :style="introStyle" @click="onExpanding">
       <p class="pre-wrap">{{intro}}</p>
       <div ref="introPool" class="intro-pool pre-wrap" v-if="!data.introHeight && isEllipsis">{{trimIntro}}</div>
-      <span ref="expand" class="expand" v-if="showExpandTxt">…展开</span>
+      <span ref="expand" class="expand" v-if="showExpandTxt">…<b>继续阅读</b></span>
       <div class="collapse" v-if="showCollapseTxt">收起</div>
     </div>
     <div class="topics">
@@ -246,7 +246,7 @@ export default {
     letter-spacing: 0.06PX;
     overflow: hidden;
     position: relative;
-    line-height: 40px;
+    line-height: 48px;
     box-sizing: content-box;
     transition: height 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -293,7 +293,6 @@ export default {
     font-size: 28px;
     color: #000;
     line-height: 20px;
-    font-weight: bold;
     &.collapse {
       position: absolute;
@@ -301,6 +300,10 @@ export default {
       bottom: 0;
       height: 28px;
     }
+
+    > b {
+      font-weight: 500;
+    }
   }
 }
--- a/apps/pages/article/components/article/article-item-slide.vue
View file @413365f
+++ b/apps/pages/article/components/article/article-item-slide.vue
View file @413365f
@@ -15,7 +15,7 @@
         </template>
       </Slide>
       <div class="pages" v-if="data.blockList.length > 1">
-        {{slideIndex}}<span>/</span>{{data.blockList.length}}
+        {{slideIndex}}/{{data.blockList.length}}
       </div>
     </div>
     <div v-show="onAnimation" class="praise-lottie">
@@ -199,16 +199,17 @@ export default {
 .pages {
   position: absolute;
   z-index: 1;
-  top: 0;
-  right: 0;
-  width: 88px;
-  height: 54px;
+  left: 30px;
+  bottom: 30px;
+  width: 80px;
+  height: 48px;
   background: rgba($color: #000, $alpha: 0.5);
-  border-radius: 0 0 0 30px;
-  padding-left: 6px;
+  border-radius: 24px;
+  padding-left: 2px;
   color: #fff;
   font-size: 24px;
   box-sizing: border-box;
+  letter-spacing: 4px;
   display: flex;
   line-height: 24px;
   justify-content: center;