Merge branch 'feature-tianyong' into klx-test

src/helpers/metronome.ts

@@ -36,7 +36,7 @@ export const metronomeData = reactive({
 	metroList: [] as number[],
 	activeList: [] as number[],
 	metroMeasure: [] as any[],
-	activeIndex: null as unknown as number,
+	activeIndex: null as any,
 	activeMetro: {} as any,
 	cursorMode: 2 as number, // 光标模式：1:音符指针；2:节拍指针；3:关闭指针
 	cursorTips: '' as string, // 光标模式提示文字
@@ -180,7 +180,7 @@ class Metronome {
 	
 	// 暂停的时候，点击音符，需要找到对应的节拍器的位置
 	findMetronomePosition = (currentTime: number) => {
-		// console.log('取消选段',currentTime)
+		console.log('取消选段1111',currentTime)
 		const originTime = currentTime;
 		// if (!state.sectionStatus){
 		// 	currentTime = setCurrentTime(currentTime);

src/page-instrument/component/the-music-list/index.module.less

@@ -13,7 +13,9 @@
                 justify-content: center;
                 height: 22px;
                 .van-tabs__nav--line{
-                    padding-bottom: 0;
+                    padding: 0 50px 0 66px;
+                    width: 100%;
+                    justify-content: space-between;
                     background-color: initial;
                     .van-tab{
                         text-align: center;

src/page-instrument/component/the-music-list/list.tsx

@@ -103,32 +103,36 @@ export default defineComponent({
       if (vipVerify.value && !state.tenantAlbumId) {
         // 是否需要校验vip
         let needCheckVip = true;
-        // 如果是点播的曲子，需要弹窗提醒
-        if (item.paymentType.includes("CHARGE")) {
-          if (loading.value === true) return
-          loading.value = true
-          // 查询是否购买了
-          const { data } = await api_musicIsBuy(item.id)
-          loading.value = false
-          if (data.buyed === false) {
-            permissionPopup.active = item.paymentType === "CHARGE" ? "demand" : "memberAndDemand"
+        if (item.paymentType.includes("VIP") && ["VIP","SVIP","PERMANENT_SVIP"].includes(state.vipType)) {
+          needCheckVip = false;
+        } else {
+          // 如果是点播的曲子，需要弹窗提醒
+          if (item.paymentType.includes("CHARGE")) {
+            if (loading.value === true) return
+            loading.value = true
+            // 查询是否购买了
+            const { data } = await api_musicIsBuy(item.id)
+            loading.value = false
+            if (data.buyed === false) {
+              permissionPopup.active = item.paymentType === "CHARGE" ? "demand" : "memberAndDemand"
+              permissionPopup.musicId = item.id
+              permissionPopup.musicPrice = item.musicPrice
+              permissionPopup.show = true
+              return
+            }
+            // 已经购买
+            if (data.buyed === true) {
+              needCheckVip = false;
+            }
+          }
+          // 如果是vip的曲子，当前用户不是会员时，需要弹窗提醒
+          if (state.vipType === "NOT_VIP" && item.paymentType !== "FREE" && needCheckVip) {
+            permissionPopup.active = item.paymentType.includes('CHARGE') ? "memberAndDemand" : "member"
             permissionPopup.musicId = item.id
             permissionPopup.musicPrice = item.musicPrice
             permissionPopup.show = true
             return
           }
-          // 已经购买
-          if (data.buyed === true) {
-            needCheckVip = false;
-          }
-        }
-        // 如果是vip的曲子，当前用户不是会员时，需要弹窗提醒
-        if (state.vipType === "NOT_VIP" && item.paymentType !== "FREE" && needCheckVip) {
-          permissionPopup.active = item.paymentType.includes('CHARGE') ? "memberAndDemand" : "member"
-          permissionPopup.musicId = item.id
-          permissionPopup.musicPrice = item.musicPrice
-          permissionPopup.show = true
-          return
         }
       }
       

src/page-instrument/custom-plugins/guide-driver/index.less

@@ -4,8 +4,8 @@
 }
 
 .popoverClass .driver-popover-next-btn {
-  width: 102px;
-  height: 34px;
+  width: 100px;
+  height: 33px;
   text-shadow: none;
   border: none;
   font-weight: 600;

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -58,7 +58,6 @@ export const PractiseDriver = defineComponent({
         popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
       } catch {}
     };
-
     const driverOptions = (): Config => {
       let length = 10;
 
@@ -79,7 +78,8 @@ export const PractiseDriver = defineComponent({
       if (!props.statusAll.subjectStatus) {
         length -= 1;
       }
-      if (!props.statusAll.playType) {
+      // 非midi
+      if (!props.statusAll.playType && !state.isAppPlay) {
         length -= 1;
       }
 

src/page-instrument/custom-plugins/helper-model/recommendation/index.module.less

@@ -99,9 +99,9 @@
                                     margin-bottom: 6px;
                                 }
                                 &.van-dropdown-item__option--active{
-                                    background: #E6F9F8;
+                                    background: #E5F8F4;
                                     border-radius: 8px;
-                                    color: #00B2A7;
+                                    color: #14B698;
                                     font-weight: 600;
                                 }
                                 .van-cell__value{
@@ -114,8 +114,8 @@
                 &.currItem{
                     :global{
                         .van-dropdown-menu__bar  .van-dropdown-menu__title{
-                            color: #00B2A7;
-                            --van-gray-4:#00B2A7;
+                            color: #14B698;
+                            --van-gray-4:#14B698;
                         }
                     }
                 }
@@ -131,7 +131,7 @@
                         font-weight: 500;
                         font-size: 14px;
                         color: #131415;
-                        caret-color: #01C1B5;
+                        caret-color: #2DC7AA;
                         min-height: 80px;
                         &::placeholder {
                             font-weight: 400;

src/page-instrument/evaluat-model/evaluat-result/index.module.less

@@ -150,10 +150,10 @@
 
         .rightBadge {
             position: absolute;
-            top: -59px;
+            top: -58px;
             right: -9px;
-            width: 160px;
-            height: 106px;
+            width: 142px;
+            height: 103px;
             z-index: -3;
         }
     }

src/page-instrument/evaluat-model/evaluat-result/index.tsx

@@ -166,7 +166,7 @@ export default defineComponent({
                   </div>
                 </div>
               )}
-              <div class={styles.tips}>{evaluatingData.resultData.clxtip}</div>
+              <div class={styles.tips}>{state.isPercussion ? evaluatingData.resultData.djytip : evaluatingData.resultData.clxtip}</div>
               <div class={styles.ctrls}>
                 <img src={zlycImg} class={[styles.ctrlsBtn, "evaluting-result-2"]} onClick={() => emit("close", "tryagain")} />
                 {evaluatingData.resultData.recordId ? (

src/page-instrument/header-top/index.module.less

@@ -185,24 +185,23 @@
     height: 100%;
     position: relative;
     z-index: 9;
-    padding-top: 13px;
     .btn {
         position: relative;
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
-        margin-right: 24px;
-        &.modeType{
-            margin-right: 14px;
-        }
+        margin-right: 30px;
+        // &.modeType{
+        //     margin-right: 14px;
+        // }
         &:last-child {
             margin-right: 0;
         }
 
         .iconBtn {
-            width: 27px;
-            height: 27px;
+            width: 24px;
+            height: 24px;
         }
 
         span {
@@ -291,6 +290,18 @@
             }
         }
 
+        &.backgroundSongAct:active {
+            >img {
+                content: url("./image/backgroundAct.png");
+            }
+        }
+
+        &.musicSongAct:active {
+            >img {
+                content: url("./image/musicAct.png");
+            }
+        }
+
         &.settingMode:active {
             >img {
                 content: url("./image/icon_menuAct.png");
@@ -478,10 +489,10 @@
 
     .modeTitle {
         width: auto;
-        height: 50px;
+        height: 55px;
         position: absolute;
         left: 50%;
-        top: 22px;
+        top: 10px;
         transform: translateX(-50%);
     }
 
@@ -511,14 +522,14 @@
         }
         .vipIcon {
             position: absolute;
-            left: 30px;
+            left: 28px;
             top: 12px;
             width: 55px;
             height: 21px;
         }
         .svipIcon {
             position: absolute;
-            left: 30px;
+            left: 28px;
             top: 12px;
             width: 63px;
             height: 21px;

src/page-instrument/header-top/index.tsx

@@ -41,26 +41,31 @@ const ModeView = defineAsyncComponent(() =>
 /** 校验是否能切换模式，会员的曲子，酷乐秀跟练模式、评测模式需要svip */
 export const checkMusicBuy = (item: any, type?: string) => {
   let checked = true;
-  // 学生端或者老师端需要校验点播和会员曲目；通过专辑进入的，不需要校验点播和会员曲目，默认都可以使用
-  if ((state.systemType === "student" || state.systemType === "teacher") && !state.tenantAlbumId) {
-    // 如果是点播的曲子，并且还没有购买，需要弹窗提醒
-    if (item.paymentType === "CHARGE" && !item.buyed) {
-      permissionPopup.active = "demand"
-      permissionPopup.musicId = item.id
-      permissionPopup.musicPrice = item.musicPrice
-      permissionPopup.show = true
-      checked = false
-    }
-    /**
-     * 如果是vip的曲子，当前用户不是会员时，需要弹窗提醒
-     * 如果是vip的曲子，当前用户不是svip会员，点击跟练或评测时，需要弹窗提醒（会员曲子，跟练和评测需要开通svip会员才能使用）
-     */
-    if ( (state.vipType === "NOT_VIP" && item.paymentType !== "FREE") || (item.paymentType !== "FREE" && !state.vipType.includes("SVIP") && (type === "follow" || type === "evaluating")) ) {
-      permissionPopup.active = item.paymentType.includes('CHARGE') ? "memberAndDemand" : "member"
-      permissionPopup.musicId = item.id
-      permissionPopup.musicPrice = item.musicPrice
-      permissionPopup.show = true
-      checked = false
+  // 购买过，不需要校验
+  if (item.buyed) {
+    checked = true
+  } else {
+    // 学生端或者老师端需要校验点播和会员曲目；通过专辑进入的，不需要校验点播和会员曲目，默认都可以使用
+    if ((state.systemType === "student" || state.systemType === "teacher") && !state.tenantAlbumId) {
+      // 如果是点播的曲子，并且还没有购买，需要弹窗提醒
+      if (item.paymentType === "CHARGE" && !item.buyed) {
+        permissionPopup.active = "demand"
+        permissionPopup.musicId = item.id
+        permissionPopup.musicPrice = item.musicPrice
+        permissionPopup.show = true
+        checked = false
+      }
+      /**
+       * 如果是vip的曲子，当前用户不是会员时，需要弹窗提醒
+       * 如果是vip的曲子，当前用户不是svip会员，点击跟练或评测时，需要弹窗提醒（会员曲子，跟练和评测需要开通svip会员才能使用）
+       */
+      if ( (state.vipType === "NOT_VIP" && item.paymentType !== "FREE") || (item.paymentType !== "FREE" && !state.vipType.includes("SVIP") && (type === "follow" || type === "evaluating")) ) {
+        permissionPopup.active = item.paymentType.includes('CHARGE') ? "memberAndDemand" : "member"
+        permissionPopup.musicId = item.id
+        permissionPopup.musicPrice = item.musicPrice
+        permissionPopup.show = true
+        checked = false
+      }
     }
   }
   return checked;
@@ -838,7 +843,7 @@ export default defineComponent({
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}
-              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled, state.playType === "play" ? styles.playSource : styles.songSource]}
+              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled, state.playType === "play" ? styles.playSource : styles.songSource, state.playSource === "background" ? styles.backgroundSongAct : styles.musicSongAct]}
               onClick={() => {
                 const oldPlayType = state.playType;
                 const oldPlaySource = state.playSource;

src/page-instrument/header-top/settting/index.module.less

@@ -71,7 +71,7 @@
                 .titbtn {
                     width: 78px;
                     height: 25px;
-                    background: linear-gradient( 135deg, #04C8BB 0%, #60E0C5 100%);
+                    background: linear-gradient( 132deg, #20C9A9 0%, #6DE0AC 100%);
                     border-radius: 13px;
                     font-weight: 600;
                     font-size: 14px;
@@ -163,7 +163,6 @@
                         text-align: center;
                         line-height: 25px;
                         margin-right: 8px;
-                        margin-bottom: 8px;
                         cursor: pointer;
                         background: #F2F2F2;
                         border-radius: 4px;
@@ -181,14 +180,14 @@
                 }
                 .qhBox {
                     >div {
-                        width: 56px;
+                        width: 60px;
+                    }
+                }                
+                .speBox {
+                    >div {
+                        margin-bottom: 8px;
                     }
                 }                
-                // .speBox {
-                //     >div {
-                //         width: 54px;
-                //     }
-                // }                
                 .frequency{
                     display: flex;
                     align-items: center;
@@ -202,7 +201,7 @@
                         line-height: 29px;
                         font-weight: 600;
                         font-size: 15px;
-                        color: #00B2A7;
+                        color: #14B698;
                     }
                     .btn{
                         width: 24px;
@@ -225,7 +224,7 @@
                             .van-field__control{
                                 font-weight: 600;
                                 font-size: 15px;
-                                color: #00B2A7;
+                                color: #14B698;
                                 caret-color: #36CFB3;
                             }
                         }

src/page-instrument/header-top/settting/index.tsx

@@ -272,7 +272,7 @@ export default defineComponent({
                             state.enableNotation || state.specialShowNotation ? 
                             <div class={styles.cellBox}>
                                 <div class={styles.tit}>转谱</div>
-                                <div class={styles.radioBox}>
+                                <div class={[styles.radioBox, styles.qhBox]}>
                                     {
                                         notationList.value.map(item=>{
                                             return <div class={ state.musicRenderType===item.value && styles.active } onClick={ async ()=>{ 

src/page-instrument/header-top/speed/index.module.less

@@ -1,7 +1,7 @@
 .speedContainer{
     width: 334px;
     &.isHideBeat .content{
-        height: 206px;
+        max-height: 206px;
         .speedSel{
             padding-bottom: 0px !important;
         }

src/page-instrument/view-detail/index.module.less

@@ -382,6 +382,9 @@
             }
         }
     }
+    .lottie{
+        width: 120px;
+    }
     .loadingTip {
         font-size: 14px;
         color: #fff;

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

@@ -1,6 +1,7 @@
 import { defineComponent} from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
+import animGif from "./images/refresh_anim.gif";
 
 export default defineComponent({
    name: "loading",
@@ -14,12 +15,16 @@ export default defineComponent({
    setup(props) {
       return () => (
          <div class={[styles.loadingPop, state.isPreView && styles.isPreView]} style={{ display: state.isLoading ? "flex" : "none" }}>
-            <div class={styles.loadingCssBox}>
-                <div class={styles.loadingCssItem}></div>
-                <div class={styles.loadingCssItem}></div>
-                <div class={styles.loadingCssItem}></div>
-                <div class={styles.loadingCssItem}></div>
+            {
+               props.tipText === '音频资源加载中，请稍后…' ? 
+               <img class={styles.lottie} src={animGif} /> :
+               <div class={styles.loadingCssBox}>
+                  <div class={styles.loadingCssItem}></div>
+                  <div class={styles.loadingCssItem}></div>
+                  <div class={styles.loadingCssItem}></div>
+                  <div class={styles.loadingCssItem}></div>
             </div>
+            }
             <div class={styles.loadingTip}>{props.tipText}</div>
          </div>
       )

src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -148,7 +148,7 @@
     }
 
     .active {
-        background: #CDF3F1;
+        background: #D3F3ED;
         border-radius: 8px;
 
         .mScore,

src/state.ts

@@ -1248,9 +1248,11 @@ export const resetSettings = () => {
   // 切换模式，清除选段
   metronomeData.cursorMode = state.modeType === 'follow' ? 1 : 2;
   state.noSavePopShow = true;
+  metronomeData.activeIndex = null;
   clearSelection();
   skipNotePlay(0, true);
   resetBaseRate();
+  resetCursorPosition();
   // midi 重置播放进度
   if (state.isAppPlay) {
     audioData.progress = 0;
@@ -2358,6 +2360,7 @@ export const refreshMusicSvg = () => {
   clearSelection();
   resetBaseRate();
   state.activeMeasureIndex = -1;
+  metronomeData.activeIndex = null;
   if (query.workRecord || query.evaluatingRecord) {
     state.workSectionNeedReset = true;
   }
@@ -2415,6 +2418,7 @@ export const resetCursorPosition = () => {
         currentActive?.classList.remove("dotActive");
       })
     }
+    // metronomeData?.metro?.findMetronomePosition(0);
   })
 }
 

src/view/abnormal-pop/index.tsx

@@ -3,6 +3,7 @@ import styles from "./index.module.less";
 import state from "/src/state";
 import { popImgs } from "/src/view/evaluating";
 import { evaluatingData } from "/src/view/evaluating";
+import animBg from "/src/page-instrument/view-detail/images/refresh_anim.gif";
 
 export default defineComponent({
   name: "abnormal-pop",
@@ -30,13 +31,13 @@ export default defineComponent({
           // 	<p>正在连接服务器，请稍后…</p>
           // </div>
           <div class={styles.loadingPop}>
-            <div class={styles.loadingCssBox}>
+            {/* <div class={styles.loadingCssBox}>
                 <div class={styles.loadingCssItem}></div>
                 <div class={styles.loadingCssItem}></div>
                 <div class={styles.loadingCssItem}></div>
                 <div class={styles.loadingCssItem}></div>
-            </div>            
-            {/* <Vue3Lottie animationData={animBg} class={styles.loadingIcon}></Vue3Lottie> */}
+            </div>             */}
+             <img class={styles.loadingIcon} src={animBg} />
             <div class={styles.loadingTip}>正在连接中，请稍等…</div>
             <div class={styles.loadingClose} onClick={() => emit("close")}>
               取消连接

src/view/audio-list/index.tsx

@@ -574,14 +574,14 @@ export default defineComponent({
 		return () => (
 			<>
 				<div class={styles.audioList}>
-					{state.playMode === "MIDI" && state.speed != 0 && (
+					{/* {state.playMode === "MIDI" && state.speed != 0 && (
 						<iframe
 							style={{ display: "none" }}
 							ref={midiRef}
 							src={`/midi/index.html`}
 							onLoad={handleLoad}
 						/>
-					)}
+					)} */}
 				</div>
 			</>
 		);

src/view/evaluating/evaluatResult.ts

@@ -54,6 +54,7 @@ const icons = [
 		mome: "敢于尝试",
 		clxImg: clx1,
 		clxtip: "你的演奏不太好，音准和完整性还需加强，再练一练吧～",
+		djytip: "你的演奏不太好，节奏还需加强，再练一练吧～",
 		clxmome: "敢于尝试"
 	},
 	{
@@ -62,6 +63,7 @@ const icons = [
 		mome: "还要加油哦～",
 		clxImg: clx2,
 		clxtip: "你的演奏还不熟练，音准和完整性还需加强，加紧训练才能有好成绩哦～",
+		djytip: "你的演奏还不熟练，节奏把握不太理想，加紧训练才能有好成绩哦～",
 		clxmome: "还要加油哦～"
 	},
 	{
@@ -70,6 +72,7 @@ const icons = [
 		mome: "突破自我",
 		clxImg: clx3,
 		clxtip: "你的演奏还不流畅，音准和节奏还需加强，科学的练习才能更完美哦～",
+		djytip: "你的演奏还不流畅，部分节奏需要勤加练习，科学的练习才能更完美哦～",
 		clxmome: "突破自我"
 	},
 	{
@@ -78,6 +81,7 @@ const icons = [
 		mome: "崭露头角",
 		clxImg: clx4,
 		clxtip: "你的演奏还不错，继续加油吧，加强音准，离完美就差一步啦～",
+		djytip: "你的演奏还不错，节奏还有些小瑕疵，离完美就差一步啦～",
 		clxmome: "崭露头角"
 	},
 	{
@@ -86,6 +90,7 @@ const icons = [
 		mome: "你很棒",
 		clxImg: clx5,
 		clxtip: "你的演奏非常不错，音准的把握和节奏稍有瑕疵，完整性把握的很好~",
+		djytip: "你的演奏非常不错，距离完成仅有一步之遥~",
 		clxmome: "你很棒"
 	},
 ];

src/view/follow-practice/index.tsx

@@ -155,6 +155,13 @@ export const handleFollowEnd = () => {
 	openToggleRecord(false);
 	followData.index = 0;
 	console.log("结束");
+	// 如果开启了循环播放，需要再次跟练
+	if (state.setting.repeatAutoPlay) {
+		setTimeout(() => {
+			followData.practiceStart = true;
+			handleFollowStart();
+		}, 0);
+	}
 };
 
 // 清除当前音符右侧的音符的颜色状态

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -82,9 +82,9 @@
           margin-right: 10px;
           padding: 0 8px;
           &.active{
-            background: #F2FFFC;
-            border-color: #01C1B5;
-            color: #00B2A7;
+            background: #EDFFFC;
+            border-color: #2DC7AA;
+            color: #14B698;
           }
         }
       }

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -76,7 +76,7 @@ export default defineComponent({
         <div class={styles.pickerCon}>
           <div class={styles.pickerBox}>
             {
-              state.isScoreRender &&
+              state.isScoreRender && state.modeType === "practise" && 
                 <>
                   {/* <div class={styles.titCon}>
                     <div class={styles.tit}>选择总谱</div>

src/view/selection/index.tsx

@@ -301,7 +301,7 @@ export default defineComponent({
 							metronomeData.cursorMode === 2 &&
 							item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
 							state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
-							//console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
+							// console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
 						return (
 							<>
 								{item.staveBox && (