Authored by 陈峰

Merge branch 'feature/0530' into feature/qk

1 <template> 1 <template>
2 - <ImageFormat :lazy="lazy" class="img-avatar" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat> 2 + <div class="avatar-wrap">
  3 + <ImageFormat class="img-avatar" :lazy="lazy" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
  4 + <span v-if="identityClass" class="identity-icon" :class="identityClass"></span>
  5 + </div>
3 </template> 6 </template>
4 7
5 <script> 8 <script>
@@ -21,7 +24,12 @@ export default { @@ -21,7 +24,12 @@ export default {
21 lazy: { 24 lazy: {
22 type: Boolean, 25 type: Boolean,
23 default: false 26 default: false
24 - } 27 + },
  28 + small: {
  29 + type: Boolean,
  30 + default: false
  31 + },
  32 + group: [Number, String]
25 }, 33 },
26 data() { 34 data() {
27 return { 35 return {
@@ -32,6 +40,30 @@ export default { @@ -32,6 +40,30 @@ export default {
32 computed: { 40 computed: {
33 imageSrc() { 41 imageSrc() {
34 return this.imgSrc || this.defaultSrc; 42 return this.imgSrc || this.defaultSrc;
  43 + },
  44 + identityClass() {
  45 + let className = '';
  46 +
  47 + switch (+this.group) {
  48 + case 1: // 普通马甲
  49 + case 2: // 编辑
  50 + case 4: // 社区大号
  51 + case 6: // 评论马甲
  52 + break;
  53 + case 3: // 官方号
  54 + className = 'identity-gf';
  55 + break;
  56 + case 5: // 品牌号
  57 + className = 'identity-pp';
  58 + break;
  59 + case 7: // 授权KOL
  60 + className = 'identity-king';
  61 + break;
  62 + default:
  63 + break;
  64 + }
  65 +
  66 + return `${className}${this.small ? '-small' : ''}`;
35 } 67 }
36 }, 68 },
37 watch: { 69 watch: {
@@ -47,9 +79,49 @@ export default { @@ -47,9 +79,49 @@ export default {
47 }; 79 };
48 </script> 80 </script>
49 81
50 -<style lang="scss" scoped> 82 +<style lang="css" scoped>
  83 +.avatar-wrap {
  84 + display: inline-block;
  85 + position: relative;
  86 +
  87 + > img {
  88 + width: 100%;
  89 + height: 100%;
  90 + }
  91 +}
  92 +
51 .img-avatar { 93 .img-avatar {
52 border-radius: 50%; 94 border-radius: 50%;
53 overflow: hidden; 95 overflow: hidden;
54 } 96 }
  97 +
  98 +.identity-icon {
  99 + width: 45%;
  100 + height: 45%;
  101 + position: absolute;
  102 + right: -6%;
  103 + bottom: -6%;
  104 + background-size: 100%;
  105 +}
  106 +
  107 +.identity-gf {
  108 + background-image: url('~statics/image/userpage/GF-big-ic.png');
  109 +}
  110 +
  111 +.identity-gf-small {
  112 + background-image: url('~statics/image/userpage/GF-small-ic.png');
  113 +}
  114 +
  115 +.identity-king,
  116 +.identity-king-small {
  117 + background-image: url('~statics/image/userpage/KING-ic.png');
  118 +}
  119 +
  120 +.identity-pp {
  121 + background-image: url('~statics/image/userpage/PP-big-ic.png');
  122 +}
  123 +
  124 +.identity-pp-small {
  125 + background-image: url('~statics/image/userpage/PP-small-ic.png');
  126 +}
55 </style> 127 </style>
1 <template> 1 <template>
2 <div class="article-item-header"> 2 <div class="article-item-header">
3 <div class="avatar" @click="toUserPage"> 3 <div class="avatar" @click="toUserPage">
4 - <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar> 4 + <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :group="data.authGroupId" :width="70" :height="70"></WidgetAvatar>
5 <div class="user-info"> 5 <div class="user-info">
6 <p class="user-name">{{data.authorName}}</p> 6 <p class="user-name">{{data.authorName}}</p>
7 <p v-if="data.authorRank" class="user-rank"> 7 <p v-if="data.authorRank" class="user-rank">
@@ -52,6 +52,7 @@ export default { @@ -52,6 +52,7 @@ export default {
52 authorUid: this.data.authorUid, 52 authorUid: this.data.authorUid,
53 authorType: this.data.authorType, 53 authorType: this.data.authorType,
54 authorHeadIco: this.data.authorHeadIco, 54 authorHeadIco: this.data.authorHeadIco,
  55 + authGroupId: this.data.authGroupId,
55 hasAttention: this.data.hasAttention, 56 hasAttention: this.data.hasAttention,
56 isAuthor: this.data.isAuthor 57 isAuthor: this.data.isAuthor
57 }; 58 };
@@ -4,12 +4,13 @@ @@ -4,12 +4,13 @@
4 <div class="article-item-main"> 4 <div class="article-item-main">
5 <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> 5 <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
6 <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage"> 6 <div class="layer-image" :style="`height: ${Math.floor(width * coverImage.scale)}px`" @click="toArticlePage">
  7 + <div v-if="data.sort === 2" class="article-long-icon"></div>
7 <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat> 8 <ImageFormat :mode="1" :src="coverImage.contentData" :width="coverImage.width" :height="coverImage.height"></ImageFormat>
8 </div> 9 </div>
9 <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div> 10 <div v-if="intro" class="description" @click="toArticlePage">{{intro}}</div>
10 <div class="attribution"> 11 <div class="attribution">
11 <div class="auther" @click="toUserPage"> 12 <div class="auther" @click="toUserPage">
12 - <WidgetAvatar class="avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar> 13 + <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar>
13 <span class="name">{{data.authorName}}</span> 14 <span class="name">{{data.authorName}}</span>
14 </div> 15 </div>
15 <div class="fav"> 16 <div class="fav">
@@ -175,6 +176,16 @@ export default { @@ -175,6 +176,16 @@ export default {
175 z-index: 1; 176 z-index: 1;
176 } 177 }
177 178
  179 + .article-long-icon {
  180 + width: 36px;
  181 + height: 36px;
  182 + position: absolute;
  183 + top: 18px;
  184 + right: 18px;
  185 + background-image: url('~statics/image/article/article-long-icon.png');
  186 + background-size: 100% 100%;
  187 + }
  188 +
178 .layer-image img { 189 .layer-image img {
179 width: 100%; 190 width: 100%;
180 height: 100%; 191 height: 100%;
@@ -185,6 +185,7 @@ export default { @@ -185,6 +185,7 @@ export default {
185 authorUid: this.data.authorUid, 185 authorUid: this.data.authorUid,
186 authorType: this.data.authorType, 186 authorType: this.data.authorType,
187 authorHeadIco: this.data.authorHeadIco, 187 authorHeadIco: this.data.authorHeadIco,
  188 + authGroupId: this.data.authGroupId,
188 hasAttention: this.articleState.hasAttention, 189 hasAttention: this.articleState.hasAttention,
189 isAuthor: this.data.isAuthor 190 isAuthor: this.data.isAuthor
190 }; 191 };
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a> 5 <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
6 <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`"> 6 <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
7 <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div> 7 <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div>
  8 + <div v-if="data.sort === 2" class="article-long-icon"></div>
8 <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat> 9 <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
9 </div> 10 </div>
10 <div v-if="data.content" class="description" @click="onClick('article')"> 11 <div v-if="data.content" class="description" @click="onClick('article')">
@@ -13,9 +14,7 @@ @@ -13,9 +14,7 @@
13 14
14 <div class="attribution"> 15 <div class="attribution">
15 <div class="auther" @click="onClick('author')"> 16 <div class="auther" @click="onClick('author')">
16 - <span class="avatar">  
17 - <WidgetAvatar :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>  
18 - </span> 17 + <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar>
19 <span class="name">{{data.authorName}}</span> 18 <span class="name">{{data.authorName}}</span>
20 </div> 19 </div>
21 20
@@ -134,6 +133,16 @@ export default { @@ -134,6 +133,16 @@ export default {
134 justify-content: center; 133 justify-content: center;
135 } 134 }
136 135
  136 + .article-long-icon {
  137 + width: 36px;
  138 + height: 36px;
  139 + position: absolute;
  140 + top: 18px;
  141 + right: 18px;
  142 + background-image: url('~statics/image/article/article-long-icon.png');
  143 + background-size: 100% 100%;
  144 + }
  145 +
137 > img { 146 > img {
138 width: 100%; 147 width: 100%;
139 height: 100%; 148 height: 100%;
@@ -166,10 +175,8 @@ export default { @@ -166,10 +175,8 @@ export default {
166 .avatar { 175 .avatar {
167 width: 40px; 176 width: 40px;
168 height: 40px; 177 height: 40px;
169 - border-radius: 50%;  
170 display: inline-block; 178 display: inline-block;
171 vertical-align: middle; 179 vertical-align: middle;
172 - overflow: hidden;  
173 180
174 > img { 181 > img {
175 width: 100%; 182 width: 100%;
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </div> 8 </div>
9 <div class="h-more"> 9 <div class="h-more">
10 <div class="flex"> 10 <div class="flex">
11 - <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar> 11 + <WidgetAvatar class="h-headico" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar>
12 </div> 12 </div>
13 <div v-if="!isOwner" class="h-follow flex"> 13 <div v-if="!isOwner" class="h-follow flex">
14 <WidgetFollow class="widget-follow" :author-uid="authorInfo.authorUid" :author-type="authorInfo.authorType" :follow="isAttention" @on-follow="follow => onFollow(follow)" :pos-id="sceneId"></WidgetFollow> 14 <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 @@ @@ -30,9 +30,7 @@
30 @scroll-end="onScrollEndHandle" 30 @scroll-end="onScrollEndHandle"
31 @before-scroll-start="beforeScrollStartHandle"> 31 @before-scroll-start="beforeScrollStartHandle">
32 <div ref="authorProfile" class="author-profile"> 32 <div ref="authorProfile" class="author-profile">
33 - <span class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}">  
34 - <WidgetAvatar :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>  
35 - </span> 33 + <WidgetAvatar class="avatar-box" :class="{'avatar-opacity': authorBaseData.showAvatar}" :src="authorBaseData.headIco" :group="authorBaseData.authGroupId" :width="100" :height="100"></WidgetAvatar>
36 <div class="author-section"> 34 <div class="author-section">
37 <ul class="author-fans"> 35 <ul class="author-fans">
38 <li v-for="item in fansList" :key="item.key"> 36 <li v-for="item in fansList" :key="item.key">
@@ -503,8 +501,6 @@ export default { @@ -503,8 +501,6 @@ export default {
503 .avatar-box { 501 .avatar-box {
504 width: 150px; 502 width: 150px;
505 height: 150px; 503 height: 150px;
506 - overflow: hidden;  
507 - border-radius: 50%;  
508 opacity: 0; 504 opacity: 0;
509 transition: opacity 300ms ease-in-out; 505 transition: opacity 300ms ease-in-out;
510 506
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 @scroll-end="fetchList"> 7 @scroll-end="fetchList">
8 <div class="user-list"> 8 <div class="user-list">
9 <div v-for="(item, index) in list" :key="index" class="user-item"> 9 <div v-for="(item, index) in list" :key="index" class="user-item">
10 - <WidgetAvatar class="head-ico" :src="item.headIcon" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar> 10 + <WidgetAvatar class="head-ico" :src="item.headIcon" :group="item.authGroupId" :width="100" :height="100" @click.native="toUserPage(item)"></WidgetAvatar>
11 <div class="user-info" @click="toUserPage(item)"> 11 <div class="user-info" @click="toUserPage(item)">
12 <p class="name">{{item.nickName}}</p> 12 <p class="name">{{item.nickName}}</p>
13 <p v-if="item.articleCount || item.fansCount" class="extra"> 13 <p v-if="item.articleCount || item.fansCount" class="extra">