添加一个 StampBadge.vue 徽章

src/components/StampBadge.vue

@@ -0,0 +1,257 @@
+<template>
+  <div
+    class="first-ring"
+    v-bind="getBindValue"
+    :class="getStampBadgeClass"
+    :style="{ transform: `rotate(${rotate}deg)` }"
+  >
+    <div class="second-ring" :class="getStampBadgeClass">
+      <div class="third-ring" :class="getStampBadgeClass">
+        <div class="forth-ring" :class="getStampBadgeClass">
+          <div class="content-rectangle ellipsis" :class="getStampBadgeClass">
+            <span class="">{{ content }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StampBadge',
+  // inheritAttrs: false,
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (v) =>
+        ['primary', 'error', 'warning', 'success', 'info'].includes(v)
+    },
+    /**
+     * stamp badge size.
+     * @default: middle
+     */
+    size: {
+      type: String,
+      default: 'middle',
+      validator: (v) => ['large', 'middle', 'small'].includes(v)
+    },
+    /**
+     * stamp badge rotate deg.
+     * @default: 0
+     */
+    rotate: { type: Number, default: 0 },
+    content: { type: String, default: 'Unknown' }
+  },
+  computed: {
+    getStampBadgeClass() {
+      const { color, size } = this.$props
+      return [
+        {
+          [`stamp-badge-${color}`]: !!color,
+          [`stamp-badge-${size}`]: !!size
+        }
+      ]
+    },
+    getBindValue() {
+      return { ...this.$attrs, ...this.$props }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.first-ring {
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.second-ring {
+  background: #fff;
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.third-ring {
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.forth-ring {
+  background: #fff;
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.content-rectangle {
+  background: #fff;
+  font-weight: bold;
+  text-align: center;
+  position: absolute;
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// primary
+.stamp-badge-primary.first-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.third-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.content-rectangle {
+  border: 1px solid #1890ff;
+  color: #1890ff;
+}
+
+// success
+.stamp-badge-success.first-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.third-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.content-rectangle {
+  border: 1px solid #52c41a;
+  color: #52c41a;
+}
+
+// error
+.stamp-badge-error.first-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.third-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.content-rectangle {
+  border: 1px solid #ff4d4f;
+  color: #ff4d4f;
+}
+
+// warning
+.stamp-badge-warning.first-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.third-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.content-rectangle {
+  border: 1px solid #faad14;
+  color: #faad14;
+}
+
+// info
+.stamp-badge-info.first-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.third-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.content-rectangle {
+  border: 1px solid #ccc;
+  color: #ccc;
+}
+
+// large
+.stamp-badge-large.first-ring {
+  width: 84px;
+  height: 84px;
+}
+
+.stamp-badge-large.second-ring {
+  width: 80px;
+  height: 80px;
+}
+
+.stamp-badge-large.third-ring {
+  width: 74px;
+  height: 74px;
+}
+
+.stamp-badge-large.forth-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-large.content-rectangle {
+  width: 90px;
+  font-size: 1.2rem;
+}
+
+// middle
+.stamp-badge-middle.first-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-middle.second-ring {
+  width: 60px;
+  height: 60px;
+}
+
+.stamp-badge-middle.third-ring {
+  width: 56px;
+  height: 56px;
+}
+
+.stamp-badge-middle.forth-ring {
+  width: 48px;
+  height: 48px;
+}
+
+.stamp-badge-middle.content-rectangle {
+  width: 70px;
+  font-size: 1rem;
+}
+
+// small
+.stamp-badge-small.first-ring {
+  width: 54px;
+  height: 54px;
+}
+
+.stamp-badge-small.second-ring {
+  width: 50px;
+  height: 50px;
+}
+
+.stamp-badge-small.third-ring {
+  width: 46px;
+  height: 46px;
+}
+
+.stamp-badge-small.forth-ring {
+  width: 38px;
+  height: 38px;
+}
+
+.stamp-badge-small.content-rectangle {
+  width: 60px;
+  font-size: 0.8rem;
+}
+</style>

src/views/my/MyVip.vue

@@ -7,6 +7,13 @@
         </div>
         <div class="text item">
           <el-row>
+            <StampBadge
+              style="position: absolute; top: 0; right: 0"
+              size="middle"
+              color="success"
+              content="已支付"
+              :rotate="45"
+            />
             <el-button
               size="medium"
               type="success"
@@ -16,15 +23,26 @@
         </div>
       </el-card>
     </el-col>
+    <el-col>
+      <div style="width: 500px; height: 100px; position: relative">
+        <StampBadge
+          size="small"
+          color="warning"
+          content="大会员"
+          :rotate="0"
+        />
+      </div>
+    </el-col>
   </el-row>
 </template>
 
 <script>
-
+import StampBadge from '@/components/StampBadge'
 import { vip } from '@/api/account'
 
 export default {
   name: 'MyVip',
+  components: { StampBadge },
   data() {
     return {
     }

src/views/post/ArticlePost.vue

@@ -97,9 +97,6 @@
 
 <script>
 import { updateArticleScope, deleteArticle, getArticlePosts } from '@/api/article'
-import { getVideoPosts } from '@/api/video'
-import { getUserAlbums } from '@/api/image'
-import { getAudioPosts } from '@/api/audio'
 
 export default {
   name: 'ArticlePost',

src/views/post/AudioPost.vue

@@ -104,10 +104,7 @@
 </template>
 
 <script>
-import {updateAudioScope, deleteAudioPost, getAudioPosts} from '@/api/audio'
-import {getVideoPosts} from "@/api/video";
-import {getUserAlbums} from "@/api/image";
-import {getArticlePosts} from "@/api/article";
+import { updateAudioScope, deleteAudioPost, getAudioPosts } from '@/api/audio'
 
 export default {
   name: 'AudioPost',

src/views/post/ImagePost.vue

@@ -6,62 +6,70 @@
         style="width: 100%"
       >
         <el-table-column
-          type="index">
-        </el-table-column>
+          type="index"
+        />
         <el-table-column
           prop="coverUrl"
           label="相册封面"
-          width="90">
+          width="90"
+        >
           <template slot-scope="scope">
             <el-image
               lazy
               fit="cover"
               class="coverImg"
-              :src="scope.row.coverUrl" />
+              :src="scope.row.coverUrl"
+            />
           </template>
         </el-table-column>
         <el-table-column
           prop="createdAt"
-          label="发布时间">
-        </el-table-column>
+          label="发布时间"
+        />
         <el-table-column
           prop="albumName"
           label="相册名字"
-          width="180">
+          width="180"
+        >
           <template slot-scope="scope">
             <router-link target="_blank" :to="`/image/album/${scope.row.albumId}`">
-              <span>{{scope.row.albumName}}</span>
+              <span>{{ scope.row.albumName }}</span>
             </router-link>
           </template>
         </el-table-column>
         <el-table-column
           prop="total"
-          label="图片数量">
-        </el-table-column>
+          label="图片数量"
+        />
         <el-table-column
           prop="scope"
-          label="可见范围">
+          label="可见范围"
+        >
           <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
               <el-button
                 v-if="scope.row.scope === 1"
                 size="mini"
-                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >本人可见</el-button>
               <el-button
                 v-else-if="scope.row.scope === 2"
                 size="mini"
                 type="success"
-                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >所有人可见</el-button>
               <el-button
                 v-else-if="scope.row.scope === 3"
                 size="mini"
                 type="warning"
-                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >VIP 可见</el-button>
               <el-button
                 v-else
                 size="mini"
                 type="danger"
-                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >验证码可见</el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -69,11 +77,13 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
             <el-button
               size="mini"
               type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -105,10 +115,7 @@
 </template>
 
 <script>
-import {updateAlbumScope, deleteAlbum, getUserAlbums} from "@/api/image";
-import {getVideoPosts} from "@/api/video";
-import {getAudioPosts} from "@/api/audio";
-import {getArticlePosts} from "@/api/article";
+import { updateAlbumScope, deleteAlbum, getUserAlbums } from '@/api/image'
 
 export default {
   name: 'ImagePost',
@@ -157,7 +164,7 @@ export default {
     },
     handleScope(index, row) {
       this.form.albumId = row.albumId
-      this.form.scope = ''+row.scope
+      this.form.scope = '' + row.scope
       this.showEditScopeDialog = true
     },
     handleEdit(index, row) {