修改

dist/assets/home-layout-center-legacy.13a92823.js

@@ -0,0 +1 @@
+!function(){function e(e,t,n,r,o,s,u){try{var a=e[s](u),c=a.value}catch(i){return void n(i)}a.done?t(c):Promise.resolve(c).then(r,o)}System.register(["./index-legacy.ef927dc2.js","./index-legacy.2daa68a4.js","./auth-legacy.abe13fc7.js","./routes-common-legacy.8130f075.js"],(function(t){"use strict";var n,r,o,s,u,a,c,i,f,l;return{setters:[function(e){n=e.d,r=e.g,o=e.t,s=e.p,u=e.i,a=e.j,c=e.C,i=e.F},function(e){f=e.a,l=e.b},function(){},function(){}],execute:function(){t("default",n({name:"home-layout-center",data:function(){return{status:!1}},mounted:function(){this.getUserInfo()},methods:{getUserInfo:function(){var t,n=this;return(t=regeneratorRuntime.mark((function e(){var t,a,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,f.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:r.orchestraInfo.phone,token:r.orchestraInfo.token,isSurportRegister:!0}});case 3:return t=e.sent,a=t.data.authentication,o(a.token_type+" "+a.access_token),s({api:"setCache",content:{key:"h5-colexiu-token",value:a.token_type+" "+a.access_token}}),e.next=9,f.get("/api-student/student/queryUserInfo",{initRequest:!0});case 9:c=e.sent,u(c.data),n.$router.push("/home"),e.next=17;break;case 14:e.prev=14,e.t0=e.catch(0),n.status=!0;case 17:case"end":return e.stop()}}),e,null,[[0,14]])})),function(){var n=this,r=arguments;return new Promise((function(o,s){var u=t.apply(n,r);function a(t){e(u,o,s,a,c,"next",t)}function c(t){e(u,o,s,a,c,"throw",t)}a(void 0)}))})()}},render:function(){return a(i,null,[this.status?a("div",{class:l.error},[a(c,{type:"notFond",classImgSize:"CERT",tips:"加载失败，请稍后重试",buttonText:"重新加载",plain:!0,onClick:this.getUserInfo},null)]):a("div",null,null)])}}))}}}))}();

dist/assets/home-layout-center.9cc44f80.js

@@ -0,0 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center.fe9ca348.js
+import{d as r,g as s,t as u,p as i,i as c,j as e,C as l,F as p}from"./index.55846dc8.js";import{a,b as h}from"./index.d50b16db.js";import"./auth.0866829e.js";import"./routes-common.7fac14c5.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+========
+import{d as r,g as s,t as u,p as i,i as c,j as e,C as l,F as p}from"./index.55846dc8.js";import{a,b as h}from"./index.78265afb.js";import"./auth.0866829e.js";import"./routes-common.7fac14c5.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+>>>>>>>> iteration-20240627-scroll:dist/assets/home-layout-center.9cc44f80.js

dist/assets/home-layout-center.fe9ca348.js

@@ -1 +1,5 @@
+<<<<<<<< HEAD:dist/assets/home-layout-center.fe9ca348.js
 import{d as r,g as s,t as u,p as i,i as c,j as e,C as l,F as p}from"./index.55846dc8.js";import{a,b as h}from"./index.d50b16db.js";import"./auth.0866829e.js";import"./routes-common.7fac14c5.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+========
+import{d as r,g as s,t as u,p as i,i as c,j as e,C as l,F as p}from"./index.55846dc8.js";import{a,b as h}from"./index.78265afb.js";import"./auth.0866829e.js";import"./routes-common.7fac14c5.js";var g=r({name:"home-layout-center",data(){return{status:!1}},mounted(){this.getUserInfo()},methods:{async getUserInfo(){try{const o=await a.post("/api-auth/smsLogin",{requestType:"form",data:{clientId:"student",clientSecret:"student",phone:s.orchestraInfo.phone,token:s.orchestraInfo.token,isSurportRegister:!0}}),{authentication:t}=o.data;u(t.token_type+" "+t.access_token),i({api:"setCache",content:{key:"h5-colexiu-token",value:t.token_type+" "+t.access_token}});const n=await a.get("/api-student/student/queryUserInfo",{initRequest:!0});c(n.data),this.$router.push("/home")}catch{this.status=!0}}},render(){return e(p,null,[this.status?e("div",{class:h.error},[e(l,{type:"notFond",classImgSize:"CERT",tips:"\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5",buttonText:"\u91CD\u65B0\u52A0\u8F7D",plain:!0,onClick:this.getUserInfo},null)]):e("div",null,null)])}});export{g as default};
+>>>>>>>> iteration-20240627-scroll:dist/assets/home-layout-center.9cc44f80.js

dist/assets/index.a962013f.css

@@ -0,0 +1 @@
+._video-container_yk4kf_1{position:relative;width:100%;--plyr-color-main: #01c1b5}._video-container_yk4kf_1 video{width:100%}._video-container_yk4kf_1 .video-back{position:absolute;left:.53333rem;top:.53333rem;color:#fff;z-index:99;font-size:.64rem;width:.8rem;height:.8rem;background-color:rgba(0,0,0,.5);border-radius:50%;padding:.10667rem .13333rem .10667rem .08rem}._video-container_yk4kf_1 .plyr__poster{background-size:cover}._video-container_yk4kf_1 .plyr__control--overlaid{border:.02667rem solid #fff;background-color:transparent!important}._video-container_yk4kf_1 .plyr--video .plyr__control:hover{background-color:transparent!important}._video-container_yk4kf_1 .video-js{width:100%;height:100%}._video-container_yk4kf_1 .tcp-skin .vjs-play-progress{background-color:var(--van-primary)!important}._video-container_yk4kf_1 .vjs-poster{background-size:cover}._video-container_yk4kf_1 .video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:inherit!important;outline:none}._video-container_yk4kf_1 .video-js .vjs-slider:focus{box-shadow:none!important;text-shadow:none!important;outline:none}._video-container_yk4kf_1 ._video_yk4kf_1{position:relative}._loadingVideo_yk4kf_54{position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.9);z-index:10}._playOver_yk4kf_63{background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}._playOver_yk4kf_63 ._tips_yk4kf_71{font-size:.4rem;color:#fff}._playOver_yk4kf_63 ._btn_yk4kf_75{margin:.26667rem 0;min-width:2.50667rem;font-size:.37333rem;height:.74667rem;line-height:.74667rem}._playOver_yk4kf_63 ._replay_yk4kf_82{padding-top:.32rem}._playOver_yk4kf_63 ._showReload_yk4kf_85{display:flex;align-items:center}._playOver_yk4kf_63 ._iconReplay_yk4kf_89{width:.48rem;height:.48rem;margin-right:.16rem}._freeTxt_yk4kf_94{font-size:.4rem;color:#fff;line-height:.56rem;padding-top:.26667rem}._freeRate_yk4kf_100{color:#32ffd8}

dist/index.html

@@ -52,7 +52,11 @@
             _T_));
     })(Object);
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/index.d50b16db.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/index.78265afb.js"></script>
+>>>>>>> iteration-20240627-scroll
   <link rel="modulepreload" href="./assets/index.55846dc8.js">
   <link rel="modulepreload" href="./assets/auth.0866829e.js">
   <link rel="modulepreload" href="./assets/routes-common.7fac14c5.js">
@@ -68,7 +72,11 @@
   <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.e2059479.js"></script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.bad13ee6.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.2daa68a4.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> iteration-20240627-scroll
 </body>
 
 </html>

dist/teacher.html

@@ -52,7 +52,11 @@
             _T_));
     })(Object);
   </script>
+<<<<<<< HEAD
   <script type="module" crossorigin src="./assets/teacher.d9c73222.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/teacher.9dc71e00.js"></script>
+>>>>>>> iteration-20240627-scroll
   <link rel="modulepreload" href="./assets/index.55846dc8.js">
   <link rel="modulepreload" href="./assets/routes-common.7fac14c5.js">
   <link rel="stylesheet" href="./assets/index.d06f6378.css">
@@ -65,7 +69,11 @@
   
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.e2059479.js"></script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-entry" data-src="./assets/teacher-legacy.7c26c3a5.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+=======
+  <script nomodule id="vite-legacy-entry" data-src="./assets/teacher-legacy.21c68dd8.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+>>>>>>> iteration-20240627-scroll
 </body>
 
 </html>

src/business-components/user-detail/index.tsx

@@ -7,6 +7,7 @@ import defaultIcon from '@common/images/icon_teacher.png'
 import iconTimer from '@common/images/icon_timer2.png'
 import IconXueli from '@common/images/icon-xueli.png'
 import IconJiaozi from '@common/images/icon-jiaozi.png'
+import item from '@/views/coupons/item'
 /**
  * @description: 视频详情
  * @param {type} headUrl 头像
@@ -14,6 +15,7 @@ import IconJiaozi from '@common/images/icon-jiaozi.png'
  * @param {type} startTime 开始时间
  * @param {type} buyNum 购买用户数
  * @param {type} payType 收费方式
+ * @param {type} type 课程类型
  * @param {type} lessonPrice 价格
  * @param {type} lessonCoverUrl 视频封面
  * @param {type} lessonDesc 课程描述
@@ -28,6 +30,7 @@ interface UserType {
   id?: number
   buyNum?: number
   payType?: string
+  type?: string
   lessonPrice: number
   lessonNum?: number
   lessonDesc?: string
@@ -153,7 +156,17 @@ export default defineComponent({
                   </span>
                   {this.showBuy && (
                     <div class={styles.buyNum}>
-                      {this.userInfo.buyNum}人学习
+                      {this.userInfo.type === 'live' ? (
+                        <>
+                          {this.userInfo.buyNum}人已
+                          {this.userInfo.lessonPrice <= 0 &&
+                          this.userInfo.auditVersion === 0
+                            ? '领取'
+                            : '购买'}
+                        </>
+                      ) : (
+                        <>{this.userInfo.buyNum}人学习</>
+                      )}
                     </div>
                   )}
                 </div>

src/components/col-sticky/index.tsx

@@ -1,6 +1,7 @@
 import { useRect } from '@vant/use'
-import { defineComponent } from 'vue'
+import { PropType, defineComponent } from 'vue'
 import styles from './index.module.less'
+import { useResizeObserver } from '@vueuse/core'
 
 export default defineComponent({
   name: 'col-sticky',
@@ -12,11 +13,29 @@ export default defineComponent({
     background: {
       type: String,
       default: ''
+    },
+    mode: {
+      type: String as PropType<'fixed' | 'sticky'>,
+      default: 'fixed'
+    },
+    offsetTop: {
+      type: String,
+      default: '0px'
+    },
+    offsetBottom: {
+      default: '0px'
+    },
+    // 变量名
+    varName: {
+      type: String,
+      default: '--header-height'
     }
   },
+  emits: ['getHeight'],
   data() {
     return {
       divStyle: {} as any,
+      heightV: 0,
       sectionStyle: {
         width: '100%',
         height: 'auto'
@@ -24,31 +43,86 @@ export default defineComponent({
     }
   },
   mounted() {
+    // if (this.position === 'top') {
+    //   this.divStyle.top = '0px'
+    // } else {
+    //   this.divStyle.bottom = '0px'
+    // }
+    // const { height } = useRect((this as any).$refs.div)
+    // this.sectionStyle.height = `${height}px`
+
+    // this.$nextTick(() => {
+    //   setTimeout(() => {
+    //     const { height } = useRect((this as any).$refs.div)
+    //     this.sectionStyle.height = `${height}px`
+    //     this.$emit('getHeight', height)
+    //   }, 100)
+    // })
+
     if (this.position === 'top') {
-      this.divStyle.top = '0px'
+      this.divStyle.top = this.offsetTop || '0px'
     } else {
-      this.divStyle.bottom = '0px'
+      this.divStyle.bottom = this.offsetBottom || '0px'
     }
-    // const { height } = useRect((this as any).$refs.div)
-    // this.sectionStyle.height = `${height}px`
 
-    this.$nextTick(() => {
-      setTimeout(() => {
-        const { height } = useRect((this as any).$refs.div)
-        this.sectionStyle.height = `${height}px`
-        this.$emit('getHeight', height)
-      }, 100)
-    })
+    try {
+      useResizeObserver((this as any).$refs.div2, (entries: any) => {
+        const entry = entries[0]
+        const { height } = entry.contentRect
+        // console.log(height, 'height')
+        if (Math.abs(height - this.heightV) > 1) {
+          setTimeout(() => {
+            this.__initHeight(height)
+          }, 10)
+        }
+      })
+    } catch (e) {
+      //
+      console.log(e, 'error useResizeObserver')
+    }
+  },
+  methods: {
+    __initHeight(height: any) {
+      this.sectionStyle.height = `${height}px`
+      this.heightV = height
+      document.documentElement.style.setProperty(this.varName, `${height}px`)
+      this.$emit('getHeight', height)
+    }
+  },
+  watch: {
+    offsetTop() {
+      this.divStyle.top = this.offsetTop
+    },
+    offsetBottom() {
+      this.divStyle.bottom = this.offsetBottom
+    }
   },
   render() {
     return (
-      <div style={this.sectionStyle}>
+      // <div style={this.sectionStyle}>
+      //   <div
+      //     ref="div"
+      //     class={['van-sticky van-sticky--fixed', styles[this.background]]}
+      //     style={[this.divStyle, this.sectionStyle]}
+      //   >
+      //     {this.$slots.default && this.$slots.default()}
+      //   </div>
+      // </div>
+
+      <div
+        style={[this.sectionStyle]}
+        class={this.mode === 'sticky' && styles.sticky}
+      >
         <div
           ref="div"
-          class={['van-sticky van-sticky--fixed', styles[this.background]]}
+          class={[
+            'van-sticky',
+            this.mode === 'fixed' ? 'van-sticky--fixed' : '',
+            styles[this.background]
+          ]}
           style={[this.divStyle, this.sectionStyle]}
         >
-          {this.$slots.default && this.$slots.default()}
+          <div ref="div2">{this.$slots.default && this.$slots.default()}</div>
         </div>
       </div>
     )

src/components/col-video/index.module.less

@@ -100,6 +100,10 @@
 
   .replay {
     padding-top: 12px;
+
+  }
+
+  .showReload {
     display: flex;
     align-items: center;
   }

src/components/col-video/index.tsx

@@ -469,7 +469,10 @@ export default defineComponent({
                   </Button>
                 )}
                 <div
-                  class={state.platformType !== 'STUDENT' && styles.replay}
+                  class={[
+                    state.platformType !== 'STUDENT' && styles.replay,
+                    styles.showReload
+                  ]}
                   onClick={this.onReplay}
                 >
                   {/* <Icon

src/student/live-class/live-detail.tsx

@@ -56,6 +56,7 @@ export default defineComponent({
             'HH:mm'
           )}~${dayjs(endTime).format('HH:mm')}` || '',
         buyNum: live.studentCount,
+        type: 'live',
         lessonId: live.courseGroupId,
         lessonPrice: live.coursePrice,
         lessonNum: live.courseNum,

src/student/video-class/video-class-detail.module.less

@@ -1,87 +1,95 @@
-.video-class-detail {
-  min-height: 100vh;
-
-  .videoDesc {
-    background-color: #fff;
-    padding: 0 14px 16px;
-    margin-bottom: 6px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #7a7a7a;
-  }
-
-  .titleInfo {
-    padding-left: 8px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #1a1a1a;
-    flex: 1 auto;
-    max-width: 250px;
-  }
-  .label {
-    font-size: 14px;
-    span {
-      color: var(--van-primary);
-    }
-  }
-
-  :global {
-    .van-tab--active {
-      color: var(--van-primary);
-    }
-    .van-field__value {
-      background: #f7f7f7;
-      border-radius: 30px;
-      padding-left: 15px;
-    }
-
-    .van-tab__panel {
-      overflow: hidden;
-    }
-  }
-
-  .message-list {
-    &.message-active {
-      .title,
-      .label {
-        color: var(--van-primary) !important;
-      }
-    }
-    .message-name {
-      flex-basis: 65%;
-      line-height: 1.2;
-    }
-    .message-time {
-      font-size: 12px;
-      color: #999;
-      flex-basis: 35%;
-    }
-
-    .userLogo {
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      margin-right: 8px;
-      overflow: hidden;
-    }
-    .title {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
-      color: #999;
-      font-weight: 500;
-    }
-    .label {
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-}
-
-.messageContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+.video-class-detail {
+  min-height: 100vh;
+
+  .videoDesc {
+    background-color: #fff;
+    padding: 0 14px 12px;
+    margin-bottom: 6px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #7a7a7a;
+  }
+
+  .titleInfo {
+    padding-left: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1a1a1a;
+    flex: 1 auto;
+    max-width: 250px;
+  }
+
+  .label {
+    font-size: 14px;
+
+    span {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    .van-tab--active {
+      color: var(--van-primary);
+    }
+
+    .van-field__value {
+      background: #f7f7f7;
+      border-radius: 30px;
+      padding-left: 15px;
+    }
+
+    .van-tab__panel {
+      overflow: hidden;
+    }
+  }
+
+  .message-list {
+    &.message-active {
+
+      .title,
+      .label {
+        color: var(--van-primary) !important;
+      }
+    }
+
+    .message-name {
+      flex-basis: 65%;
+      line-height: 1.2;
+    }
+
+    .message-time {
+      font-size: 12px;
+      color: #999;
+      flex-basis: 35%;
+    }
+
+    .userLogo {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      margin-right: 8px;
+      overflow: hidden;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+      font-weight: 500;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}
+
+.messageContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

src/student/video-class/video-class-detail.tsx

@@ -28,6 +28,7 @@ import dayjs from 'dayjs'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import { browser } from '@/helpers/utils'
 import { usePageVisibility } from '@vant/use'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'VideoClassDetail',
@@ -62,18 +63,19 @@ export default defineComponent({
       },
       freeRate: 0, // 试看百分比
       trySee: false, // 是否试看
-      videoHeight: '212px'
+      videoHeight: '212px',
+      offsetTop: 'auto'
     }
   },
   computed: {
     users() {
       return state.user.data
-    },
-    offsetTop() {
-      const navHeight: number = this.navHeight
-      const top = Number(navHeight) + 44
-      return top + 'px'
     }
+    // offsetTop() {
+    //   const navHeight: number = this.navHeight
+    //   const top = Number(navHeight) + 44
+    //   return top + 'px'
+    // }
   },
   async mounted() {
     this.pageVisibility = usePageVisibility()
@@ -227,109 +229,119 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['video-class-detail']}>
-        {/* <Sticky offsetTop={0} position="top"> */}
-        <ColHeader
-          v-slots={{
-            default: () =>
-              !this.reload && (
-                <ColVideo
-                  freeRate={Number(this.freeRate)}
-                  freeTitleStatus={this.lessonPrice > 0 ? true : false}
-                  trySee={this.trySee}
-                  src={this.srcUrl}
-                  payType={this.payType}
-                  poster={this.posterUrl}
-                  height={this.videoHeight}
-                  isBuy
-                  onBuyEmit={async () => {
-                    if (this.payType === 'VIP') {
-                      if (browser().isApp) {
-                        postMessage({
-                          api: 'openWebView',
-                          content: {
-                            url: `${location.origin}${location.pathname}#/memberCenter`,
-                            orientation: 1,
-                            isHideTitle: false
+        <ColSticky
+          position="top"
+          onGetHeight={(val: any) => {
+            this.offsetTop = val + 'px'
+          }}
+        >
+          <ColHeader
+            v-slots={{
+              default: () =>
+                !this.reload && (
+                  <ColVideo
+                    freeRate={Number(this.freeRate)}
+                    freeTitleStatus={this.lessonPrice > 0 ? true : false}
+                    trySee={this.trySee}
+                    src={this.srcUrl}
+                    payType={this.payType}
+                    poster={this.posterUrl}
+                    height={this.videoHeight}
+                    isBuy
+                    onBuyEmit={async () => {
+                      if (this.payType === 'VIP') {
+                        if (browser().isApp) {
+                          postMessage({
+                            api: 'openWebView',
+                            content: {
+                              url: `${location.origin}${location.pathname}#/memberCenter`,
+                              orientation: 1,
+                              isHideTitle: false
+                            }
+                          })
+                        } else {
+                          this.$router.push({
+                            path: '/memberCenter'
+                          })
+                        }
+                        return
+                      }
+
+                      if (this.lessonPrice > 0) {
+                        this.$router.back()
+                        return
+                      }
+                      try {
+                        const userInfo = this.videoDetail
+                        orderStatus.orderObject.orderType = 'VIDEO'
+                        orderStatus.orderObject.orderName = '视频课购买'
+                        orderStatus.orderObject.orderDesc = '视频课购买'
+                        orderStatus.orderObject.actualPrice =
+                          userInfo.lessonPrice
+                        orderStatus.orderObject.recomUserId = ''
+                        orderStatus.orderObject.orderNo = ''
+                        orderStatus.orderObject.orderList = [
+                          {
+                            orderType: 'VIDEO',
+                            goodsName: '视频课购买',
+                            courseGroupId: userInfo.id,
+                            courseGroupName: userInfo.lessonName,
+                            coursePrice: userInfo.lessonPrice,
+                            teacherName:
+                              userInfo.username ||
+                              `游客${userInfo.teacherId || ''}`,
+                            teacherId: userInfo.teacherId,
+                            avatar: userInfo.headUrl,
+                            relationType: userInfo.relationType,
+                            courseInfo: this.detailList,
+                            recomUserId: ''
                           }
+                        ]
+                        await onSubmitZero(() => {
+                          Dialog.alert({
+                            message: '领取成功',
+                            confirmButtonText: '确定',
+                            confirmButtonColor: '#2dc7aa'
+                          }).then(() => {
+                            this.__init()
+                          })
                         })
-                      } else {
-                        this.$router.push({
-                          path: '/memberCenter'
-                        })
+                      } catch {
+                        //
                       }
-                      return
-                    }
+                    }}
+                  />
+                )
+            }}
+          />
 
-                    if (this.lessonPrice > 0) {
-                      this.$router.back()
-                      return
-                    }
-                    try {
-                      const userInfo = this.videoDetail
-                      orderStatus.orderObject.orderType = 'VIDEO'
-                      orderStatus.orderObject.orderName = '视频课购买'
-                      orderStatus.orderObject.orderDesc = '视频课购买'
-                      orderStatus.orderObject.actualPrice = userInfo.lessonPrice
-                      orderStatus.orderObject.recomUserId = ''
-                      orderStatus.orderObject.orderNo = ''
-                      orderStatus.orderObject.orderList = [
-                        {
-                          orderType: 'VIDEO',
-                          goodsName: '视频课购买',
-                          courseGroupId: userInfo.id,
-                          courseGroupName: userInfo.lessonName,
-                          coursePrice: userInfo.lessonPrice,
-                          teacherName:
-                            userInfo.username ||
-                            `游客${userInfo.teacherId || ''}`,
-                          teacherId: userInfo.teacherId,
-                          avatar: userInfo.headUrl,
-                          relationType: userInfo.relationType,
-                          courseInfo: this.detailList,
-                          recomUserId: ''
-                        }
-                      ]
-                      await onSubmitZero(() => {
-                        Dialog.alert({
-                          message: '领取成功',
-                          confirmButtonText: '确定',
-                          confirmButtonColor: '#2dc7aa'
-                        }).then(() => {
-                          this.__init()
-                        })
-                      })
-                    } catch {
-                      //
-                    }
-                  }}
-                />
-              )
-          }}
-        />
-        {/* </Sticky> */}
-        <Cell
-          border={false}
-          class={styles.cell}
-          title={this.title}
-          titleClass={[styles.titleInfo, 'van-ellipsis']}
-          v-slots={{
-            icon: () => (
-              <Icon
-                name="video"
-                size={18}
-                color="var(--van-primary)"
-                style={{ display: 'flex', alignItems: 'center' }}
-              />
-            ),
-            value: () => (
-              <div class={styles.label}>
-                <span>{this.currentClassIndex}</span>/{this.detailList.length}
-                课时
-              </div>
-            )
-          }}
-        ></Cell>
-        <div class={styles.videoDesc}>{this.videoContent}</div>
+          <div style="overflow: hidden">
+            <Cell
+              border={false}
+              class={styles.cell}
+              title={this.title}
+              titleClass={[styles.titleInfo, 'van-ellipsis']}
+              v-slots={{
+                icon: () => (
+                  <Icon
+                    name="video"
+                    size={18}
+                    color="var(--van-primary)"
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  />
+                ),
+                value: () => (
+                  <div class={styles.label}>
+                    <span>{this.currentClassIndex}</span>/
+                    {this.detailList.length}
+                    课时
+                  </div>
+                )
+              }}
+            ></Cell>
+            <div class={styles.videoDesc}>{this.videoContent}</div>
+          </div>
+        </ColSticky>
 
         <Tabs
           v-model:active={this.tabIndex}
@@ -343,10 +355,16 @@ export default defineComponent({
             <div
               style={{
                 // height: `calc(100vh - 320px - ${this.navHeight}px)`,
+                height:
+                  'calc(100vh  - var(--van-tabs-line-height) - var(--header-height))',
                 overflowY: 'auto'
               }}
             >
-              <SectionDetail title="课程列表" icon="courseList" border>
+              <SectionDetail
+                title="课程列表"
+                icon="courseList"
+                style={{ marginBottom: '12px' }}
+              >
                 {this.detailList.map((item: any, index: number) => {
                   const musicAlbumInfos = item.musicAlbumInfos || []
                   const temp = musicAlbumInfos.map((info: any) => {
@@ -400,6 +418,7 @@ export default defineComponent({
               style={{
                 // height: `calc(100vh - 380px - ${this.navHeight}px)`,
                 overflowY: 'auto',
+                height: `calc(100vh - var(--van-tabs-line-height) - var(--header-height) - (var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height)))`,
                 marginBottom:
                   'calc(var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height))'
               }}

src/student/video-class/video-detail.tsx

@@ -83,6 +83,7 @@ export default defineComponent({
           lessonNum: lessonGroup.lessonCount,
           lessonName: lessonGroup.lessonName,
           payType: lessonGroup.payType,
+          type: 'video',
           lessonDesc: lessonGroup.lessonDesc,
           lessonPrice: lessonGroup.lessonPrice,
           relationType: lessonGroup.relationType,

src/teacher/live-class/live-detail.tsx

@@ -54,6 +54,7 @@ export default defineComponent({
           )}~${dayjs(endTime).format('HH:mm')}` || '',
         lessonPrice: live.coursePrice,
         buyNum: live.studentCount || 0,
+        type: 'live',
         lessonId: live.courseGroupId,
         lessonNum: live.courseNum || 0, // 课时数
         lessonDesc: live.courseIntroduce,

src/teacher/share-page/share-live/index.tsx

@@ -53,6 +53,7 @@ export default defineComponent({
           `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
             'HH:mm'
           )}~${dayjs(endTime).format('HH:mm')}` || '',
+        type: 'live',
         lessonPrice: live.coursePrice,
         buyNum: live.studentCount || 0,
         lessonNum: live.courseNum || 0, // 课时数

src/teacher/share-page/share-video/index.tsx

@@ -97,6 +97,7 @@ export default defineComponent({
         buyNum: lessonGroup.countStudent,
         lessonNum: lessonGroup.lessonCount,
         payType: lessonGroup.payType,
+        type: 'video',
         lessonName: lessonGroup.lessonName,
         lessonDesc: lessonGroup.lessonDesc,
         lessonPrice: lessonGroup.lessonPrice,

src/teacher/video-class/create-submit.tsx

@@ -22,6 +22,7 @@ export default defineComponent({
         lessonName: videoDetail.lessonName,
         buyNum: 0,
         payType: videoDetail.payType,
+        type: 'video',
         lessonDesc: videoDetail.lessonDesc,
         lessonPrice: videoDetail.lessonPrice,
         lessonCoverUrl:

src/teacher/video-class/video-class-detail.module.less

@@ -1,144 +1,159 @@
-.video-class-detail {
-  .cell {
-    // margin-bottom: 6px;
-  }
-  .titleInfo {
-    padding-left: 8px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #1a1a1a;
-    flex: 1 auto;
-  }
-  .label {
-    font-size: 14px;
-    font-weight: 600;
-    span {
-      color: var(--van-primary);
-    }
-  }
-
-  :global {
-    .van-tab--active {
-      color: var(--van-primary);
-    }
-    .van-field__value {
-      background: #f7f7f7;
-      border-radius: 30px;
-      padding-left: 15px;
-    }
-
-    .van-tab__panel {
-      overflow: hidden;
-    }
-  }
-
-  .open-teacher-info {
-    margin: 12px 14px 8px;
-    width: auto;
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 14px 15px;
-    .userLogo {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-    :global {
-      .van-cell__value {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-
-    .teacher-info {
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-      padding-left: 8px;
-      .users {
-        display: flex;
-        padding-top: 5px;
-      }
-      .teacher-name {
-        font-weight: 500;
-        color: #1a1a1a;
-        line-height: 1.2;
-        font-size: 16px;
-        padding-right: 8px;
-      }
-      .level {
-        padding-top: 5px;
-        line-height: 1.2;
-        font-size: 12px;
-        color: #999999;
-      }
-    }
-
-    .teacher-desc {
-      display: flex;
-      align-items: center;
-    }
-  }
-  .videoDesc {
-    background-color: #fff;
-    padding: 0 14px 16px;
-    margin-bottom: 6px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #7a7a7a;
-  }
-
-  .message-list {
-    &.message-active {
-      .title,
-      .label {
-        color: var(--van-primary) !important;
-      }
-    }
-    .message-name {
-      flex-basis: 65%;
-      line-height: 1.2;
-    }
-    .message-time {
-      font-size: 12px;
-      color: #999;
-      flex-basis: 35%;
-    }
-
-    .userLogo {
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      margin-right: 8px;
-      overflow: hidden;
-    }
-    .title {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
-      color: #999;
-      font-weight: 500;
-    }
-    .label {
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-
-  .isFixed {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.messageContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+.video-class-detail {
+  .cell {
+    // margin-bottom: 6px;
+  }
+
+  .titleInfo {
+    padding-left: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1a1a1a;
+    flex: 1 auto;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 600;
+
+    span {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    .van-tab--active {
+      color: var(--van-primary);
+    }
+
+    .van-field__value {
+      background: #f7f7f7;
+      border-radius: 30px;
+      padding-left: 15px;
+    }
+
+    .van-tab__panel {
+      overflow: hidden;
+    }
+  }
+
+  .open-teacher-info {
+    margin: 12px 14px 8px;
+    width: auto;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 14px 15px;
+
+    .userLogo {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    :global {
+      .van-cell__value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    .teacher-info {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding-left: 8px;
+
+      .users {
+        display: flex;
+        padding-top: 5px;
+      }
+
+      .teacher-name {
+        font-weight: 500;
+        color: #1a1a1a;
+        line-height: 1.2;
+        font-size: 16px;
+        padding-right: 8px;
+      }
+
+      .level {
+        padding-top: 5px;
+        line-height: 1.2;
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+
+    .teacher-desc {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .videoDesc {
+    background-color: #fff;
+    padding: 0 14px 12px;
+    margin-bottom: 6px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #7a7a7a;
+  }
+
+  .message-list {
+    &.message-active {
+
+      .title,
+      .label {
+        color: var(--van-primary) !important;
+      }
+    }
+
+    .message-name {
+      flex-basis: 65%;
+      line-height: 1.2;
+    }
+
+    .message-time {
+      font-size: 12px;
+      color: #999;
+      flex-basis: 35%;
+    }
+
+    .userLogo {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      margin-right: 8px;
+      overflow: hidden;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+      font-weight: 500;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+
+  .isFixed {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.messageContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

src/teacher/video-class/video-class-detail.tsx

@@ -23,6 +23,7 @@ import { state } from '@/state'
 import iconStudent from '@common/images/icon_student.png'
 import dayjs from 'dayjs'
 import ColResult from '@/components/col-result'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'VideoClassDetail',
@@ -55,18 +56,19 @@ export default defineComponent({
       },
       freeRate: 0, // 试看百分比
       trySee: false, // 是否试看
-      videoHeight: '212px'
+      videoHeight: '212px',
+      offsetTop: 'auto'
     }
   },
   computed: {
     users() {
       return state.user.data
-    },
-    offsetTop() {
-      const navHeight: number = this.navHeight
-      const top = Number(navHeight) + 44
-      return top + 'px'
     }
+    // offsetTop() {
+    //   const navHeight: number = this.navHeight
+    //   const top = Number(navHeight) + 44
+    //   return top + 'px'
+    // }
   },
   async mounted() {
     this.navHeight = sessionStorage.getItem('navHeight') || 0
@@ -185,54 +187,52 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['video-class-detail']}>
-        {/* <ColHeader
-          v-slots={{
-            default: () => (
-              <ColVideo
-                src={this.srcUrl}
-                poster={this.posterUrl}
-                freeRate={Number(this.freeRate)}
-                trySee={this.trySee}
-                height={this.videoHeight}
-              />
-            )
-          }}
-        /> */}
-        <ColHeader />
-        <ColVideo
-          src={this.srcUrl}
-          poster={this.posterUrl}
-          freeTitleStatus={
-            this.lessonPrice > 0 || this.payType === 'VIP' ? true : false
-          }
-          freeRate={Number(this.freeRate)}
-          payType={this.payType}
-          trySee={this.trySee}
-          height={this.videoHeight}
-        />
-        <Cell
-          border={false}
-          class={styles.cell}
-          title={this.title}
-          titleClass={styles.titleInfo}
-          v-slots={{
-            icon: () => (
-              <Icon
-                name="video"
-                size={18}
-                color="var(--van-primary)"
-                style={{ display: 'flex', alignItems: 'center' }}
-              />
-            ),
-            value: () => (
-              <div class={styles.label}>
-                <span>{this.currentClassIndex}</span>/{this.detailList.length}
-                课时
-              </div>
-            )
+        <ColSticky
+          position="top"
+          onGetHeight={(val: any) => {
+            console.log(val)
+            this.offsetTop = val + 'px'
           }}
-        ></Cell>
-        <div class={styles.videoDesc}>{this.videoContent}</div>
+        >
+          <ColHeader />
+          <ColVideo
+            src={this.srcUrl}
+            poster={this.posterUrl}
+            freeTitleStatus={
+              this.lessonPrice > 0 || this.payType === 'VIP' ? true : false
+            }
+            freeRate={Number(this.freeRate)}
+            payType={this.payType}
+            trySee={this.trySee}
+            height={this.videoHeight}
+          />
+          <div style="overflow: hidden">
+            <Cell
+              border={false}
+              class={styles.cell}
+              title={this.title}
+              titleClass={styles.titleInfo}
+              v-slots={{
+                icon: () => (
+                  <Icon
+                    name="video"
+                    size={18}
+                    color="var(--van-primary)"
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  />
+                ),
+                value: () => (
+                  <div class={styles.label}>
+                    <span>{this.currentClassIndex}</span>/
+                    {this.detailList.length}
+                    课时
+                  </div>
+                )
+              }}
+            ></Cell>
+            <div class={styles.videoDesc}>{this.videoContent}</div>
+          </div>
+        </ColSticky>
 
         <Tabs
           v-model:active={this.tabIndex}
@@ -244,8 +244,18 @@ export default defineComponent({
           offsetTop={this.offsetTop}
         >
           <Tab title="目录" name={1}>
-            <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>
-              <SectionDetail title="课程列表" icon="courseList">
+            <div
+              style={{
+                height:
+                  'calc(100vh  - var(--van-tabs-line-height) - var(--header-height))',
+                overflowY: 'auto'
+              }}
+            >
+              <SectionDetail
+                title="课程列表"
+                icon="courseList"
+                style={{ marginBottom: '12px' }}
+              >
                 {this.detailList.map((item: any, index: number) => {
                   const musicAlbumInfos = item.musicAlbumInfos || []
                   const temp = musicAlbumInfos.map((info: any) => {
@@ -298,6 +308,7 @@ export default defineComponent({
             <div
               style={{
                 overflowY: 'auto',
+                height: `calc(100vh - var(--van-tabs-line-height) - var(--header-height) - (var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height)))`,
                 marginBottom:
                   'calc(var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height))'
               }}

src/teacher/video-class/video-detail.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
         lessonId: result.lessonGroup.id,
         lessonNum: result.lessonGroup.lessonCount,
         payType: result.lessonGroup.payType,
+        type: 'video',
         lessonName: result.lessonGroup.lessonName,
         lessonDesc: result.lessonGroup.lessonDesc,
         lessonPrice: result.lessonGroup.lessonPrice,