|
@@ -1,4 +1,4 @@
|
|
-import { computed, defineComponent, onMounted, reactive, ref } from "vue";
|
|
|
|
|
|
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
|
|
import styles from "./index.module.less";
|
|
import styles from "./index.module.less";
|
|
|
|
|
|
import iconBack from "./image/icon-back.svg";
|
|
import iconBack from "./image/icon-back.svg";
|
|
@@ -9,13 +9,15 @@ import icons from "./image/headerTop.json";
|
|
import { Badge, Circle, Popover } from "vant";
|
|
import { Badge, Circle, Popover } from "vant";
|
|
import { metronomeData } from "../../helpers/metronome";
|
|
import { metronomeData } from "../../helpers/metronome";
|
|
import Speed from "./speed";
|
|
import Speed from "./speed";
|
|
-import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
|
|
|
|
|
|
+import { handleEndBegin, handleStartEvaluat } from "/src/view/evaluating";
|
|
import { Popup } from "@varlet/ui";
|
|
import { Popup } from "@varlet/ui";
|
|
import Settting from "./settting";
|
|
import Settting from "./settting";
|
|
import MusciList from "../musci-list";
|
|
import MusciList from "../musci-list";
|
|
import { handleNoEndExit } from "../custom-plugins/recording-time";
|
|
import { handleNoEndExit } from "../custom-plugins/recording-time";
|
|
import { api_back } from "/src/helpers/communication";
|
|
import { api_back } from "/src/helpers/communication";
|
|
import { getInstrumentName } from "/src/constant/instruments";
|
|
import { getInstrumentName } from "/src/constant/instruments";
|
|
|
|
+import { handle_stopFollow } from "/src/page-orchestra/follow-model";
|
|
|
|
+import { useRouter } from "vue-router";
|
|
|
|
|
|
export const headData = reactive({
|
|
export const headData = reactive({
|
|
speedShow: false,
|
|
speedShow: false,
|
|
@@ -24,6 +26,7 @@ export const headData = reactive({
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: "header-top",
|
|
name: "header-top",
|
|
setup() {
|
|
setup() {
|
|
|
|
+ const router = useRouter()
|
|
const headerData = reactive({
|
|
const headerData = reactive({
|
|
settingMode: false,
|
|
settingMode: false,
|
|
listShow: false,
|
|
listShow: false,
|
|
@@ -39,7 +42,7 @@ export default defineComponent({
|
|
// 评测开始 禁用
|
|
// 评测开始 禁用
|
|
if (state.modeType === "evaluating") return { display: true, disabled: true };
|
|
if (state.modeType === "evaluating") return { display: true, disabled: true };
|
|
// 原声, 伴奏 少一个,就不能切换
|
|
// 原声, 伴奏 少一个,就不能切换
|
|
- if (!state.music || !state.accompany) return { display: true, disabled: true}
|
|
|
|
|
|
+ if (!state.music || !state.accompany) return { display: true, disabled: true };
|
|
|
|
|
|
return {
|
|
return {
|
|
disabled: false,
|
|
disabled: false,
|
|
@@ -47,15 +50,35 @@ export default defineComponent({
|
|
};
|
|
};
|
|
});
|
|
});
|
|
|
|
|
|
-
|
|
|
|
/** 退出 */
|
|
/** 退出 */
|
|
const handleBack = () => {
|
|
const handleBack = () => {
|
|
- handleNoEndExit()
|
|
|
|
|
|
+ handleNoEndExit();
|
|
|
|
+ router.back()
|
|
api_back();
|
|
api_back();
|
|
- }
|
|
|
|
|
|
+ };
|
|
const disabledList = ["evaluating"];
|
|
const disabledList = ["evaluating"];
|
|
- const trackName = getInstrumentName(state.track)
|
|
|
|
- const examSongName = state.examSongName + (trackName ? ` - ${state.track} (${trackName})` : '')
|
|
|
|
|
|
+ const trackName = getInstrumentName(state.track);
|
|
|
|
+ const examSongName = state.examSongName + (trackName ? ` - ${state.track} (${trackName})` : "");
|
|
|
|
+
|
|
|
|
+ /** 页面显示隐藏 */
|
|
|
|
+ const visibilitychange = () => {
|
|
|
|
+ if (document.visibilityState === "hidden") {
|
|
|
|
+ console.log("页面隐藏");
|
|
|
|
+ if (state.modeType === "practise") {
|
|
|
|
+ togglePlay("paused");
|
|
|
|
+ } else if (state.modeType === "evaluating") {
|
|
|
|
+ handleEndBegin();
|
|
|
|
+ } else if (state.modeType === "follow") {
|
|
|
|
+ handle_stopFollow();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ onMounted(() => {
|
|
|
|
+ document.addEventListener("visibilitychange", visibilitychange, false);
|
|
|
|
+ });
|
|
|
|
+ onUnmounted(() => {
|
|
|
|
+ document.removeEventListener("visibilitychange", visibilitychange, false);
|
|
|
|
+ })
|
|
return () => (
|
|
return () => (
|
|
<div ref={headRef} class={styles.headerTop}>
|
|
<div ref={headRef} class={styles.headerTop}>
|
|
<div class={styles.back} onClick={handleBack}>
|
|
<div class={styles.back} onClick={handleBack}>
|
|
@@ -143,7 +166,7 @@ export default defineComponent({
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <Popup v-model:show={headerData.settingMode} teleport="body" defaultStyle={false} >
|
|
|
|
|
|
+ <Popup v-model:show={headerData.settingMode} teleport="body" defaultStyle={false}>
|
|
<Settting onClose={() => (headerData.settingMode = false)} />
|
|
<Settting onClose={() => (headerData.settingMode = false)} />
|
|
</Popup>
|
|
</Popup>
|
|
<Popup class="musicListPopup" v-model:show={headerData.listShow} teleport="body" defaultStyle={false} position="left">
|
|
<Popup class="musicListPopup" v-model:show={headerData.listShow} teleport="body" defaultStyle={false} position="left">
|