添加课件播放

src/components/o-guide/index.module.less

@@ -4,10 +4,14 @@
   :global {
     .van-tabs__nav {
       background-color: transparent;
+      --van-tabs-bottom-bar-width: 16px;
       .van-tab {
-        color: #fff;
+        color: rgba(255,255,255,.5);
         font-size: 16px;
       }
+      .van-tab--active {
+        color: #fff;
+      }
     }
     .van-tab__panel {
       height: calc(100vh - var(--van-tabs-line-height));
@@ -20,6 +24,9 @@
     }
     .van-tabs__line{
       bottom: .5rem;
+      background: linear-gradient( 135deg, #FF9A60 0%, #FF4E2B 100%);
+      width: 16px;
+      height: 4px;
     }
   }
   .content {

src/views/courseList/index.module.less

@@ -192,13 +192,21 @@
 
 .courseDialog {
   padding: 20px;
+  border-radius: 20px;
+  &::before {
+    content: '';
+    width: 100%;
+    height: 49px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: linear-gradient(to bottom, #FFEADA, #ffffff);
+  }
+
 
-  // :global {
-  //   .van-popup__close-icon {
-  //     color: #333;
-  //     top: 24px;
-  //   }
-  // }
   .iconClose {
     width: 18px;
     height: 19px;

src/views/courseList/index.tsx

@@ -446,7 +446,7 @@ export default defineComponent({
         {data.loading && <OLoading />}
         {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
 
-        <Popup v-model:show={data.catchStatus} round class={styles.courseDialog}>
+        <Popup v-model:show={data.catchStatus} class={styles.courseDialog}>
           <i class={styles.iconClose} onClick={() => (data.catchStatus = false)}></i>
           <div class={styles.title}>下载提醒</div>
 

src/views/coursewarePlay/component/courseware-type/index.module.less

@@ -23,7 +23,8 @@
     margin-right: 6px;
   }
   span {
-    line-height: 20px;
+    line-height: 1.3;
+    padding-top: 1px;
   }
 }
 

src/views/coursewarePlay/component/play-loading/index.module.less

@@ -0,0 +1,47 @@
+.audioAnimate {
+  // position: absolute;
+  // left: 0;
+  // right: 0;
+  // top: 0;
+  // bottom: 0;
+  // background-color: rgba(0, 0, 0, .6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 30%;
+
+  div {
+    width: 2px;
+    height: 10px;
+    background: linear-gradient(135deg, #FF8057; 0%, #FF8057 100%);
+    transform-origin: bottom;
+    border-radius: 5px;
+    margin: 0 1px 0;
+  }
+
+  & div:nth-child(1) {
+    animation: musicWave 0.5s infinite linear both alternate;
+  }
+
+  & div:nth-child(2) {
+    animation: musicWave 0.2s infinite linear both alternate;
+  }
+
+  & div:nth-child(3) {
+    animation: musicWave 0.6s infinite linear both alternate;
+  }
+
+  & div:nth-child(4) {
+    animation: musicWave 0.3s infinite linear both alternate;
+  }
+}
+
+@keyframes musicWave {
+  0% {
+    height: 3px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}

src/views/coursewarePlay/component/play-loading/index.tsx

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'playLoading',
+  setup() {
+    return () => (
+      <div class={styles.audioAnimate}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    );
+  }
+});

src/views/coursewarePlay/component/point.module.less

@@ -13,11 +13,16 @@
   align-items: center;
   padding: 13px 10px 15px 15px;
   flex-shrink: 0;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 16px;
   img {
-    width: 16px;
-    height: 16px;
-    margin-right: 7px;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+  span {
+    line-height: 1.3;
+    padding-top: 1px;
   }
 }
 .content {
@@ -107,9 +112,10 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 4px 5px 4px 0;
+  padding: 5px 5px 5px 0;
   border-radius: 6px;
   font-size: 12px;
+  position: relative;
   :global {
     .van-icon {
       display: none;
@@ -124,11 +130,21 @@
   }
 }
 .itemActive {
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(255, 128, 87, .15);
   color: var(--van-primary);
   :global {
     .van-icon {
       display: block;
     }
   }
+  .playLoading {
+    display: block;
+  }
+}
+.playLoading {
+  display: none;
+  font-size: 12px;
+  position: absolute;
+  right: 4px;
+  top: 9px;
 }

src/views/coursewarePlay/component/points.tsx

@@ -11,6 +11,7 @@ import {
   iconSongActive
 } from '../image/icons.json'
 import { Collapse, CollapseItem, Icon, Image } from 'vant'
+import PlayLoading from './play-loading'
 export default defineComponent({
   name: 'points-list',
   props: {
@@ -59,7 +60,7 @@ export default defineComponent({
       <div class={styles.container}>
         <div class={styles.pointHead}>
           <img src={iconMulv} />
-          知识点目录
+          <span>知识点目录</span>
         </div>
         <div class={styles.content}>
           <Collapse
@@ -103,7 +104,10 @@ export default defineComponent({
                                 <span style={{ width: '80%' }} class="van-ellipsis">
                                   {n.name}
                                 </span>
-                                <Icon name={iconZhibo} />
+                                {/* <Icon name={iconZhibo} /> */}
+                                <div class={styles.playLoading}>
+                                  <PlayLoading />
+                                </div>
                               </div>
                             )
                           })}
@@ -153,7 +157,10 @@ export default defineComponent({
                                                 <span style={{ width: '73%' }} class="van-ellipsis">
                                                   {n.name}
                                                 </span>
-                                                <Icon name={iconZhibo} />
+                                                {/* <Icon name={iconZhibo} /> */}
+                                                <div class={styles.playLoading}>
+                                                  <PlayLoading />
+                                                </div>
                                               </div>
                                             )
                                           })}

src/views/coursewarePlay/component/tools/pen.module.less

@@ -4,7 +4,7 @@
     right: 0;
     bottom: 0;
     top: 0;
-    z-index: 11;
+    z-index: 9999;
 }
 .open{
     display: block;
@@ -23,7 +23,7 @@
 }
 .rightItem{
     position: absolute;
-    right: 15Px;
+    right: 8Px;
     bottom: 0;
     bottom: constant(safe-area-inset-bottom);
     bottom: env(safe-area-inset-bottom);

src/views/coursewarePlay/component/tools/pen.tsx

@@ -3,10 +3,19 @@ import html2canvas from 'html2canvas'
 import { closeToast, Icon, showFailToast, showLoadingToast, showSuccessToast } from 'vant'
 import { defineComponent, toRefs, ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
 import styles from './pen.module.less'
+import Tips, { tipState } from '../tips'
 
 export default defineComponent({
   name: 'pen',
   props: {
+    isWhite: {
+      type: Boolean,
+      default: false
+    },
+    tip: {
+      type: String,
+      default: '请确认是否退出？'
+    },
     show: {
       type: Boolean,
       default: false
@@ -20,8 +29,9 @@ export default defineComponent({
     const { show } = toRefs(props)
     const firstRender = ref(true)
     const src = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn/whiteboard-noCollab'
-      : `${location.origin}/whiteboard-noCollab`
+    ? 'https://test.lexiaoya.cn/whiteboard-noCollab?platform=orchestra'
+    : `https://online.lexiaoya.cn/whiteboard-noCollab?platform=orchestra`;
+
 
     const exportImg = (event: MessageEvent) => {
       const data = event.data
@@ -110,6 +120,9 @@ export default defineComponent({
       >
         <iframe
           class={styles.iframe}
+          style={{
+            background: props.isWhite ? '#fff' : 'transparent'
+          }}
           frameborder="0"
           width="100vw"
           height="100vh"
@@ -121,7 +134,10 @@ export default defineComponent({
         {imgs.exported ? (
           <img crossorigin="anonymous" class={styles.img} src={imgs.base64} />
         ) : (
-          <div class={styles.rightItem} onClick={() => props.close()}>
+          <div class={styles.rightItem} onClick={() => {
+            tipState.content = props.tip
+            tipState.show = true
+          }}>
             <svg width="22px" height="20px" viewBox="0 0 22 20">
               <path
                 transform="translate(-1.000000, -2.000000)"
@@ -131,6 +147,11 @@ export default defineComponent({
             </svg>
           </div>
         )}
+
+        <Tips onConfirm={() => {
+          props.close()
+          tipState.show = false
+        }} />
       </div>
     )
   }

src/views/coursewarePlay/component/video-play.tsx

@@ -464,7 +464,7 @@ export default defineComponent({
               }}
             ></i>
             <Slider
-              min={0.6}
+              min={0.5}
               max={1.5}
               step={0.1}
               v-model={data.defaultSpeed}
@@ -489,7 +489,7 @@ export default defineComponent({
             <i
               class={[styles.iconCut]}
               onClick={() => {
-                if (data.defaultSpeed <= 0.6) {
+                if (data.defaultSpeed <= 0.5) {
                   return
                 }
                 if (videoItem.value) {

src/views/coursewarePlay/index.module.less

@@ -397,7 +397,7 @@
 .playRecordTime {
   // width: 90px;
   // margin-right: 10px;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   font-size: 12px;
   padding: 6px 8px;
@@ -407,8 +407,8 @@
   color: #fff;
 
   .timeLoad {
-    width: 5px;
-    height: 5px;
+    width: 4px;
+    height: 4px;
     background: #ff4e19;
     // border: 0.5px solid #ffffff;
     border-radius: 50%;
@@ -452,9 +452,6 @@
   height: 30px;
   background: url('./image/btn_go_practice.png') no-repeat center;
   background-size: contain;
-  // position: absolute;
-  // right: 16px;
-  // bottom: 60px;
   z-index: 11;
   transition: all .5s ease;
 

src/views/coursewarePlay/index.tsx

@@ -9,7 +9,8 @@ import {
   watch,
   Transition,
   computed,
-  onBeforeUnmount
+  onBeforeUnmount,
+  shallowRef
 } from 'vue'
 import iconBack from './image/back.png'
 import styles from './index.module.less'
@@ -40,6 +41,7 @@ import VideoPlay from './component/video-play'
 import CoursewareType from './component/courseware-type'
 import CoursewareTips from './component/courseware-tips'
 import GlobalTools from '@/components/globalTools'
+import { isPlay, penShow, toolOpen, whitePenShow } from '@/components/globalTools/globalTools'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -115,6 +117,7 @@ export default defineComponent({
 
     const route = useRoute()
     const headeRef = ref()
+    const isCurrentCoursewareMenu = shallowRef(true) // 是否为当前选的课程类型
     const data = reactive({
       currentId: route.query.id as any,
       detail: null as any,
@@ -466,7 +469,7 @@ export default defineComponent({
 
     const getRefLevel = async (id?: any) => {
       try {
-        const res = await request.post(state.platformApi + '/tenantAlbumMusic/refLevel', {
+        const res = await request.post(state.platformApi + '/lessonCoursewareDetail/refLevel', {
           data: {
             lessonCoursewareDetailId: id || route.query.id
           }
@@ -484,7 +487,10 @@ export default defineComponent({
       if (state.platformType === 'STUDENT') {
         await getLookVideoData()
       }
-      await getRefLevel()
+      // 只有老师有 课程类型 切换
+      if(state.platformType === "TEACHER") {
+        await getRefLevel()
+      }
       await getDetail()
       const hasFree = String(data.detail?.accessScope) === '0'
       if (!hasFree) {
@@ -895,6 +901,28 @@ export default defineComponent({
       }
     )
 
+    // 白板的批注打开时暂停播放
+    watch(
+      () => [whitePenShow.value, penShow.value],
+      () => {
+        if (whitePenShow.value || penShow.value) {
+          handleStop()
+        }
+      }
+    )
+    // 是否收起
+    watch(
+      () => activeData.model,
+      () => {
+        if (activeData.model) {
+            isPlay.value = false
+        } else {
+            isPlay.value = true
+            toolOpen.value = false
+        }
+      }
+    )
+
     /**
      * 初始化视频时长
      * @param newVal 播放状态
@@ -1017,6 +1045,9 @@ export default defineComponent({
                 onPlay={() => {
                   data.videoState = 'play'
                   data.animationState = 'end'
+                  if(whitePenShow.value || penShow.value || popupData.coursewareOpen || popupData.open || popupData.guideOpen || popupData.pointOpen) {
+                    handleStop()
+                  } 
                 }}
                 onLoadedmetadata={(videoItem: any) => {
                   data.videoState = 'play'
@@ -1027,7 +1058,7 @@ export default defineComponent({
                 }}
                 onPause={() => {
                   clearTimeout(activeData.timer)
-                  activeData.model = true
+                  // activeData.model = true
                   videoIntervalRef.pause()
                 }}
                 onSeeked={() => {
@@ -1169,7 +1200,7 @@ export default defineComponent({
             {activeData.model && (
               <div class={styles.leftFixedBtns} onClick={(e: Event) => e.stopPropagation()}>
                 <div class={[styles.btnsWrap, styles.prePoint]}>
-                  <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
+                  <div class={styles.fullBtn} onClick={() => (popupData.coursewareOpen = true)}>
                     <img src={iconCourseType} />
                   </div>
                   <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
@@ -1206,24 +1237,18 @@ export default defineComponent({
           class={styles.headerContainer}
           ref={headeRef}
         >
-          <div class={styles.backBtn} onClick={() => goback()}>
-            <Icon name={iconBack} />
+          <div class={styles.backBtn}>
+            <Icon name={iconBack}  onClick={() => goback()} />
             <div class={styles.titleSection}>
-              {/* <div class={styles.title}>{popupData.tabName}</div>
-              <div class={styles.titleContent}>
-                <p>第3条练习6-15小节-演奏-练习</p>
-                <span>阶段目标</span>
-                <span>检查事项</span>
-              </div> */}
-              <div class={styles.title}>{popupData.tabName}</div>
+              <div class={styles.title}  onClick={() => goback()}>{popupData.tabName}</div>
                 <div class={styles.titleContent}>
-                  <p>{data.itemList[popupData.activeIndex]?.name}</p>
+                  <p onClick={() => goback()}>{data.itemList[popupData.activeIndex]?.name}</p>
                   {data.detail?.lessonTargetDesc ? <span onClick={() => onTitleTip('phaseGoals', data.detail?.lessonTargetDesc)}>阶段目标</span>: ""}
                   {data.itemList[popupData.activeIndex]?.checkItem ? <span onClick={() => onTitleTip('checkItem', data.itemList[popupData.activeIndex]?.checkItem)}>检查事项</span> : ""}
                 </div>
             </div>
           </div>
-          {data.isCourse && <PlayRecordTime ref={playRef} list={data.knowledgePointList} />}
+          {data.isCourse && <PlayRecordTime ref={playRef} isCurrentCoursewareMenu={isCurrentCoursewareMenu.value} list={data.knowledgePointList} />}
           {/* <div
             class={styles.menu}
             onClick={() => {
@@ -1235,7 +1260,7 @@ export default defineComponent({
             {popupData.tabName}
           </div> */}
 
-          {state.platformType !== 'TEACHER' && (
+          {state.platformType === 'TEACHER' && (
             <div
               class={styles.headRight}
               onClick={(e: Event) => {
@@ -1279,7 +1304,7 @@ export default defineComponent({
 
         {/* 更多弹窗 */}
         <Popup
-          class={styles.popupMore}
+          class={[styles.popupMore, styles.popupCoursewarePlay]}
           overlayClass={styles.overlayClass}
           position="right"
           round
@@ -1290,8 +1315,7 @@ export default defineComponent({
         </Popup>
 
         <Popup
-          class={styles.popup}
-          style={{ background: 'rgba(0,0,0, 0.75)' }}
+          class={[styles.popup, styles.popupCoursewarePlay]}
           overlayClass={styles.overlayClass}
           position="right"
           round
@@ -1323,10 +1347,13 @@ export default defineComponent({
               if(data.currentId === item.id) {
                 return
               }
-              data.currentId = item.id;
+              
+              // 
               const n = await getDetail(item.id);
               const s = await getRefLevel(item.id);
               if(n && s) {
+                data.currentId = item.id;
+                isCurrentCoursewareMenu.value = item.id === route.query.id ? true : false
                 popupData.coursewareOpen = false;
                 popupData.activeIndex = 0;
                 nextTick(() => {

src/views/coursewarePlay/playRecordTime.tsx

@@ -2,7 +2,6 @@ import request from '@/helpers/request'
 import { getSecondRPM } from '@/helpers/utils'
 import { state } from '@/state'
 import { usePageVisibility } from '@vant/use'
-import dayjs from 'dayjs'
 import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
@@ -13,6 +12,10 @@ export default defineComponent({
     list: {
       type: Array,
       default: () => []
+    },
+    isCurrentCoursewareMenu: {
+      type: Boolean,
+      default: false,
     }
   },
   setup(props, { expose }) {
@@ -73,7 +76,6 @@ export default defineComponent({
       const playTime = saveModel.currentTime - saveModel.startTime
       // 1分钟记录1次
       if (playTime >= 5 || isOut) {
-        console.log('isOut', isOut)
         saveModel.startTime = saveModel.currentTime
         request.post(`${state.platformApi}/courseSchedule/coursewarePlayTime`, {
           params: {

src/views/exercise-after-class/index.module.less

@@ -28,22 +28,60 @@
   left: 0;
   right: 0;
   z-index: 1;
-  padding: 10px 24px;
   display: flex;
-  align-items: center;
-  color: #fff;
-  font-size: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
+  transition: transform 0.5s;
+  box-sizing: border-box;
 }
 
+
 .backBtn {
   color: #fff;
-  width: 40px;
-  height: 26px;
+  height: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   z-index: 10;
+  font-size: 18px;
+  padding: 12px 15px 20px 40px;
+
+  :global {
+    .van-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .titleSection {
+    .title {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+    }
+  }
+  .titleContent {
+    display: flex;
+    align-items: center;
+    padding-top: 6px;
+    p {
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+    }
+    span {
+      margin-left: 6px;
+      font-size: 11px;
+      color: #ffffff;
+      line-height: 1.3;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.7);
+      padding: 2px 8px;
+      box-sizing: content-box;
+    }
+  }
 }
 
 // .btnGroup {
@@ -74,19 +112,43 @@
 //     margin-bottom: 2px;
 //   }
 // }
+
+.nums {
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 20px;
+  font-size: 12px;
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin-right: 40px;
+  margin-top: 12px;
+
+  .timeLoad {
+    width: 4px;
+    height: 4px;
+    background: #ff4e19;
+    // border: 0.5px solid #ffffff;
+    border-radius: 50%;
+    margin-right: 6px;
+    // animation: loadFade 1s ease-in-out infinite;
+  }
+}
+
 .goPractice {
-  width: 89px;
-  height: 32px;
+  position: absolute;
+  right: 39px;
+  bottom: 12px;
+  width: 86px;
+  height: 30px;
   background: url('../coursewarePlay/image/btn_go_practice.png') no-repeat center;
   background-size: contain;
-  position: absolute;
-  right: 12px;
-  bottom: 70px;
   z-index: 11;
   transition: all .5s ease;
 
   &.hide {
-    transform: translateX(65px);
+    transform: translateY(55px);
   }
 }
 
@@ -220,36 +282,68 @@
   bottom: 0;
   z-index: 10;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
-  padding: 0 30px;
+  padding: 10px 0 0;
 
   .time {
     display: flex;
-    // justify-content: space-between;
+    flex-shrink: 0;
     color: #fff;
-    font-size: 10px;
-    padding: 4px 0;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 4px 0 4px 0;
+    width: 96px;
   }
 
   .slider {
-    padding: 10px 0;
+    // padding: 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // width: 100%;
+    padding: 0 40px 0;
+
+    --van-slider-button-width: 13px !important;
+    --van-slider-button-height: 13px !important;
+    --van-slider-active-background-color: #FF8057 !important;
+    --van-slider-bar-height: 2px !important;
+
+    :global {
+      .n-slider {
+        --n-handle-size: 13px !important;
+        --n-fill-color: var(--van-primary-color) !important;
+        --n-fill-color-hover: var(--van-primary-color) !important;
+      }
+
+      .van-loading {
+        width: 100%;
+        height: 100%;
+      }
+      .van-slider__button {
+        box-shadow: none;
+      }
+    }
   }
 
   .actions {
+    position: relative;
     display: flex;
-    justify-content: space-between;
-    color: #fff;
-    font-size: 12px;
     align-items: center;
+    justify-content: space-between;
+    padding: 8px 40px 12px 36px;
 
     .actionBtn {
       display: flex;
-    }
+      width: 28px;
+      height: 28px;
+      margin-right: 16px;
+      background: transparent;
+      box-sizing: content-box;
+
 
-    .actionBtn>img {
-      width: 26px;
-      height: 26px;
-      display: block;
-      padding: 8px 8px 14px 8px;
+      >img {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }

src/views/exercise-after-class/index.tsx

@@ -1,12 +1,12 @@
-import { Icon, showConfirmDialog, showToast, Swipe, SwipeItem } from 'vant'
+import { Icon, Popup, showConfirmDialog, showToast, Swipe, SwipeItem } from 'vant'
 import { defineComponent, onMounted, reactive, onUnmounted, ref, Transition, watch } from 'vue'
 import styles from './index.module.less'
 import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import { useRoute, useRouter } from 'vue-router'
-import iconBack from '../coursewarePlay/image/back.svg'
-import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+import iconBack from '../coursewarePlay/image/back.png'
+import { postMessage } from '@/helpers/native-message'
 // import iconLoop from '../coursewarePlay/image/icon-loop.svg'
 // import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
 // import iconplay from '../coursewarePlay/image/icon-play.svg'
@@ -21,6 +21,7 @@ import { handleCheckVip } from '../hook/useFee'
 import VideoClass from './video-class'
 import item from '@/student/coupons/item'
 import { usePageVisibility } from '@vant/use'
+import CoursewareTips from '../coursewarePlay/component/courseware-tips'
 
 const materialType = {
   视频: 'VIDEO',
@@ -36,19 +37,19 @@ export default defineComponent({
     const parentContainer = reactive({
       width: '100vw'
     })
-    const setContainer = () => {
-      const min = Math.min(screen.width, screen.height)
-      const max = Math.max(screen.width, screen.height)
-      const width = min * (16 / 9)
-      if (width > max) {
-        parentContainer.width = '100vw'
-        return
-      } else {
-        parentContainer.width = width + 'px'
-      }
-    }
+    // const setContainer = () => {
+    //   const min = Math.min(screen.width, screen.height)
+    //   const max = Math.max(screen.width, screen.height)
+    //   const width = min * (16 / 9)
+    //   if (width > max) {
+    //     parentContainer.width = '100vw'
+    //     return
+    //   } else {
+    //     parentContainer.width = width + 'px'
+    //   }
+    // }
     const handleInit = (type = 0) => {
-      setContainer()
+      // setContainer()
       // 横屏
       postMessage({
         api: 'setRequestedOrientation',
@@ -99,6 +100,16 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     })
+    const onTitleTip = (type: "phaseGoals" | "checkItem", text: string) => {
+      handleStopVideo()
+      popupData.pointOpen = true
+      popupData.pointContent = text
+      if(type === "checkItem") {
+        popupData.pointTitle = '检查事项'
+      } else if(type === "phaseGoals") {
+        popupData.pointTitle = '阶段目标'
+      }
+    }
     // 获取课后练习记录
     const getTrainingRecord = async () => {
       try {
@@ -186,6 +197,8 @@ export default defineComponent({
 
       setRecord(trainings)
       handleCheckVip()
+
+      console.log(activeData.model, data.itemList, 'itemList')
     })
     // 返回
     const goback = () => {
@@ -194,6 +207,9 @@ export default defineComponent({
 
     const swipeRef = ref()
     const popupData = reactive({
+      pointOpen: false,
+      pointContent: "", 
+      pointTitle: "",
       firstIndex: 0,
       open: false,
       activeIndex: -1,
@@ -414,16 +430,25 @@ export default defineComponent({
           <Transition name="top">
             {activeData.model && (
               <div class={styles.headerContainer} ref={headeRef}>
-                <div class={styles.backBtn} onClick={() => goback()}>
-                  <Icon name={iconBack} />
-                  返回
+                <div class={styles.backBtn}>
+                  <Icon name={iconBack}  onClick={() => goback()} />
+                  <div class={styles.titleSection}>
+                    <div class={styles.title}  onClick={() => goback()}>{popupData.tabName}</div>
+                      <div class={styles.titleContent}>
+                        <p>{data.itemList[0]?.materialName}</p>
+                        {/* {data.detail?.lessonTargetDesc ? <span onClick={() => onTitleTip('phaseGoals', data.detail?.lessonTargetDesc)}>阶段目标</span>: ""} */}
+                        {data.itemList[0]?.checkItem ? <span onClick={() => onTitleTip('checkItem', data.itemList[0]?.checkItem)}>检查事项</span> : ""}
+                      </div>
+                  </div>
                 </div>
-                <div class={styles.menu}>{popupData.tabName}</div>
                 {/* 判断作业是否过期 */}
                 {!data.expireTimeFlag && (
                   <div class={styles.nums}>
-                    观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
-                    {data.videoData?.trainingContent?.practiceTimes || 0}
+                    <div class={styles.timeLoad}></div>
+                    <div>
+                      观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
+                      {data.videoData?.trainingContent?.practiceTimes || 0}
+                    </div>
                   </div>
                 )}
               </div>
@@ -456,6 +481,16 @@ export default defineComponent({
             )} */}
           {/* </Transition> */}
         </div>
+
+        <Popup
+          class={[styles.popup, styles.popupPoint]}
+          round
+          style={{ background: 'transparent !important' }}
+          v-model:show={popupData.pointOpen}>
+          <CoursewareTips onClose={() => {
+            popupData.pointOpen = false
+          }} content={popupData.pointContent} titleName={popupData.pointTitle} />
+        </Popup>
       </div>
     )
   }

src/views/exercise-after-class/video-class.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, Transition, toRefs, nextTick } from 'vue'
+import { defineComponent, onMounted, ref, watch, Transition, toRefs, nextTick, reactive } from 'vue'
 import styles from './index.module.less'
 import { Slider } from 'vant'
 import iconplay from '../coursewarePlay/image/icon-play.svg'
@@ -116,7 +116,24 @@ export default defineComponent({
       }
     }
 
+    /** 设置播放容器 16:9 */
+    const parentContainer = reactive({
+      width: '100vw'
+    })
+    const setContainer = () => {
+      const min = Math.min(screen.width, screen.height)
+      const max = Math.max(screen.width, screen.height)
+      const width = min * (16 / 9)
+      if (width > max) {
+        parentContainer.width = '100vw'
+        return
+      } else {
+        parentContainer.width = width + 'px'
+      }
+    }
+
     onMounted(() => {
+      setContainer()
       videoItem.value = TCPlayer(videoID, {
         appID: '',
         controls: false,
@@ -145,31 +162,30 @@ export default defineComponent({
             emit('changeModal', !modal.value)
           }}
         >
-          <video
-            id={videoID}
-            style={{ height: '100%', width: '100%' }}
-            playsinline="false"
-            preload="auto"
-            class="player"
-            poster={iconVideobg}
-            data-vid={item.value.id}
-            src={item.value.content}
-            // loop={item.value.loop}
-            // autoplay={item.value.autoplay}
-            // muted={item.value.muted}
-          >
-            <source src={item.value.content} type="video/mp4" />
-          </video>
-          <div class={styles.videoSection}></div>
+          <div style={{ width: parentContainer.width, height: '100%', margin: '0 auto' }}>
+            <video
+              id={videoID}
+              style={{ height: '100%', width: '100%' }}
+              playsinline="false"
+              preload="auto"
+              class="player"
+              poster={iconVideobg}
+              data-vid={item.value.id}
+              src={item.value.content}
+            >
+              <source src={item.value.content} type="video/mp4" />
+            </video>
+            <div class={styles.videoSection}></div>
+          </div>
         </div>
         <Transition name="bottom">
           {modal.value && !item.value.muted && (
             <div class={styles.bottomFixedContainer}>
-              <div class={styles.time}>
-                <span>{getSecondRPM(item.value.currentTime)}</span>/
-                <span>{getSecondRPM(item.value.duration)}</span>
-              </div>
               <div class={styles.slider}>
+                <div class={styles.time}>
+                  <span>{getSecondRPM(item.value.currentTime)}</span>/
+                  <span>{getSecondRPM(item.value.duration)}</span>
+                </div>
                 {item.value.duration && (
                   <Slider
                     buttonSize={16}

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.lexiaoya.cn/';
-const proxyUrl = 'https://test.lexiaoya.cn/'
+const proxyUrl = 'https://dev.lexiaoya.cn/'
 // const proxyUrl = 'http://47.98.131.38:8989/'
 // const proxyUrl = 'http://192.168.3.20:8989/' // 邹旋
 // const proxyUrl = 'http://192.168.3.143:8989/' // 尚科