style: 样式修改

src/helpers/utils.ts

@@ -528,3 +528,14 @@ export const sortMusical = (name: string, index: number) => {
   }
   return sortId;
 };
+
+
+/** debounce */
+export const debounce = (fn: Function, ms = 0) => {
+	let timeoutId: number | undefined;
+	return function(...args: any[]) {
+	  clearTimeout(timeoutId)
+	  // @ts-ignore
+	  timeoutId = setTimeout(() => fn.apply(this, args), ms);
+	}
+}

src/views/courseware-list/component/book/index.tsx

@@ -54,6 +54,7 @@ export default defineComponent({
     const router = useRouter();
     console.log(state.user.data.phone);
     const lastTimeKey = 'lastTime' + (state?.user?.data?.phone ?? '');
+    const debounceSkip = ref(false);
     const data = reactive({
       show: false,
       width: 0,
@@ -327,6 +328,8 @@ export default defineComponent({
     };
     const handleOpenPlay = async (item: any) => {
       if (item.id) {
+        if( debounceSkip.value ) return;
+        debounceSkip.value = true;
         localStorage.setItem(lastTimeKey, item.id);
         const query = queryString.stringify({
           id: item.id, // 课件id
@@ -341,6 +344,7 @@ export default defineComponent({
         const url =
           location.origin + location.pathname + '#/courseware-play?' + query;
         console.log('🚀 ~ url:', url);
+        debounceSkip.value = false;
         postMessage({
           api: 'openWebView',
           content: {

src/views/courseware-play/component/instrument-info/index.module.less

@@ -12,7 +12,7 @@
   }
 
   .left {
-    width: 195px;
+    width: 180px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -48,6 +48,7 @@
       .insName {
         color: #131415;
         font-size: 14px;
+        font-weight: 500;
         margin-bottom: 2px;
       }
 
@@ -109,9 +110,9 @@
 
       .songName {
         margin-top: 4px;
-        font-size: 16px;
-        color: #131415;
+        font-size: 14px;
         font-weight: 500;
+        color: #131415;
         width: 100%;
         :global {
             .van-notice-bar__wrap {
@@ -152,7 +153,7 @@
     }
 
     .insList {
-      width: 103%;
+      width: 104%;
       padding-right: 3%;
       flex: 1;
       display: flex;
@@ -239,6 +240,7 @@
         width: 4px;
         height: 4px;
         background-color: transparent;
+        z-index: 999;
       }
 
       &::-webkit-scrollbar-thumb {
@@ -291,6 +293,7 @@
 
       &::-webkit-scrollbar-thumb {
         border-radius: 10px;
+        min-height: 50px;
         background-color: #CBCBCB;
       }
     }

src/views/courseware-play/component/instrument-info/index.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
   emits: ['close', 'select'],
   setup(props, { emit }) {
     const route = useRoute();
+    const initDone = ref(false);
     const forms = reactive({
       detailId: route.query.detailId,
       loading: false,
@@ -48,7 +49,7 @@ export default defineComponent({
       title: ' ',
       playState: 'pause' as 'play' | 'pause',
       showPlayer: false,
-      listActive: null as any,
+      listActive: 0,
     });
     /** 选中的item */
     const activeItem = computed(() => {
@@ -79,6 +80,7 @@ export default defineComponent({
 
     /** 播放曲目 */
     const handlePlay = (item: any) => {
+      if (!initDone.value) initDone.value = true
       const index = forms.musicList.findIndex(
         (_item: any) => _item.id === item.id
       );
@@ -158,6 +160,7 @@ export default defineComponent({
                 text={forms.dataInfo.name}
                 color="#000"
                 class={styles.songName}
+                delay={1.5}
                 background="none"
               />
               <div class={styles.songWords}>
@@ -175,7 +178,7 @@ export default defineComponent({
               <img src={forms.dataInfo.avatar} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
-                {forms.dataInfo.knowledgeWikiCategoryName || ''}
+                {forms.dataInfo.knowledgeWikiCategories?.[0]?.knowledgeWikiCategoryTypeName || ''}
               </div>
             </div>
           )}
@@ -184,13 +187,13 @@ export default defineComponent({
               <img class={styles.musician} src={forms.dataInfo.avatar} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
-                {forms.dataInfo.knowledgeWikiCategoryName || ''}
+                {forms.dataInfo.knowledgeWikiCategories?.[0]?.knowledgeWikiCategoryTypeName || ''}
               </div>
             </div>
           )}
           <div class={styles.songColumn}>
             <img src={songIcon} />
-            <span>{props.type === 'instrument' ? '名曲鉴赏' : '代表作'}</span>
+            <span>{props.type === 'wiki' ? '名曲鉴赏' : '代表作'}</span>
           </div>
           <div class={styles.insList}>
             {forms.musicList.length ? (
@@ -198,27 +201,23 @@ export default defineComponent({
                 {forms.musicList.map((item: any, index: number) => {
                   return (
                     <div
-                      class={[styles.li, forms.listActive === index ? styles.liActive : '']}
+                      class={[styles.li, initDone.value && forms.listActive === index ? styles.liActive : '']}
                       onClick={(e: Event) => {
                         e.stopPropagation();
                         handlePlay(item);
                       }}>
                       <div class={styles.liBg}>
                         <img src={musicBg} />
-                        <PlayLoading
-                          class={[
-                            forms.listActive === index &&
-                            forms.playState === 'play'
-                              ? ''
-                              : styles.hidePlayLoading
-                          ]}
-                          /> 
+                        <div class={[forms.listActive === index && forms.playState === 'play' ? styles.playingIcon : styles.hidePlayLoading]}>
+                          <PlayLoading /> 
+                        </div>
                       </div>
                       {/* <div class={styles.liName}>{item.name || '--'}</div> */}
                       <NoticeBar
                         text={item.name}
                         color="#131415"
                         class={styles.liName}
+                        delay={1.5}
                         background="none"
                       />
                       {/* <img
@@ -249,9 +248,9 @@ export default defineComponent({
               src={props.type === 'musician' ? titleIcon2 : titleIcon1}
             />
             {props.type === 'wiki'
-              ? '乐器简介'
-              : props.type === 'instrument'
               ? '名曲故事'
+              : props.type === 'instrument'
+              ? '乐器简介'
               : props.type === 'musician'
               ? '个人简介'
               : ''}

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

@@ -8,7 +8,7 @@
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    padding-bottom: 30%;
+    // padding-bottom: 30%;
 
     div {
         width: 5px;

src/views/courseware-play/component/point.module.less

@@ -35,6 +35,20 @@
     width: 0;
     display: none;
   }
+  .collapseKnow:first-child {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      width: calc(100% - 10px);
+      height: 1px;
+      background: #D5E2EA;
+    }
+  }
+  .collapseKnow:nth-of-type(n+2) {
+    padding-top: 2px !important;
+  }
 }
 
 .matItem {
@@ -118,15 +132,6 @@
         color: #333 !important;
       }
     }
-    &::before {
-      content: "";
-      position: absolute;
-      left: 5px;
-      top: 10px;
-      width: calc(100% - 10px);
-      height: 1px;
-      background: #D5E2EA;
-    }
   }
   :global {
     .van-cell {

src/views/courseware-play/component/theory/index.module.less

@@ -12,11 +12,11 @@
         &::-webkit-scrollbar
         {
             width:4px;
-            height:4px;
             background-color: transparent;
         }
         &::-webkit-scrollbar-thumb
         {
+            min-height: 50px;
             border-radius:10px;
             background-color:#CBCBCB;
         }         

src/views/courseware-play/index.tsx

@@ -53,6 +53,7 @@ import Theory from './component/theory';
 import InstrumentInfo from './component/instrument-info';
 import TempoPractice from '../../views/tempo-practice';
 import SelectCoursewarePop from '@/components/select-courseware-pop';
+import { debounce } from "../../helpers/utils"
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -60,6 +61,7 @@ export default defineComponent({
     const pageVisibility = usePageVisibility();
     const lastTimeKey = 'lastTime' + (state?.user?.data?.phone ?? '');
     const showSelectCourseware = ref(false);
+    const debounceSkip = ref(false);
     /** 设置播放容器 16:9 */
     const parentContainer = reactive({
       width: '100vw'
@@ -877,6 +879,8 @@ export default defineComponent({
 
     // 加载新的章节里的课件
     const loadNewCourseware = async (item: any) => {
+      if( debounceSkip.value ) return;
+      debounceSkip.value = true;
       data.itemList = [];
       loadingClass.value = true;
       // activeData.coursewareDetailKnowledgeId = item.coursewareDetailKnowledgeId;
@@ -904,8 +908,9 @@ export default defineComponent({
       const dyItem = data.courseDetails.find((unit: any) => unit.id === activeData.lessonCoursewareDetailId)
       const zjItem = dyItem?.knowledgeList?.find((chapter: any) => chapter.id === activeData.coursewareDetailKnowledgeId)
       zjItem && (popupData.itemPointName = zjItem.name)
-      console.log('章节名称',popupData.itemPointName)
+      // console.log('章节名称',popupData.itemPointName)
       loadingClass.value = false;
+      debounceSkip.value = false;
     };
     // 通过章节id，检测此章节有几个课件
     const checkCourseware = async (item: any) => {