合并

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

@@ -1,7 +1,7 @@
 .piNameSubject {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  // margin-bottom: 12px;
 
   .subject {
     margin-left: 5px;

src/teacher/my-fans/index.tsx

@@ -1,7 +1,9 @@
-import { Cell, Image, List } from 'vant'
+import { Button, Cell, Dialog, Image, List, Toast } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import iconStudent from '@common/images/icon_student.png'
+import iconSvip from './images/icon-svip.png'
+import iconVip from './images/icon-vip.png'
 import request from '@/helpers/request'
 import ColResult from '@/components/col-result'
 import ColHeader from '@/components/col-header'
@@ -84,7 +86,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <div>
+      <div class={styles.myFansContainer}>
         <ColHeader />
         {this.dataShow ? (
           <List
@@ -94,28 +96,36 @@ export default defineComponent({
             class={[styles.liveList, 'mb12']}
             onLoad={this.getList}
           >
-            {this.list.map((item: any) => (
-              <Cell
-                class={styles.myFans}
-                titleStyle={{ paddingLeft: '8px' }}
-                v-slots={{
-                  icon: () => (
-                    <Image
-                      class={styles.userImg}
-                      src={item.avatar || iconStudent}
-                      fit="cover"
-                    />
-                  ),
-                  title: () => (
-                    <div class={styles.userInfo}>
-                      <div class={styles.userName}> {item.userName} </div>
-                      <div class={styles.piNameSubject}>
-                        <span class={styles.subject}>{item.subjectName}</span>
+            {this.list.map((item: any) => {
+              const formatImg = this.formatVipImg(item.vipType)
+              return (
+                <Cell
+                  class={styles.myFans}
+                  center
+                  v-slots={{
+                    icon: () => (
+                      <div class={[styles.userImgSection]}>
+                        <Image
+                          class={[styles.userImg, formatImg.vip && styles[formatImg.vip]]}
+                          src={item.avatar || iconStudent}
+                          fit="cover"
+                        />
+                        {formatImg.img && (
+                          <img class={styles.imgTag} src={formatImg.img} />
+                        )}
                       </div>
-                    </div>
-                  ),
-                  value: () => 
-                    <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
+                    ),
+                    title: () => (
+                      <div class={styles.userInfo}>
+                        <div class={styles.userName}> {item.userName} </div>
+                        <div class={styles.piNameSubject}>
+                          <span class={styles.subject}>{item.subjectName}</span>
+                        </div>
+                      </div>
+                    ),
+                    value: () => 
+                      <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
+               
                   }}
                 />
               )