Merge branch 'hqyDev' of http://git.dayaedu.com/lex/h5-colexiu

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 {
@@ -13,29 +13,23 @@ import {
 } from 'vue'
 import styles from './index.module.less'
 import { useRoute, useRouter } from 'vue-router'
+import { state as baseState } from '@/state'
+import { orderStatus } from '@/views/order-detail/orderStatus'
 import {
   listenerMessage,
   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 +41,35 @@ 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 apiSuffix = ref(
+      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    )
     /** 获取课件详情 */
     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 +133,20 @@ export default defineComponent({
     })
 
     const handleClick = async (item: any) => {
+      if (!data.detail?.play) {
+        if (!browser().isApp) {
+          onDownloadApp()
+          return
+        }
+        onSubmit()
+        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 +230,7 @@ export default defineComponent({
     }
     // 下载缓存
     const downCatch = async (item: any) => {
+      console.log(item)
       if (browserInfo.isApp) {
         data.catchStatus = false
         data.isDownloading = true
@@ -274,12 +276,107 @@ export default defineComponent({
         document.documentElement.scrollTop
       data.titleOpacity = height > 100 ? 1 : height / 100
     })
+    //  购买
+    const onSubmit = async () => {
+      const url =
+        apiSuffix.value +
+        '/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=' +
+        (route.query.taId || '')
+      // if (state.albumId) {
+      //   url = url + '?albumId=' + state.albumId
+      // }
+      const { data } = await request.get(url)
+      const details = data[0]
+      orderStatus.orderObject.orderType = 'TENANT_ALBUM'
+      orderStatus.orderObject.orderName = details.name
+      orderStatus.orderObject.orderDesc = details.name
+      orderStatus.orderObject.actualPrice = details.actualPrice
+      // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
+      // orderStatus.orderObject.activityId = route.query.activityId || 0
+      orderStatus.orderObject.orderNo = ''
+      orderStatus.orderObject.orderList = [
+        {
+          orderType: 'TENANT_ALBUM',
+          goodsName: details.name,
+          actualPrice: details.actualPrice,
+          price: details.actualPrice,
+          ...details
+        }
+      ]
+
+      const res = await request.post('/api-student/userOrder/getPendingOrder', {
+        data: {
+          goodType: 'TENANT_ALBUM',
+          bizId: details.id
+        }
+      })
+
+      const result = res.data
+      if (result) {
+        Dialog.confirm({
+          title: '提示',
+          message: '您有一个未支付的订单，是否继续支付？',
+          theme: 'round-button',
+          className: 'confirm-button-group',
+          cancelButtonText: '取消订单',
+          confirmButtonText: '继续支付'
+        })
+          .then(async () => {
+            orderStatus.orderObject.orderNo = result.orderNo
+            orderStatus.orderObject.actualPrice = result.actualPrice
+            orderStatus.orderObject.discountPrice = result.discountPrice
+            orderStatus.orderObject.paymentConfig = {
+              ...result.paymentConfig,
+              paymentVendor: result.paymentVendor,
+              paymentVersion: result.paymentVersion
+            }
+
+            routerToALBUM(details.id)
+          })
+          .catch(() => {
+            Dialog.close()
+            // 只用取消订单，不用做其它处理
+            cancelPaymentALBUM(result.orderNo)
+          })
+      } else {
+        routerToALBUM(details.id)
+      }
+    }
+    const cancelPaymentALBUM = async (orderNo: string) => {
+      try {
+        await request.post('/api-student/userOrder/orderCancel/v2', {
+          data: {
+            orderNo
+          }
+        })
+      } catch {
+        //
+      }
+    }
+    const routerToALBUM = (id: string) => {
+      router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'ALBUM',
+          album: id
+        }
+      })
+    }
+    const onDownloadApp = () => {
+      Dialog.alert({
+        title: '提示',
+        message: '请在酷乐秀APP中使用',
+        confirmButtonColor: '#2dc7aa'
+      }).then(() => {
+        window.location.href = location.origin + '/student/#/download'
+      })
+    }
     return () => (
       <div class={styles.courseList}>
         <TheSticky position="top">
           <ColHeader
             hideHeader={false}
-            background="transparent"
+            background={`rgba(255,255,255, ${data.titleOpacity})`}
             isFixed={false}
             border={false}
             title={'教程详情'}
@@ -289,7 +386,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 +396,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 +444,7 @@ export default defineComponent({
                                 ) : (
                                   ''
                                 )}
-                                {item.downloadStatus === 1 && (
+                                {item.downloadStatus == 1 && (
                                   <div class={styles.downloading}>{`${
                                     item.progress || 0
                                   }%`}</div>
@@ -357,37 +456,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 +498,27 @@ export default defineComponent({
         {!data.loading && !data.list.length && (
           <ColResult tips="暂无内容" classImgSize="SMALL" btnStatus={false} />
         )}
+        <TheSticky position="bottom">
+          {data.detail.id && !data.detail.play && (
+            <div class={styles.footers}>
+              <Button
+                round
+                block
+                type="primary"
+                color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                onClick={() => {
+                  if (!browser().isApp) {
+                    onDownloadApp()
+                    return
+                  }
+                  onSubmit()
+                }}
+              >
+                开通训练教程
+              </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

@@ -108,7 +108,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 (
         <>
@@ -82,19 +147,19 @@ export default defineComponent({
                 inputBackground="transparent"
                 // leftIcon={iconSearch}
                 v-slots={{
-                  left: () => (
-                    <DropdownMenu class={styles.dropdownMenuSub}>
-                      <DropdownItem
-                        titleClass={styles.titleActive}
-                        title={subjectOptValue.value}
-                        v-model={subjectOptValue.value}
-                        options={subjectOpt.value}
-                        onChange={handleOnRefresh}
-                      >
-                        <div></div>
-                      </DropdownItem>
-                    </DropdownMenu>
-                  )
+                  left: () =>
+                    subjectOpt.value.length > 1 && (
+                      <DropdownMenu class={styles.dropdownMenuSub}>
+                        <DropdownItem
+                          titleClass={styles.titleActive}
+                          v-model={subjectOptValue.value}
+                          options={subjectOpt.value}
+                          onChange={handleOnRefresh}
+                        >
+                          <div></div>
+                        </DropdownItem>
+                      </DropdownMenu>
+                    )
                 }}
               />
             </TheSticky>
@@ -103,78 +168,33 @@ 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,
+                        taId: route.query.taId
+                      }
+                    })
+                  }}
                 />
               ) : (
                 !loading.value && (

src/tenant/music/music-detail/new-index.tsx

@@ -47,6 +47,7 @@ import ColShare from '@/components/col-share'
 import iconListen from './images/icon_listen.png'
 import iconTeacher from '@common/images/icon_teacher.png'
 import emtpy from './images/emtpy.png'
+import { state as baseState } from '@/state'
 
 import activeButtonIcon from './images/icon_checkbox.png'
 import inactiveButtonIcon from './images/icon_checkbox_default.png'
@@ -112,7 +113,9 @@ export default defineComponent({
         text: '点播'
       }
     }
-
+    const apiSuffix = ref(
+      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    )
     // 更改预览状态
     const onChangeStaff = (type: string) => {
       staff.radio = type
@@ -756,6 +759,93 @@ export default defineComponent({
         window.location.href = location.origin + '/student/#/download'
       })
     }
+
+    //  购买
+    const onSubmit = async () => {
+      const url =
+        apiSuffix.value +
+        '/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=' +
+        (route.query.taId || '')
+      // if (state.albumId) {
+      //   url = url + '?albumId=' + state.albumId
+      // }
+      const { data } = await request.get(url)
+      const details = data[0]
+      orderStatus.orderObject.orderType = 'TENANT_ALBUM'
+      orderStatus.orderObject.orderName = details.name
+      orderStatus.orderObject.orderDesc = details.name
+      orderStatus.orderObject.actualPrice = details.actualPrice
+      // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
+      // orderStatus.orderObject.activityId = route.query.activityId || 0
+      orderStatus.orderObject.orderNo = ''
+      orderStatus.orderObject.orderList = [
+        {
+          orderType: 'TENANT_ALBUM',
+          goodsName: details.name,
+          actualPrice: details.actualPrice,
+          price: details.actualPrice,
+          ...details
+        }
+      ]
+
+      const res = await request.post('/api-student/userOrder/getPendingOrder', {
+        data: {
+          goodType: 'TENANT_ALBUM',
+          bizId: details.id
+        }
+      })
+
+      const result = res.data
+      if (result) {
+        Dialog.confirm({
+          title: '提示',
+          message: '您有一个未支付的订单，是否继续支付？',
+          theme: 'round-button',
+          className: 'confirm-button-group',
+          cancelButtonText: '取消订单',
+          confirmButtonText: '继续支付'
+        })
+          .then(async () => {
+            orderStatus.orderObject.orderNo = result.orderNo
+            orderStatus.orderObject.actualPrice = result.actualPrice
+            orderStatus.orderObject.discountPrice = result.discountPrice
+            orderStatus.orderObject.paymentConfig = {
+              ...result.paymentConfig,
+              paymentVendor: result.paymentVendor,
+              paymentVersion: result.paymentVersion
+            }
+
+            routerToALBUM(details.id)
+          })
+          .catch(() => {
+            Dialog.close()
+            // 只用取消订单，不用做其它处理
+            cancelPaymentALBUM(result.orderNo)
+          })
+      } else {
+        routerToALBUM(details.id)
+      }
+    }
+    const cancelPaymentALBUM = async (orderNo: string) => {
+      try {
+        await request.post('/api-student/userOrder/orderCancel/v2', {
+          data: {
+            orderNo
+          }
+        })
+      } catch {
+        //
+      }
+    }
+    const routerToALBUM = (id: string) => {
+      router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'ALBUM',
+          album: id
+        }
+      })
+    }
     return () => (
       <div class={styles.detail}>
         <TheSticky position="top">
@@ -1047,7 +1137,7 @@ export default defineComponent({
                       if (route.query.type === 'search') {
                         router.push('train-tool')
                       } else {
-                        router.back()
+                        onSubmit()
                       }
                     }}
                   >

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}
@@ -294,164 +295,166 @@ export default defineComponent({
                 inputBackground="transparent"
                 // leftIcon={iconSearch}
                 v-slots={{
-                  left: () => (
-                    <DropdownMenu>
-                      <DropdownItem
-                        disabled={!isSearchStatus.value}
-                        titleClass={
-                          params.subjectId || params.type || params.level
-                            ? styles.titleActive
-                            : ''
-                        }
-                        title="筛选"
-                        ref={searchRef}
-                      >
-                        <div
-                          class={styles.searchResult}
-                          style={{ maxHeight: '45vh', overflowY: 'auto' }}
+                  left: () =>
+                    isSearchStatus.value && (
+                      <DropdownMenu>
+                        <DropdownItem
+                          titleClass={
+                            params.subjectId || params.type || params.level
+                              ? styles.titleActive
+                              : ''
+                          }
+                          title="筛选"
+                          ref={searchRef}
                         >
-                          {searchObj.value.subjects &&
-                            searchObj.value.subjects.length > 0 && (
-                              <>
-                                <div class={styles.searchTitle}>声部</div>
-                                <div
-                                  class={[
-                                    styles['radio-group'],
-                                    styles.radio,
-                                    styles['organ-radio']
-                                  ]}
-                                >
-                                  {searchObj.value.subjects.map(
-                                    (subject: any) => {
-                                      const isActive =
-                                        subject.id === params.subjectId
-                                      const type = isActive
-                                        ? 'primary'
-                                        : 'default'
-                                      return (
-                                        <Tag
-                                          size="large"
-                                          plain={isActive}
-                                          type={type}
-                                          round
-                                          onClick={() => {
-                                            params.subjectId = subject.id
-                                          }}
-                                        >
-                                          {subject.name}
-                                        </Tag>
-                                      )
-                                    }
-                                  )}
-                                </div>
-                              </>
-                            )}
-                          {searchObj.value.levelList &&
-                            searchObj.value.levelList.length > 0 && (
-                              <>
-                                <div class={styles.searchTitle}>级别</div>
-                                <div
-                                  class={[
-                                    styles['radio-group'],
-                                    styles.radio,
-                                    styles['organ-radio']
-                                  ]}
-                                >
-                                  {searchObj.value.levelList.map(
-                                    (subject: any) => {
-                                      const isActive =
-                                        subject.id === params.level
-                                      const type = isActive
-                                        ? 'primary'
-                                        : 'default'
-                                      return (
-                                        <Tag
-                                          size="large"
-                                          plain={isActive}
-                                          type={type}
-                                          round
-                                          onClick={() => {
-                                            params.level = subject.id
-                                          }}
-                                        >
-                                          {subject.value}
-                                        </Tag>
-                                      )
-                                    }
-                                  )}
-                                </div>
-                              </>
-                            )}
-                          {searchObj.value.typeList &&
-                            searchObj.value.typeList.length > 0 && (
-                              <>
-                                <div class={styles.searchTitle}>类型</div>
-                                <div
-                                  class={[
-                                    styles['radio-group'],
-                                    styles.radio,
-                                    styles['organ-radio']
-                                  ]}
-                                >
-                                  {searchObj.value.typeList.map(
-                                    (subject: any) => {
-                                      const isActive =
-                                        subject.id === params.type
-                                      const type = isActive
-                                        ? 'primary'
-                                        : 'default'
-                                      return (
-                                        <Tag
-                                          size="large"
-                                          plain={isActive}
-                                          type={type}
-                                          round
-                                          onClick={() => {
-                                            params.type = subject.id
-                                          }}
-                                        >
-                                          {subject.value}
-                                        </Tag>
-                                      )
-                                    }
-                                  )}
-                                </div>
-                              </>
-                            )}
-                        </div>
-
-                        <div class={['btnGroup', 'btnMore']}>
-                          <Button
-                            class={styles.resetting}
-                            type="primary"
-                            plain
-                            round
-                            onClick={() => {
-                              params.subjectId = null
-                              params.level = ''
-                              params.type = ''
-                            }}
+                          <div
+                            class={styles.searchResult}
+                            style={{ maxHeight: '45vh', overflowY: 'auto' }}
                           >
-                            重 置
-                          </Button>
+                            {searchObj.value.subjects &&
+                              searchObj.value.subjects.length > 0 && (
+                                <>
+                                  <div class={styles.searchTitle}>声部</div>
+                                  <div
+                                    class={[
+                                      styles['radio-group'],
+                                      styles.radio,
+                                      styles['organ-radio']
+                                    ]}
+                                  >
+                                    {searchObj.value.subjects.map(
+                                      (subject: any) => {
+                                        const isActive =
+                                          subject.id === params.subjectId
+                                        const type = isActive
+                                          ? 'primary'
+                                          : 'default'
+                                        return (
+                                          <Tag
+                                            size="large"
+                                            plain={isActive}
+                                            type={type}
+                                            round
+                                            onClick={() => {
+                                              params.subjectId = subject.id
+                                            }}
+                                          >
+                                            {subject.name}
+                                          </Tag>
+                                        )
+                                      }
+                                    )}
+                                  </div>
+                                </>
+                              )}
+                            {searchObj.value.levelList &&
+                              searchObj.value.levelList.length > 0 && (
+                                <>
+                                  <div class={styles.searchTitle}>级别</div>
+                                  <div
+                                    class={[
+                                      styles['radio-group'],
+                                      styles.radio,
+                                      styles['organ-radio']
+                                    ]}
+                                  >
+                                    {searchObj.value.levelList.map(
+                                      (subject: any) => {
+                                        const isActive =
+                                          subject.id === params.level
+                                        const type = isActive
+                                          ? 'primary'
+                                          : 'default'
+                                        return (
+                                          <Tag
+                                            size="large"
+                                            plain={isActive}
+                                            type={type}
+                                            round
+                                            onClick={() => {
+                                              params.level = subject.id
+                                            }}
+                                          >
+                                            {subject.value}
+                                          </Tag>
+                                        )
+                                      }
+                                    )}
+                                  </div>
+                                </>
+                              )}
+                            {searchObj.value.typeList &&
+                              searchObj.value.typeList.length > 0 && (
+                                <>
+                                  <div class={styles.searchTitle}>类型</div>
+                                  <div
+                                    class={[
+                                      styles['radio-group'],
+                                      styles.radio,
+                                      styles['organ-radio']
+                                    ]}
+                                  >
+                                    {searchObj.value.typeList.map(
+                                      (subject: any) => {
+                                        const isActive =
+                                          subject.id === params.type
+                                        const type = isActive
+                                          ? 'primary'
+                                          : 'default'
+                                        return (
+                                          <Tag
+                                            size="large"
+                                            plain={isActive}
+                                            type={type}
+                                            round
+                                            onClick={() => {
+                                              params.type = subject.id
+                                            }}
+                                          >
+                                            {subject.value}
+                                          </Tag>
+                                        )
+                                      }
+                                    )}
+                                  </div>
+                                </>
+                              )}
+                          </div>
 
-                          <Button
-                            class={styles.confirm}
-                            type="primary"
-                            color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
-                            round
-                            block
-                            onClick={() => {
-                              onSearch('')
-                              searchRef.value?.toggle()
-                            }}
-                          >
-                            确 认
-                          </Button>
-                        </div>
-                      </DropdownItem>
-                    </DropdownMenu>
-                  )
+                          <div class={['btnGroup', 'btnMore']}>
+                            <Button
+                              class={styles.resetting}
+                              type="primary"
+                              plain
+                              round
+                              onClick={() => {
+                                params.subjectId = null
+                                params.level = ''
+                                params.type = ''
+                              }}
+                            >
+                              重 置
+                            </Button>
+
+                            <Button
+                              class={styles.confirm}
+                              type="primary"
+                              color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
+                              round
+                              block
+                              onClick={() => {
+                                params.page = 1
+                                data.value = null
+                                FetchList()
+                                searchRef.value?.toggle()
+                              }}
+                            >
+                              确 认
+                            </Button>
+                          </div>
+                        </DropdownItem>
+                      </DropdownMenu>
+                    )
                 }}
               />
             </TheSticky>
@@ -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}
@@ -477,7 +480,8 @@ export default defineComponent({
                       query: {
                         subjectType,
                         id: item.id,
-                        tenantAlbumId: item.tenantAlbumId
+                        tenantAlbumId: item.tenantAlbumId,
+                        taId: route.query.taId
                       }
                     })
                   }}

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,
@@ -88,7 +89,8 @@ export default defineComponent({
       state.loadingAlbum = true
       try {
         // tenantGroupAlbum/buyAlbumInfo
-        if (state.albumId) {
+        // 当小组专辑id和专辑id同时传入的时候以小组专辑id为准
+        if (state.albumId && !route.query.taId) {
           let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
           if (state.albumId) {
             url = url + '?albumId=' + state.albumId
@@ -145,12 +147,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 +168,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 +181,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) {
@@ -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,47 @@ 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,
+                                taId: state.details.tenantGroupAlbumId  // 当通过专辑查看时候 这个值为空
+                              }
+                            })
+                          }}
+                        />
+                      ) : (
+                        <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,
+                                taId: state.details.tenantGroupAlbumId // 当通过专辑查看时候 这个值为空
+                              }
+                            })
+                          }}
+                        />
+                      )
                     ) : (
-                      // <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 +611,7 @@ export default defineComponent({
                       color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                       onClick={onSubmit}
                     >
-                      购买教程
+                      开通训练教程
                     </Button>
                   </div>
                 </TheSticky>