添加去练习

src/views/coursewarePlay/component/video-play.tsx

@@ -8,7 +8,8 @@ import iconLoop from '../image/icon-loop.svg'
 import iconLoopActive from '../image/icon-loop-active.svg'
 import iconplay from '../image/icon-play.svg'
 import iconpause from '../image/icon-pause.svg'
-
+import { postMessage } from '@/helpers/native-message'
+import qs from 'query-string'
 import { iconSpeed } from '../image/icons.json'
 import TCPlayer from 'tcplayer.js'
 import 'tcplayer.js/dist/tcplayer.min.css'
@@ -322,6 +323,25 @@ export default defineComponent({
       }
     )
 
+    // 去云练习完整版
+    const gotoAccomany = (e: any) => {
+      e.stopPropagation()
+      const parmas = qs.stringify({
+        id: item.value.materialMusicId
+      })
+      const src = `${location.origin}/orchestra-music-score/?` + parmas
+      postMessage({
+        api: 'openAccompanyWebView',
+        content: {
+          url: src,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true
+        }
+      })
+    }
+
     return () => (
       <div class={styles.videoWrap}>
         <video
@@ -346,8 +366,7 @@ export default defineComponent({
           // }}
         >
           <div class={styles.time}>
-            <div>{getSecondRPM(data.currentTime)}</div>
-            <div>{getSecondRPM(data.duration)}</div>
+            <div>{getSecondRPM(data.currentTime)}</div>/<div>{getSecondRPM(data.duration)}</div>
           </div>
           <div class={styles.slider}>
             <Slider
@@ -382,6 +401,13 @@ export default defineComponent({
           </div>
         </div>
 
+        {item.value.materialMusicId && (
+          <div
+            class={[styles.goPractice, data.showBar ? '' : styles.hide]}
+            onClick={gotoAccomany}
+          ></div>
+        )}
+
         <div
           style={{
             display: data.speedControl ? 'block' : 'none'

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

@@ -189,7 +189,7 @@
 
   .time {
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
     // width: 100%;
     color: #fff;
     font-size: 10px;
@@ -423,4 +423,21 @@
       margin: 7px 0;
     }
   }
+}
+
+.goPractice {
+  width: 89px;
+  height: 32px;
+  background: url('./../image/btn_go_practice.png') no-repeat center;
+  background-size: contain;
+  position: absolute;
+  right: 12px;
+  bottom: 60px;
+  z-index: 11;
+  transition: all .5s ease;
+
+
+  &.hide {
+    transform: translateX(65px);
+  }
 }

src/views/coursewarePlay/index.tsx

@@ -291,8 +291,11 @@ export default defineComponent({
             if (Array.isArray(n.materialList)) {
               n.materialList = n.materialList.map((item: any) => {
                 index++
+                const materialRefs = item.materialRefs ? item.materialRefs : []
+                const materialMusicId = materialRefs.length > 0 ? materialRefs[0].resourceId : null
                 return {
                   ...item,
+                  materialMusicId,
                   knowledgePointId: [item.knowledgePointId],
                   materialId: item.id,
                   id: index + ''
@@ -303,8 +306,12 @@ export default defineComponent({
               n.children = n.children.map((cn: any) => {
                 cn.materialList = cn.materialList.map((item: any) => {
                   index++
+                  const materialRefs = item.materialRefs ? item.materialRefs : []
+                  const materialMusicId =
+                    materialRefs.length > 0 ? materialRefs[0].resourceId : null
                   return {
                     ...item,
+                    materialMusicId,
                     knowledgePointId: [n.id, item.knowledgePointId],
                     materialId: item.id,
                     id: index + ''