更新

src/router/routes-teacher.ts

@@ -323,7 +323,7 @@ export default [
         path: '/train-tool',
         component: () => import('@/tenant/music/train-tool'),
         meta: {
-          title: '训练工具'
+          title: '训练教程'
         }
       }
     ]

src/tenant/music/courseList/image/look.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="选择课件" transform="translate(-282.000000, -159.000000)">
-            <g id="锁备份" transform="translate(282.000000, 159.000000)">
-                <circle id="椭圆形" fill="#FFFFFF" cx="6.5" cy="8" r="1"></circle>
-                <rect id="矩形" stroke="#FFFFFF" stroke-width="1.2" x="1.6" y="4.1" width="9.8" height="7.8" rx="2"></rect>
-                <path d="M4.5,4 L4.5,3 C4.5,1.8954305 5.3954305,1 6.5,1 C7.6045695,1 8.5,1.8954305 8.5,3 L8.5,4 L8.5,4" id="路径" stroke="#FFFFFF" stroke-width="1.2"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/tenant/music/courseList/index.module.less

@@ -1,10 +1,9 @@
 .courseList {
-  height: 100vh;
+  min-height: 100vh;
   background-image: url('./image/bg.png');
   background-size: 100% 214px;
   background-repeat: no-repeat;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .periodContent {
@@ -71,7 +70,7 @@
   .contentLabel {
     font-weight: 400;
     font-size: 12px;
-    color: #000000;
+    color: rgba(0, 0, 0, 0.5);
     line-height: 20px;
   }
 }
@@ -98,6 +97,7 @@
     font-size: 12px;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.5);
+    line-height: 1;
   }
 }
 
@@ -145,50 +145,27 @@
       .van-cell__value {
         flex: inherit;
         flex-shrink: 0;
+        display: flex;
+        align-items: center;
       }
     }
   }
+}
 
-  .baseBtn {
-    width: 73px;
-    height: 26px;
-    line-height: 1;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 500;
-    border: 0;
-    border-radius: 13px;
-    flex-shrink: 0;
-
-    :global {
-      .van-button__text {
-        white-space: nowrap;
-      }
-    }
-
-    &.disabled {
-      opacity: 0.6 !important;
-    }
-
-    &.look {
-      background: linear-gradient(270deg, #4be0a1 0%, #01c1b5 100%);
-    }
-
-    &.down {
-      background: linear-gradient(270deg, #4be0a1 0%, #01c1b5 100%);
-    }
-
-    &.downing {
-      background: linear-gradient(270deg, #47cfe5 0%, #2fb3ff 100%);
-    }
-
-    &.disable {
-      opacity: 1;
-      background: linear-gradient(180deg, #d3d3d3 0%, #8f8f8f 100%);
+.basePlay {
+  width: 20px;
+  height: 20px;
+}
+.circleProgress {
+  width: 20px;
+  height: 20px;
+  :global {
+    .van-circle {
+      width: 20px;
+      height: 20px;
     }
   }
 }
-
 .periodItem {
   width: 36px;
   height: 40px;
@@ -330,3 +307,15 @@
   margin-top: 4px;
   margin-bottom: 120px;
 }
+.footers {
+  padding: 0 25px 20px; // height: 45px;
+
+  :global {
+    .van-button {
+      font-size: 16px;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 25px;
+    }
+  }
+}

src/tenant/music/courseList/index.tsx

@@ -1,6 +1,6 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Button, Cell, CellGroup, Popup, Dialog, Toast } from 'vant'
+import { Button, Cell, CellGroup, Popup, Dialog, Toast, Circle } from 'vant'
 import { Vue3Lottie } from 'vue3-lottie'
 import AstronautJSON from '../music-detail/animate/bigLoad.json'
 import {
@@ -18,24 +18,16 @@ import {
   postMessage,
   removeListenerMessage
 } from '@/helpers/native-message'
-// import iconLook from './image/look.svg'
 import iconCourse from './image/icon-course.png'
 import iconCachePoint from './image/icon-cache-point.png'
-// import iconCourseLock from './image/icon-course-lock.png';
-// import iconTip from './image/iconTip.png';
+import play from './image/paly.png'
 import { browser } from '@/helpers/utils'
 import ColResult from '@/components/col-result'
-function hasVip() {
-  return false
-}
-function handleCheckVip() {
-  return false
-}
+import { useEventListener } from '@vant/use'
 import TheSticky from '@/components/the-sticky'
 import ColHeader from '@/components/col-header'
 import iconList from './image/icon-list.png'
 // import OSticky from '@/components/o-sticky';
-import { useEventListener } from '@vant/use'
 export default defineComponent({
   name: 'courseList',
   setup() {
@@ -47,32 +39,33 @@ export default defineComponent({
       catchStatus: false,
       catchItem: {} as any,
       loading: true,
-      detail: {
-        cover: '',
-        name: '',
-        des: ''
-      },
+      detail: {} as Record<string, any>,
       list: [] as any,
       isDownloading: false // 是否在下载资源
     })
 
     /** 获取课件详情 */
     const getDetail = async () => {
-      const res: any = await request.get(
-        `${state.platformApi}/lessonCourseware/getLessonCoursewareDetail/${route.query.id}`
-      )
-      if (res?.data) {
-        data.detail.cover = res.data.coverImg
-        data.detail.name = res.data.name
-        data.detail.des = res.data.lessonTargetDesc
+      try {
+        const res: any = await request.post(
+          `/api-student/tenantAlbumMusic/getLessonCoursewareDetail`,
+          {
+            data: {
+              lessonCoursewareId: route.query.id,
+              albumId: route.query.albumId
+            }
+          }
+        )
+        data.detail = res?.data || {}
+      } catch {
+        //
       }
     }
     const getList = async () => {
       data.loading = true
       try {
         const res: any = await request.get(
-          state.platformApi +
-            '/lessonCourseware/getLessonCoursewareCourseList/' +
+          '/api-student/tenantAlbumMusic/getLessonCoursewareCourseList/' +
             route.query.id
         )
         if (Array.isArray(res?.data)) {
@@ -136,16 +129,16 @@ export default defineComponent({
     })
 
     const handleClick = async (item: any) => {
+      if (!data.detail?.play) {
+        gotoPlay(item)
+        return
+      }
       if (!item.knowledgePointList) {
         Dialog.confirm({
           message: '该课件暂无知识点'
         })
         return
       }
-
-      const isVip = handleCheckVip()
-      if (!isVip) return
-
       if (!item.hasCache) {
         // const hasFree = String(item.accessScope) === '0';
         // if (!hasFree) {
@@ -229,6 +222,7 @@ export default defineComponent({
     }
     // 下载缓存
     const downCatch = async (item: any) => {
+      console.log(item)
       if (browserInfo.isApp) {
         data.catchStatus = false
         data.isDownloading = true
@@ -279,7 +273,7 @@ export default defineComponent({
         <TheSticky position="top">
           <ColHeader
             hideHeader={false}
-            background="transparent"
+            background={`rgba(255,255,255, ${data.titleOpacity})`}
             isFixed={false}
             border={false}
             title={'教程详情'}
@@ -289,7 +283,7 @@ export default defineComponent({
         <div class={styles.periodContent}>
           <div class={styles.cover}>
             <img
-              src={data.detail.cover}
+              src={data.detail.coverImg}
               onLoad={(e: Event) => {
                 if (e.target) {
                   ;(e.target as any).style.opacity = 1
@@ -299,7 +293,9 @@ export default defineComponent({
           </div>
           <div>
             <div class={styles.contentTitle}>{data.detail.name}</div>
-            <div class={styles.contentLabel}>教学目标：{data.detail.des}</div>
+            <div class={styles.contentLabel}>
+              教学目标：{data.detail.lessonTargetDesc}
+            </div>
           </div>
         </div>
         <TransitionGroup name="van-fade">
@@ -345,7 +341,7 @@ export default defineComponent({
                                 ) : (
                                   ''
                                 )}
-                                {item.downloadStatus === 1 && (
+                                {item.downloadStatus == 1 && (
                                   <div class={styles.downloading}>{`${
                                     item.progress || 0
                                   }%`}</div>
@@ -357,37 +353,20 @@ export default defineComponent({
                             <>
                               {item.knowledgePointList ? (
                                 <>
-                                  {item.hasCache ? (
-                                    <Button
-                                      class={[
-                                        styles.baseBtn,
-                                        styles.look,
-                                        state.platformType === 'STUDENT' &&
-                                        !hasVip()
-                                          ? styles.disabled
-                                          : ''
-                                      ]}
-                                    >
-                                      查看
-                                    </Button>
+                                  {item.hasCache ||
+                                  item.downloadStatus !== 1 ? (
+                                    <img class={styles.basePlay} src={play} />
                                   ) : (
-                                    <Button
-                                      class={[
-                                        styles.baseBtn,
-                                        styles.down,
-                                        state.platformType === 'STUDENT' &&
-                                        !hasVip()
-                                          ? styles.disabled
-                                          : '',
-                                        item.downloadStatus == 1
-                                          ? styles.downing
-                                          : ''
-                                      ]}
-                                    >
-                                      {item.downloadStatus === 1
-                                        ? `取消下载`
-                                        : '查看'}
-                                    </Button>
+                                    <div class={styles.circleProgress}>
+                                      <Circle
+                                        v-model:current-rate={item.progress}
+                                        rate={item.progress}
+                                        speed={10}
+                                        stroke-width={80}
+                                        layer-color={'#B3B3B3'}
+                                        color={'#FE2451'}
+                                      />
+                                    </div>
                                   )}
                                 </>
                               ) : (
@@ -416,6 +395,23 @@ export default defineComponent({
         {!data.loading && !data.list.length && (
           <ColResult tips="暂无内容" classImgSize="SMALL" btnStatus={false} />
         )}
+        <TheSticky position="bottom">
+          {!data.detail.play && (
+            <div class={styles.footers}>
+              <Button
+                round
+                block
+                type="primary"
+                color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                onClick={() => {
+                  //
+                }}
+              >
+                开通训练教程
+              </Button>
+            </div>
+          )}
+        </TheSticky>
         <Popup
           v-model:show={data.catchStatus}
           round

src/tenant/music/coursewarePlay/component/video-item/index.tsx

@@ -157,7 +157,7 @@ export default defineComponent({
     onMounted(() => {
       data.videoItem = new Plyr(data.videoContianerRef, {
         autoplay: true,
-        controls: controls,
+        controls: controls as any,
         ratio: '16:9', // 强制所有视频的纵横比
         hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
         clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停

src/tenant/music/coursewarePlay/component/video-item/video-play.tsx

@@ -106,7 +106,7 @@ export default defineComponent({
       emit('prepare', false)
       videoItem.value = new Plyr(videoRef.value, {
         autoplay: false,
-        controls: controls,
+        controls: controls as any,
         autopause: false, // 一次只允许
         ratio: '16:9', // 强制所有视频的纵横比
         hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。

src/tenant/music/lessonCourseware/index.module.less

@@ -97,6 +97,11 @@
 
 .alumnList {
   min-height: 40vh;
+  :global {
+    .van-list__loading {
+      display: none;
+    }
+  }
 }
 .courseItem.courseItem1 {
   background: initial;

src/tenant/music/lessonCourseware/index.tsx

@@ -10,7 +10,7 @@ import {
   ref
 } from 'vue'
 import styles from './index.module.less'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import ColHeader from '@/components/col-header'
 import TheSticky from '@/components/the-sticky'
 import bgImg from '../../images/bg-image.png'
@@ -22,45 +22,110 @@ export default defineComponent({
   name: 'lessonCourseware',
   setup() {
     const router = useRouter()
-    const data = reactive<{
+    const route = useRoute()
+    const params = reactive<{
+      keyword: string
+      albumId: string
       subjectList: any[]
+      page: number
     }>({
-      subjectList: [{}]
+      keyword: (route.query.search as string) || '',
+      albumId: route.query.albumId as string,
+      subjectList: [],
+      page: 1
     })
     const loading = ref(false)
     const finished = ref(false)
     const isError = ref(false)
-    const subjectOptValue = ref('全部课件')
-    const subjectOpt = computed(() => {
-      const _list = data.subjectList.map((item: any) => {
-        return {
-          text: '全部全部课件11222',
-          value: '全部全部课件22222'
-        }
-      })
-      _list.unshift({
-        text: '全部课件',
-        value: '全部课件'
-      })
-      return [
-        ..._list,
-        {
-          text: '全部全部课件',
-          value: '全部全部课件'
-        },
-        {
-          text: '全2',
-          value: '全部2'
+    const subjectOptValue = ref('')
+    const subjectOpt = ref<any[]>([])
+    enum courseEmnu {
+      PERCUSSION_SINGLE = '打击乐',
+      FLUTE_SINGLE = '长笛',
+      SAX_SINGLE = '萨克斯',
+      CLARINET_SINGLE = '单簧管',
+      TRUMPET_SINGLE = '小号',
+      TROMBONE_SINGLE = '长号',
+      HORN_SINGLE = '圆号',
+      BARITONE_TUBA_SINGLE = '上低音号-大号',
+      MUSIC_THEORY = '乐理',
+      INSTRUMENTAL_ENSEMBLE = '合奏',
+      EUPHONIUM_SINGLE = '上低音号',
+      TUBA_SINGLE = '大号'
+    }
+    const getSelectCondition = async () => {
+      try {
+        const res = await request.post(
+          `/api-student/tenantAlbumMusic/selectCondition`,
+          {
+            data: {
+              subjectType: 'COURSEWARE',
+              tenantAlbumId: params.albumId
+            }
+          }
+        )
+        if (res.code === 200) {
+          subjectOpt.value = [
+            {
+              text: '全部课件',
+              value: ''
+            },
+            ...(res.data?.courseTypeList || []).map(item => {
+              return {
+                text: courseEmnu[item],
+                value: item
+              }
+            })
+          ]
         }
-      ]
-    })
-    function onSearch() {
-      console.log('onSearch')
+      } catch {
+        //
+      }
+    }
+    function onSearch(value: string) {
+      params.page = 1
+      params.keyword = value
+      params.subjectList = []
+      FetchList()
     }
     function handleOnRefresh() {
-      console.log('handleOnRefresh')
+      params.page = 1
+      params.subjectList = []
+      FetchList()
     }
-    function FetchList() {}
+    const FetchList = async () => {
+      loading.value = true
+      isError.value = false
+
+      try {
+        const res = await request.post(`/api-student/tenantAlbumMusic/page`, {
+          data: {
+            courseTypeCode: subjectOptValue.value,
+            keyword: params.keyword,
+            albumId: params.albumId,
+            subjectType: 'COURSEWARE',
+            page: params.page,
+            rows: 20
+          }
+        })
+        const result = (params.subjectList || []).concat(res.data?.rows || [])
+        params.subjectList = result
+        params.page = res.data.pageNo + 1
+        finished.value = res.data.pageNo >= res.data.totalPage
+      } catch (error) {
+        isError.value = true
+      }
+      loading.value = false
+    }
+    onMounted(async () => {
+      loading.value = true
+      await getSelectCondition()
+      if (params.albumId) {
+        await FetchList()
+      } else {
+        loading.value = false
+      }
+    })
     return () => {
       return (
         <>
@@ -86,7 +151,6 @@ export default defineComponent({
                     <DropdownMenu class={styles.dropdownMenuSub}>
                       <DropdownItem
                         titleClass={styles.titleActive}
-                        title={subjectOptValue.value}
                         v-model={subjectOptValue.value}
                         options={subjectOpt.value}
                         onChange={handleOnRefresh}
@@ -103,78 +167,32 @@ export default defineComponent({
 
           <div class={styles.alumnList}>
             <List
-              // loading={loading.value}
+              loading={loading.value}
               finished={finished.value}
               finished-text={''}
               onLoad={FetchList}
               error={isError.value}
               immediateCheck={false}
             >
-              {data.subjectList.length ? (
+              {params.subjectList.length ? (
                 <CourseItem
                   class={[styles.courseItem, styles.courseItem1]}
-                  list={[
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg:
-                        'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      name: '2333333'
-                    },
-                    {
-                      coverImg: '',
-                      name: '2333333'
+                  list={params.subjectList.map(item => {
+                    return {
+                      name: item.musicSheetName,
+                      coverImg: item.titleImg,
+                      id: item.id
                     }
-                  ]}
-                  onItemClick={row => console.log(row)}
+                  })}
+                  onItemClick={row => {
+                    router.push({
+                      path: '/courseList',
+                      query: {
+                        id: row.id,
+                        albumId: params.albumId
+                      }
+                    })
+                  }}
                 />
               ) : (
                 !loading.value && (

src/tenant/music/train-list/index.module.less

@@ -176,6 +176,11 @@
   background-color: #fff;
   margin: 6px;
   min-height: 40vh;
+  :global {
+    .van-list__loading {
+      display: none;
+    }
+  }
 }
 
 .bgImg {

src/tenant/music/train-list/index.tsx

@@ -67,7 +67,7 @@ export default defineComponent({
       subjectType: subjectType,
       page: 1,
       subjectId: null,
-      albumId: null,
+      albumId: route.query.albumId,
       albumName: '',
       level: '',
       type: '',
@@ -147,6 +147,7 @@ export default defineComponent({
             rows: 999
           }
         })
+        console.log(data)
         albumRecord.value = data || []
         if (albumRecord.value.length > 0) {
           const albumCatchType = localStorage.getItem(
@@ -193,7 +194,7 @@ export default defineComponent({
       // MUSIC: '独奏曲目',
       // ENSEMBLE: '合奏练习'
       loading.value = true
-      await getAlbumRecordPage()
+      //await getAlbumRecordPage()
       await getSelectCondition()
       if (params.albumId) {
         await FetchList()
@@ -215,7 +216,7 @@ export default defineComponent({
                 title={title}
                 color="#131415"
               >
-                {{
+                {/* {{
                   right: () =>
                     albumRecord.value.length > 1 &&
                     params.albumId && (
@@ -285,7 +286,7 @@ export default defineComponent({
                         </DropdownItem>
                       </DropdownMenu>
                     )
-                }}
+                }} */}
               </ColHeader>
               <Search
                 onSearch={onSearch}
@@ -442,7 +443,9 @@ export default defineComponent({
                             round
                             block
                             onClick={() => {
-                              onSearch('')
+                              params.page = 1
+                              data.value = null
+                              FetchList()
                               searchRef.value?.toggle()
                             }}
                           >
@@ -460,7 +463,7 @@ export default defineComponent({
 
           <div class={styles.alumnList}>
             <List
-              // loading={loading.value}
+              loading={loading.value}
               finished={finished.value}
               finished-text={data.value && data.value.rows.length ? '' : ''}
               onLoad={FetchList}

src/tenant/music/train-tool/index.tsx

@@ -61,6 +61,7 @@ export default defineComponent({
       ensembleCounts: false,
       musicCounts: false,
       subjectCounts: false,
+      coursewareCounts: false,
       tenantAlbumStatus: 0 as any,
       ablumStatus: false,
       heightV: 0,
@@ -145,12 +146,16 @@ export default defineComponent({
         state.ensembleCounts = state.details?.ensembleCounts <= 0 ? false : true
         state.subjectCounts = state.details?.subjectCounts <= 0 ? false : true
         state.musicCounts = state.details?.musicCounts <= 0 ? false : true
+        state.coursewareCounts =
+          state.details?.coursewareCounts <= 0 ? false : true
         if (state.subjectCounts) {
           state.activeTab = 'SUBJECT'
         } else if (state.musicCounts) {
           state.activeTab = 'MUSIC'
         } else if (state.ensembleCounts) {
           state.activeTab = 'ENSEMBLE'
+        } else if (state.coursewareCounts) {
+          state.activeTab = 'COURSEWARE'
         }
         // 带的参数
         if (route.query.subjectType == 'SUBJECT' && state.subjectCounts) {
@@ -162,6 +167,11 @@ export default defineComponent({
           state.ensembleCounts
         ) {
           state.activeTab = 'ENSEMBLE'
+        } else if (
+          route.query.subjectType == 'COURSEWARE' &&
+          state.coursewareCounts
+        ) {
+          state.activeTab = 'COURSEWARE'
         }
         // subjectType 缓存
         if (subjectType == 'SUBJECT' && state.subjectCounts) {
@@ -170,6 +180,8 @@ export default defineComponent({
           state.activeTab = 'MUSIC'
         } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
           state.activeTab = 'ENSEMBLE'
+        } else if (subjectType == 'COURSEWARE' && state.coursewareCounts) {
+          state.activeTab = 'COURSEWARE'
         }
 
         if (state.details.buyTimesFlag) {
@@ -270,6 +282,7 @@ export default defineComponent({
       })
 
       const result = res.data
+      console.log(details, album)
       if (result) {
         state.popupStatus = false
         Dialog.confirm({
@@ -413,12 +426,16 @@ export default defineComponent({
                             state.details?.subjectCounts <= 0 ? false : true
                           state.musicCounts =
                             state.details?.musicCounts <= 0 ? false : true
+                          state.coursewareCounts =
+                            state.details?.coursewareCounts <= 0 ? false : true
                           if (state.subjectCounts) {
                             state.activeTab = 'SUBJECT'
                           } else if (state.musicCounts) {
                             state.activeTab = 'MUSIC'
                           } else if (state.ensembleCounts) {
                             state.activeTab = 'ENSEMBLE'
+                          } else if (state.coursewareCounts) {
+                            state.activeTab = 'COURSEWARE'
                           }
                           params.page = 1
                           state.list = []
@@ -514,7 +531,9 @@ export default defineComponent({
                     {state.ensembleCounts && (
                       <Tab title="合奏练习" name="ENSEMBLE"></Tab>
                     )}
-                    <Tab title="云教程" name="COURSEWARE"></Tab>
+                    {state.coursewareCounts && (
+                      <Tab title="云教程" name="COURSEWARE"></Tab>
+                    )}
                   </Tabs>
                 </Sticky>
 
@@ -528,54 +547,46 @@ export default defineComponent({
                     error={state.isError}
                   >
                     {state.list && state.list.length ? (
-                      <Song
-                        showNumber
-                        list={state.list}
-                        onDetail={(item: any) => {
-                          sessionStorage.setItem(
-                            'tool-subject-type',
-                            state.activeTab as any
-                          )
-                          router.push({
-                            path: '/music-detail',
-                            query: {
-                              id: item.id,
-                              tenantAlbumId: item.tenantAlbumId
-                              // albumId: route.params.id
+                      state.activeTab === 'COURSEWARE' ? (
+                        <CourseItem
+                          list={state.list.map(item => {
+                            return {
+                              name: item.musicSheetName,
+                              coverImg: item.titleImg,
+                              id: item.id
                             }
-                          })
-                        }}
-                      />
+                          })}
+                          onItemClick={row => {
+                            router.push({
+                              path: '/courseList',
+                              query: {
+                                id: row.id,
+                                albumId: state.details.id
+                              }
+                            })
+                          }}
+                        />
+                      ) : (
+                        <Song
+                          showNumber
+                          list={state.list}
+                          onDetail={(item: any) => {
+                            sessionStorage.setItem(
+                              'tool-subject-type',
+                              state.activeTab as any
+                            )
+                            router.push({
+                              path: '/music-detail',
+                              query: {
+                                id: item.id,
+                                tenantAlbumId: item.tenantAlbumId
+                                // albumId: route.params.id
+                              }
+                            })
+                          }}
+                        />
+                      )
                     ) : (
-                      // <CourseItem
-                      //   list={[
-                      //     {
-                      //       coverImg:
-                      //         'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      //       name: '2333333'
-                      //     },
-                      //     {
-                      //       coverImg:
-                      //         'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      //       name: '2333333'
-                      //     },
-                      //     {
-                      //       coverImg:
-                      //         'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      //       name: '2333333'
-                      //     },
-                      //     {
-                      //       coverImg:
-                      //         'https://oss.dayaedu.com/gyt/courseware/1709189798128.png',
-                      //       name: '2333333'
-                      //     },
-                      //     {
-                      //       coverImg: '',
-                      //       name: '2333333'
-                      //     }
-                      //   ]}
-                      //   onItemClick={row => console.log(row)}
-                      // />
                       !state.loading && (
                         <ColResult
                           tips="暂无曲目" //暂无教程
@@ -599,7 +610,7 @@ export default defineComponent({
                       color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                       onClick={onSubmit}
                     >
-                      购买教程
+                      开通训练教程
                     </Button>
                   </div>
                 </TheSticky>