修改样式

src/student/teacher-dependent/components/video-item/index.module.less

@@ -25,17 +25,33 @@
     font-weight: 600;
     font-size: 15px;
     color: #131415;
-    line-height: 21px;  
+    line-height: 21px;
     max-width: 165px;
   }
 
   .viUserNum {
-    padding-top: 4px;
-    color: #ff802c;
-    font-size: 12px;
-    background: rgba(255, 246, 240, 1);
-    border-radius: 2px;
-    padding: 3px 4px 2px;
+    // padding-top: 4px;
+    padding-right: 4px;
+    // color: #ff802c;
+    // font-size: 12px;
+    // background: rgba(255, 246, 240, 1);
+    // border-radius: 2px;
+    // padding: 3px 4px 2px;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      border-radius: 50%;
+    }
+    span {
+      font-weight: 400;
+      font-size: 13px;
+      color: #333333;
+      line-height: 18px;
+    }
   }
 
   .viPrice {
@@ -44,19 +60,21 @@
     justify-content: space-between;
     font-size: 14px;
     color: #999;
+    // padding-top: 4px;
 
     .priceNum {
       color: #F44541;
       font-size: 16px;
       font-weight: bold;
+      span {
+        font-size: 15px;
+      }
 
       i {
         font-size: 14px;
         font-style: normal;
       }
     }
-
-    
   }
 
   .tags {

src/student/teacher-dependent/components/video-item/index.tsx

@@ -61,7 +61,11 @@ export default defineComponent({
             )}
           </div>
           <div class={styles.viPrice}>
-            <div class={styles.viUserNum}>{item?.countStudent}人学习</div>
+            <div class={styles.viUserNum}>
+              <img src={item?.avatar || iconTeacher} />
+              <span>{item?.userName}</span>
+              {/* {item?.countStudent}人学习 */}
+            </div>
             <span class={styles.priceNum}>
               {item.payType === 'VIP' ? (
                 <span style={{ color: '#C76E21' }}>会员</span>

src/student/teacher-dependent/teacher-elegant.module.less

@@ -1,8 +1,11 @@
-.classHeader {
-  // background: linear-gradient(180deg, #59e5d5 0%, #fff 100%);
-  background: linear-gradient(#59e5d5, 30%, #ffffff);
-}
+// .classHeader {
+//   // background: linear-gradient(180deg, #59e5d5 0%, #fff 100%);
+//   background: linear-gradient(to bottom, rgba(191, 255, 230, 1) 0%, rgba(247, 249, 252, 196px));
+//   background-color: #F8F9FC;
+// }
 .teacher-elegant {
+  background: linear-gradient(to bottom, rgba(191, 255, 230, 1) 0%, rgba(247, 249, 252, 1) 196px);
+  background-color: #F8F9FC;
   :global {
     .van-list__loading,
     .van-list__finished-text,
@@ -12,6 +15,12 @@
   }
 }
 
+.elegantContainer {
+  height: calc(100vh - var(--header-height, 112px));
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .label {
   margin-right: 8px;
   font-size: 14px;
@@ -31,7 +40,7 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding: 14px;
+  padding: 0 14px 14px;
 }
 
 .itemBg {
@@ -54,7 +63,7 @@
   position: relative;
 
   .teCover {
-    height: 94px;
+    height: 143px;
     width: 100%;
     vertical-align: middle;
     overflow: hidden;
@@ -62,6 +71,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    :global {
+      .van-image {
+        height: 100%;
+        width: 100%;
+      }
+    }
   }
 
   .teSection {
@@ -93,12 +108,15 @@
       border-radius: 50%;
       margin-right: 5px;
       overflow: hidden;
+      border: 1px solid #EDEDED;
     }
 
     .teUserName {
       padding-right: 6px;
       margin-right: 6px;
-      max-width: 65px;
+      max-width: 60px;
+      font-size: 12px;
+      color: #333333;
       // &::after {
       //   content: '|';
       //   display: inline-block;

src/student/teacher-dependent/teacher-elegant.tsx

@@ -11,8 +11,9 @@ import styles from './teacher-elegant.module.less'
 import iconTeacher from '@common/images/icon_teacher.png'
 import iconUploadPoster from '@common/images/icon_upload_poster.png'
 import bars from '@common/svg/bars.svg'
-import { useRect } from '@vant/use'
+// import { useRect } from '@vant/use'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import TheSticky from '@/components/the-sticky'
 
 export default defineComponent({
   data() {
@@ -133,130 +134,92 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['teacher-elegant']}>
-        <Sticky offsetTop={0} position="top">
-          <div ref="header">
-            <ColHeader
-              class={styles.classHeader}
-              border={false}
-              background="transparent"
-              isFixed={false}
-              // onHeaderBack={() => {
-              //   this.$nextTick(() => {
-              //     const { height } = useRect((this as any).$refs.headers)
-              //     this.height = height
-              //   })
-              // }}
-            />
-            <ColSearch
-              placeholder="请输入老师名称"
-              onSearch={this.onSearch}
-              v-slots={{
-                left: () => (
-                  <div
-                    class={styles.label}
-                    onClick={() => {
-                      this.searchStatus = !this.searchStatus
-                      this.openStatus = !this.openStatus
-                    }}
-                  >
-                    {this.params.subjectName}
-                    <Icon
-                      classPrefix="iconfont"
-                      name="down"
-                      size={12}
-                      color="#333"
-                    />
-                  </div>
-                )
-              }}
-            />
-          </div>
-          {/* <div class={styles.searchContainer}>
-            <div class={styles.item}>
-              <div
-                class={[styles.searchItem, styles.searchFollow, styles.active]}
-              >
-                <p class={styles.title}>我的关注</p>
-                <p class={styles.content}>老师最新动态</p>
-              </div>
-              <div
-                class={[styles.searchItem, styles.searchLive, styles.active2]}
-              >
-                <p class={styles.title}>直播中</p>
-                <p class={styles.content}>互动直播间</p>
-              </div>
-            </div>
-
-            <div class={styles.searchDefault}>
-              <Icon
-                classPrefix="iconfont"
-                class={styles.star}
-                color="#FFC459"
-                name="star_active"
-              />
-              默认排序
-            </div>
-          </div> */}
-        </Sticky>
-
-        {this.dataShow ? (
-          <List
-            v-model:loading={this.loading}
-            finished={this.finished}
-            finishedText=" "
-            immediateCheck={false}
-            class={[styles.elegant]}
-            onLoad={this.getList}
-          >
-            {this.list.map((item: any) => (
-              <div class={styles.tedeoItem}>
+        <TheSticky position="top">
+          <ColHeader border={false} background="transparent" isFixed={false} />
+          <ColSearch
+            placeholder="请输入老师名称"
+            onSearch={this.onSearch}
+            background="transparent"
+            inputBackground="white"
+            v-slots={{
+              left: () => (
                 <div
-                  class={styles.itemBg}
+                  class={styles.label}
                   onClick={() => {
-                    this.onDetail(item)
+                    this.searchStatus = !this.searchStatus
+                    this.openStatus = !this.openStatus
                   }}
-                ></div>
-                <div class={styles.teCover}>
-                  <Image src={item.cover || iconUploadPoster} fit="cover" />
-                  {item.living === 1 && (
-                    <div class={styles.living}>
-                      <Image src={bars} class={styles.animation} />
-                      <span>直播中</span>
-                    </div>
-                  )}
+                >
+                  {this.params.subjectName}
+                  <Icon
+                    classPrefix="iconfont"
+                    name="down"
+                    size={12}
+                    color="#333"
+                  />
                 </div>
-                <div class={styles.teSection}>
-                  {/* <div class={[styles.teTitle, 'van-ellipsis']}>
-                    {item.lessonName}
-                  </div> */}
-                  <div class={styles.info}>
-                    <div class={styles.teUserInfo}>
-                      <Image
-                        src={item.avatar || iconTeacher}
-                        class={styles.teUserLogo}
-                      />
-                      <span
-                        class={[
-                          styles.teUserName,
-                          'van-hairline--right van-ellipsis'
-                        ]}
-                      >
-                        {item?.username || `游客${item?.userId || ''}`}
-                      </span>
+              )
+            }}
+          />
+        </TheSticky>
+
+        <div class={styles.elegantContainer}>
+          {this.dataShow ? (
+            <List
+              v-model:loading={this.loading}
+              finished={this.finished}
+              finishedText=" "
+              immediateCheck={false}
+              class={[styles.elegant]}
+              onLoad={this.getList}
+            >
+              {this.list.map((item: any) => (
+                <div class={styles.tedeoItem}>
+                  <div
+                    class={styles.itemBg}
+                    onClick={() => {
+                      this.onDetail(item)
+                    }}
+                  ></div>
+                  <div class={styles.teCover}>
+                    <Image src={item.cover || iconUploadPoster} fit="cover" />
+                    {item.living === 1 && (
+                      <div class={styles.living}>
+                        <Image src={bars} class={styles.animation} />
+                        <span>直播中</span>
+                      </div>
+                    )}
+                  </div>
+                  <div class={styles.teSection}>
+                    <div class={styles.info}>
+                      <div class={styles.teUserInfo}>
+                        <Image
+                          src={item.avatar || iconTeacher}
+                          class={styles.teUserLogo}
+                        />
+                        <span
+                          class={[
+                            styles.teUserName,
+                            'van-ellipsis'
+                          ]}
+                        >
+                          {item?.username || `游客${item?.userId || ''}`}
+                        </span>
+                      </div>
+                      <span class={styles.teUserNum}>{item.browse}浏览</span>
                     </div>
-                    <span class={styles.teUserNum}>{item.browse}浏览</span>
                   </div>
                 </div>
-              </div>
-            ))}
-          </List>
-        ) : (
-          <ColResult
-            btnStatus={false}
-            classImgSize="SMALL"
-            tips="暂无老师风采"
-          />
-        )}
+              ))}
+            </List>
+          ) : (
+            <ColResult
+              btnStatus={false}
+              classImgSize="SMALL"
+              tips="暂无老师风采"
+            />
+          )}
+        </div>
 
         <Popup
           show={this.searchStatus}

src/student/teacher-dependent/teacher-home.tsx

@@ -6,7 +6,7 @@ import Practice from './components/practice'
 import Live from './components/live'
 import VideoList from './components/video'
 import request from '@/helpers/request'
-import { listenerMessage } from '@/helpers/native-message'
+import { listenerMessage, postMessage } from '@/helpers/native-message'
 import { useEventListener, useWindowScroll } from '@vueuse/core'
 import TeacherHeader from './model/teacher-header'
 import { useRect } from '@vant/use'
@@ -44,16 +44,18 @@ export default defineComponent({
       fansStatus: false,
       fansList: [],
       chatItem: {},
-      chatStatus: false,
+      chatStatus: false
     }
   },
-  async mounted() { 
+  async mounted() {
     postMessage({
       api: 'setStatusBarTextColor',
       content: { statusBarTextColor: true }
     })
     this.$nextTick(() => {
-      const { height } = useRect(document.querySelector('.van-tabs__wrap') as any)
+      const { height } = useRect(
+        document.querySelector('.van-tabs__wrap') as any
+      )
       this.tabsHeight = height
       this.stickyHeight()
     })
@@ -68,7 +70,7 @@ export default defineComponent({
     listenerMessage('webViewOnResume', () => {
       this.getTeacherDetail()
     })
-    useEventListener(document, 'scroll', evt => {
+    useEventListener(document, 'scroll', () => {
       const { y } = useWindowScroll()
       if (y.value > 52) {
         this.headColor = '#000'
@@ -85,13 +87,13 @@ export default defineComponent({
   methods: {
     stickyHeight() {
       let height = 0
-      if(this.height === 'auto') {
+      if (this.height === 'auto') {
         height = this.tabsHeight
       } else {
         height = this.height + this.tabsHeight
       }
-      this.stickyHeightNum = height;
-      (this.$refs.musicListRef as any)?.updateStickyHeight(height)
+      this.stickyHeightNum = height
+      ;(this.$refs.musicListRef as any)?.updateStickyHeight(height)
     },
     async getTeacherDetail() {
       try {
@@ -105,12 +107,15 @@ export default defineComponent({
     },
     async getFansList() {
       try {
-        const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
-          data: {
-            type: 'FAN',
-            createUserId: this.teacherId
+        const res = await request.post(
+          '/api-student/imGroup/queryTeacherGroup',
+          {
+            data: {
+              type: 'FAN',
+              createUserId: this.teacherId
+            }
           }
-        })
+        )
         this.fansList = res.data || []
       } catch {}
     },
@@ -123,6 +128,12 @@ export default defineComponent({
       })
     }
   },
+  beforeUnmount() {
+    postMessage({
+      api: 'setStatusBarTextColor',
+      content: { statusBarTextColor: false }
+    })
+  },
   render() {
     return (
       <div class={styles['teacher-record']}>
@@ -156,31 +167,39 @@ export default defineComponent({
 
           <div class={styles.singleSection}>
             <div class={styles.btnType}>
-              <div class={styles.btn1} onClick={() => {
-                this.$router.push({
-                  path: '/teacher-style',
-                  query: {
-                    teacherId: this.teacherId
-                  }
-                })
-              }}>
+              <div
+                class={styles.btn1}
+                onClick={() => {
+                  this.$router.push({
+                    path: '/teacher-style',
+                    query: {
+                      teacherId: this.teacherId
+                    }
+                  })
+                }}
+              >
                 <img src={getAssetsHomeFile('icon1.png')} />
                 个人风采
               </div>
-              <div class={styles.btn2} onClick={async () => {
-                if(this.fansList.length <= 0) {
-                  await this.getFansList()
-                }
-                this.fansStatus = true
-              }}>
+              <div
+                class={styles.btn2}
+                onClick={async () => {
+                  if (this.fansList.length <= 0) {
+                    await this.getFansList()
+                  }
+                  this.fansStatus = true
+                }}
+              >
                 <img src={getAssetsHomeFile('icon2.png')} />
                 粉丝群
               </div>
             </div>
 
-              {this.userInfo.introduction && <div class={styles.singleContent}>
-              {this.userInfo.introduction}
-            </div>}
+            {this.userInfo.introduction && (
+              <div class={styles.singleContent}>
+                {this.userInfo.introduction}
+              </div>
+            )}
           </div>
         </div>
         <Tabs
@@ -189,6 +208,7 @@ export default defineComponent({
           shrink
           lineWidth={44}
           sticky
+          // swipeable
           offsetTop={this.height}
           v-model:active={this.tabs}
           onChange={() => {
@@ -202,9 +222,7 @@ export default defineComponent({
           </Tab> */}
           <Tab title="VIP定制课" name="vip">
             <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'vip' && (
-                <Vip userInfo={this.userInfo} />
-              )}
+              {this.tabs === 'vip' && <Vip userInfo={this.userInfo} />}
             </div>
           </Tab>
           <Tab title="趣纠课" name="practice">
@@ -225,10 +243,11 @@ export default defineComponent({
             </div>
           </Tab>
           <Tab title="视频课" name="video">
-              {this.tabs === 'video' && <VideoList />}
+            {this.tabs === 'video' && <VideoList />}
           </Tab>
           <Tab title="乐谱" name="music">
-            {this.tabs === 'music' && <MusicList
+            {this.tabs === 'music' && (
+              <MusicList
                 hideSearch
                 onlySearch
                 myself
@@ -237,15 +256,23 @@ export default defineComponent({
                 onItemClick={this.onItemClick}
                 teacherId={this.teacherId}
               />
-            }
+            )}
           </Tab>
         </Tabs>
 
-        <Popup show={this.fansStatus} class={styles.fansPopup} closeable onClose={() => this.fansStatus = false}>
-          <FansList fansList={this.fansList} onConfirm={(item: any) => {
-            this.chatStatus = true
-            this.chatItem = item
-          }} />
+        <Popup
+          show={this.fansStatus}
+          class={styles.fansPopup}
+          closeable
+          onClose={() => (this.fansStatus = false)}
+        >
+          <FansList
+            fansList={this.fansList}
+            onConfirm={(item: any) => {
+              this.chatStatus = true
+              this.chatItem = item
+            }}
+          />
         </Popup>
 
         <Popup

src/teacher/layout/auth.tsx

@@ -4,7 +4,7 @@ import { state, setLogin, setLoginError, setLogout } from '@/state'
 import { browser, setAuth } from '@/helpers/utils'
 import { postMessage } from '@/helpers/native-message'
 import { RouterView } from 'vue-router'
-import { Button, Icon } from 'vant'
+// import { Button, Icon } from 'vant'
 import request from '@/helpers/request'
 import ColResult from '@/components/col-result'
 
@@ -37,8 +37,9 @@ export default defineComponent({
       if (state.user.status === 'init' || state.user.status === 'error') {
         this.loading = true
         try {
-          let res = await request.get('/api-teacher/teacher/queryUserInfo', {
+          const res = await request.get('/api-teacher/teacher/queryUserInfo', {
             requestType: 'form',
+            hideLoading: true,
             initRequest: true // 初始化接口
           })
           // console.log(res)
@@ -62,8 +63,8 @@ export default defineComponent({
           postMessage({ api: 'login' })
         } else {
           try {
-            let route = this.$route
-            let query = {
+            const route = this.$route
+            const query = {
               returnUrl: this.$route.path,
               ...this.$route.query
             } as any
@@ -74,7 +75,9 @@ export default defineComponent({
               path: '/login',
               query: query
             })
-          } catch (error) {}
+          } catch (error) {
+            //
+          }
         }
       }
     }

src/teacher/statistics/home-statistics/index.tsx

@@ -241,6 +241,7 @@ export default defineComponent({
         const { data } = await request.post(
           '/api-teacher/home/courseExposure',
           {
+            hideLoading: true,
             data: timeRange.value
           }
         )

src/views/live-class/live-item.module.less

@@ -38,6 +38,13 @@
     display: flex;
     align-items: center;
     margin-bottom: 6px;
+
+    .teacherName {
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .liteacherIcon {

src/views/live-class/live-item.tsx

@@ -95,8 +95,10 @@ export default defineComponent({
                       objectFit: 'cover'
                     }}
                   />
+                  <span class={styles.teacherName}>
                   {this.liveInfo.teacherName ||
                     `游客${this.liveInfo.teacherId}`}
+                  </span>
                 </p>
                 {this.liveInfo.courseStartTime && (
                   <p>

src/views/music/album-detail/index.tsx

@@ -2,6 +2,7 @@ import {
   computed,
   defineComponent,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   reactive,
   ref
@@ -319,6 +320,18 @@ export default defineComponent({
     const shareMusicList = computed(() => {
       return rows.value.length > 4 ? rows.value.slice(0, 2) : rows.value
     })
+
+    postMessage({
+      api: 'setStatusBarTextColor',
+      content: { statusBarTextColor: true }
+    })
+
+    onBeforeUnmount(() => {
+      postMessage({
+        api: 'setStatusBarTextColor',
+        content: { statusBarTextColor: false }
+      })
+    })
     return () => {
       return (
         <div class={styles.detail}>