提交一下

1

src/page-instrument/router.ts

@@ -22,6 +22,10 @@ const routes: RouteRecordRaw[] = [
 			title: "404 Not Fund",
 		},
 	},
+	{
+		path: "/preview",
+		component: () => import("./view-preview/index"),
+	},
 ];
 
 const router = createRouter({

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

@@ -0,0 +1,32 @@
+.skeleton {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 20px 30px;
+    background-color: #fff;
+    z-index: 1000;
+    --van-skeleton-paragraph-height: .8rem;
+}
+
+.detail {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    overflow-y: auto;
+    --header-height: 62px;
+    background: var(--container-background);
+
+    .container {
+        margin: 0 10px;
+        border-radius: 10px;
+    }
+    :global{
+        #musicAndSelection{
+            overflow: initial !important;
+            height: initial !important;
+            max-height: initial !important;
+        }
+    }
+}

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

@@ -0,0 +1,119 @@
+import { defineComponent, onMounted, reactive } from "vue";
+import state, { EnumMusicRenderType } from "/src/state";
+import MusicScore from "../../view/music-score";
+import styles from "./index.module.less";
+import { getQuery } from "/src/utils/queryString";
+import { closeToast, showLoadingToast } from "vant";
+import { svg2canvas } from "/src/utils/svg2canvas";
+import { sysMusicScoreAccompanimentQueryPage } from "../api";
+
+export default defineComponent({
+	name: "music-list",
+	setup() {
+		const query: any = getQuery();
+
+		const detailData = reactive({
+			isLoading: true,
+			isProductLoading: false,
+			product: [
+				{
+					state: false,
+					name: "五线谱",
+					type: EnumMusicRenderType.staff,
+					base64: "" as any,
+				},
+				{
+					state: false,
+					name: "首调",
+					type: EnumMusicRenderType.firstTone,
+					base64: "" as any,
+				},
+				{
+					state: false,
+					name: "固定调",
+					type: EnumMusicRenderType.fixedTone,
+					base64: "" as any,
+				},
+			],
+		});
+
+		onMounted(() => {
+			(window as any).appName = "colexiu";
+
+			const id = query.id || "43554";
+			// Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
+			// 	console.log(values[0].data.xmlFileUrl)
+			// 	state.xmlUrl = values[0].data.xmlFileUrl
+			// 	detailData.isLoading = false;
+			// 	// getMusicInfo(values[0]);
+			// });
+			// 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/咏鹅.xml'
+
+			state.xmlUrl = query.xmlUrl
+			detailData.isLoading = false;
+			// state.xmlUrl = query.xmlUrl;
+			// console.log(state.xmlUrl, 'state.xmlUrl')
+			// //课堂乐器,默认简谱
+			// state.musicRenderType = EnumMusicRenderType.staff;
+
+			// showLoadingToast({ message: "生成中", duration: 0 });
+		});
+
+		/** 渲染完成 */
+		const handleRendered = async () => {
+			// const item = detailData.product.find((item) => item.type === state.musicRenderType);
+			// if (!item) return;
+			// item.state = true;
+			// // item.base64 = await downPng();
+			// const nextItem = detailData.product.find((item: any) => !item.state);
+			// if (nextItem) {
+			// 	state.musicRenderType = nextItem.type;
+			// 	detailData.isLoading = true;
+			// 	setTimeout(() => (detailData.isLoading = false), 500);
+			// 	return;
+			// }
+			// closeToast();
+			// console.log(detailData.product);
+			// window.parent?.postMessage(
+			// 	{
+			// 		api: "webApi_renderSvg",
+			// 		product: JSON.stringify(detailData.product),
+			// 	},
+			// 	"*"
+			// );
+			console.log('渲染完成')
+		};
+		// const downPng = () => {
+		// 	return new Promise((resolve) => {
+		// 		setTimeout(async () => {
+		// 			const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
+		// 			if (!svg) {
+		// 				resolve("");
+		// 				return;
+		// 			}
+		// 			const cw = svg.width.animVal.value;
+		// 			const ch = svg.height.animVal.value;
+		// 			const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+		// 			rect.setAttribute("x", "0");
+		// 			rect.setAttribute("y", "0");
+		// 			rect.setAttribute("width", `${cw * 2}`);
+		// 			rect.setAttribute("height", `${ch * 2}`);
+		// 			rect.setAttribute("fill", "#fff");
+		// 			svg.prepend(rect);
+		// 			const _canvas = svg2canvas(svg.outerHTML);
+		// 			const base64 = _canvas.toDataURL("image/png", 1);
+		// 			resolve(base64);
+		// 		}, 500);
+		// 	});
+		// };
+		// onRendered={handleRendered}
+		return () => (
+			<div class={styles.detail}>
+				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
+					{/* 曲谱渲染 */}
+					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
+				</div>
+			</div>
+		);
+	},
+});