添加我的关注和我关注的老师

src/router/routes-admin.ts

@@ -187,6 +187,12 @@ export default [
           activeMenu: 'userInfoMusicClass',
           isdark: true
         }
+      },
+      {
+        path: '/userInfo/myFans',
+        name: 'userInfoMyFans',
+        component: () => import('@/views/user-info/my-fans'),
+        meta: { title: '我的粉丝', index: 4, hidden: true, isdark: true }
       }
     ]
   },

src/views/student-info/my-follow/index.tsx

@@ -12,12 +12,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={styles.myFollow}>
-        <ElTabs v-model={this.active}>
-          <ElTabPane label="我关注的老师" name="MYFOLLOW">
-            <List />
-          </ElTabPane>
-        </ElTabs>
+      <div class="h-full bg-[#FAFAFA] rounded-md overflow-hidden">
+        <div class="text-sm text-[#333] bg-white leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+          关注的老师
+        </div>
+
+        <List />
       </div>
     )
   }

src/views/student-info/my-follow/item.tsx

@@ -21,7 +21,9 @@ export default defineComponent({
     const item = this.item
     return (
       <div
-        class={['py-3 pl-3 pr-5 flex justify-between', styles.musicListItem]}
+        class={[
+          'py-3 pl-3 pr-5 flex justify-between bg-white rounded-md  hover:drop-shadow-lg transition-all'
+        ]}
       >
         <div class="flex items-center">
           <img src={iconTeacher} class="w-[54px] h-[54px] rounded-full" />
@@ -29,12 +31,12 @@ export default defineComponent({
           <div class="pl-5">
             <div class="flex items-center">
               <span class="text-base pr-1 text-[#333]">{item.userName}</span>
-              <ElRate
+              {/* <ElRate
                 modelValue={item.starGrade}
                 disabled
                 textColor="#ffc459"
                 class={[styles.rate, '!h-4']}
-              />
+              /> */}
             </div>
             <div class="pt-1">
               {this.subjects.map(subject => (
@@ -56,7 +58,7 @@ export default defineComponent({
         </div>
 
         <div class="flex items-center">
-          <div class="flex pr-16 text-[#333] text-base leading-none">
+          {/* <div class="flex pr-16 text-[#333] text-base leading-none">
             <p class="pr-5 mr-5 border-r">
               <span class="text-[#999] pr-2">粉丝</span>
               {item.fansNum}
@@ -65,7 +67,7 @@ export default defineComponent({
               <span class="text-[#999] pr-2">已上课时</span>
               {item.expTime}
             </p>
-          </div>
+          </div> */}
 
           <ElButton
             type="primary"

src/views/student-info/my-follow/list.tsx

@@ -52,47 +52,51 @@ export default defineComponent({
           this.loading = false
         }, 200)
       }
+      // this.loading = true
     }
   },
   render() {
     return (
       <>
-        <div class="px-[38px] pt-4">
+        <div class="px-3 pt-5">
           <ElSkeleton
             loading={this.loading}
             animated
-            class=" w-full m-auto px-[14px] flex items-center flex-col"
-            count={3}
+            class=" w-full m-auto flex flex-wrap"
+            count={2}
             v-slots={{
               template: () => (
-                <div class="h-[94px] flex items-center justify-between w-full mb-2">
-                  <div class="w-2/3 flex items-center">
+                <div class="basis-1/2">
+                  <div class=" rounded-md bg-white py-4 px-[14px] mb-4 mx-2 flex items-center">
                     <ElSkeletonItem
                       variant="circle"
-                      style={{ width: '66px', height: '66px' }}
+                      style={{ width: '54px', height: '54px' }}
                     ></ElSkeletonItem>
-                    <div class="w-1/2 pl-2">
+
+                    <div class="flex w-32 flex-col pl-2.5">
                       <ElSkeletonItem variant="h3"></ElSkeletonItem>
                       <ElSkeletonItem
                         variant="p"
-                        style={{ width: '50%' }}
+                        style={{ width: '60%', marginTop: '6px' }}
                       ></ElSkeletonItem>
                     </div>
                   </div>
-                  <ElSkeletonItem
-                    variant="p"
-                    style={{ width: '20%' }}
-                  ></ElSkeletonItem>
                 </div>
               )
             }}
           >
-            {this.list.map((item: any) => (
-              <Item class="mb-2" item={item} />
-            ))}
+            <div class="flex flex-wrap">
+              {this.list.map((item: any) => (
+                <div class="basis-1/2">
+                  <Item class="mb-4 mx-2" item={item} />
+                </div>
+              ))}
+            </div>
           </ElSkeleton>
         </div>
 
+        {this.dataShow && <ColEmpty />}
+
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
@@ -100,8 +104,6 @@ export default defineComponent({
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />
-
-        {this.dataShow && <ColEmpty />}
       </>
     )
   }

src/views/student-info/my-score/list.tsx

@@ -136,7 +136,7 @@ export default defineComponent({
           pagination={this.getList}
         />
 
-        {this.dataShow && <ColEmpty />}
+        {this.dataShow && <ColEmpty style={{ marginBottom: '30px' }} />}
       </>
     )
   }

src/views/user-info/components/users/index.tsx

@@ -73,7 +73,12 @@ export default defineComponent({
         </div>
 
         <div class="text-[14px] text-[#666] flex items-center justify-center">
-          <span class="flex items-center justify-center leading-6">
+          <span
+            class="flex items-center justify-center leading-6 cursor-pointer"
+            onClick={() => {
+              this.$router.push('/userInfo/myFans')
+            }}
+          >
             粉丝
             <b class="text-black text-xl pl-1 pb-[2px]">
               {this.userInfo.fansNum || 0}

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

@@ -0,0 +1,132 @@
+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 { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'MyFans',
+  data() {
+    return {
+      pageInfo: {
+        // 分页规则
+        limit: 12, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [12, 24, 48, 60] // 选择限制显示条数
+      },
+      list: [] as any[],
+      loading: false,
+      dataShow: false // 是否有数据
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const { data } = await request.post(
+          '/api-website/teacher/queryMyFans',
+          {
+            requestType: 'json',
+            data: {
+              page: this.pageInfo.page,
+              rows: this.pageInfo.limit
+            }
+          }
+        )
+        this.list = data.rows || []
+        console.log(this.list)
+        this.pageInfo.total = data.total
+        if (data.total <= 0) {
+          this.dataShow = true
+        }
+      } catch {}
+      if (this.dataShow) {
+        this.loading = false
+      } else {
+        setTimeout(() => {
+          this.loading = false
+        }, 200)
+      }
+    }
+  },
+  render() {
+    return (
+      <div class="h-full bg-[#FAFAFA] rounded-md overflow-hidden">
+        <div class="text-sm text-[#333] bg-white leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+          我的粉丝
+        </div>
+
+        <div class=" pt-4">
+          <ElSkeleton
+            loading={this.loading}
+            animated
+            class=" w-full m-auto px-[14px] flex"
+            count={3}
+            v-slots={{
+              template: () => (
+                <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
+                  <ElSkeletonItem
+                    variant="circle"
+                    style={{ width: '56px', height: '56px' }}
+                  ></ElSkeletonItem>
+
+                  <div class="flex w-32 flex-col pl-2.5">
+                    <ElSkeletonItem variant="h3"></ElSkeletonItem>
+                    <ElSkeletonItem
+                      variant="p"
+                      style={{ width: '60%', marginTop: '6px' }}
+                    ></ElSkeletonItem>
+                  </div>
+                </div>
+              )
+            }}
+          >
+            <div class="flex flex-wrap px-3">
+              {this.list.map((item: any) => (
+                <div class="basis-1/3 ">
+                  <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
+                    <ElImage src={item.avatar} class="w-14 h-14 rounded-full" />
+
+                    <div class="pl-2.5">
+                      <p class="text-base text-[#333] font-medium leading-tight pb-1.5">
+                        {item.userName}
+                      </p>
+                      <p>
+                        <ElTag
+                          effect="dark"
+                          size="small"
+                          color="#FFF1DE"
+                          style={{
+                            borderColor: '#FFF1DE',
+                            color: '#FF8C00',
+                            marginRight: '5px'
+                          }}
+                        >
+                          {item.subjectName}
+                        </ElTag>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ElSkeleton>
+        </div>
+
+        <Pagination
+          total={this.pageInfo.total}
+          v-model:page={this.pageInfo.page}
+          v-model:limit={this.pageInfo.limit}
+          pageSizes={this.pageInfo.page_size}
+          pagination={this.getList}
+        />
+
+        {this.dataShow && <ColEmpty />}
+      </div>
+    )
+  }
+})