更新关注老师页面

src/components/col-header/index.tsx

@@ -41,7 +41,7 @@ export default defineComponent({
   render() {
     return (
       <>
-        {/* <div class='wall' style={{height:70px;}}></div> */}
+        {/* <div class="wall h-[70px]"></div> */}
         <div
           class={['headerSection backdrop-blur-sm', this.isTop ? '' : 'top']}
         >

src/router/routes-admin.ts

@@ -125,7 +125,7 @@ export default [
   {
     path: '/studentInfo',
     name: 'studentInfo',
-    component: () => import('@/views/student-info/index'),
+    component: () => import('@/views/student-info'),
     redirect: '/studentInfo/myScore',
     children: [
       {
@@ -133,6 +133,12 @@ export default [
         name: 'studentInfoMyScore',
         component: () => import('@/views/student-info/my-score'),
         meta: { title: '我的曲谱', index: 5 }
+      },
+      {
+        path: '/studentInfo/myFollow',
+        name: 'studentInfoMyFollow',
+        component: () => import('@/views/student-info/my-follow'),
+        meta: { title: '我关注的老师', index: 5, hidden: true }
       }
     ]
   }

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

@@ -3,6 +3,7 @@ import iconTeacher from '@/common/images/icon_teacher.png'
 import { ElTag } from 'element-plus'
 import { state } from '@/state'
 import { userInfo } from 'os'
+import { getUserType } from '@/helpers/utils'
 
 export default defineComponent({
   name: 'users',
@@ -19,11 +20,27 @@ export default defineComponent({
         <p class="text-[#1A1A1A] text-lg pt-4">{this.userInfo.username}</p>
 
         <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',
+              getUserType() === 'STUDENT' && 'cursor-pointer'
+            ]}
+            onClick={() => {
+              if (getUserType() === 'STUDENT') {
+                this.$router.push('/studentInfo/myFollow')
+              }
+            }}
+          >
             关注
-            <b class="text-black text-xl pl-1 pb-[2px]">
-              {this.userInfo.fansNum || 0}
-            </b>
+            {getUserType() === 'TEACHER' ? (
+              <b class="text-black text-xl pl-1 pb-[2px]">
+                {this.userInfo.fansNum || 0}
+              </b>
+            ) : (
+              <b class="text-black text-xl pl-1 pb-[2px]">
+                {this.userInfo.starTeacherNum || 0}
+              </b>
+            )}
           </span>
           {/* <span class="pl-3 flex items-center justify-center leading-6">
             帖子<b class="text-black text-xl pl-1 pb-[2px]">124</b>

src/views/student-info/index.tsx

@@ -7,7 +7,7 @@ export default defineComponent({
   name: 'user-info',
   render() {
     return (
-      <div class="w-[1200px] mt-[30px] mb-14 min-h-full m-auto text-[#333] flex">
+      <div class="w-[1200px] mt-[100px] mb-14 min-h-full m-auto text-[#333] flex">
         <div class="w-56 mr-4">
           <Users class="mb-3 user-shadow" />
           <UserMenu class="user-shadow" />

src/views/student-info/my-follow/index.module.less

@@ -0,0 +1,30 @@
+.myFollow {
+  :global {
+    .el-tabs__nav-wrap {
+      @apply px-11;
+    }
+    .el-tabs__item {
+      height: 64px;
+      line-height: 64px;
+      padding: 0 42px;
+    }
+    .el-tabs__nav-wrap::after {
+      height: 1px;
+      background: #eeeeee;
+    }
+  }
+}
+
+.musicListItem:hover {
+  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
+}
+
+.rate {
+  --el-rate-icon-margin: 0px;
+
+  :global {
+    .el-rate__item {
+      font-size: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { ElTabPane, ElTabs } from 'element-plus'
+import { defineComponent, render } from 'vue'
+import styles from './index.module.less'
+import List from './list'
+
+export default defineComponent({
+  name: 'my-follow',
+  data() {
+    return {
+      active: 'MYFOLLOW'
+    }
+  },
+  render() {
+    return (
+      <div class={styles.myFollow}>
+        <ElTabs v-model={this.active}>
+          <ElTabPane label="我关注的老师" name="MYFOLLOW">
+            <List />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,83 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconTeacher from '@/common/images/icon_teacher.png'
+import { ElButton, ElRate, ElTag } from 'element-plus'
+
+export default defineComponent({
+  name: 'item',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed: {
+    subjects() {
+      const { subjectName } = this.item
+      return subjectName.split(',')
+    }
+  },
+  render() {
+    const item = this.item
+    return (
+      <div
+        class={['py-3 pl-3 pr-5 flex justify-between', styles.musicListItem]}
+      >
+        <div class="flex items-center">
+          <img src={iconTeacher} class="w-[54px] h-[54px] rounded-full" />
+
+          <div class="pl-5">
+            <div class="flex items-center">
+              <span class="text-base pr-1 text-[#333]">{item.userName}</span>
+              <ElRate
+                modelValue={item.starGrade}
+                disabled
+                textColor="#ffc459"
+                class={[styles.rate, '!h-4']}
+              />
+            </div>
+            <div class="pt-1">
+              {this.subjects.map(subject => (
+                <ElTag
+                  effect="dark"
+                  size="small"
+                  color="#FFF1DE"
+                  style={{
+                    borderColor: '#FFF1DE',
+                    color: '#FF8C00',
+                    marginRight: '5px'
+                  }}
+                >
+                  {subject}
+                </ElTag>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center">
+          <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}
+            </p>
+            <p>
+              <span class="text-[#999] pr-2">已上课时</span>
+              {item.expTime}
+            </p>
+          </div>
+
+          <ElButton
+            type="primary"
+            plain
+            size="small"
+            disabled
+            class="!bg-white hover:!text-[#2DC7AA]"
+          >
+            已关注
+          </ElButton>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,108 @@
+import ColEmpty from '@/components/col-empty'
+import Pagination from '@/components/pagination'
+import request from '@/helpers/request'
+import styles from './index.module.less'
+import { ElSkeleton, ElSkeletonItem } from 'element-plus'
+import { defineComponent } from 'vue'
+import Item from './item'
+
+export default defineComponent({
+  name: 'list',
+  data() {
+    return {
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      list: [] as any[],
+      loading: false,
+      dataShow: false // 是否有数据
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const { data } = await request.post(
+          '/api-website/student/queryMyFollow',
+          {
+            requestType: 'json',
+            data: {
+              page: this.pageInfo.page,
+              rows: this.pageInfo.limit
+            }
+          }
+        )
+        this.list = data.rows || []
+        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="px-[38px] pt-4">
+          <ElSkeleton
+            loading={this.loading}
+            animated
+            class=" w-full m-auto px-[14px] flex items-center flex-col"
+            count={3}
+            v-slots={{
+              template: () => (
+                <div class="h-[94px] flex items-center justify-between w-full mb-2">
+                  <div class="w-2/3 flex items-center">
+                    <ElSkeletonItem
+                      variant="circle"
+                      style={{ width: '66px', height: '66px' }}
+                    ></ElSkeletonItem>
+                    <div class="w-1/2 pl-2">
+                      <ElSkeletonItem variant="h3"></ElSkeletonItem>
+                      <ElSkeletonItem
+                        variant="p"
+                        style={{ width: '50%' }}
+                      ></ElSkeletonItem>
+                    </div>
+                  </div>
+                  <ElSkeletonItem
+                    variant="p"
+                    style={{ width: '20%' }}
+                  ></ElSkeletonItem>
+                </div>
+              )
+            }}
+          >
+            {this.list.map((item: any) => (
+              <Item class="mb-2" item={item} />
+            ))}
+          </ElSkeleton>
+        </div>
+
+        <Pagination
+          total={this.pageInfo.total}
+          v-model:page={this.pageInfo.page}
+          limit={this.pageInfo.limit}
+          pageSizes={this.pageInfo.page_size}
+          pagination={this.getList}
+        />
+
+        {this.dataShow && <ColEmpty />}
+      </>
+    )
+  }
+})

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

@@ -1,5 +1,4 @@
 import ColEmpty from '@/components/col-empty'
-import MusicLIstItem from '@/components/musicLIstItem'
 import Pagination from '@/components/pagination'
 import request from '@/helpers/request'
 import styles from './index.module.less'
@@ -57,7 +56,7 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="px-2">
+        <div class="px-4 flex flex-wrap">
           <ElSkeleton
             loading={this.loading}
             animated
@@ -90,9 +89,11 @@ export default defineComponent({
             }}
           >
             {this.list.map((item: any) => (
-              <div class="w-1/5">
-                <Item class="m-auto" item={item} />
-              </div>
+              <>
+                <div class="w-1/5 pb-4">
+                  <Item class="m-auto" item={item} />
+                </div>
+              </>
             ))}
           </ElSkeleton>
         </div>

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

@@ -8,7 +8,7 @@ export default defineComponent({
   name: 'live-class',
   data() {
     return {
-      activeName: 'ALBUM'
+      activeName: 'MYSCORE'
     }
   },
   methods: {

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

@@ -122,10 +122,7 @@ export default defineComponent({
                   composer: item.composer,
                   chargeType: item.chargeType
                 }}
-                class={[
-                  styles.musicListItem,
-                  'mb-2 px-[14px] rounded-xl cursor-pointer'
-                ]}
+                class={[styles.musicListItem, 'mb-2 rounded-xl cursor-pointer']}
               />
             ))}
           </ElSkeleton>

src/views/user-info/index.tsx

@@ -7,7 +7,7 @@ export default defineComponent({
   name: 'user-info',
   render() {
     return (
-      <div class="w-[1200px] mt-[30px] mb-14 min-h-full m-auto text-[#333] flex">
+      <div class="w-[1200px] mt-[100px] mb-14 min-h-full m-auto text-[#333] flex">
         <div class="w-56 mr-4">
           <Users class="mb-3 user-shadow" />
           <UserMenu class="user-shadow" />

src/views/user-info/music-class/list.tsx

@@ -128,10 +128,7 @@ export default defineComponent({
                   composer: item.composer,
                   chargeType: item.chargeType
                 }}
-                class={[
-                  styles.musicListItem,
-                  'mb-2 px-[14px] rounded-xl cursor-pointer'
-                ]}
+                class={[styles.musicListItem, 'mb-2 rounded-xl cursor-pointer']}
               />
             ))}
           </ElSkeleton>

src/views/user-info/video-class/list.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
     return {
       pageInfo: {
         // 分页规则
-        limit: 10, // 限制显示条数
+        limit: 3, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
@@ -148,7 +148,7 @@ export default defineComponent({
 
         <Pagination
           total={this.pageInfo.total}
-          v-model:page={this.pageInfo.page}
+          page={this.pageInfo.page}
           limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}