创建视频课

src/business-components/course-video-item/index.module.less

@@ -70,3 +70,43 @@
     width: 20px !important;
   }
 }
+
+.CourseVideoItem {
+  padding-bottom: 12px !important;
+}
+
+.infoVideo {
+  margin-top: 10px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+  img {
+    width: 16px;
+    height: 16px;
+  }
+  span {
+    padding-left: 8px;
+    max-width: 240px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.albumInfo {
+    background: #e0f7f3;
+    color: #2dc7aa;
+  }
+
+  &.musicInfo {
+    background: #ffefe0;
+    color: #ff8900;
+  }
+}

src/business-components/course-video-item/index.tsx

@@ -3,6 +3,8 @@ import styles from './index.module.less'
 import { Cell, Icon, Image } from 'vant'
 import videoStop from '@common/images/icon_video_stop.png'
 import bars from '@common/svg/bars.svg'
+import iconAlbum from '@views/music/component/images/icon_album_active.png'
+import iconMusic from '@views/music/component/images/icon_music_active.png'
 
 /**
  * @description: 课程视频列表项
@@ -19,6 +21,12 @@ interface IDetail {
   index?: number
 }
 
+interface IInfos {
+  relationMusicAlbum: string
+  musicAlbumName: string
+  musicAlbumId: string | number
+}
+
 export default defineComponent({
   name: 'CourseVideoItem',
   props: {
@@ -26,6 +34,12 @@ export default defineComponent({
       type: Object as PropType<IDetail>,
       required: true
     },
+    musicAlbumInfos: {
+      type: Array as PropType<IInfos[]>,
+      default: () => {
+        return []
+      }
+    },
     border: {
       type: Boolean,
       default: false
@@ -34,50 +48,84 @@ export default defineComponent({
       type: Function as PropType<(detail: IDetail) => void>,
       default: () => {}
     },
+    onMusicAlbumDetail: {
+      type: Function as PropType<(detail: IDetail) => void>,
+      default: () => {}
+    },
     playId: {
       // 播放视屏编号
       type: Number,
       default: 0
     }
   },
+  mounted() {
+    console.log(this.musicAlbumInfos)
+  },
   render() {
     return (
-      <Cell
-        class={styles.videoSection}
-        border={this.border}
-        onClick={() => this.onPlay(this.detail)}
-        v-slots={{
-          icon: () => (
-            <div class={styles.videoImg}>
-              <Image src={this.detail.imgUrl} fit="cover" />
-              {this.detail.id === this.playId ? (
-                <div class={styles.living}>
-                  <Image src={bars} class={styles.animation} />
-                  <span>播放中</span>
-                </div>
+      <div class={styles.CourseVideoItem}>
+        <Cell
+          class={styles.videoSection}
+          border={this.border}
+          onClick={() => this.onPlay(this.detail)}
+          v-slots={{
+            icon: () => (
+              <div class={styles.videoImg}>
+                <Image src={this.detail.imgUrl} fit="cover" />
+                {this.detail.id === this.playId ? (
+                  <div class={styles.living}>
+                    <Image src={bars} class={styles.animation} />
+                    <span>播放中</span>
+                  </div>
+                ) : (
+                  <Icon class={styles.videoStop} name={videoStop} size={26} />
+                )}
+              </div>
+            ),
+            title: () => (
+              <div class={[styles.videoTitle, 'videoSmall']}>
+                <p
+                  class={[
+                    styles.videoTitleText,
+                    'van-ellipsis',
+                    this.detail.id === this.playId && styles.active
+                  ]}
+                >
+                  {this.detail.title}
+                </p>
+                <p class={[styles.videoTitleContent, 'van-multi-ellipsis--l2']}>
+                  {this.detail.content}
+                </p>
+              </div>
+            )
+          }}
+        ></Cell>
+        {this.musicAlbumInfos.map((info: any) => (
+          <div
+            class={[
+              styles.infoVideo,
+              info.relationMusicAlbum === 'ALBUM'
+                ? styles.albumInfo
+                : styles.musicInfo
+            ]}
+            onClick={() => this.onMusicAlbumDetail(info)}
+          >
+            <div>
+              <img
+                src={
+                  info.relationMusicAlbum === 'ALBUM' ? iconAlbum : iconMusic
+                }
+              />
+              {info.relationMusicAlbum === 'ALBUM' ? (
+                <span>专辑：{info.musicAlbumName}</span>
               ) : (
-                <Icon class={styles.videoStop} name={videoStop} size={26} />
+                <span>曲目：{info.musicAlbumName}</span>
               )}
             </div>
-          ),
-          title: () => (
-            <div class={[styles.videoTitle, 'videoSmall']}>
-              <p
-                class={[
-                  styles.videoTitleText,
-                  'van-ellipsis',
-                  this.detail.id === this.playId && styles.active
-                ]}
-              >
-                {this.detail.title}
-              </p>
-              <p class={[styles.videoTitleContent, 'van-multi-ellipsis--l2']}>
-                {this.detail.content}
-              </p>
-            </div>
-          )
-        }}
-      ></Cell>
+            <Icon name="arrow" />
+          </div>
+        ))}
+      </div>
     )
   }
 })

src/components/col-popup/index.tsx

@@ -20,6 +20,10 @@ export default defineComponent({
     position: {
       type: String as PropType<PopupPosition>,
       default: 'bottom'
+    },
+    zIndex: {
+      type: Number,
+      default: 2018
     }
   },
   data() {
@@ -83,6 +87,7 @@ export default defineComponent({
         transitionAppear={true}
         position={this.position}
         style={{ height: this.height }}
+        zIndex={this.zIndex}
         onClosed={() => {
           if (this.destroy) {
             this.isDestroy = true

src/student/video-class/video-class-detail.tsx

@@ -238,21 +238,45 @@ export default defineComponent({
               }}
             >
               <SectionDetail title="课程列表" icon="courseList" border>
-                {this.detailList.map((item: any, index: number) => (
-                  <CourseVideoItem
-                    class={'mb12'}
-                    playId={Number(this.classId)}
-                    detail={{
-                      id: item.id,
-                      title: item.videoTitle,
-                      content: item.videoContent,
-                      imgUrl: item.coverUrl,
-                      videoUrl: item.videoUrl,
-                      index: index + 1
-                    }}
-                    onPlay={this.onPlay}
-                  />
-                ))}
+                {this.detailList.map((item: any, index: number) => {
+                  const musicAlbumInfos = item.musicAlbumInfos || []
+                  const temp = musicAlbumInfos.map((info: any) => {
+                    return {
+                      relationMusicAlbum: info.relationType,
+                      musicAlbumName: info.name,
+                      musicAlbumId: info.musicAlbumId
+                    }
+                  })
+                  return (
+                    <CourseVideoItem
+                      musicAlbumInfos={temp}
+                      playId={Number(this.classId)}
+                      detail={{
+                        id: item.id,
+                        title: item.videoTitle,
+                        content: item.videoContent,
+                        imgUrl: item.coverUrl,
+                        videoUrl: item.videoUrl,
+                        index: index + 1
+                      }}
+                      onPlay={this.onPlay}
+                      onMusicAlbumDetail={(item: any) => {
+                        if (item.relationMusicAlbum === 'MUSIC') {
+                          this.$router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.musicAlbumId
+                            }
+                          })
+                        } else if (item.relationMusicAlbum === 'ALBUM') {
+                          this.$router.push({
+                            path: '/music-album-detail/' + item.musicAlbumId
+                          })
+                        }
+                      }}
+                    />
+                  )
+                })}
               </SectionDetail>
             </div>
           </Tab>

src/student/video-class/video-detail.tsx

@@ -190,18 +190,43 @@ export default defineComponent({
           class="mb12"
           border={false}
         >
-          {this.detailList.map((item: any) => (
-            <CourseVideoItem
-              class={['mb12', styles.videoItem]}
-              detail={{
-                id: item.id,
-                title: item.videoTitle,
-                content: item.videoContent,
-                imgUrl: item.coverUrl
-              }}
-              onPlay={this.onPlay}
-            />
-          ))}
+          {this.detailList.map((item: any) => {
+            const musicAlbumInfos = item.musicAlbumInfos || []
+            const temp = musicAlbumInfos.map((info: any) => {
+              return {
+                relationMusicAlbum: info.relationType,
+                musicAlbumName: info.name,
+                musicAlbumId: info.musicAlbumId
+              }
+            })
+            return (
+              <CourseVideoItem
+                musicAlbumInfos={temp}
+                class={[styles.videoItem]}
+                detail={{
+                  id: item.id,
+                  title: item.videoTitle,
+                  content: item.videoContent,
+                  imgUrl: item.coverUrl
+                }}
+                onPlay={this.onPlay}
+                onMusicAlbumDetail={(item: any) => {
+                  if (item.relationMusicAlbum === 'MUSIC') {
+                    this.$router.push({
+                      path: '/music-detail',
+                      query: {
+                        id: item.musicAlbumId
+                      }
+                    })
+                  } else if (item.relationMusicAlbum === 'ALBUM') {
+                    this.$router.push({
+                      path: '/music-album-detail/' + item.musicAlbumId
+                    })
+                  }
+                }}
+              />
+            )
+          })}
         </SectionDetail>
 
         {this.userInfo.id && !this.userInfo.alreadyBuy && (

src/teacher/live-class/create.tsx

@@ -48,19 +48,26 @@ export default defineComponent({
     }
     this.getLiveClassDetail()
   },
-  methods:{
-     // 获取直播课详情
-    async getLiveClassDetail(){
+  methods: {
+    // 获取直播课详情
+    async getLiveClassDetail() {
       const groupId = this.$route.query.groupId
       if (!groupId) return
-      const res = await request.get(`/api-teacher/courseGroup/queryLiveCourseInfo?groupId=${groupId}`)
+      const res = await request.get(
+        `/api-teacher/courseGroup/queryLiveCourseInfo?groupId=${groupId}`
+      )
       console.log(res, createState)
-      if (res.code == 200){
+      if (res.code == 200) {
         const data = res.data
         createState.live.courseGroupId = data.courseGroupId
         createState.live.teacherId = data.teacherId
         createState.live.name = data.courseGroupName
-        createState.live.subjectId = (createState.subjectList.find((n:any) => n.name === data.subjectName) as any)?.id || ''
+        createState.live.subjectId =
+          (
+            createState.subjectList.find(
+              (n: any) => n.name === data.subjectName
+            ) as any
+          )?.id || ''
         createState.live.courseIntroduce = data.courseIntroduce
         createState.live.courseNum = data.courseNum
         createState.live.singleMins = data.singleCourseMinutes

src/teacher/video-class/class-content.tsx

@@ -1,5 +1,6 @@
 import ColField from '@/components/col-field'
 import ColFieldGroup from '@/components/col-field-group'
+import ColPopup from '@/components/col-popup'
 import ColUpload from '@/components/col-upload'
 import ColUploadVideo from '@/components/col-upload-video'
 import {
@@ -16,13 +17,16 @@ import {
 import { defineComponent } from 'vue'
 import styles from './class-content.module.less'
 import { createState } from './createState'
+import MusicAlbum from './model/music-album'
 
 export default defineComponent({
   name: 'ClassContent',
   data() {
     return {
       url: '',
-      checked: null
+      checked: null,
+      musicStatus: false,
+      selectItem: {} as any // 选中的课程
     }
   },
   methods: {
@@ -35,6 +39,8 @@ export default defineComponent({
         videoContent: '',
         videoUrl: '',
         coverUrl: '',
+        relationType: 'GIFT',
+        relationList: [],
         posterUrl: '' // 视频封面图
       })
     },
@@ -48,6 +54,14 @@ export default defineComponent({
       }).then(() => {
         createState.lessonList.splice(index, 1)
       })
+    },
+    getName(item: any) {
+      const relation =
+        item.relationList.length > 0 ? item.relationList[0] : null
+      return relation
+        ? (relation.relationMusicAlbum === 'ALBUM' ? '专辑：' : '曲目：') +
+            relation.musicAlbumName
+        : ''
     }
   },
   render() {
@@ -143,6 +157,28 @@ export default defineComponent({
                   </Col>
                 </Row>
               </ColField>
+              {/* <van-icon name="clear" /> */}
+              <ColField title="关联曲目或专辑">
+                <Field
+                  modelValue={
+                    item.relationList.length > 0 ? this.getName(item) : ''
+                  }
+                  readonly
+                  isLink
+                  clickable={false}
+                  clearable
+                  rightIcon={item.relationList.length > 0 ? 'clear' : ''}
+                  onClick-right-icon={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    item.relationList = []
+                  }}
+                  onClick={() => {
+                    this.selectItem = item
+                    this.musicStatus = true
+                  }}
+                  placeholder="请选择关联曲目或专辑"
+                />
+              </ColField>
             </ColFieldGroup>
           </>
         ))}
@@ -174,6 +210,26 @@ export default defineComponent({
             </Button>
           </div>
         </Sticky>
+
+        <ColPopup v-model={this.musicStatus} zIndex={999999}>
+          <MusicAlbum
+            subjectId={createState.lessonGroup.lessonSubject}
+            onSelect={(item: any) => {
+              this.musicStatus = false
+              this.selectItem.relationList = [
+                {
+                  musicAlbumId: item.id,
+                  musicAlbumName:
+                    item.selectType === 'ALBUM'
+                      ? item.albumName
+                      : item.musicSheetName,
+                  relationMusicAlbum: item.selectType,
+                  useRelationType: 'GIFT'
+                }
+              ]
+            }}
+          />
+        </ColPopup>
       </Form>
     )
   }

src/teacher/video-class/create-submit.tsx

@@ -25,18 +25,22 @@ export default defineComponent({
         lessonCoverUrl:
           videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl,
         lessonNum: createState.lessonList.length,
-        auditVersion:0
+        auditVersion: 0
       }
     },
     lessonList() {
       return createState.lessonList || []
+    },
+    groupId() {
+      const query = this.$route.query
+      return query.groupId || ''
     }
   },
   methods: {
     async onSubmit() {
       try {
         const videoDetail = createState.lessonGroup
-        let params = {
+        const params = {
           lessonList: this.lessonList,
           lessonGroup: {
             ...videoDetail,
@@ -70,16 +74,26 @@ export default defineComponent({
         </SectionDetail>
 
         <SectionDetail title="课程列表" icon="courseList" class="mb12">
-          {this.lessonList.map((item: any) => (
-            <CourseVideoItem
-              class={'mb12'}
-              detail={{
-                title: item.videoTitle,
-                content: item.videoContent,
-                imgUrl: item.coverUrl
-              }}
-            />
-          ))}
+          {this.lessonList.map((item: any) => {
+            const relationList = item.relationList || []
+            const temp = relationList.map((relation: any) => {
+              return {
+                relationMusicAlbum: relation.relationMusicAlbum,
+                musicAlbumName: relation.musicAlbumName,
+                musicAlbumId: relation.musicAlbumId
+              }
+            })
+            return (
+              <CourseVideoItem
+                musicAlbumInfos={temp}
+                detail={{
+                  title: item.videoTitle,
+                  content: item.videoContent,
+                  imgUrl: item.coverUrl
+                }}
+              />
+            )
+          })}
         </SectionDetail>
 
         <Sticky offsetBottom={0} position="bottom">
@@ -96,7 +110,7 @@ export default defineComponent({
               返回编辑
             </Button>
             <Button block round type="primary" onClick={this.onSubmit}>
-              创建完成
+              {this.groupId ? '修改完成' : '创建完成'}
             </Button>
           </div>
         </Sticky>

src/teacher/video-class/create.module.less

@@ -10,32 +10,37 @@
     }
   }
   :global {
-    .van-grid {
-      padding-left: 14px;
-      padding-bottom: 12px;
-      background-color: #f6f8f9;
+    // .van-grid {
+    // }
 
-      .van-grid-item {
-        padding-right: 14px;
+    .van-sticky--fixed {
+      box-shadow: 10px 10px 10px var(--box-shadow-color);
+    }
+  }
+}
 
-        &:first-child {
-          padding-right: 10px;
-        }
-      }
-      .van-grid-item__content {
-        padding-top: 7px;
-        padding-bottom: 7px;
-        border-radius: 10px;
-        overflow: hidden;
-      }
-      .van-badge__wrapper {
-        display: flex;
-        align-items: center;
+.gridColumn {
+  padding-left: 14px;
+  padding-bottom: 12px;
+  background-color: #f6f8f9;
+
+  :global {
+    .van-grid-item {
+      padding-right: 14px;
+
+      &:first-child {
+        padding-right: 10px;
       }
     }
-
-    .van-sticky--fixed {
-      box-shadow: 10px 10px 10px var(--box-shadow-color);
+    .van-grid-item__content {
+      padding-top: 7px;
+      padding-bottom: 7px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .van-badge__wrapper {
+      display: flex;
+      align-items: center;
     }
   }
 }

src/teacher/video-class/create.tsx

@@ -43,7 +43,7 @@ export default defineComponent({
         ...group
       } = result.lessonGroup
       // 判断模板图片是否在模板列表中，如果不在则是用户自己上传的图片
-      let statusUrl = createState.templateList.includes(lessonCoverUrl)
+      const statusUrl = createState.templateList.includes(lessonCoverUrl)
         ? true
         : false
       createState.lessonGroup = {
@@ -58,16 +58,29 @@ export default defineComponent({
       createState.lessonList = []
       result.detailList &&
         result.detailList.forEach((item: any) => {
+          const tempInfo = item.musicAlbumInfos || []
+          const relationList = tempInfo.map((info: any) => {
+            return {
+              relationMusicAlbum: info.relationType,
+              musicAlbumName: info.name,
+              musicAlbumId: info.musicAlbumId,
+              relationId: info.id
+            }
+          })
           createState.lessonList.push({
             videoTitle: item.videoTitle,
             videoContent: item.videoContent,
             videoUrl: item.videoUrl,
             coverUrl: item.coverUrl,
+            relationType: item.relationType,
+            relationList,
             posterUrl: item.posterUrl // 视频封面图
           })
         })
       createState.loadingStatus = false
-    } catch {}
+    } catch {
+      //
+    }
     if (
       createState.lessonGroup.lessonCoverUrl &&
       !createState.templateList.includes(createState.lessonGroup.lessonCoverUrl)
@@ -100,6 +113,7 @@ export default defineComponent({
               style={{ paddingTop: '15px' }}
               direction="horizontal"
               columnNum="2"
+              class={styles.gridColumn}
             >
               <GridItem
                 v-slots={{

src/teacher/video-class/createState.tsx

@@ -39,6 +39,8 @@ export const createState = reactive({
       videoContent: '',
       videoUrl: '',
       coverUrl: '',
+      relationType: 'GIFT',
+      relationList: [] as any,
       posterUrl: '' // 视频封面图
     }
   ]

src/teacher/video-class/model/music-album/index.module.less

@@ -0,0 +1,22 @@
+.musicAlbum {
+  background-color: #f8f9fc;
+  min-height: 100vh;
+
+  --van-tab-font-size: 17px;
+}
+
+.musicSong {
+  margin: 16px 14px;
+  border-radius: 10px;
+
+  .musicName {
+    max-width: 180px !important;
+  }
+  .author {
+    max-width: 140px !important;
+  }
+}
+
+.musicGrid {
+  margin: 16px 12px;
+}

src/teacher/video-class/model/music-album/index.tsx

@@ -0,0 +1,205 @@
+import ColResult from '@/components/col-result'
+import ColSearch from '@/components/col-search'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import MusicGrid from '@/views/music/component/music-grid'
+import Song from '@/views/music/component/song'
+import { Cell, List, Sticky, Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'music-album',
+  props: {
+    subjectId: {
+      type: Number,
+      required: true
+    },
+    onSelect: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+  data() {
+    return {
+      tabVal: 'music',
+      dataShow: true, // 判断是否有数据
+      lockLoading: false,
+      musicState: {
+        loading: false,
+        finished: false
+      },
+      musicList: [] as any,
+      musicParams: {
+        page: 1,
+        rows: 20,
+        idAndName: '',
+        subjectIds: this.subjectId
+      },
+      albumState: {
+        loading: false,
+        finished: false
+      },
+      albumList: [] as any,
+      albumParams: {
+        page: 1,
+        rows: 20,
+        idAndName: '',
+        subjectIds: this.subjectId
+      }
+    }
+  },
+  async mounted() {
+    await this.getMusicList()
+  },
+  methods: {
+    onSearch(value: string) {
+      this.musicParams.idAndName = value
+      this.albumParams.idAndName = value
+      if (this.tabVal === 'music') {
+        this.musicParams.page = 1
+        this.musicList = []
+        this.getMusicList()
+      } else if (this.tabVal === 'album') {
+        this.albumParams.page = 1
+        this.albumList = []
+        this.getAlbumList()
+      }
+    },
+    async getMusicList() {
+      try {
+        if (this.lockLoading) return
+        this.lockLoading = true
+        this.dataShow = true
+        const res = await request.post(
+          `${state.platformApi}/music/sheet/list`,
+          {
+            data: {
+              ...this.musicParams
+            }
+          }
+        )
+        this.lockLoading = false
+        this.musicState.loading = false
+        const result = res.data || {}
+        this.musicList = this.musicList.concat(result.rows || [])
+        this.musicState.finished = result.pageNo >= result.totalPage
+        this.musicParams.page = result.pageNo + 1
+        this.dataShow = this.musicList.length > 0
+      } catch {
+        this.dataShow = false
+        this.musicState.finished = true
+        this.lockLoading = false
+      }
+    },
+    async getAlbumList() {
+      try {
+        if (this.lockLoading) return
+        this.lockLoading = true
+        this.dataShow = true
+        const res = await request.post(
+          `${state.platformApi}/music/album/list`,
+          {
+            data: {
+              ...this.albumParams
+            }
+          }
+        )
+        this.lockLoading = false
+        this.albumState.loading = false
+        const result = res.data || {}
+        this.albumList = this.albumList.concat(result.rows || [])
+        this.albumState.finished = result.pageNo >= result.totalPage
+        this.albumParams.page = result.pageNo + 1
+        this.dataShow = this.albumList.length > 0
+      } catch {
+        this.dataShow = false
+        this.albumState.finished = true
+        this.lockLoading = false
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.musicAlbum}>
+        <Sticky position="top" offsetTop={0}>
+          <ColSearch
+            onSearch={this.onSearch}
+            placeholder="请输入曲目或专辑名称"
+          />
+          <Tabs
+            v-model:active={this.tabVal}
+            color="var(--van-primary)"
+            lineWidth={25}
+            onChange={index => {
+              if (index === 'music') {
+                this.musicParams.page = 1
+                this.musicList = []
+                this.getMusicList()
+              } else if (index === 'album') {
+                this.albumParams.page = 1
+                this.albumList = []
+                this.getAlbumList()
+              }
+            }}
+          >
+            <Tab title="曲目" name="music"></Tab>
+            <Tab title="专辑" name="album"></Tab>
+          </Tabs>
+        </Sticky>
+        <div class={styles.container}>
+          {this.dataShow && this.tabVal === 'music' && (
+            <List
+              v-model:loading={this.musicState.loading}
+              finished={this.musicState.finished}
+              finishedText=" "
+              onLoad={this.getMusicList}
+              immediateCheck={false}
+            >
+              <div class={styles.musicSong}>
+                <Song
+                  list={this.musicList}
+                  musicNameClass={styles.musicName}
+                  authorClass={styles.author}
+                  showPlay={false}
+                  onDetail={(item: any) => {
+                    this.onSelect({
+                      selectType: 'MUSIC',
+                      ...item
+                    })
+                  }}
+                ></Song>
+              </div>
+            </List>
+          )}
+
+          {this.dataShow && this.tabVal === 'album' && (
+            <List
+              v-model:loading={this.albumState.loading}
+              finished={this.albumState.finished}
+              finishedText=" "
+              onLoad={this.getAlbumList}
+              immediateCheck={false}
+            >
+              <div class={styles.musicGrid}>
+                <MusicGrid
+                  list={this.albumList}
+                  onGoto={(n: any) => {
+                    this.onSelect({
+                      selectType: 'ALBUM',
+                      ...n
+                    })
+                  }}
+                />
+              </div>
+            </List>
+          )}
+
+          {!this.dataShow && (
+            <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
+          )}
+        </div>
+      </div>
+    )
+  }
+})

src/teacher/video-class/video-class-detail.tsx

@@ -237,21 +237,45 @@ export default defineComponent({
           <Tab title="目录" name={1}>
             <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>
               <SectionDetail title="课程列表" icon="courseList">
-                {this.detailList.map((item: any, index: number) => (
-                  <CourseVideoItem
-                    class={'mb12'}
-                    playId={Number(this.classId)}
-                    detail={{
-                      id: item.id,
-                      title: item.videoTitle,
-                      content: item.videoContent,
-                      imgUrl: item.coverUrl,
-                      videoUrl: item.videoUrl,
-                      index: index + 1
-                    }}
-                    onPlay={this.onPlay}
-                  />
-                ))}
+                {this.detailList.map((item: any, index: number) => {
+                  const musicAlbumInfos = item.musicAlbumInfos || []
+                  const temp = musicAlbumInfos.map((info: any) => {
+                    return {
+                      relationMusicAlbum: info.relationType,
+                      musicAlbumName: info.name,
+                      musicAlbumId: info.musicAlbumId
+                    }
+                  })
+                  return (
+                    <CourseVideoItem
+                      musicAlbumInfos={temp}
+                      playId={Number(this.classId)}
+                      detail={{
+                        id: item.id,
+                        title: item.videoTitle,
+                        content: item.videoContent,
+                        imgUrl: item.coverUrl,
+                        videoUrl: item.videoUrl,
+                        index: index + 1
+                      }}
+                      onPlay={this.onPlay}
+                      onMusicAlbumDetail={(item: any) => {
+                        if (item.relationMusicAlbum === 'MUSIC') {
+                          this.$router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.musicAlbumId
+                            }
+                          })
+                        } else if (item.relationMusicAlbum === 'ALBUM') {
+                          this.$router.push({
+                            path: '/music-album-detail/' + item.musicAlbumId
+                          })
+                        }
+                      }}
+                    />
+                  )
+                })}
               </SectionDetail>
             </div>
           </Tab>

src/teacher/video-class/video-detail.tsx

@@ -19,6 +19,7 @@ export default defineComponent({
     return {
       userInfo: {} as any,
       detailList: [],
+      musicAlbumInfos: [], // 关联曲目或专辑"
       buyUserList: [], // 购买学生数
       dataShow: true, // 判断是否有数据
       loading: false,
@@ -72,7 +73,7 @@ export default defineComponent({
       // shareVideo?recomUserId=56&groupId=124
       this.shareUrl = `${location.origin}/teacher#/shareVideo?recomUserId=${state.user.data?.userId}&groupId=${this.params.videoLessonGroupId}`
 
-      this.getList()
+      !this.myself && this.getList()
     } catch (e) {
       console.log(e)
     }
@@ -145,18 +146,42 @@ export default defineComponent({
 
         {this.myself ? (
           <SectionDetail title="课程列表" icon="courseList" border={true}>
-            {this.detailList.map((item: any) => (
-              <CourseVideoItem
-                class={'mb12'}
-                detail={{
-                  id: item.id,
-                  title: item.videoTitle,
-                  content: item.videoContent,
-                  imgUrl: item.coverUrl
-                }}
-                onPlay={this.onPlay}
-              />
-            ))}
+            {this.detailList.map((item: any) => {
+              const musicAlbumInfos = item.musicAlbumInfos || []
+              const temp = musicAlbumInfos.map((info: any) => {
+                return {
+                  relationMusicAlbum: info.relationType,
+                  musicAlbumName: info.name,
+                  musicAlbumId: info.musicAlbumId
+                }
+              })
+              return (
+                <CourseVideoItem
+                  musicAlbumInfos={temp}
+                  detail={{
+                    id: item.id,
+                    title: item.videoTitle,
+                    content: item.videoContent,
+                    imgUrl: item.coverUrl
+                  }}
+                  onPlay={this.onPlay}
+                  onMusicAlbumDetail={(item: any) => {
+                    if (item.relationMusicAlbum === 'MUSIC') {
+                      this.$router.push({
+                        path: '/music-detail',
+                        query: {
+                          id: item.musicAlbumId
+                        }
+                      })
+                    } else if (item.relationMusicAlbum === 'ALBUM') {
+                      this.$router.push({
+                        path: '/music-album-detail/' + item.musicAlbumId
+                      })
+                    }
+                  }}
+                />
+              )
+            })}
           </SectionDetail>
         ) : (
           <SectionDetail
@@ -167,18 +192,42 @@ export default defineComponent({
           >
             <Tabs color="var(--van-primary)" lineWidth={20} sticky>
               <Tab title="课程" titleClass="van-hairline--bottom">
-                {this.detailList.map((item: any) => (
-                  <CourseVideoItem
-                    class={'mb12'}
-                    detail={{
-                      id: item.id,
-                      title: item.videoTitle,
-                      content: item.videoContent,
-                      imgUrl: item.coverUrl
-                    }}
-                    onPlay={this.onPlay}
-                  />
-                ))}
+                {this.detailList.map((item: any) => {
+                  const musicAlbumInfos = item.musicAlbumInfos || []
+                  const temp = musicAlbumInfos.map((info: any) => {
+                    return {
+                      relationMusicAlbum: info.relationType,
+                      musicAlbumName: info.name,
+                      musicAlbumId: info.musicAlbumId
+                    }
+                  })
+                  return (
+                    <CourseVideoItem
+                      musicAlbumInfos={temp}
+                      detail={{
+                        id: item.id,
+                        title: item.videoTitle,
+                        content: item.videoContent,
+                        imgUrl: item.coverUrl
+                      }}
+                      onPlay={this.onPlay}
+                      onMusicAlbumDetail={(item: any) => {
+                        if (item.relationMusicAlbum === 'MUSIC') {
+                          this.$router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.musicAlbumId
+                            }
+                          })
+                        } else if (item.relationMusicAlbum === 'ALBUM') {
+                          this.$router.push({
+                            path: '/music-album-detail/' + item.musicAlbumId
+                          })
+                        }
+                      }}
+                    />
+                  )
+                })}
               </Tab>
               <Tab title="学员列表" titleClass="van-hairline--bottom">
                 {this.dataShow ? (

src/views/music/component/song/index.tsx

@@ -23,6 +23,12 @@ export default defineComponent({
     showPlay: {
       type: Boolean,
       default: true
+    },
+    musicNameClass: {
+      type: String as PropType<unknown>
+    },
+    authorClass: {
+      type: String as PropType<unknown>
     }
   },
   emits: ['detail'],
@@ -74,10 +80,14 @@ export default defineComponent({
                     />
                   )}
 
-                  <span class={[styles.title, 'van-ellipsis']}>
+                  <span
+                    class={[styles.title, props.musicNameClass, 'van-ellipsis']}
+                  >
                     {n.musicSheetName}
                   </span>
-                  <span class={[styles.singer, 'van-ellipsis']}>
+                  <span
+                    class={[styles.singer, props.authorClass, 'van-ellipsis']}
+                  >
                     -{n.composer}
                   </span>
                 </div>
@@ -88,7 +98,7 @@ export default defineComponent({
                       class={styles.collection}
                     />
                   )}
-                  <span class={styles.name}>
+                  <span class={[styles.name]}>
                     {n.addName ? `上传者：${n.addName}` : `作曲：${n.composer}`}
                   </span>
                   <div class={styles.tags}>

src/views/music/look-album-list/index.tsx

@@ -7,7 +7,8 @@ export default defineComponent({
   data() {
     const query = this.$route.query
     return {
-      id: query.id
+      id: query.id,
+      musicSubject: query.musicSubject
     }
   },
   render() {
@@ -16,7 +17,8 @@ export default defineComponent({
         <Album
           hideSearch={true}
           defauleParams={{
-            musicId: this.id
+            musicId: this.id,
+            subjectIds: this.musicSubject
           }}
         />
       </>

src/views/music/music-detail/index.tsx

@@ -610,7 +610,8 @@ export default defineComponent({
                 router.push({
                   path: '/look-album-list',
                   query: {
-                    id: musicDetail.value?.id
+                    id: musicDetail.value?.id,
+                    musicSubject: musicDetail.value?.musicSubject
                   }
                 })
               }}