Merge branch '2023-8-23_上线' into online

package-lock.json

@@ -25,7 +25,7 @@
         "vant": "^4.1.2",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6",
-        "vue3-lottie": "^2.5.0",
+        "vue3-lottie": "^2.7.4",
         "ws": "^8.13.0"
       },
       "devDependencies": {
@@ -3995,9 +3995,9 @@
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ=="
     },
     "node_modules/lottie-web": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
-      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
     },
     "node_modules/lower-case": {
       "version": "2.0.2",
@@ -5244,12 +5244,12 @@
       }
     },
     "node_modules/vue3-lottie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.5.0.tgz",
-      "integrity": "sha512-JwlTzykr4ofPnSXsTAPt571RDrtQNy66H8w/zYBVHNgrCRG4RINI30c/oJx3Dj+XpxuktpKzgfI08tv1FjYkAQ==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.7.4.tgz",
+      "integrity": "sha512-EJATgpaWXyqdKxaSY2Q3lK4tTkxTSssKTqBmsIEG7Yj8jT75RGF6zhsoBc/kT10X41vt2HEpjPYmEQfKt6JfOw==",
       "dependencies": {
         "lodash-es": "^4.17.21",
-        "lottie-web": "^5.8.1"
+        "lottie-web": "5.12.2"
       },
       "engines": {
         "node": ">=12"
@@ -8137,9 +8137,9 @@
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ=="
     },
     "lottie-web": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.11.0.tgz",
-      "integrity": "sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw=="
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
     },
     "lower-case": {
       "version": "2.0.2",
@@ -9048,12 +9048,12 @@
       }
     },
     "vue3-lottie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.5.0.tgz",
-      "integrity": "sha512-JwlTzykr4ofPnSXsTAPt571RDrtQNy66H8w/zYBVHNgrCRG4RINI30c/oJx3Dj+XpxuktpKzgfI08tv1FjYkAQ==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.7.4.tgz",
+      "integrity": "sha512-EJATgpaWXyqdKxaSY2Q3lK4tTkxTSssKTqBmsIEG7Yj8jT75RGF6zhsoBc/kT10X41vt2HEpjPYmEQfKt6JfOw==",
       "requires": {
         "lodash-es": "^4.17.21",
-        "lottie-web": "^5.8.1"
+        "lottie-web": "5.12.2"
       }
     },
     "webidl-conversions": {

package.json

@@ -25,7 +25,7 @@
     "vant": "^4.1.2",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "vue3-lottie": "^2.5.0",
+    "vue3-lottie": "^2.7.4",
     "ws": "^8.13.0"
   },
   "devDependencies": {

src/helpers/communication.ts

@@ -153,7 +153,11 @@ export const api_cloudFollowTime = (onFollowTime: CallBack, listen = true) => {
 		removeListenerMessage("cloudFollowTime", onFollowTime);
 	}
 };
-
+export const api_goback = () => {
+	postMessage({
+		api: "goBack",
+	});
+}
 /** 结束webview */
 export const api_back = () => {
 	postMessage({

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

@@ -98,8 +98,7 @@ export default defineComponent({
 					{data.showStudent && data.showTip ? <StudentBottom></StudentBottom> : null}
 					{data.showVip && <TheVip />}
 				</div>
-				{headTopData.modeType === "show" &&
-					state.modeType == "practise" &&
+				{	state.modeType == "practise" &&
 					state.fingeringInfo?.name &&
 					state.setting.displayFingering && <GuideIndex list={["detail"]} />}
 			</>

src/page-instrument/component/the-modal-tip/index.module.less

@@ -1,15 +1,16 @@
 :global {
     .modalTip {
         overflow: initial;
+        width: 258px;
 
         .van-dialog__header {
             position: relative;
-            height: 75px;
+            height: 63px;
             display: flex;
             align-items: flex-end;
             background: url('./images/moveTopBg.png') no-repeat;
             background-size: 100%;
-            font-size: 18px;
+            font-size: 14px;
             font-weight: 600;
             color: #131415;
             justify-content: center;
@@ -20,19 +21,19 @@
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: -38px;
-                width: 120px;
-                height: 72px;
+                top: -30px;
+                width: 100px;
+                height: 60px;
                 background: url('./images/ding.png') no-repeat;
                 background-size: 100%;
             }
         }
 
         .van-dialog__message--has-title {
-            font-size: 14px;
+            font-size: 12px;
             color: #777777;
             font-weight: 400;
-            padding: 19px 20px 26px 20px;
+            padding: 16px 16px 22px 16px;
         }
 
         .van-dialog__footer {
@@ -49,15 +50,15 @@
 
         .van-dialog__confirm,
         .van-dialog__cancel {
-            width: 193px;
-            height: 35px;
+            width: 160px;
+            height: 29px;
             flex: initial;
 
         }
 
         .van-dialog__confirm {
             background: linear-gradient(305deg, #40C8FF 0%, #3192FF 100%);
-            font-size: 14px;
+            font-size: 12px;
             font-weight: 400;
             color: #FFFFFF;
             border-radius: 18px;

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

@@ -49,6 +49,21 @@
             overflow-x: hidden;
             overflow-y: auto;
         }
+        .van-tab--active::after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: var(--van-tabs-bottom-bar-width);
+            height: var(--van-tabs-bottom-bar-height);
+            background: var(--van-tabs-bottom-bar-color);
+            border-radius: var(--van-tabs-bottom-bar-height);
+        }
+        .van-tabs__line{
+            transition-duration: 0s !important;
+            display: none;
+        }
     }
 }
 

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

@@ -4,14 +4,20 @@ import icon_btn from "./icon_btn.png";
 import icon_close from "./icon_close.png";
 import styles from "./index.module.less";
 import { Popup } from "vant";
-import { api_back } from "/src/helpers/communication";
+import { api_back, api_goback } from "/src/helpers/communication";
 import { postMessage } from "/src/utils/native-message";
+import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
 	name: "TheVip",
 	setup() {
 		const close = () => {
-			api_back();
+			const query = getQuery();
+			if (query.modelType){
+				api_goback();
+			} else {
+				api_back();
+			}
 		};
     
 		return () => (

src/page-instrument/follow-model/index.module.less

@@ -33,7 +33,8 @@
     bottom: 16px;
   }
   &.top{
-    bottom: 1.8rem;
+    left: 100px;
+    bottom: 0.85333rem;
   }
 }
 

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

@@ -45,7 +45,7 @@ export const headTopData = reactive({
 				showConfirmDialog({
 					className: 'modalTip',
 					title: "温馨提示",
-					message: "该功能暂未开放，敬请期待！",
+					message: "该功能暂未开放，敬请期待!",
 					showCancelButton: false,
 				});
 				return;

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

@@ -409,6 +409,18 @@
     padding: 0 10px 6px 10px;
 }
 
+.loading{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+}
+
 
 .imgs {
     position: relative;
@@ -430,7 +442,7 @@
 .tizhi {
     position: absolute;
     top: 20%;
-    right: 20%;
+    left: 64%;
     width: 30px;
     height: 30px;
     text-align: center;

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

@@ -22,12 +22,14 @@ import { Howl } from "howler";
 import { storeData } from "/src/store";
 import { api_back } from "/src/helpers/communication";
 import Hammer from "hammerjs";
-import { Button, Icon, Popup, Space } from "vant";
+import { Button, Icon, Loading, Popup, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
 import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
 import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
+import { Vue3Lottie } from "vue3-lottie";
+import refesh_anim from "./refresh_anim.json";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -71,6 +73,7 @@ export default defineComponent({
 			tips: [] as IFIGNER_INSTRUMENT_Note[],
 
 			tnoteShow: false,
+			loadingSoundFonts: true,
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -100,23 +103,34 @@ export default defineComponent({
 		};
 		const getFingeringData = async () => {
 			const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
-			// console.log("🚀 ~ subject:", subject);
+			console.log("🚀 ~ subject:", subject);
 			fingerData.subject = await getFingeringConfig(subject);
 		};
-		const getSounFonts = () => {
+		const createAudio = (url: string) => {
+			return new Promise((resolve) => {
+				const noteAudio = new Howl({
+					src: url,
+					loop: true,
+					onload: () => {
+						resolve(noteAudio);
+					},
+				});
+			});
+		};
+		const getSounFonts = async () => {
 			const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
+			data.loadingSoundFonts = true;
 			for (let i = 0; i < data.notes.length; i++) {
 				const note = data.notes[i];
-				// console.log("🚀 ~ note:", i)
+				// console.log("🚀 ~ note:", i);
 				let url = `${pathname}soundfonts/${data.subject}/`;
 				url += note.realName;
 				url += ".mp3";
-				const noteAudio = new Howl({
-					src: url,
-					loop: true,
-				});
-				data.soundFonts[note.realKey] = noteAudio;
+				data.soundFonts[note.realKey] = await createAudio(url);
 			}
+			setTimeout(() => {
+				data.loadingSoundFonts = false;
+			}, 300);
 			// console.log("🚀 ~ data.soundFonts:", data.soundFonts);
 		};
 		onBeforeMount(() => {
@@ -336,16 +350,15 @@ export default defineComponent({
 												typeof key === "string" ? key.replace("active-", "") : String(key);
 											return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
 										})}
-									</div>
-
-									<div
-										id="finger-note-2"
-										class={[styles.tizhi, canTizhi && styles.canDisplay]}
-										onClick={() =>
-											(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
-										}
-									>
-										替指
+										<div
+											id="finger-note-2"
+											class={[styles.tizhi, canTizhi && styles.canDisplay]}
+											onClick={() =>
+												(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
+											}
+										>
+											替指
+										</div>
 									</div>
 								</div>
 							</div>
@@ -411,6 +424,14 @@ export default defineComponent({
 								))}
 							</div>
 						</div>
+						{/* {data.loadingSoundFonts && (
+							<div class={styles.loading}>
+								<Vue3Lottie
+									style={{ width: "100px", height: "100px" }}
+									animationData={refesh_anim}
+								></Vue3Lottie>
+							</div>
+						)} */}
 					</div>
 					{!!data.tones.length && (
 						<>

src/view/fingering/fingering-config.ts

@@ -21,6 +21,7 @@ export type IFingering = {
 	code?: string;
 	/** 是否有替指 */
 	hasTizhi?: boolean;
+	transform?: string;
 };
 
 type ITypeContent = {
@@ -217,6 +218,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				orientation: 0,
 				code: '排箫',
 				hasTizhi: false,
+				transform: 'scale(1.9) translateY(22px)',
 			};
 		case "ocarina": // 陶笛
 			return {

src/view/fingering/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
 						<div onClick={() => doubeClick()} class={[styles.fingeringContainer]}>
 							<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>
 
-							<div class={styles.imgs}>
+							<div class={styles.imgs} style={{transform: state.fingeringInfo.transform}}>
 								<img src={fingerData.subject?.json?.full} />
 								{rs.map((key: number | string, index: number) => {
 									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);