Merge branch 'feature/0530' into feature/qk

 <template>
-  <ImageFormat :lazy="lazy" class="img-avatar" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
+  <div class="avatar-wrap">
+    <ImageFormat class="img-avatar" :lazy="lazy" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
+    <span v-if="identityClass" class="identity-icon" :class="identityClass"></span>
+  </div>
 </template>
 
 <script>
@@ -21,7 +24,12 @@ export default {
     lazy: {
       type: Boolean,
       default: false
-    }
+    },
+    small: {
+      type: Boolean,
+      default: false
+    },
+    group: [Number, String]
   },
   data() {
     return {
@@ -32,6 +40,30 @@ export default {
   computed: {
     imageSrc() {
       return this.imgSrc || this.defaultSrc;
+    },
+    identityClass() {
+      let className = '';
+
+      switch (+this.group) {
+        case 1: // 普通马甲
+        case 2: // 编辑
+        case 4: // 社区大号
+        case 6: // 评论马甲
+          break;
+        case 3: // 官方号
+          className = 'identity-gf';
+          break;
+        case 5: // 品牌号
+          className = 'identity-pp';
+          break;
+        case 7: // 授权KOL
+          className = 'identity-king';
+          break;
+        default:
+          break;
+      }
+
+      return `${className}${this.small ? '-small' : ''}`;
     }
   },
   watch: {
@@ -47,9 +79,49 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
+.avatar-wrap {
+  display: inline-block;
+  position: relative;
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .img-avatar {
   border-radius: 50%;
   overflow: hidden;
 }
+
+.identity-icon {
+  width: 45%;
+  height: 45%;
+  position: absolute;
+  right: -6%;
+  bottom: -6%;
+  background-size: 100%;
+}
+
+.identity-gf {
+  background-image: url('~statics/image/userpage/GF-big-ic.png');
+}
+
+.identity-gf-small {
+  background-image: url('~statics/image/userpage/GF-small-ic.png');
+}
+
+.identity-king,
+.identity-king-small {
+  background-image: url('~statics/image/userpage/KING-ic.png');
+}
+
+.identity-pp {
+  background-image: url('~statics/image/userpage/PP-big-ic.png');
+}
+
+.identity-pp-small {
+  background-image: url('~statics/image/userpage/PP-small-ic.png');
+}
 </style>

 <template>
   <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>
+      <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :group="data.authGroupId" :width="70" :height="70"></WidgetAvatar>
       <div class="user-info">
         <p class="user-name">{{data.authorName}}</p>
         <p v-if="data.authorRank" class="user-rank">

@@ -52,6 +52,7 @@ export default {
         authorUid: this.data.authorUid,
         authorType: this.data.authorType,
         authorHeadIco: this.data.authorHeadIco,
+        authGroupId: this.data.authGroupId,
         hasAttention: this.data.hasAttention,
         isAuthor: this.data.isAuthor
       };

@@ -4,12 +4,13 @@
       <div class="article-item-main">
         <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
         <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage">
+          <div v-if="data.sort === 2" class="article-long-icon"></div>
           <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat>
         </div>
         <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div>
         <div class="attribution">
           <div class="auther" @click="toUserPage">
-            <WidgetAvatar class="avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
+            <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar>
             <span class="name">{{data.authorName}}</span>
           </div>
           <div class="fav">
@@ -175,6 +176,16 @@ export default {
     z-index: 1;
   }
 
+  .article-long-icon {
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    background-image: url('~statics/image/article/article-long-icon.png');
+    background-size: 100% 100%;
+  }
+
   .layer-image img {
     width: 100%;
     height: 100%;

@@ -185,6 +185,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
       };

@@ -5,6 +5,7 @@
       <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
       <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
         <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div>
+        <div v-if="data.sort === 2" class="article-long-icon"></div>
         <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
       </div>
       <div v-if="data.content" class="description" @click="onClick('article')">
@@ -13,9 +14,7 @@
 
       <div class="attribution">
         <div class="auther" @click="onClick('author')">
-          <span class="avatar">
-            <WidgetAvatar :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
-          </span>
+          <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar>
           <span class="name">{{data.authorName}}</span>
         </div>
 
@@ -134,6 +133,16 @@ export default {
         justify-content: center;
       }
 
+      .article-long-icon {
+        width: 36px;
+        height: 36px;
+        position: absolute;
+        top: 18px;
+        right: 18px;
+        background-image: url('~statics/image/article/article-long-icon.png');
+        background-size: 100% 100%;
+      }
+
       > img {
         width: 100%;
         height: 100%;
@@ -166,10 +175,8 @@ export default {
     .avatar {
       width: 40px;
       height: 40px;
-      border-radius: 50%;
       display: inline-block;
       vertical-align: middle;
-      overflow: hidden;
 
       > img {
         width: 100%;

@@ -8,7 +8,7 @@
         </div>
         <div class="h-more">
           <div class="flex">
-            <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>
+            <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar>
           </div>
           <div v-if="!isOwner" class="h-follow flex">
             <WidgetFollow class="widget-follow" :author-uid="authorInfo.authorUid" :author-type="authorInfo.authorType" :follow="isAttention" @on-follow="follow => onFollow(follow)" :pos-id="sceneId"></WidgetFollow>
@@ -30,9 +30,7 @@
       @scroll-end="onScrollEndHandle"
       @before-scroll-start="beforeScrollStartHandle">
       <div ref="authorProfile" class="author-profile">
-        <span class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}">
-          <WidgetAvatar :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>
-        </span>
+        <WidgetAvatar class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar>
         <div class="author-section">
           <ul class="author-fans">
             <li v-for="item in fansList" :key="item.key">
@@ -503,8 +501,6 @@ export default {
     .avatar-box {
       width: 150px;
       height: 150px;
-      overflow: hidden;
-      border-radius: 50%;
       opacity: 0;
       transition: opacity 300ms ease-in-out;
 

@@ -7,7 +7,7 @@
     @scroll-end="fetchList">
     <div class="user-list">
       <div v-for="(item, index) in list" :key="index" class="user-item">
-        <WidgetAvatar class="head-ico" :src="item.headIcon" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar>
+        <WidgetAvatar class="head-ico" :src="item.headIcon" :group="item.authGroupId" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar>
         <div class="user-info" @click="toUserPage(item)">
           <p class="name">{{item.nickName}}</p>
           <p v-if="item.articleCount || item.fansCount" class="extra">