更新

src/views/user-info/my-fans/index.module.less

@@ -0,0 +1,17 @@
+.removeBtn {
+    display: inline-block;
+  width: 76px;
+  background: #f2f2f2;
+  border-radius: 14px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #1e2022;
+  line-height: 28px;
+  text-align: center;
+  cursor: pointer;
+  margin-top: 10px;
+  &:hover {
+    background: #2dc7aa;
+    color: #ffffff;
+  }
+}

src/views/user-info/my-fans/index.tsx

@@ -1,12 +1,14 @@
 import ColEmpty from '@/components/col-empty'
 import Pagination from '@/components/pagination'
 import request from '@/helpers/request'
-import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
+import { ElImage, ElMessage, ElMessageBox, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
 
 import iconVip from '../images/icon_vip.png'
 import iconSvip from '../images/icon_svip.png'
 import iconVipDefault from '../images/icon_vip_default.png'
+import { getUserInfo } from '@/state'
 
 export default defineComponent({
   name: 'MyFans',
@@ -54,6 +56,22 @@ export default defineComponent({
           this.loading = false
         }, 200)
       }
+    },
+    onRemove(item: any) {
+      ElMessageBox.confirm(`确定删除该粉丝吗?`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await request.post('/api-teacher/teacher/delFans/' + item.userId)
+          await getUserInfo()
+          ElMessage.success('删除成功')
+          this.pageInfo.page = 1
+          this.getList()
+          
+        } catch {}
+      })
     }
   },
   render() {
@@ -103,7 +121,7 @@ export default defineComponent({
                     <div class="flex flex-col items-center">
                       <ElImage
                         src={item.avatar}
-                        class="w-12 h-12 rounded-full border-2 border-[#2DC7AA]"
+                        class={['w-12 h-12 rounded-full border-2 border-[#FFFFFF]', item.vipType !== 'NORMAL' ? item.vipType === 'VIP' ? 'border-[#FADA9B]' : 'border-[#F0AF88]' : '' ]}
                       />
                       {item.vipType && item.vipType !== 'NORMAL' && (
                         <ElImage
@@ -113,26 +131,19 @@ export default defineComponent({
                       )}
                     </div>
 
-                    <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">
+                    <p class="text-base text-[#333] font-semibold leading-tight pb-1 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">
                       {item.userName}
                     </p>
                     <p class="h-6">
                       {item.subjectName && (
-                        <ElTag
-                          effect="dark"
-                          // size="small"
-                          color="#E0FEF9"
-                          round
-                          style={{
-                            borderColor: '#E0FEF9',
-                            color: '#1B967E',
-                            margin: '0 4px'
-                          }}
-                        >
+                        <span style="font-size: 12px;color: #777777;">
                           {item.subjectName}
-                        </ElTag>
+                        </span>
                       )}
                     </p>
+                    <p>
+                      <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
+                    </p>
                   </div>
                 </div>
               ))}