添加云练习功能

src/views/coursewarePlay/component/musicScore.tsx

@@ -1,12 +1,12 @@
-import { defineComponent, ref, watch } from 'vue'
-import styles from './musicScore.module.less'
-import qs from 'query-string'
-import iconStart from '../image/icon-start.svg'
-import { listenerMessage, postMessage } from '@/helpers/native-message'
-import { Skeleton } from 'vant'
-import { usePageVisibility } from '@vant/use'
-import { useRoute } from 'vue-router'
-import { browser } from '@/helpers/utils'
+import { defineComponent, ref, watch } from 'vue';
+import styles from './musicScore.module.less';
+import qs from 'query-string';
+import iconStart from '../image/icon-start.svg';
+import { listenerMessage, postMessage } from '@/helpers/native-message';
+import { Skeleton } from 'vant';
+import { usePageVisibility } from '@vant/use';
+import { useRoute } from 'vue-router';
+import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'musicScore',
@@ -21,109 +21,104 @@ export default defineComponent({
   },
   emits: ['setIframe'],
   setup(props, { emit }) {
-    const browserInfo = browser()
-    const route = useRoute()
-    const isLoading = ref(false)
-    const pageVisibility = usePageVisibility()
+    const browserInfo = browser();
+    const route = useRoute();
+    const isLoading = ref(false);
+    const pageVisibility = usePageVisibility();
     /** 页面显示和隐藏 */
-    watch(pageVisibility, (value) => {
-      console.log("🚀 ~ value:", value)
+    watch(pageVisibility, value => {
+      console.log('🚀 ~ value:', value);
       if (value == 'hidden') {
-        isLoading.value = false
+        isLoading.value = false;
       }
-    })
-    const iframeRef = ref()
-    const isLoaded = ref(false)
-    const renderError = ref(false)
-    const renderSuccess = ref(false)
-    const Authorization = sessionStorage.getItem('Authorization') || ''
+    });
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    const renderError = ref(false);
+    const renderSuccess = ref(false);
+    const Authorization = sessionStorage.getItem('Authorization') || '';
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn'
-      : location.origin
-    const query = qs.stringify({
-      id: props.music.content,
-      modelType: 'practice',
-      headerHeight: 32,
-      Authorization: Authorization
-    })
-    const src = `${origin}/orchestra-music-score/?` + query
+      ? 'https://test.gym.lexiaoya.cn'
+      : location.origin;
+    const src = `${origin}/accompany/?Authorization=${Authorization}#/detail/${props.music.content}`;
     const checkView = () => {
       fetch(src)
         .then(() => {
-          renderSuccess.value = true
-          renderError.value = false
+          renderSuccess.value = true;
+          renderError.value = false;
         })
         .catch(() => {
-          renderError.value = true
-        })
-    }
+          renderError.value = true;
+        });
+    };
     watch(props.music, () => {
-      if (renderSuccess.value) return
-      renderError.value = false
+      if (renderSuccess.value) return;
+      renderError.value = false;
       if (props.music.display) {
-        checkView()
+        checkView();
       }
-    })
+    });
 
     // 去云练习完整版
     const gotoAccomany = () => {
-      if (isLoading.value) return
-      if (!browserInfo.ios){
-        isLoading.value = true
+      if (isLoading.value) return;
+      if (!browserInfo.ios) {
+        isLoading.value = true;
       }
-      const parmas = qs.stringify({
-        id: props.music.content
-      })
-      const src = `${location.origin}/orchestra-music-score/?` + parmas
-      postMessage({
-        api: 'openAccompanyWebView',
-        content: {
-          url: src,
-          orientation: 0,
-          isHideTitle: true,
-          statusBarTextColor: false,
-          isOpenLight: true
-        }
-      }, () => {
-        if (browserInfo.ios){
-          isLoading.value = true
+      const origin = /(localhost|192)/.test(location.host)
+        ? 'https://test.gym.lexiaoya.cn'
+        : location.origin;
+      const src = `${origin}/accompany/?Authorization=${Authorization}#/detail/${props.music.content}`;
+      postMessage(
+        {
+          api: 'openAccompanyWebView',
+          content: {
+            url: src,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true
+          }
+        },
+        () => {
+          if (browserInfo.ios) {
+            isLoading.value = true;
+          }
         }
-      })
-    }
+      );
+    };
     listenerMessage('webViewOnResume', () => {
-      isLoading.value = false
-    })
+      isLoading.value = false;
+    });
 
     return () => (
       <div class={styles.musicScore}>
         <iframe
           ref={iframeRef}
           onLoad={() => {
-            emit('setIframe', iframeRef.value)
-            isLoaded.value = true
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
           }}
           class={[styles.container, 'musicIframe']}
           frameborder="0"
-          src={src}
-        ></iframe>
-        {route.query.source == 'my-course' && isLoaded.value && (
+          src={src}></iframe>
+        {/* {route.query.source == 'my-course' && isLoaded.value && (
           <div
             style={{
               display: props.activeModel ? '' : 'none'
             }}
             class={styles.startBtn}
             onClick={(e: Event) => {
-              e.stopPropagation()
-              gotoAccomany()
-            }}
-          >
+              e.stopPropagation();
+              gotoAccomany();
+            }}>
             <img src={iconStart} />
           </div>
-        )}
+        )} */}
         <div class={styles.skeletonWrap}>
           <Skeleton class={styles.skeleton} row={8} />
         </div>
       </div>
-    )
+    );
   }
-})
+});

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

@@ -318,6 +318,27 @@ export default defineComponent({
       }
     );
 
+    // 去云练习完整版
+    const gotoAccomany = (e: any) => {
+      // 去云练习完整版
+      e.stopPropagation();
+      const Authorization = sessionStorage.getItem('Authorization') || '';
+      const origin = /(localhost|192)/.test(location.host)
+        ? 'https://test.gym.lexiaoya.cn'
+        : location.origin;
+      const src = `${origin}/accompany/?Authorization=${Authorization}#/detail/${m.materialMusicId}`;
+      postMessage({
+        api: 'openAccompanyWebView',
+        content: {
+          url: src,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true
+        }
+      });
+    };
+
     const getVideoRef = () => {
       return videoRef.value;
     };
@@ -368,7 +389,7 @@ export default defineComponent({
           // }}
         >
           <div class={styles.time}>
-            <div>{getSecondRPM(data.currentTime)}</div>
+            <div>{getSecondRPM(data.currentTime)}</div>/
             <div>{getSecondRPM(data.duration)}</div>
           </div>
           <div class={styles.slider}>
@@ -403,6 +424,12 @@ 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

@@ -181,7 +181,7 @@
 
   .time {
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
     // width: 100%;
     color: #fff;
     font-size: 10px;
@@ -359,4 +359,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.module.less

@@ -369,4 +369,21 @@
 
 .popupMore {
   background: rgba(0, 0, 0, 0.8);
+}
+
+.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(66px);
+  }
 }

src/views/coursewarePlay/index.tsx

@@ -22,8 +22,9 @@ import {
   promisefiyPostMessage
 } from '@/helpers/native-message';
 import MusicScore from './component/musicScore';
-import iconDian from './image/icon-dian.svg';
-import iconPoint from './image/icon-point.svg';
+// import iconDian from './image/icon-dian.svg';
+// import iconPoint from './image/icon-point.svg';
+// import qs from 'query-string';
 import {
   iconUp,
   iconDown,
@@ -36,7 +37,7 @@ import { browser } from '@/helpers/utils';
 import { Vue3Lottie } from 'vue3-lottie';
 import playLoadData from './datas/data.json';
 import { usePageVisibility } from '@vant/use';
-import PlayRecordTime from './playRecordTime';
+// import PlayRecordTime from './playRecordTime';
 import { handleCheckVip } from '../hook/useFee';
 import OGuide from '@/components/o-guide';
 import Tool, { ToolItem, ToolType } from './component/tool';
@@ -314,8 +315,14 @@ 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,
                     content: item.content,
                     knowledgePointId: [item.knowledgePointId],
                     materialId: item.id,
@@ -554,17 +561,17 @@ export default defineComponent({
     };
 
     // 去点名,签退
-    const gotoRollCall = (pageTag: string) => {
-      postMessage({
-        api: 'open_app_page',
-        content: {
-          action: 'app',
-          pageTag: pageTag,
-          url: '',
-          params: JSON.stringify({ courseId: route.query.courseId })
-        }
-      });
-    };
+    // const gotoRollCall = (pageTag: string) => {
+    //   postMessage({
+    //     api: 'open_app_page',
+    //     content: {
+    //       action: 'app',
+    //       pageTag: pageTag,
+    //       url: '',
+    //       params: JSON.stringify({ courseId: route.query.courseId })
+    //     }
+    //   });
+    // };
 
     // 双击
     const handleDbClick = () => {
@@ -788,39 +795,39 @@ export default defineComponent({
      * @example [[4, 8],[0, 4],[10, 30]]
      * @returns [[0, 8], [10, 30]]
      */
-    const formatEffectiveTime = (intervals: any[]) => {
-      const res: any = [];
-      intervals.sort((a, b) => a[0] - b[0]);
-      let prev = intervals[0];
-      for (let i = 1; i < intervals.length; i++) {
-        const cur = intervals[i];
-        if (prev[1] >= cur[0]) {
-          // 有重合
-          prev[1] = Math.max(cur[1], prev[1]);
-        } else {
-          // 不重合，prev推入res数组
-          res.push(prev);
-          prev = cur; // 更新 prev
-        }
-      }
-      res.push(prev);
-      // console.log(res, 'formatEffectiveTime')
+    // const formatEffectiveTime = (intervals: any[]) => {
+    //   const res: any = [];
+    //   intervals.sort((a, b) => a[0] - b[0]);
+    //   let prev = intervals[0];
+    //   for (let i = 1; i < intervals.length; i++) {
+    //     const cur = intervals[i];
+    //     if (prev[1] >= cur[0]) {
+    //       // 有重合
+    //       prev[1] = Math.max(cur[1], prev[1]);
+    //     } else {
+    //       // 不重合，prev推入res数组
+    //       res.push(prev);
+    //       prev = cur; // 更新 prev
+    //     }
+    //   }
+    //   res.push(prev);
+    //   // console.log(res, 'formatEffectiveTime')
 
-      return res;
-    };
+    //   return res;
+    // };
     /**
      * 获取数据有效期
      * @param intervals [[], []]
      * @returns 0s
      */
-    const formatTimer = (intervals: any[]) => {
-      const afterIntervals = formatEffectiveTime(intervals);
-      let time = 0;
-      afterIntervals.forEach((t: any) => {
-        time += t[1] - t[0];
-      });
-      return time;
-    };
+    // const formatTimer = (intervals: any[]) => {
+    //   const afterIntervals = formatEffectiveTime(intervals);
+    //   let time = 0;
+    //   afterIntervals.forEach((t: any) => {
+    //     time += t[1] - t[0];
+    //   });
+    //   return time;
+    // };
 
     // 保存零时时间
     // const moreTime: any = ref([]) // 多个观看时间段 已经放到列表里面了
@@ -1086,7 +1093,38 @@ export default defineComponent({
                         </div>
                       )}
                   </Transition>
-                  {isRender && m.typeCode === 'IMG' && <img src={m.content} />}
+                  {isRender && m.typeCode === 'IMG' && (
+                    <>
+                      <img src={m.content} />
+                      {m.materialMusicId && (
+                        <div
+                          class={[
+                            styles.goPractice,
+                            activeData.model ? '' : styles.hide
+                          ]}
+                          onClick={(e: any) => {
+                            // 去云练习完整版
+                            e.stopPropagation();
+                            const Authorization =
+                              sessionStorage.getItem('Authorization') || '';
+                            const origin = /(localhost|192)/.test(location.host)
+                              ? 'https://test.gym.lexiaoya.cn'
+                              : location.origin;
+                            const src = `${origin}/accompany/?Authorization=${Authorization}#/detail/${m.materialMusicId}`;
+                            postMessage({
+                              api: 'openAccompanyWebView',
+                              content: {
+                                url: src,
+                                orientation: 0,
+                                isHideTitle: true,
+                                statusBarTextColor: false,
+                                isOpenLight: true
+                              }
+                            });
+                          }}></div>
+                      )}
+                    </>
+                  )}
                   {isRender && m.typeCode === 'SONG' && (
                     <MusicScore
                       activeModel={activeData.model}