skyblued 2 년 전
부모
커밋
90fbd125b5
3개의 변경된 파일59개의 추가작업 그리고 18개의 파일을 삭제
  1. 18 8
      src/subpages/colexiu/App.tsx
  2. 23 7
      src/subpages/colexiu/buttons/index.tsx
  3. 18 3
      src/subpages/colexiu/buttons/player.tsx

+ 18 - 8
src/subpages/colexiu/App.tsx

@@ -9,14 +9,24 @@ export default defineComponent({
     const route = useRoute()
     sessionStorage.setItem('Authorization', route.query.Authorization as string)
     onMounted(() => {
-      document.body.addEventListener('touchstart', () => {
-        console.log('子页面touchstart', window.parent)
-        window.parent.postMessage('message', 'touchstart')
-      })
-      document.body.addEventListener('touchend', () => {
-        console.log('子页面touchend')
-        window.parent.postMessage('message', 'touchend')
-      })
+      // document.addEventListener('touchstart', () => {
+      //   console.log('子页面touchstart')
+      //   window.parent.postMessage(
+      //     {
+      //       api: 'touchstart',
+      //     },
+      //     '*'
+      //   )
+      // })
+      // document.addEventListener('touchend', () => {
+      //   console.log('子页面touchend')
+      //   window.parent.postMessage(
+      //     {
+      //       api: 'touchend',
+      //     },
+      //     '*'
+      //   )
+      // })
     })
   },
   render() {

+ 23 - 7
src/subpages/colexiu/buttons/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, Directive, Ref, ref, Transition, Teleport, nextTick, computed } from 'vue'
+import { defineComponent, Directive, Ref, ref, Transition, Teleport, nextTick, computed, onMounted } from 'vue'
 import { Button, Cell, CellGroup, Dialog, Divider, Popover, Slider, Switch } from 'vant'
 import ButtonIcon from './icon'
 import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
@@ -26,6 +26,7 @@ import { switchProps } from '../popups/setting/evaluat'
 import iconFollowEndBtn from '../popups/follow/icons/icon-followEndBtn.svg'
 import iconEvaluatingEnd from './icons/icon-evaluatingEnd.svg'
 import store from 'store'
+import { useRoute } from 'vue-router'
 export const confirmShow: Ref<boolean> = ref(false)
 
 const search = useOriginSearch()
@@ -141,11 +142,22 @@ export default defineComponent({
   },
   emits: ['setMusicScoreType'],
   setup(props, { emit }) {
+    const route = useRoute()
     const [wiredStatus] = useWiredHeadsetCheck()
     const speedRef = ref()
     const [show] = useMenu()
     const camera = ref(false)
 
+    //根据路由传参设置模式
+    const useRouteSetModelType = () => {
+      if (route.query.modelType) {
+        onChangeModelType(route.query.modelType as IModelType)
+      }
+    }
+    onMounted(() => {
+      useRouteSetModelType()
+    })
+
     // 固定调
     const musicTypeShow = ref(false)
     const musicAction = ref('')
@@ -192,19 +204,22 @@ export default defineComponent({
           ]}
         >
           <div class={styles.leftButton}>
-            <Button class={classNames(styles.button, styles.backbtn)} onClick={back}>
-              <ButtonIcon name="icon-back" />
-            </Button>
+            {!route.query?.modelType && (
+              <Button class={classNames(styles.button, styles.backbtn)} onClick={back}>
+                <ButtonIcon name="icon-back" />
+              </Button>
+            )}
             <div class={styles.titleWrap}>
               <div class={styles.title}>{detailState.activeDetail?.musicSheetName}</div>
               {search.albumName && <div class={styles.album}>{search.albumName}</div>}
             </div>
           </div>
+
           <div class={styles.centerButton}>
             <Transition name="finish">
               {wiredStatus.value && !evaluatingRef.value?.connentLoading && !startButtonShow.value && (
                 <Button
-                  style={{backgroundImage: `url(${iconEvaluatingEnd})`}}
+                  style={{ backgroundImage: `url(${iconEvaluatingEnd})` }}
                   class={[styles.button, styles.finish]}
                   onClick={() => {
                     evaluatingRef.value?.playerStop?.()
@@ -216,7 +231,7 @@ export default defineComponent({
 
               {followRef?.value?.data.start && (
                 <Button
-                  style={{backgroundImage: `url(${iconFollowEndBtn})`}}
+                  style={{ backgroundImage: `url(${iconFollowEndBtn})` }}
                   class={[styles.button, styles.finish, styles.followEndBtn]}
                   onClick={() => {
                     followRef.value?.handleEnd?.()
@@ -228,7 +243,8 @@ export default defineComponent({
             </Transition>
           </div>
           <div class={[styles.moreButton]} style={{ opacity: detailState.initRendered ? 1 : 0 }}>
-            {modelType.value !== 'init' && !detailState.frozenMode && (
+            {/* route.query?.modelType 就不显示模式按钮  */}
+            {!route.query?.modelType && modelType.value !== 'init' && !detailState.frozenMode && (
               <Button
                 class={classNames(styles.button, styles.hasText)}
                 disabled={(runtime.evaluatingStatus && !startButtonShow.value) || followRef.value?.data.start}

+ 18 - 3
src/subpages/colexiu/buttons/player.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, Transition, Teleport } from 'vue'
+import { defineComponent, Transition, Teleport, onMounted, onUnmounted } from 'vue'
 import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
 import detailState from '/src/pages/detail/state'
 import { Button } from 'vant'
@@ -39,15 +39,30 @@ export default defineComponent({
     // 播放进入的圆周长
     const circleLength = Math.floor(2 * Math.PI * 16)
 
+    const changePlay = (res: any) => {
+      if (res?.data?.api === 'setPlayState') {
+        console.log('父页面的切换事件', res.data, runtime.playState)
+        if (runtime.playState == 'play') {
+          RuntimeUtils.setPlayState()
+        }
+      }
+    }
+    onMounted(() => {
+      window.addEventListener('message', changePlay)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('message', changePlay)
+    })
+
     return () => {
       const playProgress = (runtime.currentTimeNum / runtime.durationNum) * circleLength
       return (
         <Teleport to="body">
           <div class={styles.player} id="globalPlayer">
             <Transition name="start" duration={300}>
-              {wiredStatus.value && !evaluatingRef.value?.connentLoading && startButtonShow.value &&  (
+              {wiredStatus.value && !evaluatingRef.value?.connentLoading && startButtonShow.value && (
                 <Button
-                  style={{backgroundImage: `url(${iconEvaluatingStart})`}}
+                  style={{ backgroundImage: `url(${iconEvaluatingStart})` }}
                   class={[styles.button, styles.start]}
                   onClick={() => {
                     startButtonShow.value = false