修改处理

src/views/exercise-after-class/index.module.less

@@ -46,32 +46,47 @@
   z-index: 10;
 }
 
-.btnGroup {
+// .btnGroup {
+//   position: absolute;
+//   top: 50%;
+//   right: 12px;
+//   z-index: 10;
+//   transform: translateY(-50%);
+
+//   .btnItem {
+//     background: rgba(0, 0, 0, 0.3);
+//     border-radius: 6px;
+//     width: 42px;
+//     height: 50px;
+//     font-size: 12px;
+//     color: #FFFFFF;
+//     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.13);
+//     display: flex;
+//     align-items: center;
+//     flex-direction: column;
+//     justify-content: center;
+//     cursor: pointer;
+//   }
+
+//   .btnImg {
+//     width: 24px;
+//     height: 24px;
+//     margin-bottom: 2px;
+//   }
+// }
+.goPractice {
+  width: 89px;
+  height: 32px;
+  background: url('../coursewarePlay/image/btn_go_practice.png') no-repeat center;
+  background-size: contain;
   position: absolute;
-  top: 50%;
   right: 12px;
-  z-index: 10;
-  transform: translateY(-50%);
-
-  .btnItem {
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 6px;
-    width: 42px;
-    height: 50px;
-    font-size: 12px;
-    color: #FFFFFF;
-    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.13);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    cursor: pointer;
-  }
+  bottom: 70px;
+  z-index: 11;
+  transition: all .5s ease;
 
-  .btnImg {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 2px;
+  &.hide {
+    transform: translateX(65px);
   }
 }
 
@@ -209,7 +224,7 @@
 
   .time {
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
     color: #fff;
     font-size: 10px;
     padding: 4px 0;

src/views/exercise-after-class/index.tsx

@@ -7,12 +7,12 @@ import { state } from '@/state'
 import { useRoute, useRouter } from 'vue-router'
 import iconBack from '../coursewarePlay/image/back.svg'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
-import iconLoop from '../coursewarePlay/image/icon-loop.svg'
-import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
-import iconplay from '../coursewarePlay/image/icon-play.svg'
-import iconpause from '../coursewarePlay/image/icon-pause.svg'
-import iconGoPractice from '../coursewarePlay/image/icon-go-practice.svg'
-import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
+// import iconLoop from '../coursewarePlay/image/icon-loop.svg'
+// import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
+// import iconplay from '../coursewarePlay/image/icon-play.svg'
+// import iconpause from '../coursewarePlay/image/icon-pause.svg'
+// import iconGoPractice from '../coursewarePlay/image/icon-go-practice.svg'
+// import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
 import { browser, getSecondRPM } from '@/helpers/utils'
 import qs from 'query-string'
 import { Vue3Lottie } from 'vue3-lottie'
@@ -141,6 +141,8 @@ export default defineComponent({
     const setRecord = async (trainings: any[]) => {
       if (Array.isArray(trainings)) {
         data.trainings = trainings.map((n: any) => {
+          const materialRefs = item.materialRefs ? item.materialRefs : []
+          const materialMusicId = materialRefs.length > 0 ? materialRefs[0].resourceId : null
           try {
             n.trainingContent = JSON.parse(n.trainingContent)
           } catch (error) {
@@ -148,6 +150,7 @@ export default defineComponent({
           }
           return {
             ...n,
+            materialMusicId,
             currentTime: 0,
             duration: 100,
             paused: true,
@@ -344,14 +347,29 @@ export default defineComponent({
     })
 
     // 去练习
-    const gotoPractice = () => {
+    const gotoPractice = (e: any) => {
       handleStopVideo()
-      const url = window.location.origin + location.pathname + `#/accompany`
+      // const url = window.location.origin + location.pathname + `#/accompany`
+      // postMessage({
+      //   api: 'openWebView',
+      //   content: {
+      //     url: url,
+      //     orientation: 1
+      //   }
+      // })
+      e.stopPropagation()
+      const parmas = qs.stringify({
+        id: item.value.materialMusicId
+      })
+      const src = `${location.origin}/orchestra-music-score/?` + parmas
       postMessage({
-        api: 'openWebView',
+        api: 'openAccompanyWebView',
         content: {
-          url: url,
-          orientation: 1
+          url: src,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true
         }
       })
     }
@@ -410,16 +428,29 @@ export default defineComponent({
               </div>
             )}
           </Transition>
-          <Transition name="right">
-            {activeData.model && (
-              <div class={styles.btnGroup}>
-                <div class={styles.btnItem} onClick={gotoPractice}>
-                  <img src={iconGoPractice} class={styles.btnImg} />
-                  <span>去练习</span>
-                </div>
-              </div>
-            )}
-          </Transition>
+          {/* <Transition name="right"> */}
+
+          {data.videoData?.materialMusicId && (
+            <div
+              class={[styles.goPractice, activeData.model ? '' : styles.hide]}
+              onClick={gotoPractice}
+            ></div>
+          )}
+
+          {/* // <div class={styles.btnGroup}>
+            //   <div class={styles.btnItem} onClick={gotoPractice}>
+            //     <img src={iconGoPractice} class={styles.btnImg} />
+            //     <span>去练习</span>
+            //   </div>
+            // </div> */}
+
+          {/* {item.value.materialMusicId && (
+              <div
+                class={[styles.goPractice, data.showBar ? '' : styles.hide]}
+                onClick={gotoAccomany}
+              ></div>
+            )} */}
+          {/* </Transition> */}
         </div>
       </div>
     )

src/views/exercise-after-class/video-class.tsx

@@ -163,7 +163,7 @@ export default defineComponent({
           {modal.value && !item.value.muted && (
             <div class={styles.bottomFixedContainer}>
               <div class={styles.time}>
-                <span>{getSecondRPM(item.value.currentTime)}</span>
+                <span>{getSecondRPM(item.value.currentTime)}</span>/
                 <span>{getSecondRPM(item.value.duration)}</span>
               </div>
               <div class={styles.slider}>