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

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, closeToast, showLoadingToast, showToast } from "vant";
import state from "/src/state";
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";
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",
	emits: ["close"],
	setup(props, { emit }) {
		const helperData = reactive({
			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);
		});
		return () => (
			<div class={styles["header-settting"]}>
				<div class={styles.closeBtn} onClick={() => emit("close")}>
					<img src={iconClose} />
				</div>
				<div class={styles.content}>
					<Tabs border animated swipeable>
						<Tab title="全局设置">
							<NoticeBar class={styles.noticebar} left-icon={iconInfo} text="全局设置会更改所有乐谱练习及评测" />
							<Cell title="护眼模式" center>
								{{
									extra: () => <Switch v-model={state.setting.eyeProtection}></Switch>,
								}}
							</Cell>
							<div class={styles.btnsbar}>
								<div class={styles.btn} onClick={downPng}>
									<img src={iconDown} />
									下载曲谱
								</div>
								<div class={styles.btn} onClick={() => (helperData.show = true)}>
									<img src={iconTv} />
									投屏帮助
								</div>
								<div class={styles.btn} onClick={() => (helperData.recommendationShow = true)}>
									<img src={iconYijian} />
									意见反馈
								</div>
							</div>
						</Tab>
						<Tab title="练习设置">
							<Cell title="循环播放" center>
								{{
									extra: () => <Switch v-model={state.setting.repeatAutoPlay}></Switch>,
								}}
							</Cell>
							<Cell title="显示指法" center>
								{{
									extra: () => <Switch v-model={state.setting.displayFingering}></Switch>,
								}}
							</Cell>
						</Tab>
						<Tab title="评测">
							<Cell title="选择评测难度" center>
								{{
									extra: () => (
										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.evaluationDifficulty}>
											<Radio name="BEGINNER">入门</Radio>
											<Radio name="ADVANCED">进阶</Radio>
											<Radio name="PERFORMER">大师</Radio>
										</RadioGroup>
									),
								}}
							</Cell>

							<Cell title="校音提醒" center>
								{{
									extra: () => <Switch v-model={state.setting.soundEffect}></Switch>,
								}}
							</Cell>
							<Cell title="摄像头" center>
								{{
									extra: () => (
										<Switch
											v-model={state.setting.camera}
											onChange={(value) => {
												if (value) {
													api_openCamera();
												} else {
													api_closeCamera();
												}
											}}
										></Switch>
									),
								}}
							</Cell>
							<Cell style={{ display: state.setting.camera ? "" : "none" }} title="透明度" class={styles.sliderWrap} center>
								{{
									extra: () => (
										<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>
											{{
												button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
											}}
										</Slider>
									),
								}}
							</Cell>
							<Cell title="保存到相册" center>
								{{
									extra: () => <Switch v-model={state.setting.saveToAlbum}></Switch>,
								}}
							</Cell>
							<Cell title="开启伴奏" center>
								{{
									extra: () => <Switch v-model={state.setting.enableAccompaniment}></Switch>,
								}}
							</Cell>
							<Cell title="标准音高" center>
								{{
									extra: () => (
										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.frequency}>
											<Radio name={440}>440Hz</Radio>
											<Radio name={442}>442Hz</Radio>
										</RadioGroup>
									),
								}}
							</Cell>

							<Field class={styles.reactionTime} label="反应时间(毫秒)" type="digit" v-model:modelValue={state.setting.reactionTimeMs} />
						</Tab>
					</Tabs>
				</div>
				<Popup
					class={["popup-custom", styles.screen]}
					v-model:show={helperData.show}
					onClose={() => {
						helperData.show = false;
					}}
					position="right"
					teleport="body"
				>
					<ScreenModel
						onClose={(open: Boolean) => {
							helperData.show = false;
						}}
					/>
				</Popup>
				<Popup v-model:show={helperData.recommendationShow} class="popup-custom van-scale" transition="van-scale" teleport="body">
					<Recommendation
						onClose={() => {
							helperData.recommendationShow = false;
						}}
					/>
				</Popup>
			</div>
		);
	},
});