|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef,ComputedRef } from "vue";
|
|
|
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
|
|
|
import iconBack from "./image/icon-back.png";
|
|
|
@@ -28,9 +28,10 @@ import { toggleMusicSheet } from "/src/view/plugins/toggleMusicSheet";
|
|
|
import useDrag from "/src/view/plugins/useDrag/index";
|
|
|
import Dragbom from "/src/view/plugins/useDrag/dragbom";
|
|
|
import { getGuidance, setGuidance } from "../custom-plugins/guide-page/api";
|
|
|
-import ModeView from "./modeView"
|
|
|
-import { smoothAnimationState } from "../view-detail/smoothAnimation"
|
|
|
+import ModeView from "./modeView";
|
|
|
+import { smoothAnimationState } from "../view-detail/smoothAnimation";
|
|
|
import { isMusicList, musicListShow } from "../component/the-music-list";
|
|
|
+import { PractiseDriver } from "../custom-plugins/guide-driver";
|
|
|
|
|
|
/** 头部数据和方法 */
|
|
|
export const headTopData = reactive({
|
|
|
@@ -57,7 +58,7 @@ export const headTopData = reactive({
|
|
|
// 如果延迟检测资源还在加载中，给出提示
|
|
|
if (!evaluatingData.jsonLoadDone) {
|
|
|
evaluatingData.jsonLoading = true;
|
|
|
- state.audioDone && showToast("资源加载中，请稍后"); //音频资源加载完之后才提示
|
|
|
+ state.audioDone && showToast("资源加载中，请稍后"); //音频资源加载完之后才提示
|
|
|
return;
|
|
|
}
|
|
|
// 如果是pc端, 评测模式暂不可用
|
|
|
@@ -72,8 +73,8 @@ export const headTopData = reactive({
|
|
|
}
|
|
|
// 评测模式，只有一行谱模式
|
|
|
if (!state.isSingleLine) {
|
|
|
- state.isSingleLine = true
|
|
|
- refreshMusicSvg()
|
|
|
+ state.isSingleLine = true;
|
|
|
+ refreshMusicSvg();
|
|
|
}
|
|
|
state.playIngSpeed = state.originSpeed;
|
|
|
handleStartEvaluat();
|
|
|
@@ -84,8 +85,8 @@ export const headTopData = reactive({
|
|
|
} else if (value === "follow") {
|
|
|
// 跟练模式，只有一行谱模式
|
|
|
if (!state.isSingleLine) {
|
|
|
- state.isSingleLine = true
|
|
|
- refreshMusicSvg()
|
|
|
+ state.isSingleLine = true;
|
|
|
+ refreshMusicSvg();
|
|
|
}
|
|
|
smoothAnimationState.isShow.value = false;
|
|
|
toggleFollow();
|
|
|
@@ -99,143 +100,143 @@ export const headData = reactive({
|
|
|
musicTypeShow: false,
|
|
|
});
|
|
|
|
|
|
-let resetBtn:ComputedRef<{
|
|
|
+let resetBtn: ComputedRef<{
|
|
|
display: boolean;
|
|
|
disabled: boolean;
|
|
|
-}>
|
|
|
+}>;
|
|
|
/**
|
|
|
* 处理模式切换
|
|
|
* @param oldPlayType 没改变之前的播放模式
|
|
|
* @param oldPlaySource 没改变之前的播放类型
|
|
|
* @param isforceReset 是否强制刷新播放状态 模式times时值改变时候也刷新
|
|
|
*/
|
|
|
-export function handlerModeChange(oldPlayType:"play"|"sing", oldPlaySource:IPlayState,isforceReset?:boolean) {
|
|
|
- const isModeChange = modeChangeHandleTimes(oldPlayType, oldPlaySource)
|
|
|
- // 没有切换的时候 不处理下面的
|
|
|
- if(isModeChange){
|
|
|
- try {
|
|
|
- metronomeData.metro.calculation(state.times);
|
|
|
- } catch (error) {}
|
|
|
- console.log("重新之后的times", state.times, state.fixtime)
|
|
|
- }
|
|
|
- if(isModeChange||isforceReset){
|
|
|
- // 重置播放状态
|
|
|
- handleRessetState()
|
|
|
- // 隐藏重播按钮
|
|
|
- resetBtn && (resetBtn.value.display = false)
|
|
|
- }
|
|
|
+export function handlerModeChange(oldPlayType: "play" | "sing", oldPlaySource: IPlayState, isforceReset?: boolean) {
|
|
|
+ const isModeChange = modeChangeHandleTimes(oldPlayType, oldPlaySource);
|
|
|
+ // 没有切换的时候 不处理下面的
|
|
|
+ if (isModeChange) {
|
|
|
+ try {
|
|
|
+ metronomeData.metro.calculation(state.times);
|
|
|
+ } catch (error) {}
|
|
|
+ console.log("重新之后的times", state.times, state.fixtime);
|
|
|
+ }
|
|
|
+ if (isModeChange || isforceReset) {
|
|
|
+ // 重置播放状态
|
|
|
+ handleRessetState();
|
|
|
+ // 隐藏重播按钮
|
|
|
+ resetBtn && (resetBtn.value.display = false);
|
|
|
+ }
|
|
|
}
|
|
|
// 模式切换之后重新给times赋值
|
|
|
-function modeChangeHandleTimes(oldPlayType:"play"|"sing", oldPlaySource:IPlayState){
|
|
|
- const playType = state.playType
|
|
|
- const playSource = state.playSource
|
|
|
- const {notBeatFixtime, xmlMp3BeatFixTime, difftime} = state.times[0]
|
|
|
- const { isOpenMetronome, isSingOpenMetronome } = state
|
|
|
+function modeChangeHandleTimes(oldPlayType: "play" | "sing", oldPlaySource: IPlayState) {
|
|
|
+ const playType = state.playType;
|
|
|
+ const playSource = state.playSource;
|
|
|
+ const { notBeatFixtime, xmlMp3BeatFixTime, difftime } = state.times[0];
|
|
|
+ const { isOpenMetronome, isSingOpenMetronome } = state;
|
|
|
// 演奏向演唱切
|
|
|
- if(oldPlayType === "play"&&playType === "sing"){
|
|
|
- if(playSource === "mingSong"){
|
|
|
+ if (oldPlayType === "play" && playType === "sing") {
|
|
|
+ if (playSource === "mingSong") {
|
|
|
// 唱名文件也要加上弱起时间 他们制作曲子加了弱起时间
|
|
|
- state.fixtime = difftime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.xmlNoteTime + difftime
|
|
|
- item.endtime = item.xmlNoteEndTime + difftime
|
|
|
- item.fixtime = difftime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else{
|
|
|
+ state.fixtime = difftime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.xmlNoteTime + difftime;
|
|
|
+ item.endtime = item.xmlNoteEndTime + difftime;
|
|
|
+ item.fixtime = difftime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
//演奏开了节拍器，演唱没开节拍器
|
|
|
- if(isOpenMetronome&&!isSingOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime
|
|
|
- item.endtime = item.notBeatEndTime
|
|
|
- item.fixtime = notBeatFixtime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else if(!isOpenMetronome&&isSingOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime + xmlMp3BeatFixTime
|
|
|
- item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime
|
|
|
- item.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- })
|
|
|
- return true
|
|
|
+ if (isOpenMetronome && !isSingOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime;
|
|
|
+ item.endtime = item.notBeatEndTime;
|
|
|
+ item.fixtime = notBeatFixtime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else if (!isOpenMetronome && isSingOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime + xmlMp3BeatFixTime;
|
|
|
+ item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
|
|
|
+ item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
}
|
|
|
}
|
|
|
- }else if(oldPlayType === "sing"&&playType === "play"){
|
|
|
+ } else if (oldPlayType === "sing" && playType === "play") {
|
|
|
// 演唱向演奏切
|
|
|
- if(oldPlaySource === "mingSong"){
|
|
|
+ if (oldPlaySource === "mingSong") {
|
|
|
// 有节拍器
|
|
|
- if(isOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime + xmlMp3BeatFixTime
|
|
|
- item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime
|
|
|
- item.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else{
|
|
|
- state.fixtime = notBeatFixtime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime
|
|
|
- item.endtime = item.notBeatEndTime
|
|
|
- item.fixtime = notBeatFixtime
|
|
|
- })
|
|
|
- return true
|
|
|
+ if (isOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime + xmlMp3BeatFixTime;
|
|
|
+ item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
|
|
|
+ item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ state.fixtime = notBeatFixtime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime;
|
|
|
+ item.endtime = item.notBeatEndTime;
|
|
|
+ item.fixtime = notBeatFixtime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
}
|
|
|
}
|
|
|
// 演奏开了节拍器，演唱没开节拍器
|
|
|
- if(isOpenMetronome&&!isSingOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime + xmlMp3BeatFixTime
|
|
|
- item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime
|
|
|
- item.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else if(!isOpenMetronome&&isSingOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime
|
|
|
- item.endtime = item.notBeatEndTime
|
|
|
- item.fixtime = notBeatFixtime
|
|
|
- })
|
|
|
- return true
|
|
|
+ if (isOpenMetronome && !isSingOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime + xmlMp3BeatFixTime;
|
|
|
+ item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
|
|
|
+ item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else if (!isOpenMetronome && isSingOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime;
|
|
|
+ item.endtime = item.notBeatEndTime;
|
|
|
+ item.fixtime = notBeatFixtime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
}
|
|
|
- }else if(oldPlayType === "sing"&&playType === "sing"){
|
|
|
- // 演唱之间切换
|
|
|
+ } else if (oldPlayType === "sing" && playType === "sing") {
|
|
|
+ // 演唱之间切换
|
|
|
// 切到唱名时候
|
|
|
- if(playSource === "mingSong"){
|
|
|
+ if (playSource === "mingSong") {
|
|
|
// 唱名文件也要加上弱起时间 他们制作曲子加了弱起时间
|
|
|
- state.fixtime = difftime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.xmlNoteTime + difftime
|
|
|
- item.endtime = item.xmlNoteEndTime + difftime
|
|
|
- item.fixtime = difftime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else if(oldPlaySource === "mingSong"){
|
|
|
+ state.fixtime = difftime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.xmlNoteTime + difftime;
|
|
|
+ item.endtime = item.xmlNoteEndTime + difftime;
|
|
|
+ item.fixtime = difftime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else if (oldPlaySource === "mingSong") {
|
|
|
// 有节拍器
|
|
|
- if(isSingOpenMetronome){
|
|
|
- state.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime + xmlMp3BeatFixTime
|
|
|
- item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime
|
|
|
- item.fixtime = notBeatFixtime + xmlMp3BeatFixTime
|
|
|
- })
|
|
|
- return true
|
|
|
- }else{
|
|
|
- state.fixtime = notBeatFixtime
|
|
|
- state.times.map(item => {
|
|
|
- item.time = item.notBeatTime
|
|
|
- item.endtime = item.notBeatEndTime
|
|
|
- item.fixtime = notBeatFixtime
|
|
|
- })
|
|
|
- return true
|
|
|
+ if (isSingOpenMetronome) {
|
|
|
+ state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime + xmlMp3BeatFixTime;
|
|
|
+ item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
|
|
|
+ item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ state.fixtime = notBeatFixtime;
|
|
|
+ state.times.map((item) => {
|
|
|
+ item.time = item.notBeatTime;
|
|
|
+ item.endtime = item.notBeatEndTime;
|
|
|
+ item.fixtime = notBeatFixtime;
|
|
|
+ });
|
|
|
+ return true;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
|
@@ -345,20 +346,20 @@ export default defineComponent({
|
|
|
// 评测开始 禁用
|
|
|
if (state.modeType === "evaluating") return { display: false, disabled: true };
|
|
|
if (!state.isAppPlay) {
|
|
|
- if(state.playType === "play"){
|
|
|
- // 原声, 伴奏 少一个,就不能切换
|
|
|
- if (state.music && state.accompany) return { display: true, disabled: false };
|
|
|
+ if (state.playType === "play") {
|
|
|
+ // 原声, 伴奏 少一个,就不能切换
|
|
|
+ if (state.music && state.accompany) return { display: true, disabled: false };
|
|
|
} else {
|
|
|
// 播放过程中不能切换
|
|
|
- if (state.playState === "play"){
|
|
|
+ if (state.playState === "play") {
|
|
|
return { display: true, disabled: true };
|
|
|
}
|
|
|
- // 范唱
|
|
|
- let index = 0
|
|
|
- state.fanSong && index++
|
|
|
- state.banSong && index++
|
|
|
- state.mingSong && index++
|
|
|
- if(index > 1) {
|
|
|
+ // 范唱
|
|
|
+ let index = 0;
|
|
|
+ state.fanSong && index++;
|
|
|
+ state.banSong && index++;
|
|
|
+ state.mingSong && index++;
|
|
|
+ if (index > 1) {
|
|
|
return { display: true, disabled: false };
|
|
|
}
|
|
|
}
|
|
|
@@ -377,23 +378,23 @@ export default defineComponent({
|
|
|
// 音频播放中 禁用
|
|
|
if (state.playState === "play") return { display: true, disabled: true };
|
|
|
if (!state.isAppPlay) {
|
|
|
- let index = 0
|
|
|
- state.music && index++
|
|
|
- state.accompany && index++
|
|
|
- let songIndex = 0
|
|
|
- state.fanSong && songIndex++
|
|
|
- state.banSong && songIndex++
|
|
|
- state.mingSong && songIndex++
|
|
|
- // 演唱和演奏 都有数据的时间不禁用
|
|
|
- if(songIndex>0&&index>0) {
|
|
|
- return { display: true, disabled: false };
|
|
|
- }
|
|
|
+ let index = 0;
|
|
|
+ state.music && index++;
|
|
|
+ state.accompany && index++;
|
|
|
+ let songIndex = 0;
|
|
|
+ state.fanSong && songIndex++;
|
|
|
+ state.banSong && songIndex++;
|
|
|
+ state.mingSong && songIndex++;
|
|
|
+ // 演唱和演奏 都有数据的时间不禁用
|
|
|
+ if (songIndex > 0 && index > 0) {
|
|
|
+ return { display: true, disabled: false };
|
|
|
+ }
|
|
|
}
|
|
|
return {
|
|
|
disabled: true,
|
|
|
display: true,
|
|
|
};
|
|
|
- })
|
|
|
+ });
|
|
|
/** 模式切换按钮 */
|
|
|
const toggleBtn = computed(() => {
|
|
|
// 选择模式, url设置模式 不显示
|
|
|
@@ -603,38 +604,41 @@ export default defineComponent({
|
|
|
>
|
|
|
{/* 返回和标题 */}
|
|
|
<div class={styles.headTopLeftBox}>
|
|
|
- <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
|
|
|
- {
|
|
|
- state.modeType === "practise" && smoothAnimationState.isShow.value ?
|
|
|
- <div class={styles.title} onClick={()=>{
|
|
|
- isMusicList.value && (musicListShow.value = true)
|
|
|
- }}>
|
|
|
- <NoticeBar
|
|
|
- text={state.examSongName}
|
|
|
- background="none"
|
|
|
- />
|
|
|
- </div> :
|
|
|
- <img src={listImg} class={[styles.img]} onClick={()=>{
|
|
|
- isMusicList.value && (musicListShow.value = true)
|
|
|
- }} />
|
|
|
- }
|
|
|
- </div>
|
|
|
- {/* 模式切换 */}
|
|
|
- {
|
|
|
- state.playType === "play" &&
|
|
|
- <div
|
|
|
- id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
|
|
|
- style={{ display: toggleBtn.value.display ? "" : "none" }}
|
|
|
- class={[styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
|
|
|
+ <img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
|
|
|
+ {state.modeType === "practise" && smoothAnimationState.isShow.value ? (
|
|
|
+ <div
|
|
|
+ class={[styles.title, "driver-8"]}
|
|
|
onClick={() => {
|
|
|
- handleRessetState();
|
|
|
- headTopData.modeType = "init";
|
|
|
+ isMusicList.value && (musicListShow.value = true);
|
|
|
}}
|
|
|
>
|
|
|
- <img class={styles.img} src={iconMode} />
|
|
|
- <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
|
|
|
+ <NoticeBar text={state.examSongName} background="none" />
|
|
|
</div>
|
|
|
- }
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={listImg}
|
|
|
+ class={[styles.img, "driver-8"]}
|
|
|
+ onClick={() => {
|
|
|
+ isMusicList.value && (musicListShow.value = true);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {/* 模式切换 */}
|
|
|
+ {state.playType === "play" && (
|
|
|
+ <div
|
|
|
+ id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
|
|
|
+ style={{ display: toggleBtn.value.display ? "" : "none" }}
|
|
|
+ class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
|
|
|
+ onClick={() => {
|
|
|
+ handleRessetState();
|
|
|
+ headTopData.modeType = "init";
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img class={styles.img} src={iconMode} />
|
|
|
+ <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
{/* 功能按钮 */}
|
|
|
<div
|
|
|
class={[styles.headRight]}
|
|
|
@@ -671,18 +675,18 @@ export default defineComponent({
|
|
|
) : null} */}
|
|
|
<div
|
|
|
style={{ display: playTypeBtn.value.display ? "" : "none" }}
|
|
|
- class={[styles.btn, playTypeBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled]}
|
|
|
onClick={() => {
|
|
|
- const oldPlayType = state.playType
|
|
|
- const oldPlaySource = state.playSource
|
|
|
- if(state.playType === "play"){
|
|
|
- state.playType = "sing"
|
|
|
- state.playSource = state.fanSong?"music":state.banSong?"background":"mingSong"
|
|
|
+ const oldPlayType = state.playType;
|
|
|
+ const oldPlaySource = state.playSource;
|
|
|
+ if (state.playType === "play") {
|
|
|
+ state.playType = "sing";
|
|
|
+ state.playSource = state.fanSong ? "music" : state.banSong ? "background" : "mingSong";
|
|
|
} else {
|
|
|
- state.playType = "play"
|
|
|
- state.playSource = state.music?"music":"background"
|
|
|
+ state.playType = "play";
|
|
|
+ state.playSource = state.music ? "music" : "background";
|
|
|
}
|
|
|
- handlerModeChange(oldPlayType, oldPlaySource, true)
|
|
|
+ handlerModeChange(oldPlayType, oldPlaySource, true);
|
|
|
}}
|
|
|
>
|
|
|
<img style={{ display: state.playType === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg(`perform.png`)} />
|
|
|
@@ -692,30 +696,30 @@ export default defineComponent({
|
|
|
<div
|
|
|
id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
|
|
|
style={{ display: originBtn.value.display ? "" : "none" }}
|
|
|
- class={[styles.btn, originBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled]}
|
|
|
onClick={() => {
|
|
|
- const oldPlayType = state.playType
|
|
|
- const oldPlaySource = state.playSource
|
|
|
- if(state.playType === 'play'){
|
|
|
+ const oldPlayType = state.playType;
|
|
|
+ const oldPlaySource = state.playSource;
|
|
|
+ if (state.playType === "play") {
|
|
|
state.playSource = state.playSource === "music" ? "background" : "music";
|
|
|
- }else{
|
|
|
- if(state.playSource === "music"){
|
|
|
- state.playSource = state.banSong ? "background" :"mingSong"
|
|
|
- }else if(state.playSource === "background"){
|
|
|
- state.playSource = state.mingSong ? "mingSong" :"music"
|
|
|
- }else {
|
|
|
- state.playSource = state.fanSong ? "music" :"background"
|
|
|
+ } else {
|
|
|
+ if (state.playSource === "music") {
|
|
|
+ state.playSource = state.banSong ? "background" : "mingSong";
|
|
|
+ } else if (state.playSource === "background") {
|
|
|
+ state.playSource = state.mingSong ? "mingSong" : "music";
|
|
|
+ } else {
|
|
|
+ state.playSource = state.fanSong ? "music" : "background";
|
|
|
}
|
|
|
}
|
|
|
- handlerModeChange(oldPlayType, oldPlaySource)
|
|
|
+ handlerModeChange(oldPlayType, oldPlaySource);
|
|
|
}}
|
|
|
>
|
|
|
- <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={state.playType === 'play'?headImg(`music.png`):headImg(`music1.png`)} />
|
|
|
- <img style={{ display: state.playSource === "background" ? "" : "none" }} class={styles.iconBtn} src={state.playType === 'play'?headImg(`background.png`):headImg(`background1.png`)} />
|
|
|
+ <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={state.playType === "play" ? headImg(`music.png`) : headImg(`music1.png`)} />
|
|
|
+ <img style={{ display: state.playSource === "background" ? "" : "none" }} class={styles.iconBtn} src={state.playType === "play" ? headImg(`background.png`) : headImg(`background1.png`)} />
|
|
|
<img style={{ display: state.playSource === "mingSong" ? "" : "none" }} class={styles.iconBtn} src={headImg(`mingsong.png`)} />
|
|
|
- <span>{state.playSource === "music" ? (state.playType ==="play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType ==="play" ? "伴奏" : "伴唱") : "唱名"}</span>
|
|
|
+ <span>{state.playSource === "music" ? (state.playType === "play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType === "play" ? "伴奏" : "伴唱") : "唱名"}</span>
|
|
|
</div>
|
|
|
- <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={[styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
|
|
|
+ <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
|
|
|
<img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.png`)} />
|
|
|
<img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.png`)} />
|
|
|
<img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
|
|
|
@@ -725,7 +729,7 @@ export default defineComponent({
|
|
|
<>
|
|
|
<div
|
|
|
style={{ display: metronomeBtn.value.display ? "" : "none" }}
|
|
|
- class={[styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled]}
|
|
|
+ class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled]}
|
|
|
onClick={async () => {
|
|
|
headData.speedShow = !headData.speedShow;
|
|
|
}}
|
|
|
@@ -737,14 +741,14 @@ export default defineComponent({
|
|
|
<img src={headImg("speed.png")} />
|
|
|
<div>{state.speed}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
{
|
|
|
- <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
|
|
|
+ <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
|
|
|
<Speed />
|
|
|
{state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
|
|
|
</Popup>
|
|
|
}
|
|
|
- </>
|
|
|
+ </>
|
|
|
)}
|
|
|
{/* {state.enableNotation ? (
|
|
|
<Popover trigger="manual" v-model:show={headData.musicTypeShow} class={state.platform === IPlatform.PC && styles.pcTransPop} placement={state.platform === IPlatform.PC ? "top-end" : "bottom-end"} overlay={false} offset={state.platform === IPlatform.PC ? [0, 40] : [0, 8]}>
|
|
|
@@ -778,7 +782,7 @@ export default defineComponent({
|
|
|
<span>声轨</span>
|
|
|
</div>
|
|
|
)}
|
|
|
- <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={[styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
|
|
|
+ <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
|
|
|
<img class={styles.iconBtn} src={headImg("icon_menu.png")} />
|
|
|
<span>设置</span>
|
|
|
</div>
|
|
|
@@ -790,6 +794,8 @@ export default defineComponent({
|
|
|
id="studnetT-7"
|
|
|
style={{ display: playBtn.value.display ? "" : "none" }}
|
|
|
class={[
|
|
|
+ // 引导使用的类
|
|
|
+ "driver-1",
|
|
|
styles.playBtn,
|
|
|
playBtn.value.disabled && styles.disabled,
|
|
|
state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.playLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.playRightButton : "",
|
|
|
@@ -807,17 +813,13 @@ export default defineComponent({
|
|
|
<div
|
|
|
id="tips-step-9"
|
|
|
style={{ display: resetBtn.value.display ? "" : "none" }}
|
|
|
- class={[
|
|
|
- styles.resetBtn,
|
|
|
- resetBtn.value.disabled && styles.disabled,
|
|
|
- state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.pauseLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.pauseRightButton : "",
|
|
|
- ]}
|
|
|
+ class={[styles.resetBtn, resetBtn.value.disabled && styles.disabled, state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.pauseLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.pauseRightButton : ""]}
|
|
|
onClick={() => handleResetPlay()}
|
|
|
>
|
|
|
<img class={styles.iconBtn} src={headImg("icon_reset.png")} />
|
|
|
</div>
|
|
|
|
|
|
- <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
|
|
|
+ <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
|
|
|
<Settting />
|
|
|
{state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
|
|
|
</Popup>
|
|
|
@@ -829,6 +831,9 @@ export default defineComponent({
|
|
|
{/* isAllBtns */}
|
|
|
{isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
|
|
|
{isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>}
|
|
|
+
|
|
|
+ {/* 练习模式功能引导 加载音频完成 不是会员 */}
|
|
|
+ {state.modeType === "practise" && state.audioDone && !state.isVip && <PractiseDriver />}
|
|
|
</>
|
|
|
);
|
|
|
},
|
