fix(SPA): 打赏用户为认证用户缺少认证标志的问题

issue #512
slimkit · Dec 13, 2018 · a856fc7 · a856fc7
1 parent ab5af98
commit a856fc7
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 30 deletions.
diff --git a/resources/spa/src/components/Avatar.vue b/resources/spa/src/components/Avatar.vue
@@ -15,6 +15,7 @@
     <i
       v-if="icon"
       :style="icon"
+      :class="iconClass"
       class="m-avatar-icon"
     />
   </RouterLink>
@@ -37,6 +38,11 @@ export default {
     sex () {
       return ~~this.user.sex
     },
+    iconClass () {
+      if (this.anonymity) return false
+      const { verified = {} } = this.user
+      return verified.type
+    },
     icon () {
       // 如果是匿名用户 不显示
       if (this.anonymity) return false
@@ -48,15 +54,8 @@ export default {
       // 如果有设置图标 使用设置的图标
       if (verified.icon) return { 'background-image': `url("${verified.icon}")` }
       // 否则根据认证类型使用相应的默认图标
-      else if (verified.type === 'user') {
-        return {
-          'background-image': 'url(' + require('@/images/cert_user.png') + ')',
-        }
-      } else if (verified.type === 'org') {
-        return {
-          'background-image': 'url(' + require('@/images/cert_org.png') + ')',
-        }
-      } else return false
+      else if (verified.type) return {}
+      else return false
     },
     path () {
       return this.uid ? `/users/${this.uid}` : 'javascript:;'
@@ -84,3 +83,16 @@ export default {
   },
 }
 </script>
+
+<style lang="less" scoped>
+.m-avatar-box {
+  .m-avatar-icon {
+    &.user {
+      background-image: url('~@/images/cert_user.png');
+    }
+    &.org {
+      background-image: url('~@/images/cert_org.png');
+    }
+  }
+}
+</style>
diff --git a/resources/spa/src/components/common/ArticleLikeBadge.vue b/resources/spa/src/components/common/ArticleLikeBadge.vue
@@ -5,15 +5,15 @@
     to="likers"
     append
   >
-    <ul class="avatar-list">
-      <li
+    <div class="avatar-list">
+      <Avatar
         v-for="({user = {}, id}, index) in likers.slice(0, 5)"
         :key="id"
-        :style="{ zIndex: 5-index, backgroundImage: user.avatar && `url(${getAvatar(user)})`}"
-        :class="`m-avatar-box-${user.sex}`"
-        class="m-avatar-box tiny"
+        :user="user"
+        size="tiny"
+        :style="{ zIndex: 5-index}"
       />
-    </ul>
+    </div>
     <span class="total">{{ total | formatNum }}人点赞</span>
   </RouterLink>
 </template>
@@ -41,7 +41,20 @@ export default {
   align-items: center;
 
   .avatar-list {
+    position: relative;
     flex: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: block;
+      background: transparent;
+      z-index: 7;
+    }
   }
 
   .total {

diff --git a/resources/spa/src/components/common/ArticleRewardBadge.vue b/resources/spa/src/components/common/ArticleRewardBadge.vue
@@ -5,23 +5,23 @@
       共 <a href="javascript:;">{{ ~~amount }}</a> {{ currencyUnit }}
     </p>
     <RouterLink
-      tag="ul"
+      v-if="rewarders.length > 0"
+      tag="div"
       to="rewarders"
       append
       class="m-box m-aln-center m-art-rew-list"
     >
-      <li
-        v-for="{id, user} in rewarders"
-        :key="id"
-        :class="`m-avatar-box-${user.sex}`"
-        class="m-flex-grow0 m-flex-shrink0 m-art-rew m-avatar-box tiny"
-        :style="{backgroundImage: user.avatar && `url(${getAvatar(user.avatar)})`}"
-      />
-      <li v-if="rewarders.length > 0" class="m-box m-aln-center">
-        <svg class="m-style-svg m-svg-def" style="color: #bfbfbf;">
-          <use xlink:href="#icon-arrow-right" />
-        </svg>
-      </li>
+      <div class="avatar-list">
+        <Avatar
+          v-for="{id, user} in rewarders"
+          :key="id"
+          :user="user"
+          size="small"
+        />
+      </div>
+      <svg class="m-box m-aln-center m-style-svg m-svg-def" style="color: #bfbfbf;">
+        <use xlink:href="#icon-arrow-right" />
+      </svg>
     </RouterLink>
   </div>
 </template>
@@ -42,3 +42,23 @@ export default {
   },
 }
 </script>
+
+<style lang="less" scoped>
+.c-article-reward-badge {
+  .avatar-list {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: block;
+      background: transparent;
+      z-index: 7;
+    }
+  }
+}
+</style>
diff --git a/resources/spa/src/page/feed/FeedList.vue b/resources/spa/src/page/feed/FeedList.vue
@@ -88,7 +88,7 @@ export default {
   },
   computed: {
     feedType () {
-      return this.$route.query.type
+      return this.$route.query.type || 'hot'
     },
     feeds () {
       return this.$store.getters[`feed/${this.feedType}`]

diff --git a/resources/spa/src/page/rank/components/RankListItem.vue b/resources/spa/src/page/rank/components/RankListItem.vue
@@ -2,7 +2,7 @@
   <div class="rank-list-item">
     <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
 
-    <div class="rank-info" @click="to(`/users/${user.id}`)">
+    <div class="rank-info" @click="$router.push(`/users/${user.id}`)">
       <Avatar :user="user" class="rank-avatar" />
       <div class="rank-title m-text-cut">
         <h6>{{ user.name }}</h6>