单元显示

src/views/courseware-play/component/musicScore.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
       headerHeight: 32,
       Authorization: Authorization
     })
-    let src = `https://test.lexiaoya.cn/orchestra-music-score/?_t=1687590480955&id=11707&modelType=practice&modeType=json&Authorization=bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsib2F1dGgyLXJlc291cmNlIl0sImNsaWVudFR5cGUiOiJCQUNLRU5EIiwidXNlcl9uYW1lIjoiMTgxNjI4NTU4MDAiLCJzY29wZSI6WyJhbGwiXSwidXNlcklkIjoiMTAwMDE0OSIsImF1dGhvcml0aWVzIjpbIjE4MTYyODU1ODAwIl0sImp0aSI6IjY0MzA2NjllLTE5NGItNDk3Yy1hMDQ5LWM4YWUxMGU0NDNiOCIsImNsaWVudF9pZCI6ImptZWR1LWJhY2tlbmQifQ.aeJ0o-lSfx1Ok-YptZuC-AUY6M7k3LK9rr0Bmx7sj81pPt2HDiDqeT2PuriYdJacxWnxboyhdG_lwU0QK-W-vON97c45NQpSEFLVpZ0m1xdIqwllwf20xhyj5YJwdOFUzxf1TNEfGsHZg66J7wEJQBSzlmQwcxmEE5lqLVD8o_3f2SBqnWCj9RqE4air7FUemllMnZiu8HsS-TKtLDaGa_XW8Yb_Zjzzz6r5UcYNI-C1uKPXg18o1dhHBJ8O-Pl0U8WivPRub_opvO2NSn5L9YtPt7Dd50UeSwaIOdMeCGdii1bg__h77Stek1_5IaZLYkoo2gvmUA-xk09TwCQBpA`
+    let src = `http://192.168.3.114:3000/instrument.html?id=43539&modelType=practise&Authorization=bearer c35c286f-fff1-4ba7-86fc-d911c79b39ab`
     const checkView = () => {
       fetch(src)
         .then(() => {

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

@@ -1,110 +1,94 @@
 .container {
   display: flex;
   flex-direction: column;
-  min-width: 288px;
-  max-width: 288px;
+  min-width: 266px;
+  max-width: 266px;
   height: 100vh;
   color: #333;
   font-size: 12px;
   box-sizing: border-box;
-  background:#fff;
+  background: #fff;
 }
+
 .pointHead {
   display: flex;
   align-items: center;
   padding: 13px 10px 15px 15px;
   flex-shrink: 0;
   font-size: 14px;
+
   img {
     width: 16px;
     height: 16px;
     margin-right: 7px;
   }
 }
+
 .content {
   flex: 1;
+  overflow-x: hidden;
   overflow-y: auto;
   padding: 0 20px;
-}
-.collapse {
-  &.childActive {
-    :global {
-      .van-cell {
-        color: #fff;
-      }
-    }
-    .arrow {
-      opacity: 1;
-    }
-  }
-  &:after {
-    display: none;
-    border-width: 0;
-  }
 
-  .borderTop {
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-  }
-  :global {
-    .van-cell {
-      background: transparent;
-      font-size: 14px;
-      color: rgba(255, 255, 255, 0.5);
-      padding: 6px 0;
-    }
-    .van-cell__title {
-      font-weight: 600;
-    }
-    .van-collapse-item__title--expanded {
-      color: #fff;
-    }
-    .van-collapse-item--border:after {
-      display: none;
-    }
-    .van-collapse-item__content {
-      background: transparent;
-      color: #fff;
-      font-size: 10px;
-      padding: 0 0 6px;
-    }
-  }
-  .arrow {
-    display: block;
-    width: 10px;
-    height: 10px;
-    margin-right: 6px;
-    transition: all 0.3s;
-    opacity: 0.5;
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
   }
 }
+
 .item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 6px 11px;
   border-radius: 6px;
-  font-size: 12px;
-  :global {
-    .van-icon {
-      display: none;
+  border: 1px solid #C2DBE2;
+  background: linear-gradient(360deg, #F2F4F5 0%, #E7F9FF 100%);
+  margin-bottom: 15px;
+  overflow: hidden;
+
+  .cover {
+    height: 115px;
+    background: #fff;
+    overflow: hidden;
+
+    &>img {
+      display: block;
+      width: 100%;
     }
-    .van-image {
-      margin-right: 6px;
-      margin-top: -1px;
-      width: 15px;
-      height: 16px;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    padding: 7px 6px;
+    font-size: 11px;
+    font-weight: 400;
+    color: #131415;
+    line-height: 16px;
+
+    .tag {
+      padding: 4px 10px;
+      border-radius: 4px;
+      background: linear-gradient(251deg, #FE7270 0%, #FF9696 100%);
+      font-size: 9px;
+      font-weight: 600;
+      color: #FFF;
+      line-height: 13px;
+      margin-right: 8px;
+    }
+
+    :global {
+      .van-icon {
+        display: none;
+        margin-left: auto;
+      }
     }
   }
-}
-.name{
-  flex: 1;
-}
-.itemActive {
-  background: #E0E0E0;
-  color: var(--van-primary);
-  :global {
-    .van-icon {
-      display: block;
+
+  &.itemActive {
+    .title {
+      :global {
+        .van-icon {
+          display: initial;
+        }
+      }
     }
   }
-}
+}

src/views/courseware-play/component/points.tsx

@@ -1,7 +1,6 @@
-import { defineComponent, reactive, watch } from 'vue';
+import { PropType, defineComponent, reactive, watch } from 'vue';
 import styles from './point.module.less';
 import iconMulv from '../image/icon-mulv.svg';
-import iconArrow from '../image/icon-arrow.svg';
 import iconZhibo from '../image/icon-load.gif';
 import iconImage from '../image/icon-image.svg';
 import iconImageActive from '../image/icon-image-active.svg';
@@ -9,18 +8,15 @@ import iconVideo from '../image/icon-video.svg';
 import iconVideoActive from '../image/icon-video-active.svg';
 import iconSong from '../image/icon-song.svg';
 import iconSongActive from '../image/icon-song-active.svg';
-import { Collapse, Icon, Image } from 'vant';
+
+import { Icon } from 'vant';
 export default defineComponent({
   name: 'points',
   props: {
     data: {
-      type: Array,
+      type: Array as PropType<any[]>,
       default: () => []
     },
-    tabActive: {
-      type: String,
-      default: ''
-    },
     itemActive: {
       type: String,
       default: ''
@@ -28,24 +24,12 @@ export default defineComponent({
   },
   emits: ['handleSelect'],
   setup(props, { emit }) {
-    const pointData = reactive({
-      active: props.tabActive[0] || '',
-      childActive: props.tabActive[1] || ''
-    });
-    watch(
-      () => props.tabActive,
-      () => {
-        pointData.active = props.tabActive[0] || '';
-        pointData.childActive = props.tabActive[1] || '';
-      }
-    );
-
-    console.log(
-      pointData.active,
-      'pointData.active',
-      props.data,
-      props.tabActive
-    );
+    const types: { [_: string]: string } = {
+      SONG: '乐谱',
+      VIDEO: '视频',
+      IMG: '图片',
+      AUDIO: '音频'
+    };
 
     // 获取对应图片
     const getImage = (item: any) => {
@@ -63,38 +47,39 @@ export default defineComponent({
       <div class={styles.container}>
         <div class={styles.pointHead}>
           <img src={iconMulv} />
-          课件列表
+          第一单元 我愿住在童话里
         </div>
         <div class={styles.content}>
-          <Collapse
-            class={styles.collapse}
-            modelValue={pointData.active}
-            onUpdate:modelValue={(val: any) => {
-              pointData.active = val;
-            }}
-            accordion>
-            {props.data.map((item: any, index: number) => {
-              return (
-                <div
-                  class={[
-                    styles.item,
-                    props.itemActive == item.id ? styles.itemActive : ''
-                  ]}
-                  onClick={() => {
-                    emit('handleSelect', {
-                      itemActive: item.id,
-                      tabName: item.name
-                    });
-                  }}>
-                  <Image src={getImage(item)} class={styles.itemImage} />
-                  <span class={["van-ellipsis", styles.name]}>
-                    {item.name}
-                  </span>
+          {props.data.map((item, index: number) => {
+            return (
+              <div
+                class={[
+                  styles.item,
+                  props.itemActive == item.id ? styles.itemActive : ''
+                ]}
+                onClick={() => {
+                  emit('handleSelect', {
+                    itemActive: item.id
+                  });
+                }}>
+                <div class={styles.cover}>
+                  {item.type === 'VIDEO' && (
+                    <img src="https://daya.ks3-cn-beijing.ksyuncs.com/1687681877690iShot2023-06-25_16.31.11.png" />
+                  )}
+                  {item.type === 'IMG' && <img src={item.content} />}
+                  {item.type === 'AUDIO' && <img src={item.content} />}
+                  {item.type === 'SONG' && (
+                    <img src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png" />
+                  )}
+                </div>
+                <div class={styles.title}>
+                  <div class={styles.tag}>{types[item.type]}</div>
+                  <div>{item.name}</div>
                   <Icon name={iconZhibo} />
                 </div>
-              );
-            })}
-          </Collapse>
+              </div>
+            );
+          })}
         </div>
       </div>
     );

src/views/courseware-play/index.tsx

@@ -152,15 +152,15 @@ export default defineComponent({
       data.knowledgePointList = [
         {
           id: '1',
-          name: '歌曲表演 大鹿',
+          name: '乐器讲解 萨克斯',
           type: 'VIDEO',
           content: 'https://courseware.lexiaoya.cn/%E5%BF%85%E5%AD%A6%E5%BF%85%E7%9C%8B-%E8%90%A8%E5%85%8B%E6%96%AF-1-C4-4.mp4'
         },
         {
           id: '2',
-          name: '知识 音的高低',
+          name: '歌曲表演 大鹿',
           type: 'IMG',
-          content: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1686815979899.png'
+          content: 'https://daya.ks3-cn-beijing.ksyuncs.com/1687681629423%E4%B9%A6%E9%A1%B5.png'
         },
         {
           id: '3',
@@ -170,9 +170,9 @@ export default defineComponent({
         },
         {
           id: '4',
-          name: '唱歌 小红帽',
+          name: '唱歌 上学歌',
           type: 'SONG',
-          content: '11707'
+          content: '43539'
         }
       ];
       popupData.itemActive = data.knowledgePointList[0].id;
@@ -367,7 +367,7 @@ export default defineComponent({
       if (popupData.activeIndex == index) return;
       handleStop();
       clearTimeout(acitveTimer.value);
-      checkedAnimation(popupData.activeIndex, index);
+      // checkedAnimation(popupData.activeIndex, index);
       popupData.activeIndex = index;
 
       acitveTimer.value = setTimeout(
@@ -623,7 +623,6 @@ export default defineComponent({
           onClose={handleClosePopup}>
           <Points
             data={data.knowledgePointList}
-            tabActive={popupData.tabActive}
             itemActive={popupData.itemActive}
             onHandleSelect={(res: any) => {
               popupData.open = false;