更新

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

@@ -1,212 +1,238 @@
 .knowledgeBg {
-    width: 100%;
+  width: 100%;
+  height: 100%;
+  background: #DDF2FF;
+  padding: 16px;
+  display: flex;
+  transition: all .2s ease;
+
+  &.wrapBottom {
+    padding-bottom: 70px;
+    transition: all .2s ease;
+  }
+
+  .left {
+    width: 250px;
     height: 100%;
-    background: #DDF2FF;
-    padding: 16px;
     display: flex;
-    .left {
-        width: 250px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        margin-right: 10px;
-        border-radius: 8px;
-        background: #fff;
-        padding: 16px;
-        .insTop {
-            height: 138px;
-            min-height: 138px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            border-bottom: 1px solid #F2F2F2;
-            >img {
-                width: 74px;
-                height: 74px;
-                border-radius: 50%;
-                margin-bottom: 8px;
-            }
-            .musician {
-                width: 66px;
-                height: 83px;
-                overflow: hidden;
-            }
-            .insName {
-                color: #131415;
-                font-size: 16px;
-                margin-bottom: 4px;
-            }
-            .insTro {
-                color: #777777;
-                font-size: 12px;
-            }
-            .imgSection {
-                
-                position: relative;
-                width: 61px;
-                height: 61px;
-                margin-top: 6px;
-            
-                .img {
-                  width: 61px;
-                  height: 61px;
-                  border-radius: 2px;
-                  overflow: hidden;
-                  position: relative;
-                  z-index: 9;
-                }
-            
-                &::before {
-                  content: '';
-                  position: absolute;
-                  left: 0;
-                  top: 0;
-                  z-index: 10;
-                  display: inline-block;
-                  width: 4px;
-                  height: 61px;
-                  background: linear-gradient(270deg, rgba(0, 0, 0, 0.13) 0%, rgba(255, 255, 255, 0) 100%);
-                }
-            
-                .pan {
-                  content: '';
-                  position: absolute;
-                  top: 2px;
-                  right: -16px;
-                  display: inline-block;
-                  width: 56px;
-                  height: 56px;
-                  background: url('../../image/icon-pan.png') no-repeat center;
-                  background-size: contain;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-            
-                  img {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 50%;
-                    overflow: hidden;
-                  }
-                }
-            }      
-            .songName {
-                width: 100%;
-                font-size: 15px;
-                color: #131415;
-                font-weight: 500;
-                margin: 12px 0 4px;
-            }    
-            .songWords {
-                font-size: 12px;
-                color: #777777;
-                margin-bottom: 8px;
-                >span {
-                    margin-right: 16px;
-                }
-            }  
+    flex-direction: column;
+    margin-right: 10px;
+    border-radius: 8px;
+    background: #fff;
+    padding: 16px;
+
+    .insTop {
+      height: 138px;
+      min-height: 138px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border-bottom: 1px solid #F2F2F2;
+
+      >img {
+        width: 74px;
+        height: 74px;
+        border-radius: 50%;
+        margin-bottom: 8px;
+      }
+
+      .musician {
+        width: 66px;
+        height: 83px;
+        overflow: hidden;
+      }
+
+      .insName {
+        color: #131415;
+        font-size: 16px;
+        margin-bottom: 4px;
+      }
+
+      .insTro {
+        color: #777777;
+        font-size: 12px;
+      }
+
+      .imgSection {
+
+        position: relative;
+        width: 61px;
+        height: 61px;
+        margin-top: 6px;
+
+        .img {
+          width: 61px;
+          height: 61px;
+          border-radius: 2px;
+          overflow: hidden;
+          position: relative;
+          z-index: 9;
+        }
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 10;
+          display: inline-block;
+          width: 4px;
+          height: 61px;
+          background: linear-gradient(270deg, rgba(0, 0, 0, 0.13) 0%, rgba(255, 255, 255, 0) 100%);
         }
 
-        .insList {
-            width: 103%;
-            padding-right: 3%;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow-y: scroll;
-            .li {
-                display: flex;
-                align-items: center;
-                padding: 12px 0;
-                .liBg {
-                    width: 28px;
-                    height: 28px;
-                    border-radius: 8px;
-                }
-                .liName {
-                    flex: 1;
-                    margin: 0 10px;
-                    overflow-x: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    font-size: 14px;
-                    color: #131415;
-                }
-                .liPlay {
-                    width: 20px;
-                    height: 20px;
-                }
-            }
-            .emptyBox {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding-top: 8px;
-                > img {
-                    width: 138px;
-                    height: 110px;
-                }
-                > span {
-                    font-size: 14px;
-                    color: #999999;
-                    margin-top: 6px;
-                }
-            }
-            &::-webkit-scrollbar
-            {
-                width:4px;
-                height:4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb
-            {
-                border-radius:10px;
-                background-color:#CBCBCB;
-            } 
+        .pan {
+          content: '';
+          position: absolute;
+          top: 2px;
+          right: -16px;
+          display: inline-block;
+          width: 56px;
+          height: 56px;
+          background: url('../../image/icon-pan.png') no-repeat center;
+          background-size: contain;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            overflow: hidden;
+          }
         }
+      }
+
+      .songName {
+        font-size: 16px;
+        color: #131415;
+        font-weight: 500;
+        margin: 12px 0 4px;
+      }
+
+      .songWords {
+        font-size: 12px;
+        color: #777777;
+
+        >span {
+          margin-right: 16px;
+        }
+      }
     }
-    .right {
+
+    .insList {
+      width: 103%;
+      padding-right: 3%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow-y: scroll;
+
+      .li {
+        display: flex;
+        align-items: center;
+        padding: 12px 0;
+
+        .liBg {
+          width: 28px;
+          height: 28px;
+          border-radius: 8px;
+        }
+
+        .liName {
+          flex: 1;
+          margin: 0 10px;
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 14px;
+          color: #131415;
+        }
+
+        .liPlay {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .emptyBox {
         flex: 1;
-        border-radius: 8px;
-        background: #fff;
-        padding: 16px;
         display: flex;
         flex-direction: column;
-        .title {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            color: #000000;
-            font-weight: 500;
-            margin-bottom: 15px;
-            >img {
-                width: 24px;
-                height: 24px;
-                margin-right: 8px;
-            }
+        align-items: center;
+        padding-top: 8px;
+
+        >img {
+          width: 138px;
+          height: 110px;
         }
-        .desc {
-            flex: 1;
-            overflow-y: scroll;
-            font-size: 14px;
-            line-height: 20px;
-        
-            img,
-            video {
-              width: 100% !important;
-            }
-            &::-webkit-scrollbar
-            {
-                width:4px;
-                height:4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb
-            {
-                border-radius:10px;
-                background-color:#CBCBCB;
-            }             
+
+        >span {
+          font-size: 14px;
+          color: #999999;
+          margin-top: 6px;
         }
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: #CBCBCB;
+      }
+    }
+  }
+
+  .right {
+    flex: 1;
+    border-radius: 8px;
+    background: #fff;
+    padding: 16px 6px 16px 16px;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #000000;
+      font-weight: 500;
+      margin-bottom: 15px;
+
+      >img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+
+    .desc {
+      flex: 1;
+      overflow-y: scroll;
+      font-size: 14px;
+      line-height: 20px;
+      padding-right: 10px;
+
+      img,
+      video {
+        width: 100% !important;
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: #CBCBCB;
+      }
     }
+  }
 }

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

@@ -1,4 +1,11 @@
-import { defineComponent, ref, reactive, onMounted } from 'vue';
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  computed,
+  watch
+} from 'vue';
 import { useRoute } from 'vue-router';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
@@ -7,8 +14,10 @@ import musicBg from '../../image/music_bg.png';
 import titleIcon1 from '../../image/title_icon1.png';
 import titleIcon2 from '../../image/title_icon2.png';
 import playIcon from '../../image/music_play_icon.png';
+import pauseIcon from '../../image/music_pause_icon.png';
 import emptyIcon from '../../image/ins-empty-icon.png';
 import { NoticeBar } from 'vant';
+import PlayItem from '../play-item';
 
 export default defineComponent({
   name: 'InstrumentInfo',
@@ -21,6 +30,10 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    show: {
+      type: Boolean,
+      default: false
+    }
   },
   emits: ['close', 'select'],
   setup(props, { emit }) {
@@ -31,7 +44,15 @@ export default defineComponent({
       dataInfo: {} as any,
       musicList: [] as any,
       title: ' ',
+      playState: 'pause' as 'play' | 'pause',
+      showPlayer: false,
+      listActive: 0
     });
+    /** 选中的item */
+    const activeItem = computed(() => {
+      return forms.musicList[forms.listActive] || {};
+    });
+
     const getDetail = async () => {
       forms.loading = true;
       try {
@@ -40,7 +61,7 @@ export default defineComponent({
         );
         data.intros = data.intros.replace(
           /<video/gi,
-          '<video style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
+          '<video class="video-music" style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
         );
         forms.dataInfo = data || {};
         forms.musicList = data.knowledgeWikiResources.map((item: any) => {
@@ -50,25 +71,86 @@ export default defineComponent({
             url: item.url
           };
         });
-        console.log(1111,forms.musicList)
       } catch {}
       forms.loading = false;
     };
+
+    /** 播放曲目 */
+    const handlePlay = (item: any) => {
+      const index = forms.musicList.findIndex(
+        (_item: any) => _item.id === item.id
+      );
+      if (index > -1) {
+        if (forms.listActive === index) {
+          forms.playState = forms.playState === 'play' ? 'pause' : 'play';
+        } else {
+          forms.playState = 'play';
+        }
+        forms.showPlayer = true;
+        forms.listActive = index;
+      }
+    };
+    /** 音频控制 */
+    const handleChangeAudio = (
+      type: 'play' | 'pause' | 'pre' | 'next' | 'favitor'
+    ) => {
+      if (type === 'play') {
+        forms.playState = 'play';
+      } else if (type === 'pause') {
+        forms.playState = 'pause';
+      } else if (type === 'pre') {
+        if (forms.musicList[forms.listActive - 1]) {
+          handlePlay(forms.musicList[forms.listActive - 1]);
+        }
+      } else if (type === 'next') {
+        if (forms.musicList[forms.listActive + 1]) {
+          handlePlay(forms.musicList[forms.listActive + 1]);
+        }
+      }
+    };
+
+    watch(
+      () => props.show,
+      val => {
+        if (val) {
+          // onToggleAudio();
+        } else {
+          //  audioRef.value.pause();
+          //  data.playState = 'pause';
+          handleChangeAudio('pause');
+          try {
+            // 暂停视频
+            const doms = document.querySelectorAll('.video-music');
+            if (doms && doms.length > 0) {
+              doms.forEach((dom: any) => {
+                dom.pause();
+              });
+            }
+          } catch {
+            //
+          }
+        }
+      }
+    );
+
     onMounted(async () => {
       await getDetail();
     });
     return () => (
-      <div class={styles.knowledgeBg}>
+      <div
+        class={[styles.knowledgeBg, forms.showPlayer ? styles.wrapBottom : '']}>
         <div class={styles.left}>
-          {
-            props.type === 'wiki' && 
+          {props.type === 'wiki' && (
             <div class={styles.insTop}>
               <div class={styles.imgSection}>
-                <img class={styles.img} src={forms.dataInfo.avatar || musicBg} />
+                <img
+                  class={styles.img}
+                  src={forms.dataInfo.avatar || musicBg}
+                />
                 <div class={styles.pan}>
                   <img src={forms.dataInfo.avatar || musicBg} />
                 </div>
-              </div> 
+              </div>
               {/* <div class={styles.songName}>{forms.dataInfo.name || '--'}</div>    */}
               <NoticeBar
                 text={forms.dataInfo.name}
@@ -83,53 +165,89 @@ export default defineComponent({
                 {forms.dataInfo.composers && (
                   <span>作曲：{forms.dataInfo.composers}</span>
                 )}
-              </div>                     
+              </div>
             </div>
-          }
-          { 
-            props.type === 'instrument' && 
+          )}
+          {props.type === 'instrument' && (
             <div class={styles.insTop}>
               <img src={forms.dataInfo.avatar} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
-              <div class={styles.insTro}>{forms.dataInfo.knowledgeWikiCategoryName || ''}</div>
+              <div class={styles.insTro}>
+                {forms.dataInfo.knowledgeWikiCategoryName || ''}
+              </div>
             </div>
-          }
-          { 
-            props.type === 'musician' && 
+          )}
+          {props.type === 'musician' && (
             <div class={styles.insTop}>
               <img class={styles.musician} src={forms.dataInfo.avatar} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
-              <div class={styles.insTro}>{forms.dataInfo.knowledgeWikiCategoryName || ''}</div>
+              <div class={styles.insTro}>
+                {forms.dataInfo.knowledgeWikiCategoryName || ''}
+              </div>
             </div>
-          }          
+          )}
           <div class={styles.insList}>
-            {
-              forms.musicList.length ? 
-                <>
-                  {forms.musicList.map((item: any, index: number) => {
-                    return (
-                      <div class={styles.li}>
-                        <img class={styles.liBg} src={musicBg} />
-                        <div class={styles.liName}>{item.name || '--'}</div>
-                        <img class={styles.liPlay} src={playIcon} />
-                      </div>
-                    );
-                  })}
-              </> : 
+            {forms.musicList.length ? (
+              <>
+                {forms.musicList.map((item: any, index: number) => {
+                  return (
+                    <div
+                      class={styles.li}
+                      onClick={(e: Event) => {
+                        e.stopPropagation();
+                        handlePlay(item);
+                      }}>
+                      <img class={styles.liBg} src={musicBg} />
+                      <div class={styles.liName}>{item.name || '--'}</div>
+                      <img
+                        class={styles.liPlay}
+                        src={
+                          forms.listActive === index &&
+                          forms.playState === 'play'
+                            ? pauseIcon
+                            : playIcon
+                        }
+                      />
+                    </div>
+                  );
+                })}
+              </>
+            ) : (
               <div class={styles.emptyBox}>
                 <img src={emptyIcon} />
                 <span>暂无曲目～</span>
               </div>
-            }
+            )}
           </div>
-        </div>       
+        </div>
         <div class={styles.right}>
-          <div class={styles.title}><img class={styles.liBg} src={ props.type === 'musician' ? titleIcon2 : titleIcon1 } />{props.type === 'wiki' ? '乐器简介' : props.type === 'instrument' ? '名曲故事' : props.type === 'musician' ? '个人简介' : ''}</div>
+          <div class={styles.title}>
+            <img
+              class={styles.liBg}
+              src={props.type === 'musician' ? titleIcon2 : titleIcon1}
+            />
+            {props.type === 'wiki'
+              ? '乐器简介'
+              : props.type === 'instrument'
+              ? '名曲故事'
+              : props.type === 'musician'
+              ? '个人简介'
+              : ''}
+          </div>
           <div class={styles.desc} v-html={forms.dataInfo.intros}></div>
           {!forms.loading && !forms.dataInfo.intros && (
             <MEmpty description="暂无内容" />
           )}
         </div>
+
+        {forms.musicList.length !== 0 && (
+          <PlayItem
+            show={forms.showPlayer}
+            playState={forms.playState}
+            item={activeItem.value}
+            onChange={value => handleChangeAudio(value)}
+          />
+        )}
       </div>
     );
   }

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

@@ -0,0 +1,194 @@
+.container {
+  position: fixed;
+  left: 100px;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 61px;
+  padding: 0 14px 0 34px;
+  background-color: #fff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: all .3s;
+
+  // &.previewcontainer {
+  //   left: 0;
+  //   padding-right: 380px;
+  // }
+
+  &.containerModal {
+    position: absolute;
+    left: 0;
+
+  }
+}
+
+.hidden {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .img {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 12px;
+    background-color: #000;
+    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+    padding: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    :global {
+      .n-image {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    img {
+      transition: opacity .3s;
+      opacity: 0;
+      animation: rotateImg 6s linear infinite;
+    }
+
+    &.imgRotate {
+      img {
+        animation-play-state: paused;
+      }
+    }
+
+    img[data-loaded="true"] {
+      opacity: 1;
+    }
+  }
+
+  .svgcontainer {
+    position: fixed;
+    z-index: -1000;
+    pointer-events: none;
+  }
+
+  .progress {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    width: 34px;
+    height: 34px;
+    pointer-events: none;
+    transform: rotate(180deg);
+
+    :global {
+      .n-progress-graph .n-progress-graph-circle .n-progress-graph-circle-fill {
+        stroke: url(#GradientProgress);
+      }
+    }
+  }
+
+  .title {
+    margin-right: 15px;
+    // width: 200px;
+
+    .titleName {
+      font-size: 13px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+      white-space: nowrap;
+      width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@keyframes rotateImg {
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.playBtns {
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+
+  // :global {
+  //   .van-button {
+  //     width: 20px;
+  //     height: 20px;
+
+  //     img {
+  //       width: 100%;
+  //       height: 100%;
+  //     }
+  //   }
+  // }
+  .btn1 {
+    width: 20px;
+    height: 20px;
+  }
+
+  .playBtn {
+    width: 25px;
+    height: 25px;
+    margin: 0 12px;
+    border-radius: 50%;
+    background: linear-gradient(to right bottom, #44CAFE, #007AFE);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      display: block;
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+
+.timeWrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  --van-slider-bar-height: 3px;
+  --van-slider-button-width: 7px !important;
+  --van-slider-button-height: 7px !important;
+  --van-slider-inactive-background: #E8E8E8;
+  --van-slider-active-background: #C8E7FF !important;
+  --van-slider-button-background: #269EFE;
+  --van-slider-button-shadow: none;
+
+  :global {
+    .van-slider__button-wrapper {
+      border: 3px solid rgba(38, 158, 254, 0.19);
+      border-radius: 50%;
+    }
+
+    // .van-slider__button {
+    //   border: 3px solid rgba(38, 158, 254, 0.19);
+    // }
+  }
+
+  .timeProgress {
+    margin-right: 14px;
+  }
+
+  .time {
+    width: 90px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-size: 12px;
+  }
+}

src/views/courseware-play/component/play-item/index.tsx

@@ -0,0 +1,267 @@
+import {
+  PropType,
+  Transition,
+  computed,
+  defineComponent,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { NButton, NImage, NProgress, NSlider } from 'naive-ui';
+// import { IMusicItem } from '../../type';
+import icon_pre from '../../image/icon_pre.png';
+import icon_next from '../../image/icon_next.png';
+import icon_play from '../../image/icon_play.png';
+import icon_pause from '../../image/icon_pause.png';
+import { Button, Circle, Slider } from 'vant';
+// import { getSecondRPM } from '/src/utils';
+// import TheNoticeBar from '/src/components/TheNoticeBar';
+
+// 秒转分
+export const getSecondRPM = (second: number, type?: string) => {
+  if (isNaN(second)) return '00:00';
+  const mm = Math.floor(second / 60)
+    .toString()
+    .padStart(2, '0');
+  const dd = Math.floor(second % 60)
+    .toString()
+    .padStart(2, '0');
+  if (type === 'cn') {
+    return mm + '分' + dd + '秒';
+  } else {
+    return mm + ':' + dd;
+  }
+};
+export default defineComponent({
+  name: 'playItem',
+  props: {
+    item: {
+      type: Object as PropType<any>,
+      default: () => ({})
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    playState: {
+      type: String as PropType<'play' | 'pause'>,
+      default: 'pause'
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    let timer = null as any;
+    const audioData = reactive({
+      isFirst: true,
+      duration: 0.1,
+      currentTime: 0
+    });
+    const audioRef = ref();
+
+    /** 加载成功 */
+    const onLoadedmetadata = () => {
+      audioData.duration = audioRef.value?.duration;
+      if (audioData.isFirst) {
+        audioData.isFirst = false;
+        return;
+      }
+      if (props.playState === 'play') {
+        audioRef.value.play();
+      }
+    };
+    /** 改变时间 */
+    const handleChangeTime = (val: number) => {
+      audioRef.value.pause();
+      audioData.currentTime = val;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        audioRef.value.currentTime = val;
+        if (props.playState === 'play') {
+          audioRef.value.play();
+        }
+        timer = null;
+      }, 300);
+    };
+    const time = computed(() => {
+      return `${getSecondRPM(audioData.currentTime)} / ${getSecondRPM(
+        audioData.duration
+      )}`;
+    });
+
+    watch(
+      () => props.playState,
+      val => {
+        if (val === 'play') {
+          audioRef.value.play();
+        } else {
+          audioRef.value.pause();
+        }
+      }
+    );
+
+    return () => (
+      <div
+        class={[
+          styles.container,
+          // props.type === 'preview' && styles.previewcontainer,
+          // props.type === 'modal' && styles.containerModal
+          styles.containerModal,
+          props.show ? styles.show : styles.hidden
+        ]}>
+        <div class={[styles.item]}>
+          <div
+            class={[
+              styles.img,
+              props.playState !== 'play' && styles.imgRotate
+            ]}>
+            <NImage
+              lazy
+              objectFit="cover"
+              previewDisabled={true}
+              src={'https://oss.dayaedu.com/klx/16983720423251690789356356.png'}
+              onLoad={e => {
+                (e.target as any).dataset.loaded = 'true';
+              }}
+            />
+
+            <svg class={styles.svgcontainer}>
+              <defs>
+                <linearGradient id="GradientProgress">
+                  <stop stop-color="#5BECFF" offset="0%" />
+                  <stop stop-color="#259CFE" offset="100%" />
+                </linearGradient>
+              </defs>
+            </svg>
+
+            <Circle
+              class={styles.progress}
+              currentRate={(audioData.currentTime / audioData.duration) * 100}
+              // currentRate={90}
+              strokeWidth={50}
+            />
+          </div>
+          <div class={styles.title}>
+            <div class={styles.titleName}>{props.item.name}</div>
+          </div>
+
+          <div class={styles.playBtns}>
+            {/* <Button
+              color="rgba(246,246,246,1)"
+              round
+              onClick={() => emit('change', 'pre')}>
+            </Button> */}
+            <img
+              class={styles.btn1}
+              src={icon_pre}
+              onClick={(e: any) => {
+                e.stopPropagation();
+                emit('change', 'pre');
+              }}
+            />
+
+            <div
+              class={styles.playBtn}
+              onClick={(e: any) => {
+                e.stopPropagation();
+                emit('change', props.playState === 'pause' ? 'play' : 'pause');
+              }}>
+              <img
+                style={{
+                  display: props.playState === 'pause' ? '' : 'none'
+                  // transform: 'scale(1.5) translateX(1px)'
+                }}
+                src={icon_play}
+              />
+              <img
+                style={{
+                  display: props.playState === 'play' ? '' : 'none'
+                  // transform: 'scale(1.5)'
+                }}
+                src={icon_pause}
+              />
+            </div>
+
+            <img
+              class={styles.btn1}
+              src={icon_next}
+              onClick={(e: any) => {
+                e.stopPropagation();
+                emit('change', 'next');
+              }}
+            />
+            {/* <Button
+              color="rgba(57,130,246,1)"
+              class={styles.playBtn}
+              round
+              onClick={() =>
+                emit('change', props.playState === 'pause' ? 'play' : 'pause')
+              }>
+              <img
+                style={{
+                  display: props.playState === 'pause' ? '' : 'none'
+                  // transform: 'scale(1.5) translateX(1px)'
+                }}
+                src={icon_play}
+              />
+              <img
+                style={{
+                  display: props.playState === 'play' ? '' : 'none'
+                  // transform: 'scale(1.5)'
+                }}
+                src={icon_pause}
+              />
+            </Button>
+            <Button
+              color="rgba(246,246,246,1)"
+              round
+              onClick={() => emit('change', 'next')}>
+              <img src={icon_next} />
+            </Button> */}
+          </div>
+
+          <div class={styles.timeWrap}>
+            {/* <Slider
+              step={0.01}
+              class={styles.timeProgress}
+              value={audioData.currentTime}
+              max={audioData.duration}
+              onUpdate:value={val => handleChangeTime(val)}
+            /> */}
+            <Slider
+              step={0.01}
+              class={styles.timeProgress}
+              v-model={audioData.currentTime}
+              max={audioData.duration}
+              onUpdate:modelValue={val => {
+                handleChangeTime(val);
+              }}
+              onDragStart={() => {
+                // state.dragStatus = true;
+              }}
+              onDragEnd={() => {
+                // state.dragStatus = false;
+              }}
+            />
+            <div class={styles.time}>{time.value}</div>
+            <audio
+              ref={audioRef}
+              src={props.item.url}
+              onLoadedmetadata={onLoadedmetadata}
+              onEnded={() => {
+                emit('change', 'pause');
+              }}
+              onTimeupdate={() => {
+                if (timer) return;
+                audioData.currentTime = audioRef.value?.currentTime;
+              }}></audio>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -133,6 +133,14 @@
   overflow: hidden;
   z-index: 1;
 
+  .tempoPracticeGroup {
+    width: 100%;
+
+    &>div {
+      justify-content: center;
+    }
+  }
+
   &.itemActive {
     z-index: 10;
   }

src/views/courseware-play/index.tsx

@@ -37,7 +37,10 @@ import {
   api_classLessonCoursewareQuery,
   api_lessonCoursewareKnowledgeDetailDetail
 } from './api';
-import { api_lessonDetailCourseware, api_classDetailCourseware } from '../courseware-list/api'
+import {
+  api_lessonDetailCourseware,
+  api_classDetailCourseware
+} from '../courseware-list/api';
 import VideoItem from './component/video-item';
 import Chapter from './component/chapter';
 import {
@@ -48,8 +51,9 @@ import detail from '../information/help-center/detail';
 import { state } from '@/state';
 import Theory from './component/theory';
 import InstrumentInfo from './component/instrument-info';
-import TempoPractice from '../../views/tempo-practice'
+import TempoPractice from '../../views/tempo-practice';
 import SelectCoursewarePop from '@/components/select-courseware-pop';
+import { activedNode } from 'element/element.model';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -157,7 +161,7 @@ export default defineComponent({
       videoState: 'init' as 'init' | 'play',
       videoItemRef: null as any,
       animationState: 'start' as 'start' | 'end',
-      coursewareList: [],
+      coursewareList: []
     });
     const activeData = reactive({
       isAutoPlay: true, // 是否自动播放
@@ -176,7 +180,7 @@ export default defineComponent({
       item: null as any
     });
     const getDetail = async () => {
-      data.allList = []
+      data.allList = [];
       let courseList: any[] = [];
       if (route.query.tab == 'course') {
         // const res = await api_classLessonCoursewareQuery({
@@ -186,7 +190,8 @@ export default defineComponent({
         //   rows: -1
         // });
         const res = await api_classDetailCourseware({
-          lessonCoursewareKnowledgeDetailId: activeData.coursewareDetailKnowledgeId, // 章节id
+          lessonCoursewareKnowledgeDetailId:
+            activeData.coursewareDetailKnowledgeId // 章节id
         });
         if (res?.code === 200 && Array.isArray(res.data)) {
           // const tempRows = res.data.rows || [];
@@ -203,13 +208,15 @@ export default defineComponent({
           //   });
           // });
           res.data.forEach((item: any) => {
-            item.knowledgeList = item.resourceList
+            item.knowledgeList = item.resourceList;
             item.resourceList.forEach((n: any) => {
-              n.materialInfo = n.resourceList
-            })
-          })
-          data.allList = res.data
-          const currentCourse = res.data.find((item: any) => item.id === data.kjId)
+              n.materialInfo = n.resourceList;
+            });
+          });
+          data.allList = res.data;
+          const currentCourse = res.data.find(
+            (item: any) => item.id === data.kjId
+          );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
         }
@@ -220,14 +227,17 @@ export default defineComponent({
         //   subjectId: activeData.subjectId
         // });
         const res = await api_lessonDetailCourseware({
-          lessonCoursewareKnowledgeDetailId: activeData.coursewareDetailKnowledgeId, // 章节id
+          lessonCoursewareKnowledgeDetailId:
+            activeData.coursewareDetailKnowledgeId // 章节id
         });
         if (res?.code === 200 && Array.isArray(res.data)) {
-          data.allList = res.data
-          const currentCourse = res.data.find((item: any) => item.id === data.kjId)
+          data.allList = res.data;
+          const currentCourse = res.data.find(
+            (item: any) => item.id === data.kjId
+          );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
-          console.log('课件类型',data.allList)
+          console.log('课件类型', data.allList);
         }
       }
       // 课程
@@ -249,18 +259,22 @@ export default defineComponent({
       data.allList.forEach((item: any) => {
         item.knowledgeList.forEach((material: any) => {
           material.materialInfo.forEach((resource: any) => {
-            resource.zsdId = material.id // 知识点id
-            resource.kjId = item.id // 课件id
-            resource.bizId = route.query.tab == 'course' ? resource.materialId : resource.bizId
-            resource.url = resource.type === 'SONG'
-            ? 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
-            : resource.type === 'PPT'
-            ? 'https://oss.dayaedu.com/ktqy/12/1701931810284.png'
-            : resource.coverImg
-          })
-          allResource = allResource.concat(material.materialInfo)
-        })
-      })
+            resource.zsdId = material.id; // 知识点id
+            resource.kjId = item.id; // 课件id
+            resource.bizId =
+              route.query.tab == 'course'
+                ? resource.materialId
+                : resource.bizId;
+            resource.url =
+              resource.type === 'SONG'
+                ? 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
+                : resource.type === 'PPT'
+                ? 'https://oss.dayaedu.com/ktqy/12/1701931810284.png'
+                : resource.coverImg;
+          });
+          allResource = allResource.concat(material.materialInfo);
+        });
+      });
 
       data.itemList = allResource.map((m: any, index: number) => {
         if (!popupData.itemActive) {
@@ -276,7 +290,7 @@ export default defineComponent({
           isRender: false // 是否渲染了
         };
       });
-      console.log('资源',data.allList,data.itemList)
+      // console.log('资源', data.allList, data.itemList);
       setTimeout(() => {
         data.animationState = 'end';
       }, 500);
@@ -485,6 +499,7 @@ export default defineComponent({
         let lessonCoursewareDetailId = '';
         let coursewareDetailKnowledgeId = '';
         let coursewareDetailKnowledgeName = '';
+        let coursewareItem = {} as any;
         while (lessonIndex >= 0) {
           lessonIndex--;
 
@@ -495,6 +510,7 @@ export default defineComponent({
                 detailItem[lessonIndex].lessonCoursewareDetailId;
               coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
               coursewareDetailKnowledgeName = detailItem[lessonIndex].name;
+              coursewareItem = detailItem[lessonIndex];
             }
           }
 
@@ -504,21 +520,25 @@ export default defineComponent({
         }
         // 判断当前章节下面课程是否有内容，否则往上一个章节走
         if (lessonStatus) {
-          loadingClass.value = true;
-          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
-          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
-          await getDetail();
-          popupData.activeIndex = data.itemList.length - 1 || 0;
-          popupData.itemActive =
-            data.knowledgePointList[data.itemList.length - 1]?.id ||
-            data.knowledgePointList[0]?.id;
-          popupData.itemPointName = coursewareDetailKnowledgeName;
-          popupData.itemName =
-            data.knowledgePointList[data.itemList.length - 1]?.name ||
-            data.knowledgePointList[0]?.name;
-          localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
-          popupData.chapterOpen = false;
-          loadingClass.value = false;
+          // loadingClass.value = true;
+          // activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          // activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          // await getDetail();
+          // popupData.activeIndex = data.itemList.length - 1 || 0;
+          // popupData.itemActive =
+          //   data.knowledgePointList[data.itemList.length - 1]?.id ||
+          //   data.knowledgePointList[0]?.id;
+          // popupData.itemPointName = coursewareDetailKnowledgeName;
+          // popupData.itemName =
+          //   data.knowledgePointList[data.itemList.length - 1]?.name ||
+          //   data.knowledgePointList[0]?.name;
+          // localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
+          // popupData.chapterOpen = false;
+          // loadingClass.value = false;
+          checkCourseware({
+            ...coursewareItem,
+            itemActive: coursewareDetailKnowledgeId
+          });
           return;
         }
 
@@ -536,6 +556,7 @@ export default defineComponent({
               coursewareDetailKnowledgeId = tempDetail[tempLessonLength - 1].id;
               coursewareDetailKnowledgeName =
                 tempDetail[tempLessonLength - 1].name;
+              coursewareItem = tempDetail[tempLessonLength - 1];
             }
             tempLessonLength--;
             if (prevLessonStatus) {
@@ -550,21 +571,26 @@ export default defineComponent({
 
         // 判断当前章节下面课程是否有内容，否则往上一个章节走
         if (prevLessonStatus) {
-          loadingClass.value = true;
-          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
-          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
-          await getDetail();
-          popupData.activeIndex = data.itemList.length - 1 || 0;
-          popupData.itemActive =
-            data.knowledgePointList[data.itemList.length - 1]?.id ||
-            data.knowledgePointList[0]?.id;
-          localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
-          popupData.itemPointName = coursewareDetailKnowledgeName;
-          popupData.itemName =
-            data.knowledgePointList[data.itemList.length - 1]?.name ||
-            data.knowledgePointList[0]?.name;
-          popupData.chapterOpen = false;
-          loadingClass.value = false;
+          // loadingClass.value = true;
+          // activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          // activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          // await getDetail();
+          // popupData.activeIndex = data.itemList.length - 1 || 0;
+          // popupData.itemActive =
+          //   data.knowledgePointList[data.itemList.length - 1]?.id ||
+          //   data.knowledgePointList[0]?.id;
+          // localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
+          // popupData.itemPointName = coursewareDetailKnowledgeName;
+          // popupData.itemName =
+          //   data.knowledgePointList[data.itemList.length - 1]?.name ||
+          //   data.knowledgePointList[0]?.name;
+          // popupData.chapterOpen = false;
+          // loadingClass.value = false;
+          // console.log('2', coursewareItem, coursewareDetailKnowledgeId);
+          checkCourseware({
+            ...coursewareItem,
+            itemActive: coursewareDetailKnowledgeId
+          });
           return;
         }
       } else {
@@ -577,7 +603,7 @@ export default defineComponent({
         let detailIndex = data.courseDetails.findIndex(
           (item: any) => item.id == activeData.lessonCoursewareDetailId
         );
-        // 当前章节列表  
+        // 当前章节列表
         const detailItem = data.courseDetails[detailIndex]?.knowledgeList || [];
         // 获取当前是哪个章节
         let lessonIndex = detailItem.findIndex(
@@ -588,6 +614,7 @@ export default defineComponent({
         let lessonCoursewareDetailId = '';
         let coursewareDetailKnowledgeId = '';
         let coursewareDetailKnowledgeName = '';
+        let coursewareItem = {} as any;
         while (lessonIndex < detailItem.length - 1) {
           lessonIndex++;
           if (lessonIndex >= 0) {
@@ -597,6 +624,7 @@ export default defineComponent({
                 detailItem[lessonIndex].lessonCoursewareDetailId;
               coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
               coursewareDetailKnowledgeName = detailItem[lessonIndex].name;
+              coursewareItem = detailItem[lessonIndex];
             }
           }
           if (lessonStatus) {
@@ -605,17 +633,21 @@ export default defineComponent({
         }
         // 判断当前章节下面课程是否有内容，否则往下一个章节走
         if (lessonStatus) {
-          loadingClass.value = true;
-          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
-          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
-          await getDetail();
-          popupData.activeIndex = 0;
-          popupData.itemActive = data.knowledgePointList[0].id;
-          popupData.itemName = data.knowledgePointList[0].name;
-          localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
-          popupData.itemPointName = coursewareDetailKnowledgeName;
-          popupData.chapterOpen = false;
-          loadingClass.value = false;
+          // loadingClass.value = true;
+          // activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          // activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          // await getDetail();
+          // popupData.activeIndex = 0;
+          // popupData.itemActive = data.knowledgePointList[0].id;
+          // popupData.itemName = data.knowledgePointList[0].name;
+          // localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
+          // popupData.itemPointName = coursewareDetailKnowledgeName;
+          // popupData.chapterOpen = false;
+          // loadingClass.value = false;
+          checkCourseware({
+            ...coursewareItem,
+            itemActive: coursewareDetailKnowledgeId
+          });
           return;
         }
 
@@ -632,6 +664,7 @@ export default defineComponent({
                 tempDetail[tempLessonLength].lessonCoursewareDetailId;
               coursewareDetailKnowledgeId = tempDetail[tempLessonLength].id;
               coursewareDetailKnowledgeName = tempDetail[tempLessonLength].name;
+              coursewareItem = tempDetail[tempLessonLength];
             }
             tempLessonLength++;
             if (nextLessonStatus) {
@@ -646,17 +679,21 @@ export default defineComponent({
 
         // 判断当前章节下面课程是否有内容，否则往上一个章节走
         if (nextLessonStatus) {
-          loadingClass.value = true;
-          activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
-          activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
-          await getDetail();
-          popupData.activeIndex = 0;
-          popupData.itemActive = data.knowledgePointList[0].id;
-          localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
-          popupData.itemName = data.knowledgePointList[0].name;
-          popupData.itemPointName = coursewareDetailKnowledgeName;
-          popupData.chapterOpen = false;
-          loadingClass.value = false;
+          // loadingClass.value = true;
+          // activeData.coursewareDetailKnowledgeId = coursewareDetailKnowledgeId;
+          // activeData.lessonCoursewareDetailId = lessonCoursewareDetailId;
+          // await getDetail();
+          // popupData.activeIndex = 0;
+          // popupData.itemActive = data.knowledgePointList[0].id;
+          // localStorage.setItem(lastTimeKey, coursewareDetailKnowledgeId);
+          // popupData.itemName = data.knowledgePointList[0].name;
+          // popupData.itemPointName = coursewareDetailKnowledgeName;
+          // popupData.chapterOpen = false;
+          // loadingClass.value = false;
+          checkCourseware({
+            ...coursewareItem,
+            itemActive: coursewareDetailKnowledgeId
+          });
           return;
         }
       }
@@ -812,39 +849,44 @@ export default defineComponent({
     const loadNewCourseware = async (item: any) => {
       loadingClass.value = true;
       activeData.coursewareDetailKnowledgeId = item.coursewareDetailKnowledgeId;
+      activeData.lessonCoursewareDetailId = item.lessonCoursewareDetailId;
+      localStorage.setItem(lastTimeKey, item.coursewareDetailKnowledgeId);
       popupData.chapterOpen = false;
       showSelectCourseware.value = false;
-      data.kjId = item.id
+      data.kjId = item.id;
       await getDetail();
       popupData.activeIndex = 0;
       popupData.itemActive = data.knowledgePointList[0].id;
       popupData.itemName = data.knowledgePointList[0].name;
       loadingClass.value = false;
-    }
+    };
     // 通过章节id，检测此章节有几个课件
     const checkCourseware = async (item: any) => {
-        // 如果有多个课件，需要选择一个课件进入上课页面
-        if (item.coursewareNum) {
-          try {
-            const res = route.query.tab == 'all' ? await api_lessonDetailCourseware({
-              lessonCoursewareKnowledgeDetailId: item.itemActive,
-            }): await api_classDetailCourseware({
-              lessonCoursewareKnowledgeDetailId: item.itemActive,
-            })
-            if (res?.code == 200 && res.data?.length) {
-              data.coursewareList = res.data;
-              // 如果只有一个课件，直接进入该课件
-              if (res.data.length == 1) {
-                loadNewCourseware(res.data[0])
-              } else {
-                // 如果有多个课件，需要选择一个课件进入上课页面
-                showSelectCourseware.value = true;
-              }
-            } 
-          } catch {
-            //
+      // 如果有多个课件，需要选择一个课件进入上课页面
+      if (item.coursewareNum) {
+        try {
+          const res =
+            route.query.tab == 'all'
+              ? await api_lessonDetailCourseware({
+                  lessonCoursewareKnowledgeDetailId: item.itemActive
+                })
+              : await api_classDetailCourseware({
+                  lessonCoursewareKnowledgeDetailId: item.itemActive
+                });
+          if (res?.code == 200 && res.data?.length) {
+            data.coursewareList = res.data;
+            // 如果只有一个课件，直接进入该课件
+            if (res.data.length == 1) {
+              loadNewCourseware(res.data[0]);
+            } else {
+              // 如果有多个课件，需要选择一个课件进入上课页面
+              showSelectCourseware.value = true;
+            }
           }
+        } catch {
+          //
         }
+      }
     };
 
     return () => (
@@ -1015,24 +1057,35 @@ export default defineComponent({
                     )}
 
                     {/* 新增：RHYTHM：节奏练习,THEORY：乐理知识,MUSIC_WIKI:名曲鉴赏 INSTRUMENT:乐器 MUSICIAN:音乐家 资源类型 */}
-                    {m.type === 'RHYTHM' && 
-                      <TempoPractice 
-                        dataJson={m?.dataJson ? JSON.parse(m?.dataJson) : {}} 
+                    {m.type === 'RHYTHM' && (
+                      <TempoPractice
+                        class={styles.tempoPracticeGroup}
+                        dataJson={m?.dataJson ? JSON.parse(m?.dataJson) : {}}
                         modeType={'courseware'}
                       />
-                    }
-                    {m.type === 'THEORY' && (
-                      <Theory id={m.bizId} />
                     )}
+                    {m.type === 'THEORY' && <Theory id={m.bizId} />}
                     {m.type === 'MUSIC_WIKI' && (
-                      <InstrumentInfo type={'wiki'} id={m.bizId} />
+                      <InstrumentInfo
+                        type={'wiki'}
+                        id={m.bizId}
+                        show={popupData.activeIndex === mIndex}
+                      />
                     )}
                     {m.type === 'INSTRUMENT' && (
-                      <InstrumentInfo type={'instrument'} id={m.bizId} />
+                      <InstrumentInfo
+                        type={'instrument'}
+                        id={m.bizId}
+                        show={popupData.activeIndex === mIndex}
+                      />
                     )}
                     {m.type === 'MUSICIAN' && (
-                      <InstrumentInfo type={'musician'} id={m.bizId} />
-                    )}                                                            
+                      <InstrumentInfo
+                        type={'musician'}
+                        id={m.bizId}
+                        show={popupData.activeIndex === mIndex}
+                      />
+                    )}
                   </div>
                 ) : (
                   <div
@@ -1152,20 +1205,18 @@ export default defineComponent({
             onHandleSelect={async (item: any) => {
               activeData.lessonCoursewareDetailId = item.tabActive;
               popupData.itemPointName = item.itemName;
-              checkCourseware(item)
+              checkCourseware(item);
             }}
           />
         </Popup>
-        {
-          showSelectCourseware.value && 
-          <SelectCoursewarePop 
-            list={data.coursewareList} 
+        {showSelectCourseware.value && (
+          <SelectCoursewarePop
+            list={data.coursewareList}
             onClose={() => {
               showSelectCourseware.value = false;
             }}
-            onSelect={(item) => loadNewCourseware(item)}
-          ></SelectCoursewarePop>
-        }        
+            onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
+        )}
       </div>
     );
   }

src/views/tempo-practice/index.tsx

@@ -157,7 +157,6 @@ export default defineComponent({
           dataJson = JSON.parse(route.query.dataJson as any);
         }
 
-        console.log(dataJson, 'dataJson');
         setting.element = dataJson.element;
         setting.beat = dataJson.beat;
         setting.barLine = dataJson.barLine;
@@ -228,7 +227,10 @@ export default defineComponent({
                 ]}>
                 {item.map((child: any, jIndex: number) => (
                   <div
-                    class={[styles.beat, child.selected ? styles.active : '']}>
+                    class={[styles.beat, child.selected ? styles.active : '']}
+                    onClick={(e: any) => {
+                      e.stopPropagation();
+                    }}>
                     <div class={styles.direction}>
                       <div
                         class={styles.up}
@@ -269,7 +271,11 @@ export default defineComponent({
           </div>
         </div>
 
-        <div class={styles.footer}>
+        <div
+          class={styles.footer}
+          onClick={(e: any) => {
+            e.stopPropagation();
+          }}>
           {/* 播放 */}
           <div class={styles.play} onClick={handlePlay}>
             {setting.playState === 'pause' ? (