Merge branch 'master' of http://git.dayaedu.com/lex/orchestra-app

src/router/routes-student.ts

@@ -75,14 +75,16 @@ export default [
         meta: {
           title: '我的乐团'
         }
-      }, {
+      },
+      {
         path: '/photo-detail',
         name: 'photo-detail',
         component: () => import('@/student/my-orchestra/photo-detail'),
         meta: {
           title: '相片'
         }
-      }, {
+      },
+      {
         path: '/apply-withdrawal',
         name: 'apply-withdrawal',
         component: () => import('@/student/my-orchestra/apply-withdrawal'),
@@ -151,6 +153,22 @@ export default [
         meta: {
           title: '排行榜'
         }
+      },
+      {
+        path: '/exercise-record',
+        name: 'exercise-record',
+        component: () => import('@/views/exercise-record'),
+        meta: {
+          title: '练习记录'
+        }
+      },
+      {
+        path: '/exercis-detail',
+        name: 'exercis-detail',
+        component: () => import('@/views/exercise-record/exercis-detail'),
+        meta: {
+          title: '练习统计'
+        }
       }
     ]
   },

src/views/coursewarePlay/component/musicScore.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
     console.log(dev, 'https://ponline.colexiu.com')
     let src = `${dev ? `http://192.168.3.114:3000` : location.origin}/orchestra-music-score/#/?id=${
       props.music.content
-    }&Authorization=${Authorization}`
+    }&Authorization=${Authorization}&modelType=practice`
     console.log('src', src)
     
     return () => (
@@ -23,7 +23,7 @@ export default defineComponent({
         class={styles.musicScore}
       >
         <iframe
-          class={styles.container}
+          class={[styles.container, 'musicIframe']}
           frameborder="0"
           src={src}
         ></iframe>

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

@@ -21,6 +21,5 @@
     padding: 11px 0;
 }
 .itemActive{
-    border-bottom: 1Px solid #fff;
-    border-radius: 1Px;
+    color: var(--van-primary);
 }

src/views/coursewarePlay/component/points.tsx

@@ -9,11 +9,12 @@ export default defineComponent({
       default: () => []
     },
     active: {
-        type: String,
-        default: ''
+      type: String,
+      default: ''
     }
   },
-  setup(props, ctx) {
+  emits: ['handleSelect'],
+  setup(props, {emit}) {
     return () => (
       <div class={styles.container}>
         <div>
@@ -26,8 +27,18 @@ export default defineComponent({
               return (
                 <>
                   {Array.isArray(item?.materialList) &&
-                    item.materialList.map((n: any) => {
-                      return <div data-id={`${item.id}-${n.id}`} class={[styles.item, `${item.id}-${n.id}` === props.active ? styles.itemActive: '']}>{item.name}-{n.name}</div>
+                    item.materialList.map((n: any, index: number) => {
+                      return (
+                        <div
+                          class={[
+                            styles.item,
+                            `${item.id}-${n.id}` === props.active ? styles.itemActive : ''
+                          ]}
+                          onClick={() => emit('handleSelect', {id: item.id, index, active: `${item.id}-${n.id}`})}
+                        >
+                          {item.name}-{n.name}
+                        </div>
+                      )
                     })}
                 </>
               )

src/views/coursewarePlay/index.module.less

@@ -9,11 +9,11 @@
   left: 0;
   right: 0;
   z-index: 1;
+  padding: 10Px 10Px 0 40Px;
+  display: flex;
+  align-items: center;
 }
 .backBtn {
-  position: absolute;
-  left: 40px;
-  top: 10px;
   color: #fff;
   width: 40px;
   height: 26px;
@@ -23,11 +23,10 @@
   z-index: 10;
 }
 .menu {
-  position: absolute;
-  top: 10px;
-  left: 140px;
-  right: 84px;
-  z-index: 10;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  margin-left: 10Px;
   .menuLine {
     position: absolute;
     left: 0;
@@ -95,6 +94,7 @@
     display: block;
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
 }
 .songItem {
@@ -125,3 +125,14 @@
 .overlayClass {
   --van-overlay-background: transparent;
 }
+:global{
+  .top-enter-active,
+  .top-leave-active {
+    transition: transform 0.5s;
+  }
+  
+  .top-enter-from,
+  .top-leave-to {
+    transform: translateY(-100%);
+  }
+}

src/views/coursewarePlay/index.tsx

@@ -1,5 +1,14 @@
-import { Icon, Popup, Swipe, SwipeItem, Tab, Tabs } from 'vant'
-import { defineComponent, onMounted, reactive, nextTick, onUnmounted, ref } from 'vue'
+import { Button, Icon, Popup, Swipe, SwipeItem, Tab, Tabs } from 'vant'
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  nextTick,
+  onUnmounted,
+  ref,
+  watch,
+  Transition
+} from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
 import Plyr from 'plyr'
@@ -16,7 +25,6 @@ import Points from './component/points'
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
-    const isTouch = ref(false)
     const handleInit = () => {
       postMessage({
         api: 'setRequestedOrientation',
@@ -57,7 +65,9 @@ export default defineComponent({
     const data = reactive({
       detail: null,
       active: '',
-      knowledgePointList: [] as any
+      knowledgePointList: [] as any,
+      showHead: true,
+      players: [] as any
     })
     const getDetail = async () => {
       try {
@@ -82,12 +92,12 @@ export default defineComponent({
     }
     const videoInit = () => {
       console.log(document.querySelectorAll('.player'))
-      const player = Plyr.setup('.player', {
+      data.players = Plyr.setup('.player', {
         debug: false,
         ratio: '16:9',
         controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions']
       })
-      console.log('🚀 ~ player', player)
+      console.log('🚀 ~ player', data.players)
     }
     onMounted(() => {
       handleInit()
@@ -99,7 +109,14 @@ export default defineComponent({
     }
     // 所有的切换
     const handleChange = () => {
-      console.log('切换了')
+      // console.log('切换了')
+      const iframes = document.querySelectorAll('.musicIframe')
+      Array.from(iframes).map((f: any) => {
+        f.contentWindow.postMessage({ api: 'setPlayState' }, '*')
+      })
+      data.players.forEach((p: any) => {
+        p.stop()
+      })
     }
     onUnmounted(() => {
       postMessage({
@@ -124,60 +141,80 @@ export default defineComponent({
 
     const popupData = reactive({
       open: false,
-      active: '',
-      knowledgeId: '',
-      materialId: ''
+      active: ''
     })
+    // 监听切换
+    watch(
+      () => popupData.active,
+      () => {
+        console.log(data.active, '监听切换')
+        handleChange()
+        const knowledge = data.knowledgePointList.find((n: any) => n.id === data.active)
+        if (knowledge && knowledge?.materialList[knowledge.index]) {
+          // 如果是曲谱,隐藏头部
+          if (knowledge.materialList[knowledge.index]?.type === 'SONG') {
+            data.showHead = false
+            return
+          }
+        }
+        data.showHead = true
+      }
+    )
     return () => (
       <div class={styles.coursewarePlay}>
-        <div class={styles.headerContainer}>
-          <div class={styles.backBtn} onClick={() => goback()}>
-            <Icon name={iconBack} />
-            返回
-          </div>
-          <div class={styles.menu}>
-            <Tabs
-              v-model:active={data.active}
-              ellipsis={false}
-              onChange={() => {
-                const knowledge = data.knowledgePointList.find((_: any) => _.id === data.active)
-                popupData.active = `${data.active}-${knowledge?.materialList?.[knowledge.index]?.id}`
-                console.log("🚀 ~ popupData.active", popupData.active)
-                handleChange()
-              }}
-            >
-              {{
-                default: () => {
-                  return data.knowledgePointList.map((n: any) => {
-                    return <Tab title={n.name} name={n.id}></Tab>
-                  })
-                }
-                // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
-              }}
-            </Tabs>
-          </div>
-        </div>
+        <Transition name='top'>
+          {data.showHead && (
+            <div class={styles.headerContainer}>
+              <div class={styles.backBtn} onClick={() => goback()}>
+                <Icon name={iconBack} />
+                返回
+              </div>
+              <div class={styles.menu}>
+                <Tabs
+                  v-model:active={data.active}
+                  ellipsis={false}
+                  onChange={() => {
+                    const knowledge = data.knowledgePointList.find((_: any) => _.id === data.active)
+                    popupData.active = `${data.active}-${
+                      knowledge?.materialList?.[knowledge.index]?.id
+                    }`
+                  }}
+                >
+                  {{
+                    default: () => {
+                      return data.knowledgePointList.map((n: any) => {
+                        return <Tab title={n.name} name={n.id}></Tab>
+                      })
+                    }
+                    // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
+                  }}
+                </Tabs>
+              </div>
+            </div>
+          )}
+        </Transition>
+                  
         <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
           {data.knowledgePointList.map((item: any) => {
             return (
               <Tab name={item.id}>
                 <Swipe
                   style={{ height: '100vh' }}
+                  showIndicators={false}
                   loop={false}
+                  initialSwipe={item.index}
                   vertical
                   lazyRender={false}
                   onChange={(val: any) => {
                     item.index = val
                     popupData.active = `${item.id}-${item?.materialList?.[item.index]?.id}`
-                    console.log("🚀 ~ popupData.active", popupData.active)
-                    handleChange()
                   }}
                 >
                   {Array.isArray(item?.materialList) &&
                     item.materialList.map((m: any) => {
-                      if (popupData.active === ''){
+                      if (popupData.active === '') {
                         popupData.active = `${item.id}-${m.id}`
-                        console.log("🚀 ~ popupData", popupData)
+                        console.log('🚀 ~ popupData', popupData)
                       }
                       return (
                         <SwipeItem>
@@ -208,8 +245,24 @@ export default defineComponent({
           <img src={iconMenu} />
           <span>列表</span>
         </div>
-        <Popup class={styles.popup} overlayClass={styles.overlayClass} position="left" v-model:show={popupData.open}>
-          <Points data={data.knowledgePointList} active={popupData.active} />
+        <Popup
+          class={styles.popup}
+          overlayClass={styles.overlayClass}
+          position="left"
+          v-model:show={popupData.open}
+        >
+          <Points
+            data={data.knowledgePointList}
+            active={popupData.active}
+            onHandleSelect={(res: any) => {
+              data.active = res.id
+              const knowledge = data.knowledgePointList.find((n: any) => n.id === res.id)
+              // console.log(res,knowledge)
+              knowledge && (knowledge.index = res.index)
+              popupData.active = res.active
+              popupData.open = false
+            }}
+          />
         </Popup>
       </div>
     )