竖笛频率修改

src/page-instrument/component/mode-type-mode/index.tsx

@@ -1,57 +1,62 @@
 import { defineComponent, onMounted, ref, watch } from "vue";
 import styles from "./index.module.less";
-import icons from './icon/index.json'
+import icons from "./icon/index.json";
 import { headTopData } from "../../header-top";
-import state, {
-	IPlatform,
-} from "/src/state";
-import TeacherBootom from '../../custom-plugins/guide-page/teacher-bootom'
+import state, { IPlatform } from "/src/state";
+import TeacherBootom from "../../custom-plugins/guide-page/teacher-bootom";
 import StudentBottom from "../../custom-plugins/guide-page/student-bottom";
 export default defineComponent({
 	name: "modelWraper",
 
 	setup() {
-		const showPC = ref(false)
-		const showStudent = ref(false)
+		const showPC = ref(false);
+		const showStudent = ref(false);
 		const openGuid = () => {
 			// 加载后 判断 端口号 加载对应的引导
 			if (state.platform === IPlatform.PC) {
 				// PC
 				setTimeout(() => {
-					showPC.value = true
-				}, 1000)
-
+					showPC.value = true;
+				}, 1000);
 			} else {
 				// 学生端
 				setTimeout(() => {
-					showStudent.value = true
-				}, 500)
+					showStudent.value = true;
+				}, 500);
 			}
-		}
-		watch(() => headTopData.modeType, (val) => {
-			if (val === 'init') {
-				openGuid()
+		};
+		watch(
+			() => headTopData.modeType,
+			(val) => {
+				if (val === "init") {
+					openGuid();
+				}
 			}
-		})
-		return () => (<>
-			{
-				state.platform === IPlatform.PC ? <div class={[styles.wrap, headTopData.modeType === 'init' ? '' : styles.hidden]}>
-					<div class={[styles.infoWrap, headTopData.modeType === 'init' ? '' : styles.hidden]} id='aiTeacher-0'>
-						<img id='aiTeacher-1' onClick={() => headTopData.handleChangeModeType("practise")} src={icons.icon_1} />
-						<img id='aiTeacher-2' onClick={() => headTopData.handleChangeModeType("follow")} src={icons.icon_2} />
-						<img id='aiTeacher-3' onClick={() => headTopData.handleChangeModeType("evaluating")} src={icons.icon_3} />
-					</div>
-					{showPC.value && headTopData.modeType === 'init' ? <TeacherBootom></TeacherBootom> : null}
-				</div> : <div class={[styles.wrap, headTopData.modeType === 'init' ? '' : styles.hidden]}>
-					<div class={[styles.infoWrap, headTopData.modeType === 'init' ? '' : styles.hidden]} >
-						<img id='studentB-0' onClick={() => headTopData.handleChangeModeType("practise")} src={icons.icon_1} />
-						<img id='studentB-1' onClick={() => headTopData.handleChangeModeType("follow")} src={icons.icon_2} />
-						<img id='studentB-2' onClick={() => headTopData.handleChangeModeType("evaluating")} src={icons.icon_3} />
+		);
+		return () => (
+			<>
+				<div id="modeType-box" class={[styles.wrap, headTopData.modeType === "init" ? "" : styles.hidden]}>
+					<div class={styles.infoWrap}>
+						<img
+							id="modeType-0"
+							onClick={() => headTopData.handleChangeModeType("practise")}
+							src={icons.icon_1}
+						/>
+						<img
+							id="modeType-1"
+							onClick={() => headTopData.handleChangeModeType("follow")}
+							src={icons.icon_2}
+						/>
+						<img
+							id="modeType-2"
+							onClick={() => headTopData.handleChangeModeType("evaluating")}
+							src={icons.icon_3}
+						/>
 					</div>
-					{showStudent.value && headTopData.modeType === 'init' ? <StudentBottom></StudentBottom> : null}
+					{showPC.value && headTopData.modeType === "init" ? <TeacherBootom></TeacherBootom> : null}
+					{showStudent.value && headTopData.modeType === "init" ? <StudentBottom></StudentBottom> : null}
 				</div>
-			}
-
-		</>);
+			</>
+		);
 	},
 });

src/page-instrument/custom-plugins/guide-page/student-bottom.tsx

@@ -83,8 +83,8 @@ export default defineComponent({
     tipShow.value =true
    }
     const getStepELe = () => {
-      console.log(`studentB${data.step}`)
-      const ele: HTMLElement = document.getElementById(`studentB-${data.step}`)!;
+      console.log(`modeType${data.step}`)
+      const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
         data.box = {

src/page-instrument/custom-plugins/guide-page/teacher-bootom.tsx

@@ -1,199 +1,198 @@
 import { Button, Popup } from "vant";
-import { } from "vant";
+import {} from "vant";
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
 import { getImage } from "./images";
 import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
-  name: "aiTeacher-guide",
-  emits: ["close"],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {},
-      show: false,
-      steps: [
-        {
-          ele: "",
-          eleRect: {} as DOMRect,
-          img: getImage("aiTeacher1.png"),
-          handStyle: {
-            top: "0.91rem",
-          },
-          imgStyle: {
-            top: "-3.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-            left:'4.67rem'
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'6rem'
-          },
-        },
-        {
-          ele: "",
-          img: getImage("aiTeacher2.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'0.15rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-3.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'1.3rem',
-          },
-        },
-        {
-          ele: "",
-          img: getImage("aiTeacher3.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'0.17rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-3.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
+	name: "aiTeacher-guide",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const data = reactive({
+			box: {},
+			show: false,
+			steps: [
+				{
+					ele: "",
+					eleRect: {} as DOMRect,
+					img: getImage("aiTeacher1.png"),
+					handStyle: {
+						top: "0.91rem",
+					},
+					imgStyle: {
+						top: "-3.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+						left: "4.67rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "6rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("aiTeacher2.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "0.15rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-3.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "1.3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("aiTeacher3.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "0.17rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-3.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "1.3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("aiTeacher4.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "1.4rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-3.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "0.8rem",
+						"justify-content": "center",
+						padding: 0,
+					},
+				},
+			],
+			step: 0,
+		});
 
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'1.3rem',
-          },
-        },
-        {
-          ele: "",
-          img: getImage("aiTeacher4.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'1.4rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-3.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
+		const tipShow = ref(false);
+		const guideInfo = localStorage.getItem("guideInfo");
+		const query: any = getQuery();
+		if ((guideInfo && JSON.parse(guideInfo).teacherBottom) || !query.showGuide) {
+			tipShow.value = false;
+		} else {
+			tipShow.value = true;
+		}
+		const getStepELe = () => {
+			console.log(`modeType${data.step}`);
+			const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
+			if (ele) {
+				const eleRect = ele.getBoundingClientRect();
+				data.box = {
+					left: eleRect.x + "px",
+					top: eleRect.y + "px",
+					width: eleRect.width + "px",
+					height: eleRect.height + "px",
+				};
+			}
+		};
+		onMounted(() => {
+			getStepELe();
+		});
+		const handleNext = () => {
+			if (data.step >= 3) {
+				endGuide();
+				return;
+			}
+			data.step = data.step + 1;
+			getStepELe();
+		};
 
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'0.8rem',
-            "justify-content": "center",
-            padding: 0,
-          },
-        },
-      ],
-      step: 0,
-    });
-    
-    const tipShow = ref(false)
-   const guideInfo = localStorage.getItem('guideInfo')
-   const query: any = getQuery();
-   if(guideInfo&&JSON.parse(guideInfo).teacherBottom || !query.showGuide){
-    tipShow.value =false
-   }else {
-    tipShow.value =true
-   }
-    const getStepELe = () => {
-      console.log(`aiTeacher${data.step}`)
-      const ele: HTMLElement = document.getElementById(`aiTeacher-${data.step}`)!;
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-        data.box = {
-          left: eleRect.x + "px",
-          top: eleRect.y + "px",
-          width: eleRect.width + "px",
-          height: eleRect.height + "px",
-        };
-      }
-    };
-    onMounted(() => {
-      getStepELe();
-    });
-    const handleNext = () => {
-      if (data.step >= 3) {
-       endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = ()=>{
-      let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}') || null
-      if(!guideInfo){
-        guideInfo = {teacherBottom:true}
-      }else{
-        guideInfo.teacherBottom = true
-      }
-      localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
-      tipShow.value = false
-    //  localStorage.setItem('endC')
-    }
-    return () => (
-      <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
-      <div class={styles.content} onClick={() => handleNext()}>
-        <div
-          class={styles.backBtn}
-          onClick={(e: Event) => {
-            e.stopPropagation();
-           endGuide()
-          }}
-        >
-          跳过
-        </div>
-        <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
-          {data.steps.map((item: any, index) => (
-
-            <div
-              onClick={(e: Event) => e.stopPropagation()}
-              class={styles.item}
-              style={{
-                display: index === data.step ? "" : "none",
-                left: `${item.eleRect?.left}px`,
-                top: `${item.eleRect?.top}px`,
-              }}
-            >
-              <img class={styles.img} style={item.imgStyle} src={item.img} />
-              {/* <img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} /> */}
-              <div class={styles.btns} style={item.btnsStyle}>
-                {data.step + 1 == data.steps.length ? (
-                  <>
-                      <div class={[styles.endBtn]}  onClick={() =>endGuide()}>
-                      完成
-                    </div>
-                    <div
-                      class={[styles.nextBtn]}
-                      style={{ "border-color": "#fff" }}
-                  
-                      onClick={() => {
-                        data.step = 0;
-                        getStepELe();
-                      }}
-                    >
-                      再看一遍
-                    </div>
-                
-                  </>
-                ) : (
-                  <Button class={styles.teacherBtn} round type="primary" onClick={() => handleNext()}>
-
-                    下一步 ({data.step + 1}/{data.steps.length})
-                  </Button>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-      </Popup>
-    );
-  },
+		const endGuide = () => {
+			let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
+			if (!guideInfo) {
+				guideInfo = { teacherBottom: true };
+			} else {
+				guideInfo.teacherBottom = true;
+			}
+			localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
+			tipShow.value = false;
+			//  localStorage.setItem('endC')
+		};
+		return () => (
+			<Popup
+				teleport="body"
+				overlay={false}
+				closeOnClickOverlay={false}
+				class={["popup-custom", styles.guidePopup]}
+				v-model:show={tipShow.value}
+			>
+				<div class={styles.content} onClick={() => handleNext()}>
+					<div
+						class={styles.backBtn}
+						onClick={(e: Event) => {
+							e.stopPropagation();
+							endGuide();
+						}}
+					>
+						跳过
+					</div>
+					<div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
+						{data.steps.map((item: any, index) => (
+							<div
+								onClick={(e: Event) => e.stopPropagation()}
+								class={styles.item}
+								style={{
+									display: index === data.step ? "" : "none",
+									left: `${item.eleRect?.left}px`,
+									top: `${item.eleRect?.top}px`,
+								}}
+							>
+								<img class={styles.img} style={item.imgStyle} src={item.img} />
+								<div class={styles.btns} style={item.btnsStyle}>
+									{data.step + 1 == data.steps.length ? (
+										<>
+											<div class={[styles.endBtn]} onClick={() => endGuide()}>
+												完成
+											</div>
+											<div
+												class={[styles.nextBtn]}
+												style={{ "border-color": "#fff" }}
+												onClick={() => {
+													data.step = 0;
+													getStepELe();
+												}}
+											>
+												再看一遍
+											</div>
+										</>
+									) : (
+										<Button class={styles.teacherBtn} round type="primary" onClick={() => handleNext()}>
+											下一步 ({data.step + 1}/{data.steps.length})
+										</Button>
+									)}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</Popup>
+		);
+	},
 });

src/page-instrument/custom-plugins/the-vip/index.module.less

@@ -0,0 +1,54 @@
+.container {
+    position: relative;
+    width: 335px;
+    height: 298px;
+    background: url('./icon_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-top: 56px;
+}
+
+.close {
+    position: absolute;
+    right: 0;
+    top: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.title {
+    margin-left: 14px;
+    width: 131px;
+    display: block;
+}
+
+.content {
+    position: relative;
+    padding: 40px 20px 20px 20px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 22px;
+    z-index: 10;
+}
+
+.btns {
+    position: absolute;
+    bottom: 18px;
+    width: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 18px;
+    color: #777;
+    line-height: 26px;
+    text-align: center;
+
+    img {
+        width: 100%;
+        margin-bottom: 12px;
+    }
+}

src/page-instrument/custom-plugins/the-vip/index.tsx

@@ -0,0 +1,35 @@
+import { defineComponent } from 'vue';
+import icon_bg from './icon_bg.png';
+import icon_title from './icon_title.png';
+import icon_btn from './icon_btn.png';
+import icon_close from './icon_close.png';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'TheVip',
+  emits: ['close'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.container}>
+        <img
+          class={styles.close}
+          src={icon_close}
+          onClick={() => emit('close')}
+        />
+        <img class={styles.title} src={icon_title} />
+        <div class={styles.content}>
+          您还未领取<span style={{ color: '#FF5A56' }}>“小酷AI”</span>
+          哦，如需继续使用，请领取～
+        </div>
+        <div class={styles.btns}>
+          <img
+            class={styles.btn}
+            src={icon_btn}
+            onClick={() => emit('close', true)}
+          />
+          <div onClick={() => emit('close')}>暂不领取</div>
+        </div>
+      </div>
+    );
+  }
+});

src/page-instrument/view-detail/index.tsx

@@ -47,6 +47,20 @@ import RecordingTime from "../custom-plugins/recording-time";
 import WorkIndex from "../custom-plugins/work-index";
 import TheMusicList from "../component/the-music-list";
 
+/** 需要处理频率的乐器
+ * 120: 竖笛
+ */
+const instrumentSubject = [120]
+const resetFrequency =(list: any[]) => {
+	if (!instrumentSubject.includes(state.subjectId)) return list
+	for(let i = 0; i < list.length; i++){
+		if (list[i].prevFrequency) list[i].prevFrequency = list[i].prevFrequency * 2
+		if (list[i].frequency) list[i].frequency = list[i].frequency * 2
+		if (list[i].nextFrequency) list[i].nextFrequency = list[i].nextFrequency * 2
+	}
+	return list
+}
+
 export default defineComponent({
 	name: "music-list",
 	setup() {
@@ -191,7 +205,8 @@ export default defineComponent({
 				handleSetSpeed(saveSpeed);
 			}
 			state.times = formateTimes(osmd);
-			console.log("🚀 ~ state.times:", state.times);
+			state.times = resetFrequency(state.times)
+			console.log("🚀 ~ state.times:", state.times, state.subjectId);
 			try {
 				metronomeData.metro = new Metronome();
 				metronomeData.metro.init(state.times);

src/view/fingering/fingering-config.ts

@@ -81,7 +81,7 @@ export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU"
 			Ukulele: 130,
 			Mouthorgan: 140,
 			Piano: 150,
-			1: 120,
+			4: 120,
 		  }
 		return subject[id] || 0;
 	}