Home.vue 根据 user 是否为 vip 添加 StampBadge 徽章

src/views/user/Home.vue

@@ -10,7 +10,7 @@
                   <el-image :src="user.avatarUrl" />
                 </el-avatar>
               </el-col>
-              <el-col :md="23">
+              <el-col :md="22">
                 <span>{{ user.screenName }}</span>
                 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
                 <el-button
@@ -30,6 +30,16 @@
                   <span>发消息</span>
                 </el-button>
               </el-col>
+              <el-col :md="1">
+                <StampBadge
+                  v-if="user.vip"
+                  style="position: relative; top: 0; right: 0"
+                  size="small"
+                  color="warning"
+                  content="小会员"
+                  :rotate="0"
+                />
+              </el-col>
             </el-row>
             <el-row>
               <span v-if="user.signature !== null" v-html="user.signature" />
@@ -130,6 +140,7 @@
 </template>
 
 <script>
+import StampBadge from '@/components/StampBadge'
 import VideoCard from '@/components/card/VideoCard'
 import AudioCard from '@/components/card/AudioCard'
 import ImageAlbumCard from '@/components/card/ImageAlbumCard'
@@ -144,7 +155,7 @@ import { userStatus } from '@/api/status'
 
 export default {
   name: 'Home',
-  components: { VideoCard, ImageAlbumCard, AudioCard, ArticleCard },
+  components: { StampBadge, VideoCard, ImageAlbumCard, AudioCard, ArticleCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小