|
|
@@ -1,24 +1,27 @@
|
|
|
-import { computed, defineComponent, onMounted, reactive, ref } from "vue";
|
|
|
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
|
|
|
import iconBack from "./image/icon-back.svg";
|
|
|
import Title from "./title";
|
|
|
import { headImg } from "./image";
|
|
|
import { Badge, Circle, Popover, Popup } from "vant";
|
|
|
-import { metronomeData } from "../../helpers/metronome";
|
|
|
import Speed from "./speed";
|
|
|
import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
|
|
|
import Settting from "./settting";
|
|
|
import state, { handleChangeSection, handleResetPlay, handleRessetState, togglePlay } from "/src/state";
|
|
|
import { getAudioCurrentTime } from "/src/view/audio-list";
|
|
|
-import { toggleFollow } from "/src/view/follow-practice";
|
|
|
+import { followData, toggleFollow } from "/src/view/follow-practice";
|
|
|
import { api_back } from "/src/helpers/communication";
|
|
|
import MusicType from "./music-type";
|
|
|
+import ModeTypeMode from "../component/mode-type-mode";
|
|
|
+import { getQuery } from "/src/utils/queryString";
|
|
|
|
|
|
/** 头部数据和方法 */
|
|
|
export const headTopData = reactive({
|
|
|
/** 模式 */
|
|
|
modeType: "" as "init" | "show",
|
|
|
+ /** 显示返回按钮 */
|
|
|
+ showBack: true,
|
|
|
/** 设置弹窗 */
|
|
|
settingMode: false,
|
|
|
/** 切换模式 */
|
|
|
@@ -40,14 +43,100 @@ export const headData = reactive({
|
|
|
export default defineComponent({
|
|
|
name: "header-top",
|
|
|
setup() {
|
|
|
- const disabledList = ["evaluating"];
|
|
|
+ /** 设置按钮 */
|
|
|
+ const settingBtn = computed(() => {
|
|
|
+ // 音频播放中 禁用
|
|
|
+ if (state.playState === "play") return { display: true, disabled: true };
|
|
|
+ // 评测开始 禁用, 跟练开始 禁用
|
|
|
+ if (evaluatingData.startBegin || followData.start) return { display: true, disabled: true };
|
|
|
|
|
|
- /** 按钮禁用 */
|
|
|
+ return {
|
|
|
+ display: true,
|
|
|
+ disabled: false,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 转谱按钮 */
|
|
|
+ const converBtn = computed(() => {
|
|
|
+ // 音频播放中 禁用
|
|
|
+ if (state.playState === "play") return { display: true, disabled: true };
|
|
|
+ // 评测开始 禁用
|
|
|
+ if (evaluatingData.startBegin || followData.start) return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ display: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 速度按钮 */
|
|
|
+ const speedBtn = computed(() => {
|
|
|
+ // 选择模式, 跟练模式 不显示
|
|
|
+ if (headTopData.modeType !== "show" || state.modeType === "follow")
|
|
|
+ return { display: false, disabled: true };
|
|
|
+ // 评测模式, 音频播放中 禁用
|
|
|
+ if (state.modeType === "evaluating" || state.playState === "play")
|
|
|
+ return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ display: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 指法按钮 */
|
|
|
+ const fingeringBtn = computed(() => {
|
|
|
+ // 没有指法 选择模式 评测模式 跟练模式 不显示
|
|
|
+ if (
|
|
|
+ headTopData.modeType !== "show" ||
|
|
|
+ !state.fingeringInfo.name ||
|
|
|
+ ["evaluating", "follow"].includes(state.modeType)
|
|
|
+ )
|
|
|
+ return { display: false, disabled: true };
|
|
|
+ // 音频播放中 禁用
|
|
|
+ if (state.playState === "play") return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ display: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 摄像头按钮 */
|
|
|
+ const cameraBtn = computed(() => {
|
|
|
+ // 选择模式 不显示
|
|
|
+ if (headTopData.modeType !== "show" || state.modeType !== "evaluating")
|
|
|
+ return { display: false, disabled: true };
|
|
|
+ // 音频播放中 禁用
|
|
|
+ if (state.playState === "play") return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ display: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 选段按钮 */
|
|
|
+ const selectBtn = computed(() => {
|
|
|
+ // 选择模式 不显示
|
|
|
+ if (headTopData.modeType !== "show" || ["evaluating", "follow"].includes(state.modeType))
|
|
|
+ return { display: false, disabled: true };
|
|
|
+ // 音频播放中 禁用
|
|
|
+ if (state.playState === "play") return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ display: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
|
|
|
/** 原声按钮 */
|
|
|
const originBtn = computed(() => {
|
|
|
+ // 选择模式,跟练模式 不显示
|
|
|
+ if (headTopData.modeType !== "show" || state.modeType === "follow")
|
|
|
+ return { display: false, disabled: false };
|
|
|
// 评测开始 禁用
|
|
|
- if (state.modeType === "evaluating") return { display: true, disabled: true };
|
|
|
+ if (state.modeType === "evaluating") return { display: false, disabled: true };
|
|
|
// 原声, 伴奏 少一个,就不能切换
|
|
|
if (!state.music || !state.accompany) return { display: true, disabled: true };
|
|
|
|
|
|
@@ -57,21 +146,49 @@ export default defineComponent({
|
|
|
};
|
|
|
});
|
|
|
|
|
|
- /** 重播按钮显示条件 */
|
|
|
- const resetBtnDisplay = computed(() => {
|
|
|
- const currentTime = getAudioCurrentTime();
|
|
|
- const playState = state.playState;
|
|
|
- const modeType = state.modeType;
|
|
|
- return currentTime !== 0 && playState !== "play" && modeType === "practise";
|
|
|
+ /** 模式切换按钮 */
|
|
|
+ const toggleBtn = computed(() => {
|
|
|
+ // 选择模式, url设置模式 不显示
|
|
|
+ if (headTopData.modeType !== "show" || !headTopData.showBack)
|
|
|
+ return { display: false, disabled: false };
|
|
|
+ // 跟练开始, 评测开始 禁用
|
|
|
+ if (followData.start || evaluatingData.startBegin) return { display: true, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ display: true,
|
|
|
+ disabled: false,
|
|
|
+ };
|
|
|
});
|
|
|
- /** 播放按钮显示条件 */
|
|
|
- const playBtnDisplay = computed(() => {
|
|
|
- const modeType = state.modeType;
|
|
|
- return modeType === "practise";
|
|
|
+
|
|
|
+ /** 播放按钮 */
|
|
|
+ const playBtn = computed(() => {
|
|
|
+ // 选择模式 不显示
|
|
|
+ if (headTopData.modeType !== "show") return { display: false, disabled: false };
|
|
|
+ // 评测模式 不显示,跟练模式 不显示
|
|
|
+ if (["evaluating", "follow"].includes(state.modeType)) return { display: false, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ display: true,
|
|
|
+ disabled: false,
|
|
|
+ };
|
|
|
});
|
|
|
- /** 指法显示条件 */
|
|
|
- const fingeringDisplay = computed(() => {
|
|
|
- return state.fingeringInfo.name;
|
|
|
+
|
|
|
+ /** 重播按钮 */
|
|
|
+ const resetBtn = computed(() => {
|
|
|
+ // 选择模式 不显示
|
|
|
+ if (headTopData.modeType !== "show") return { display: false, disabled: false };
|
|
|
+ // 评测模式 不显示,跟练模式 不显示
|
|
|
+ if (["evaluating", "follow"].includes(state.modeType)) return { display: false, disabled: true };
|
|
|
+ // 播放状态 不显示
|
|
|
+ if (state.playState === "play") return { display: false, disabled: true };
|
|
|
+ // 播放进度为0 不显示
|
|
|
+ const currentTime = getAudioCurrentTime();
|
|
|
+ if (!currentTime) return { display: false, disabled: true };
|
|
|
+
|
|
|
+ return {
|
|
|
+ display: true,
|
|
|
+ disabled: false,
|
|
|
+ };
|
|
|
});
|
|
|
|
|
|
/** 返回 */
|
|
|
@@ -79,178 +196,227 @@ export default defineComponent({
|
|
|
api_back();
|
|
|
};
|
|
|
|
|
|
- return () => (
|
|
|
- <div class={[styles.headerTop]}>
|
|
|
- <div class={styles.back} onClick={handleBack}>
|
|
|
- <img src={iconBack} />
|
|
|
- </div>
|
|
|
- <Title text={state.examSongName} rightView={false} />
|
|
|
+ /** 根据参数设置模式 */
|
|
|
+ const getQueryModelSetModelType = () => {
|
|
|
+ const query: any = getQuery();
|
|
|
+ if (query.modelType) {
|
|
|
+ if (query.modelType === "practise") {
|
|
|
+ headTopData.handleChangeModeType("practise");
|
|
|
+ } else if (query.modelType === "evaluating") {
|
|
|
+ headTopData.handleChangeModeType("evaluating");
|
|
|
+ }
|
|
|
+ headTopData.showBack = false;
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ headTopData.modeType = "init";
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- <div class={styles.headRight} style={{ display: headTopData.modeType === "show" ? "" : "none" }}>
|
|
|
- <div
|
|
|
- class={styles.btn}
|
|
|
- onClick={() => {
|
|
|
- handleRessetState();
|
|
|
- headTopData.modeType = "init";
|
|
|
- }}
|
|
|
- >
|
|
|
- <img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
|
|
|
- <span>模式</span>
|
|
|
- </div>
|
|
|
+ /** 课件播放 */
|
|
|
+ const changePlay = (res: any) => {
|
|
|
+ if (res?.data?.api === "setPlayState") {
|
|
|
+ togglePlay("paused");
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- <div
|
|
|
- class={[styles.btn, originBtn.value.disabled && styles.disable]}
|
|
|
- id="tips-step-6"
|
|
|
- onClick={() => {
|
|
|
- state.playSource = state.playSource === "music" ? "background" : "music";
|
|
|
- }}
|
|
|
- >
|
|
|
- <img
|
|
|
- style={{ display: state.playSource === "music" ? "" : "none" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`music.svg`)}
|
|
|
- />
|
|
|
- <img
|
|
|
- style={{ display: state.playSource === "music" ? "none" : "" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`background.svg`)}
|
|
|
- />
|
|
|
- <span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- id="tips-step-4"
|
|
|
- onClick={() => handleChangeSection()}
|
|
|
- >
|
|
|
- <img
|
|
|
- style={{ display: state.section.length === 0 ? "" : "none" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`section0.svg`)}
|
|
|
- />
|
|
|
- <img
|
|
|
- style={{ display: state.section.length === 1 ? "" : "none" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`section1.svg`)}
|
|
|
- />
|
|
|
- <img
|
|
|
- style={{ display: state.section.length === 2 ? "" : "none" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`section2.svg`)}
|
|
|
- />
|
|
|
- <span>选段</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style={{ display: fingeringDisplay.value ? "" : "none" }}
|
|
|
- class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- onClick={() => {
|
|
|
- state.setting.displayFingering = !state.setting.displayFingering;
|
|
|
- }}
|
|
|
- >
|
|
|
- <img
|
|
|
- style={{ display: state.setting.displayFingering ? "" : "none" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`icon_evaluatingOn.svg`)}
|
|
|
- />
|
|
|
- <img
|
|
|
- style={{ display: state.setting.displayFingering ? "none" : "" }}
|
|
|
- class={styles.iconBtn}
|
|
|
- src={headImg(`icon_evaluatingOff.svg`)}
|
|
|
- />
|
|
|
- <span>指法</span>
|
|
|
- </div>
|
|
|
+ onMounted(() => {
|
|
|
+ getQueryModelSetModelType();
|
|
|
+ window.addEventListener("message", changePlay);
|
|
|
+ });
|
|
|
|
|
|
- <Popover trigger="manual" v-model:show={headData.speedShow} placement="bottom" overlay={false}>
|
|
|
- {{
|
|
|
- reference: () => (
|
|
|
- <div
|
|
|
- id="tips-step-8"
|
|
|
- class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation();
|
|
|
- headData.speedShow = !headData.speedShow;
|
|
|
- }}
|
|
|
- >
|
|
|
- <Badge class={styles.badge} content={state.speed}>
|
|
|
- <img class={styles.iconBtn} src={headImg("icon_speed.svg")} />
|
|
|
- </Badge>
|
|
|
- <span>速度</span>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => <Speed />,
|
|
|
- }}
|
|
|
- </Popover>
|
|
|
- <Popover
|
|
|
- trigger="manual"
|
|
|
- v-model:show={headData.musicTypeShow}
|
|
|
- placement="bottom-end"
|
|
|
- overlay={false}
|
|
|
- >
|
|
|
- {{
|
|
|
- reference: () => (
|
|
|
- <div
|
|
|
- class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation();
|
|
|
- headData.musicTypeShow = !headData.musicTypeShow;
|
|
|
- }}
|
|
|
- >
|
|
|
- <img class={styles.iconBtn} src={headImg("icon_zhuanpu.svg")} />
|
|
|
- <span>{state.musicRenderType === "staff" ? "转简谱" : "转五线谱"}</span>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => <MusicType />,
|
|
|
- }}
|
|
|
- </Popover>
|
|
|
+ onUnmounted(() => {
|
|
|
+ window.removeEventListener("message", changePlay);
|
|
|
+ });
|
|
|
|
|
|
- <div
|
|
|
- class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- onClick={() => (headTopData.settingMode = true)}
|
|
|
- >
|
|
|
- <img class={styles.iconBtn} src={headImg("icon_menu.svg")} />
|
|
|
- <span>设置</span>
|
|
|
- </div>
|
|
|
+ return () => (
|
|
|
+ <>
|
|
|
+ <div class={[styles.headerTop]}>
|
|
|
+ {headTopData.showBack && (
|
|
|
+ <div class={styles.back} onClick={handleBack}>
|
|
|
+ <img src={iconBack} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <Title text={state.examSongName} rightView={false} />
|
|
|
|
|
|
<div
|
|
|
- style={{ display: playBtnDisplay.value ? "" : "none" }}
|
|
|
- class={[styles.btn, styles.playBtn, disabledList.includes(state.modeType) && styles.disable]}
|
|
|
- id="tips-step-5"
|
|
|
- onClick={() => togglePlay()}
|
|
|
+ class={styles.headRight}
|
|
|
>
|
|
|
- <div class={styles.btnWrap}>
|
|
|
+ <div
|
|
|
+ style={{ display: toggleBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, toggleBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={() => {
|
|
|
+ handleRessetState();
|
|
|
+ headTopData.modeType = "init";
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
|
|
|
+ <span>模式</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style={{ display: originBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, originBtn.value.disabled && styles.disabled]}
|
|
|
+ id="tips-step-6"
|
|
|
+ onClick={() => {
|
|
|
+ state.playSource = state.playSource === "music" ? "background" : "music";
|
|
|
+ }}
|
|
|
+ >
|
|
|
<img
|
|
|
- style={{ display: state.playState === "play" ? "none" : "" }}
|
|
|
+ style={{ display: state.playSource === "music" ? "" : "none" }}
|
|
|
class={styles.iconBtn}
|
|
|
- src={headImg("icon_play.svg")}
|
|
|
+ src={headImg(`music.svg`)}
|
|
|
/>
|
|
|
<img
|
|
|
- style={{ display: state.playState === "play" ? "" : "none" }}
|
|
|
+ style={{ display: state.playSource === "music" ? "none" : "" }}
|
|
|
class={styles.iconBtn}
|
|
|
- src={headImg("icon_pause.svg")}
|
|
|
+ src={headImg(`background.svg`)}
|
|
|
/>
|
|
|
- <Circle
|
|
|
- style={{ opacity: state.playState === "play" ? 1 : 0 }}
|
|
|
- class={styles.progress}
|
|
|
- stroke-width={80}
|
|
|
- currentRate={state.playProgress}
|
|
|
- rate={100}
|
|
|
- color="#FFC830"
|
|
|
+ <span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style={{ display: selectBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, selectBtn.value.disabled && styles.disabled]}
|
|
|
+ id="tips-step-4"
|
|
|
+ onClick={() => handleChangeSection()}
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style={{ display: state.section.length === 0 ? "" : "none" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg(`section0.svg`)}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: state.section.length === 1 ? "" : "none" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg(`section1.svg`)}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: state.section.length === 2 ? "" : "none" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg(`section2.svg`)}
|
|
|
/>
|
|
|
+ <span>选段</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style={{ display: fingeringBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, fingeringBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={() => {
|
|
|
+ state.setting.displayFingering = !state.setting.displayFingering;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style={{ display: state.setting.displayFingering ? "" : "none" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg(`icon_evaluatingOn.svg`)}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: state.setting.displayFingering ? "none" : "" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg(`icon_evaluatingOff.svg`)}
|
|
|
+ />
|
|
|
+ <span>指法</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Popover
|
|
|
+ trigger="manual"
|
|
|
+ v-model:show={headData.speedShow}
|
|
|
+ placement="bottom"
|
|
|
+ overlay={false}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ reference: () => (
|
|
|
+ <div
|
|
|
+ id="tips-step-8"
|
|
|
+ style={{ display: speedBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, speedBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ headData.speedShow = !headData.speedShow;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Badge class={styles.badge} content={state.speed}>
|
|
|
+ <img class={styles.iconBtn} src={headImg("icon_speed.svg")} />
|
|
|
+ </Badge>
|
|
|
+ <span>速度</span>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ default: () => <Speed />,
|
|
|
+ }}
|
|
|
+ </Popover>
|
|
|
+ <Popover
|
|
|
+ trigger="manual"
|
|
|
+ v-model:show={headData.musicTypeShow}
|
|
|
+ placement="bottom-end"
|
|
|
+ overlay={false}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ reference: () => (
|
|
|
+ <div
|
|
|
+ style={{ display: converBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, converBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ headData.musicTypeShow = !headData.musicTypeShow;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img class={styles.iconBtn} src={headImg("icon_zhuanpu.svg")} />
|
|
|
+ <span>{state.musicRenderType === "staff" ? "转简谱" : "转五线谱"}</span>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ default: () => <MusicType />,
|
|
|
+ }}
|
|
|
+ </Popover>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style={{ display: settingBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, settingBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={() => (headTopData.settingMode = true)}
|
|
|
+ >
|
|
|
+ <img class={styles.iconBtn} src={headImg("icon_menu.svg")} />
|
|
|
+ <span>设置</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- style={{ display: resetBtnDisplay.value ? "" : "none" }}
|
|
|
- class={[
|
|
|
- styles.btn,
|
|
|
- styles.resetBtn,
|
|
|
- disabledList.includes(state.modeType) && styles.disable,
|
|
|
- ]}
|
|
|
- id="tips-step-7"
|
|
|
- onClick={() => handleResetPlay()}
|
|
|
- >
|
|
|
- <img class={styles.iconBtn} src={headImg("icon_resetbtn.svg")} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 播放按钮 */}
|
|
|
+ <div
|
|
|
+ style={{ display: playBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, styles.playBtn, playBtn.value.disabled && styles.disabled]}
|
|
|
+ id="tips-step-5"
|
|
|
+ onClick={() => togglePlay()}
|
|
|
+ >
|
|
|
+ <div class={styles.btnWrap}>
|
|
|
+ <img
|
|
|
+ style={{ display: state.playState === "play" ? "none" : "" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg("icon_play.svg")}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: state.playState === "play" ? "" : "none" }}
|
|
|
+ class={styles.iconBtn}
|
|
|
+ src={headImg("icon_pause.svg")}
|
|
|
+ />
|
|
|
+ <Circle
|
|
|
+ style={{ opacity: state.playState === "play" ? 1 : 0 }}
|
|
|
+ class={styles.progress}
|
|
|
+ stroke-width={80}
|
|
|
+ currentRate={state.playProgress}
|
|
|
+ rate={100}
|
|
|
+ color="#FFC830"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ {/* 重播按钮 */}
|
|
|
+ <div
|
|
|
+ style={{ display: resetBtn.value.display ? "" : "none" }}
|
|
|
+ class={[styles.btn, styles.resetBtn, resetBtn.value.disabled && styles.disabled]}
|
|
|
+ id="tips-step-7"
|
|
|
+ onClick={() => handleResetPlay()}
|
|
|
+ >
|
|
|
+ <img class={styles.iconBtn} src={headImg("icon_resetbtn.svg")} />
|
|
|
+ </div>
|
|
|
+
|
|
|
<Popup
|
|
|
v-model:show={headTopData.settingMode}
|
|
|
class="popup-custom van-scale center-closeBtn"
|
|
|
@@ -260,7 +426,10 @@ export default defineComponent({
|
|
|
>
|
|
|
<Settting />
|
|
|
</Popup>
|
|
|
- </div>
|
|
|
+
|
|
|
+ {/* 模式切换 */}
|
|
|
+ <ModeTypeMode />
|
|
|
+ </>
|
|
|
);
|
|
|
},
|
|
|
});
|
