修改样式

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

@@ -1,7 +1,8 @@
 .container {
   display: flex;
   flex-direction: column;
-  min-width: 217px;
+  min-width: 288px;
+  max-width: 288px;
   height: 100vh;
   color: #fff;
   font-size: 12px;
@@ -19,11 +20,22 @@
     margin-right: 7px;
   }
 }
-.content{
-    flex: 1;
-    overflow-y: auto;
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 20px;
 }
 .collapse {
+  &.childActive {
+    :global {
+      .van-cell {
+        color: #fff;
+      }
+    }
+    .arrow {
+      opacity: 1;
+    }
+  }
   &:after {
     display: none;
     border-width: 0;
@@ -32,8 +44,14 @@
     .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;
-      padding: 0 13px 6px 18px;
     }
     .van-collapse-item--border:after {
       display: none;
@@ -42,7 +60,24 @@
       background: transparent;
       color: #fff;
       font-size: 10px;
-      padding: 0 13px 6px 33px;
+      padding: 0 0 6px;
+    }
+
+    // .van-collapse-item {
+    //   border-top: 1px solid rgba(255, 255, 255, 0.2);
+    // }
+  }
+  .childCollapseItem {
+    padding-left: 14px;
+    border-top: 0;
+    :global {
+      .van-cell {
+        padding-left: 0;
+        font-size: 14px;
+      }
+      .van-collapse-item__content {
+        padding-left: 0px;
+      }
     }
   }
   .arrow {
@@ -51,24 +86,33 @@
     height: 10px;
     margin-right: 6px;
     transition: all 0.3s;
+    opacity: 0.5;
   }
   :global(.van-collapse-item__title--expanded) {
     .arrow {
       transform: rotate(90deg);
+      opacity: 1;
     }
   }
 }
 .item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 4px 5px;
+  justify-content: flex-start;
+  padding: 4px 5px 4px 0;
   border-radius: 6px;
   font-size: 12px;
   :global {
     .van-icon {
       display: none;
     }
+    .van-image {
+      margin-left: 16px;
+      margin-right: 6px;
+      margin-top: -1px;
+      width: 15px;
+      height: 16px;
+    }
   }
 }
 .itemActive {

src/views/coursewarePlay/component/points.tsx

@@ -3,7 +3,13 @@ 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 { Collapse, CollapseItem, Icon } from 'vant'
+import iconImage from '../image/icon-image.svg'
+import iconImageActive from '../image/icon-image-active.svg'
+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, CollapseItem, Icon, Image } from 'vant'
 export default defineComponent({
   name: 'points',
   props: {
@@ -23,14 +29,29 @@ export default defineComponent({
   emits: ['handleSelect'],
   setup(props, { emit }) {
     const pointData = reactive({
-      active: props.tabActive || ''
+      active: props.tabActive[0] || '',
+      childActive: props.tabActive[1] || ''
     })
     watch(
       () => props.tabActive,
       () => {
-        pointData.active = props.tabActive
+        pointData.active = props.tabActive[0] || ''
+        pointData.childActive = props.tabActive[1] || ''
       }
     )
+
+    console.log(pointData.active, 'pointData.active', props.data, props.tabActive)
+
+    // 获取对应图片
+    const getImage = (item: any) => {
+      if (item.type === 'VIDEO') {
+        return props.itemActive == item.id ? iconVideoActive : iconVideo
+      } else if (item.type === 'IMAGE') {
+        return props.itemActive == item.id ? iconImageActive : iconImage
+      } else if (item.type === 'SONG') {
+        return props.itemActive == item.id ? iconSongActive : iconSong
+      }
+    }
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHead}>
@@ -46,9 +67,16 @@ export default defineComponent({
             }}
             accordion
           >
-            {props.data.map((item: any) => {
+            {props.data.map((item: any, index: number) => {
               return (
-                <CollapseItem center border={false} isLink={false} title={item.name} name={item.id}>
+                <CollapseItem
+                  center
+                  border={false}
+                  class={index > 0 ? 'van-hairline--top' : ''}
+                  isLink={false}
+                  title={item.name}
+                  name={item.id}
+                >
                   {{
                     default: () => (
                       <>
@@ -68,11 +96,73 @@ export default defineComponent({
                                   })
                                 }}
                               >
-                                <span style={{width: '80%'}} class="van-ellipsis">{n.name}</span>
+                                <Image src={getImage(n)} class={styles.itemImage} />
+                                <span style={{ width: '80%' }} class="van-ellipsis">
+                                  {n.name}
+                                </span>
                                 <Icon name={iconZhibo} />
                               </div>
                             )
                           })}
+
+                        {Array.isArray(item?.children) && (
+                          <Collapse
+                            class={[
+                              styles.collapse,
+                              pointData.active === item.id ? styles.childActive : ''
+                            ]}
+                            modelValue={pointData.childActive}
+                            onUpdate:modelValue={(val: any) => {
+                              pointData.childActive = val
+                            }}
+                            accordion
+                          >
+                            {item?.children.map((child: any) => {
+                              return (
+                                <CollapseItem
+                                  center
+                                  border={false}
+                                  isLink={false}
+                                  title={child.name}
+                                  name={child.id}
+                                  class={styles.childCollapseItem}
+                                >
+                                  {{
+                                    default: () => (
+                                      <>
+                                        {Array.isArray(child?.materialList) &&
+                                          child.materialList.map((n: any) => {
+                                            return (
+                                              <div
+                                                class={[
+                                                  styles.item,
+                                                  props.itemActive == n.id ? styles.itemActive : ''
+                                                ]}
+                                                onClick={() => {
+                                                  emit('handleSelect', {
+                                                    itemActive: n.id,
+                                                    tabActive: child.id,
+                                                    tabName: child.name
+                                                  })
+                                                }}
+                                              >
+                                                <Image src={getImage(n)} class={styles.itemImage} />
+                                                <span style={{ width: '73%' }} class="van-ellipsis">
+                                                  {n.name}
+                                                </span>
+                                                <Icon name={iconZhibo} />
+                                              </div>
+                                            )
+                                          })}
+                                      </>
+                                    ),
+                                    icon: () => <img class={styles.arrow} src={iconArrow} />
+                                  }}
+                                </CollapseItem>
+                              )
+                            })}
+                          </Collapse>
+                        )}
                       </>
                     ),
                     icon: () => <img class={styles.arrow} src={iconArrow} />

src/views/coursewarePlay/image/icon-image-active.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-306.000000, -298.000000)" fill="#FF8057" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份" transform="translate(0.000000, 140.000000)">
+                            <g id="编组" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) translate(0.500000, 2.000000)">
+                                <path d="M12.6293706,0 C13.3863483,-1.39054547e-16 14,0.613651672 14,1.37062937 L14,1.37062937 L14,9.62937063 C14,10.3863483 13.3863483,11 12.6293706,11 L12.6293706,11 L1.37062937,11 C0.613651672,11 9.27030316e-17,10.3863483 0,9.62937063 L0,9.62937063 L0,1.37062937 C-9.27030316e-17,0.613651672 0.613651672,1.39054547e-16 1.37062937,0 L1.37062937,0 Z M9.22142099,4.12294163 C8.89196248,3.93663301 8.47385062,4.05267893 8.287542,4.38213744 L8.287542,4.38213744 L7.04470782,6.57990105 C6.98353166,6.68808179 6.89408921,6.77759053 6.78595381,6.8388468 C6.4566334,7.02539942 6.03843569,6.90966326 5.85188307,6.58034285 L5.85188307,6.58034285 L5.64657316,6.21791028 C5.58509397,6.10938138 5.49516084,6.01968934 5.3864673,5.95850172 C5.05664729,5.77283381 4.63876177,5.88969218 4.45309386,6.21951219 L4.45309386,6.21951219 L3.17297968,8.49350383 C3.11520712,8.59613088 3.08485695,8.71191444 3.08485695,8.82968531 C3.08485695,9.20817416 3.39168279,9.515 3.77017164,9.515 L3.77017164,9.515 L11.2094939,9.515 C11.3277631,9.515 11.4440194,9.4843926 11.5469559,9.42615461 C11.8763768,9.23977951 11.9923383,8.82164423 11.8059632,8.49222333 L11.8059632,8.49222333 L9.4805487,4.38201704 C9.41928897,4.27373951 9.32971088,4.18417951 9.22142099,4.12294163 Z M3.23076923,1.5125 C2.34230769,1.5125 1.61538462,2.255 1.61538462,3.1625 C1.61538462,4.07 2.34230769,4.8125 3.23076923,4.8125 C4.11923077,4.8125 4.84615385,4.07 4.84615385,3.1625 C4.84615385,2.255 4.11923077,1.5125 3.23076923,1.5125 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-image.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-306.000000, -268.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-4" transform="translate(0.000000, 110.000000)">
+                            <g id="编组" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) translate(0.500000, 2.000000)">
+                                <path d="M12.6293706,0 C13.3863483,-1.39054547e-16 14,0.613651672 14,1.37062937 L14,1.37062937 L14,9.62937063 C14,10.3863483 13.3863483,11 12.6293706,11 L12.6293706,11 L1.37062937,11 C0.613651672,11 9.27030316e-17,10.3863483 0,9.62937063 L0,9.62937063 L0,1.37062937 C-9.27030316e-17,0.613651672 0.613651672,1.39054547e-16 1.37062937,0 L1.37062937,0 Z M9.22142099,4.12294163 C8.89196248,3.93663301 8.47385062,4.05267893 8.287542,4.38213744 L8.287542,4.38213744 L7.04470782,6.57990105 C6.98353166,6.68808179 6.89408921,6.77759053 6.78595381,6.8388468 C6.4566334,7.02539942 6.03843569,6.90966326 5.85188307,6.58034285 L5.85188307,6.58034285 L5.64657316,6.21791028 C5.58509397,6.10938138 5.49516084,6.01968934 5.3864673,5.95850172 C5.05664729,5.77283381 4.63876177,5.88969218 4.45309386,6.21951219 L4.45309386,6.21951219 L3.17297968,8.49350383 C3.11520712,8.59613088 3.08485695,8.71191444 3.08485695,8.82968531 C3.08485695,9.20817416 3.39168279,9.515 3.77017164,9.515 L3.77017164,9.515 L11.2094939,9.515 C11.3277631,9.515 11.4440194,9.4843926 11.5469559,9.42615461 C11.8763768,9.23977951 11.9923383,8.82164423 11.8059632,8.49222333 L11.8059632,8.49222333 L9.4805487,4.38201704 C9.41928897,4.27373951 9.32971088,4.18417951 9.22142099,4.12294163 Z M3.23076923,1.5125 C2.34230769,1.5125 1.61538462,2.255 1.61538462,3.1625 C1.61538462,4.07 2.34230769,4.8125 3.23076923,4.8125 C4.11923077,4.8125 4.84615385,4.07 4.84615385,3.1625 C4.84615385,2.255 4.11923077,1.5125 3.23076923,1.5125 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-song-active.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-364.000000, -298.000000)" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-3" transform="translate(58.000000, 140.000000)">
+                            <g id="编组" transform="translate(1.000000, 0.000000)">
+                                <path d="M9,0 L13,4 L13,13 C13,14.1 12.1,15 11,15 L2,15 C0.900000001,15 0,14.1 0,13 L0,2 C0,0.9 0.900000001,0 2,0 L9,0 Z M9.12286624,4.39507366 L9.05045121,4.40041053 L4.62790119,5.15709075 C4.43655776,5.19167453 4.28513683,5.3491615 4.28561715,5.52434895 L4.28561715,5.52434895 L4.23182216,9.53593936 C3.89020555,9.39268515 3.46572382,9.3940618 3.05944296,9.57324696 C2.32170786,9.89861591 1.93033971,10.6831644 2.18299927,11.3317032 L2.18299927,11.3317032 L2.20168239,11.3766901 C2.48234091,12.0123255 3.29959494,12.2398786 4.02247275,11.8921219 C4.56059052,11.6329597 4.90067764,11.1236487 4.92749856,10.6174852 L4.92749856,10.6174852 L4.97723571,6.93534117 C4.98142189,6.75800316 5.13114435,6.59642647 5.32418625,6.56593241 L5.32418625,6.56593241 L8.30000288,6.10080156 C8.30466938,6.098651 8.31400237,6.09434988 8.32036733,6.09628904 C8.51680615,6.07397444 8.6721386,6.20703285 8.66965088,6.38846059 L8.66965088,6.38846059 L8.5995415,9.09592309 C8.2484902,8.94608506 7.81030549,8.94997414 7.39554263,9.14388305 C6.66756943,9.47937063 6.29062966,10.2718872 6.5572887,10.9139742 C6.82394775,11.5560613 7.63229769,11.8023353 8.36323892,11.4606074 C8.94898573,11.1906651 9.30736799,10.629963 9.28887187,10.0889393 L9.28887187,10.0889393 L9.42646417,4.69000872 C9.42773374,4.6796787 9.42603527,4.67558898 9.42730484,4.66525896 C9.4140946,4.48619318 9.2481596,4.36776591 9.05045121,4.40041053 Z" id="形状结合" fill="#FF8057"></path>
+                                <path d="M9.00000001,0 L13,4 L10,4 C9.4,4 9.00000001,3.6 9.00000001,3 L9.00000001,0 Z" id="路径" fill="#CC4419" opacity="0.506022135" style="mix-blend-mode: multiply;"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-song.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-364.000000, -268.000000)" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-6" transform="translate(58.000000, 110.000000)">
+                            <g id="编组" transform="translate(1.000000, 0.000000)">
+                                <path d="M9,0 L13,4 L13,13 C13,14.1 12.1,15 11,15 L2,15 C0.900000001,15 0,14.1 0,13 L0,2 C0,0.9 0.900000001,0 2,0 L9,0 Z M9.12286624,4.39507366 L9.05045121,4.40041053 L4.62790119,5.15709075 C4.43655776,5.19167453 4.28513683,5.3491615 4.28561715,5.52434895 L4.28561715,5.52434895 L4.23182216,9.53593936 C3.89020555,9.39268515 3.46572382,9.3940618 3.05944296,9.57324696 C2.32170786,9.89861591 1.93033971,10.6831644 2.18299927,11.3317032 L2.18299927,11.3317032 L2.20168239,11.3766901 C2.48234091,12.0123255 3.29959494,12.2398786 4.02247275,11.8921219 C4.56059052,11.6329597 4.90067764,11.1236487 4.92749856,10.6174852 L4.92749856,10.6174852 L4.97723571,6.93534117 C4.98142189,6.75800316 5.13114435,6.59642647 5.32418625,6.56593241 L5.32418625,6.56593241 L8.30000288,6.10080156 C8.30466938,6.098651 8.31400237,6.09434988 8.32036733,6.09628904 C8.51680615,6.07397444 8.6721386,6.20703285 8.66965088,6.38846059 L8.66965088,6.38846059 L8.5995415,9.09592309 C8.2484902,8.94608506 7.81030549,8.94997414 7.39554263,9.14388305 C6.66756943,9.47937063 6.29062966,10.2718872 6.5572887,10.9139742 C6.82394775,11.5560613 7.63229769,11.8023353 8.36323892,11.4606074 C8.94898573,11.1906651 9.30736799,10.629963 9.28887187,10.0889393 L9.28887187,10.0889393 L9.42646417,4.69000872 C9.42773374,4.6796787 9.42603527,4.67558898 9.42730484,4.66525896 C9.4140946,4.48619318 9.2481596,4.36776591 9.05045121,4.40041053 Z" id="形状结合" fill="#FFFFFF"></path>
+                                <path d="M9.00000001,0 L13,4 L10,4 C9.4,4 9.00000001,3.6 9.00000001,3 L9.00000001,0 Z" id="路径" fill="#B3B3B3" opacity="0.619"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/index.tsx

@@ -197,38 +197,60 @@ export default defineComponent({
         console.log(e)
       }
     }
-    const getItemList = async () => {
+    const getTempList = async (materialList: any, name: any) => {
       const list: any = []
       const browserInfo = browser()
+      for (let j = 0; j < materialList.length; j++) {
+        const material = materialList[j]
+        //请求本地缓存
+        if (browserInfo.isApp && ['VIDEO', 'IMG'].includes(material.type)) {
+          const localData = await getCacheFilePath(material)
+          if (localData?.content?.localPath) {
+            material.url = material.content
+            material.content = localData.content.localPath
+          }
+        }
+
+        list.push({
+          ...material,
+          iframeRef: null,
+          videoEle: null,
+          tabName: name,
+          autoPlay: false, //加载完成是否自动播放
+          isprepare: false, // 视频是否加载完成
+          isRender: false // 是否渲染了
+        })
+      }
+      return list
+    }
+    const getItemList = async () => {
+      const list: any = []
+
       for (let i = 0; i < data.knowledgePointList.length; i++) {
         const item = data.knowledgePointList[i]
-        for (let j = 0; j < item.materialList.length; j++) {
-          const material = item.materialList[j]
-          //请求本地缓存
-          if (browserInfo.isApp && ['VIDEO', 'IMG'].includes(material.type)) {
-            const localData = await getCacheFilePath(material)
-            if (localData?.content?.localPath) {
-              material.url = material.content
-              material.content = localData.content.localPath
-            }
-          }
+        if (item.materialList && item.materialList.length > 0) {
+          const tempList = await getTempList(item.materialList, item.name)
+          list.push(...tempList)
+        }
 
-          list.push({
-            ...material,
-            iframeRef: null,
-            videoEle: null,
-            tabName: item.name,
-            autoPlay: false, //加载完成是否自动播放
-            isprepare: false, // 视频是否加载完成
-            isRender: false // 是否渲染了
-          })
+        // 第二层级
+        if (item.children && item.children.length > 0) {
+          const childrenList = item.children || []
+          for (let j = 0; j < childrenList.length; j++) {
+            const childItem = childrenList[j]
+            const tempList = await getTempList(childItem.materialList, childItem.name)
+            list.push(...tempList)
+          }
         }
       }
 
+      console.log(list, 'list')
+
       let _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
       _firstIndex = _firstIndex > -1 ? _firstIndex : 0
       const item = list[_firstIndex]
 
+      console.log(_firstIndex, '_firstIndex', route.query.kId, 'route.query.kId', item)
       // 是否自动播放
       if (activeData.isAutoPlay) {
         item.autoPlay = true
@@ -285,11 +307,26 @@ export default defineComponent({
                 index++
                 return {
                   ...item,
+                  knowledgePointId: [item.knowledgePointId],
                   materialId: item.id,
                   id: index + ''
                 }
               })
             }
+            if (Array.isArray(n.children)) {
+              n.children = n.children.map((cn: any) => {
+                cn.materialList = cn.materialList.map((item: any) => {
+                  index++
+                  return {
+                    ...item,
+                    knowledgePointId: [n.id, item.knowledgePointId],
+                    materialId: item.id,
+                    id: index + ''
+                  }
+                })
+                return cn
+              })
+            }
             return n
           })
           getItemList()
@@ -906,6 +943,7 @@ export default defineComponent({
 
         <Popup
           class={styles.popup}
+          style={{ background: 'rgba(0,0,0, 0.75)' }}
           overlayClass={styles.overlayClass}
           position="right"
           round