下载曲谱

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "cloud-exercise",
+  "name": "music-score",
   "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "cloud-exercise",
+      "name": "music-score",
       "version": "0.0.0",
       "dependencies": {
         "@varlet/ui": "^2.9.5",
@@ -14,6 +14,7 @@
         "dayjs": "^1.11.7",
         "eventemitter3": "^5.0.0",
         "howler": "^2.2.3",
+        "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "query-string": "^8.1.0",
         "store": "^2.0.12",
@@ -2605,6 +2606,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2893,6 +2902,14 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -3253,6 +3270,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4145,6 +4174,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4363,6 +4400,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vant": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.2.tgz",
@@ -6319,6 +6364,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -6533,6 +6583,14 @@
         "browserslist": "^4.21.5"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -6808,6 +6866,15 @@
       "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -7467,6 +7534,14 @@
         "source-map-support": "~0.5.20"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -7615,6 +7690,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "vant": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "dayjs": "^1.11.7",
     "eventemitter3": "^5.0.0",
     "howler": "^2.2.3",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "query-string": "^8.1.0",
     "store": "^2.0.12",

src/helpers/communication.ts

@@ -159,3 +159,8 @@ export const api_setEventTracking = () =>{
 		}
 	})
 }
+/** 保存图片 */
+export const api_savePicture = (content: any): Promise<IPostMessage | undefined> =>{
+	if (!storeData.isApp) return Promise.resolve({} as any);
+	return promisefiyPostMessage({ api: "savePicture", content });
+}

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

@@ -76,8 +76,8 @@
     }
 }
 .btn{
-    width: 80%;
-    height: 30px;
+    display: block;
+    height: 36px;
     font-size: 13px;
     margin: 0 auto;
 }

src/page-colexiu/custom-plugins/helper-model/recommendation/index.tsx

@@ -3,6 +3,7 @@ import styles from "./index.module.less";
 import iconClose from "../icons/close2.svg";
 import { Button, Cell, Field, Tab, Tabs, showToast } from "vant";
 import { sysSuggestionAdd } from "/src/page-colexiu/api";
+import iconSubmit from "../icons/icon-submit.png";
 
 export default defineComponent({
 	name: "recommendation",
@@ -34,7 +35,7 @@ export default defineComponent({
 					message: "意见反馈已提交",
 					position: "top",
 				});
-                emit('close')
+				emit("close");
 			} catch (error) {}
 			recommenData.loading = false;
 		};
@@ -66,9 +67,7 @@ export default defineComponent({
 								show-word-limit
 							/>
 							<Cell>
-								<Button loading={recommenData.loading} class={styles.btn} block round type="primary" onClick={handleSubmit}>
-									提交反馈
-								</Button>
+								<img class={styles.btn} src={iconSubmit} onClick={handleSubmit} />
 							</Cell>
 						</Tab>
 					</Tabs>

src/page-colexiu/custom-plugins/helper-model/screen-model/index.tsx

@@ -13,10 +13,10 @@ export default defineComponent({
 				<div class={styles.container}>
 					<Tabs swipeable animated>
 						<Tab name="投屏" title="投屏">
-							<iframe src="https://mteaonline.dayaedu.com/#/guide" />
+							<iframe src="https://online.colexiu.com/student/#/guide" />
 						</Tab>
 						<Tab name="帮助" title="帮助">
-							<iframe src="https://mstuonline.dayaedu.com/#/KeepRepaire?mode=accompany" />
+							<iframe src="https://online.colexiu.com/student/#/helpCenter?platformType=ANALYSIS" />
 						</Tab>
 					</Tabs>
 				</div>

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

@@ -1,9 +1,9 @@
-import { defineComponent, reactive, watch } from "vue";
+import { defineComponent, nextTick, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import iconClose from "../image/close2.svg";
-import { Cell, Field, NoticeBar, Popup, Radio, RadioGroup, Slider, Switch, Tab, Tabs } from "vant";
+import { Cell, Field, NoticeBar, Popup, Radio, RadioGroup, Slider, Switch, Tab, Tabs, closeToast, showLoadingToast, showToast } from "vant";
 import state from "/src/state";
-import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
+import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/communication";
 import store from "store";
 import iconInfo from "../image/info.svg";
 import iconDown from "../image/down.svg";
@@ -11,6 +11,7 @@ import iconTv from "../image/tv.svg";
 import iconYijian from "../image/yijian.svg";
 import ScreenModel from "../../custom-plugins/helper-model/screen-model";
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
+import html2canvas from "html2canvas";
 
 export default defineComponent({
 	name: "header-settting",
@@ -20,6 +21,28 @@ export default defineComponent({
 			show: false,
 			recommendationShow: false, // 建议
 		});
+		const downPng = () => {
+			showLoadingToast({ message: "下载中", duration: 0 });
+			setTimeout(() => {
+				const _div = document.createElement("div");
+				const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
+				if (!svg) return;
+				_div.appendChild(svg);
+				document.body.appendChild(_div);
+				html2canvas(_div).then(async (_canvas) => {
+					document.body.removeChild(_div);
+					const res = await api_savePicture({
+						base64: _canvas.toDataURL(),
+					});
+					closeToast()
+					if (res?.content?.status === "success") {
+						showToast({ message: "保存成功", type: "success" });
+					} else {
+						showToast({ message: "保存失败", type: "fail" });
+					}
+				});
+			}, 50);
+		};
 		// 设置改变触发
 		watch(state.setting, () => {
 			store.set("musicscoresetting", state.setting);
@@ -39,7 +62,7 @@ export default defineComponent({
 								}}
 							</Cell>
 							<div class={styles.btnsbar}>
-								<div class={styles.btn}>
+								<div class={styles.btn} onClick={downPng}>
 									<img src={iconDown} />
 									下载曲谱
 								</div>