wgua

src/teacher/my-fans/index.module.less

@@ -17,20 +17,77 @@
   }
 }
 
+.myFansContainer {
+  overflow: hidden;
+
+  :global {
+    .van-cell__title {
+      flex: 1 auto;
+    }
+    .van-cell__value {
+      flex-shrink: 0;
+      flex: auto;
+    }
+  }
+}
 .myFans {
-  margin: 12px 14px 0;
-  width: auto;
+  margin: 12px 14px 0 !important;
+  width: auto !important;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 15px 12px !important;
 }
 
 .userName {
   font-size: 16px;
   font-weight: 500;
   color: #1a1a1a;
-  line-height: 28px;
+  line-height: 20px;
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
 }
 
 .userImg {
   width: 46px;
   height: 46px;
-  border-radius: 23px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 2px solid #fff;
+}
+
+.userImgSection {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  margin-right: 12px;
+  .VIP {
+    border: 2px solid #fada9b;
+  }
+  .SVIP {
+    border: 2px solid #f0af88;
+  }
+  .imgTag {
+    position: absolute;
+    width: 39px;
+    height: 18px;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -19.5px;
+  }
+}
+
+.removeBtn {
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  color: #1e2022;
+  line-height: 1;
+  padding: 8px 19px;
+  background: #f2f2f2;
+  border-radius: 50px;
+  cursor: pointer;
 }

src/teacher/my-fans/index.tsx

@@ -44,6 +44,42 @@ export default defineComponent({
         this.dataShow = false
         this.finished = true
       }
+    },
+    formatVipImg(vipType: string) {
+      if (vipType === 'VIP') {
+        return {
+          img: iconVip,
+          vip: 'VIP'
+        }
+      } else if (['SVIP', 'PERMANENT_SVIP'].includes(vipType)) {
+        return {
+          img: iconSvip,
+          vip: 'SVIP'
+        }
+      } else {
+        return {
+          img: null,
+          vip: ''
+        }
+      }
+    },
+    async onRemove(item: any) {
+      try {
+        Dialog.confirm({
+          title: '提示',
+          message: '确定移除该粉丝吗？',
+          confirmButtonColor: 'var(--van-primary)',
+          confirmButtonText: "确定"
+        }).then(async () => {
+          await request.post('/api-teacher/teacher/delFans/' + item.userId)
+          Toast('移除成功')
+
+          this.params.page = 1;
+          this.list = []
+          this.getList()
+        })
+      } catch {
+      }
     }
   },
   render() {
@@ -77,10 +113,13 @@ export default defineComponent({
                         <span class={styles.subject}>{item.subjectName}</span>
                       </div>
                     </div>
-                  )
-                }}
-              />
-            ))}
+                  ),
+                  value: () => 
+                    <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
+                  }}
+                />
+              )
+            })}
           </List>
         ) : (
           <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无粉丝" />