设置-全局设置：投屏帮助、意见反馈点击无反应

public/share-orchestra-evaluating/index.html

@@ -59,7 +59,7 @@
     <div class="line"></div>
     <div class="app">
       <div class="app-info">
-        <div class="app-title">酷乐秀</div>
+        <div class="app-title">管乐团云练习</div>
         <div class="app-desc">器乐学习的<span>不二选择</span></div>
         <div class="app-subtitle">小酷Ai见证你的成长！</div>
       </div>

src/page-orchestra/custom-plugins/helper-model/icons/close2.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-493.000000, -57.000000)" fill="#01C1B5" fill-rule="nonzero">
+            <g transform="translate(143.000000, 40.000000)">
+                <g transform="translate(350.000000, 17.000000)">
+                    <path d="M1.05548433,1.07092551 L0.973890205,1.16134969 C0.666012474,1.54828454 0.694001358,2.11481906 1.05785686,2.46909941 L6.537,7.949 L1.05548433,13.4315873 C0.672191496,13.8148801 0.672191496,14.4441272 1.05548433,14.8274201 L1.08636669,14.8583024 L1.17896103,14.9399506 C1.56501142,15.2393273 2.12839072,15.2121112 2.48219949,14.8583024 L7.964,9.376 L13.4470285,14.8583024 C13.8303213,15.2415953 14.4595684,15.2415953 14.8428613,14.8583024 L14.8737436,14.8274201 L14.9553918,14.7348257 C15.2547684,14.3487753 15.2275524,13.785396 14.8737436,13.4315873 L9.391,7.949 L14.8737436,2.46675831 C15.2570364,2.08346548 15.2570364,1.45421835 14.8737436,1.07092551 L14.8428613,1.04004316 L14.7502669,0.958394979 C14.3642165,0.659018325 13.8008372,0.686234384 13.4470285,1.04004316 L7.964,6.53 L2.48231995,1.0401637 C2.09890665,0.65675032 1.46965952,0.65675032 1.08636669,1.04004316 L1.05548433,1.07092551 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,19 @@
+.helperModel{
+    position: fixed;
+    right: 0;
+    top: 50%;
+    width: 26px;
+    height: 50px;
+    margin-top: -25px;
+    & > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        &:active{
+            opacity: .8;
+        }
+    }
+}
+.screen{
+    overflow: initial;
+}

src/page-orchestra/custom-plugins/helper-model/index.tsx

@@ -0,0 +1,48 @@
+import { defineComponent, reactive } from "vue";
+import styles from "./index.module.less";
+import iconRight from "./icons/icon-right.png";
+import { Popup } from "vant";
+import ScreenModel from "./screen-model";
+import Recommendation from "./recommendation";
+
+export default defineComponent({
+	name: "helper-model",
+	setup() {
+		const helperData = reactive({
+			show: false,
+			recommendationShow: false, // 建议
+		});
+		return () => (
+			<>
+				<div class={styles.helperModel} onClick={() => (helperData.show = true)}>
+					<img id="tips-step-0" src={iconRight} />
+				</div>
+				<Popup
+					class={["popup-custom", styles.screen]}
+					v-model:show={helperData.show}
+					onClose={() => {
+						helperData.show = false;
+					}}
+					position="right"
+				>
+					<ScreenModel
+						onClose={(open: Boolean) => {
+							if (open) {
+								helperData.recommendationShow = true;
+							} else {
+								helperData.show = false;
+							}
+						}}
+					/>
+				</Popup>
+				<Popup v-model:show={helperData.recommendationShow} class="popup-custom van-scale" transition="van-scale">
+					<Recommendation
+						onClose={() => {
+							helperData.recommendationShow = false;
+						}}
+					/>
+				</Popup>
+			</>
+		);
+	},
+});

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

@@ -0,0 +1,60 @@
+
+.content {
+    position: relative;
+    border-radius: 8px;
+    width: 300px;
+    // height: 90vh;
+    max-height: 370px;
+    background-color: #fff;
+    --van-tabs-line-height: 42px;
+    overflow: hidden;
+    :global {
+        .van-tabs__wrap{
+            border-bottom: 1Px solid #F0F0F0;
+        }
+        .van-tabs__content {
+            max-height: calc(90vh - var(--van-tabs-line-height));
+            overflow-y: auto;
+
+            &::-webkit-scrollbar {
+                width: 0;
+                display: none;
+            }
+        }
+        .van-field{
+            font-size: 12Px;
+            line-height: 16Px;
+        }
+    }
+}
+
+.tags {
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    flex-wrap: wrap;
+    padding: 0 var(--van-cell-horizontal-padding) var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
+    >span {
+        margin: 3px 0;
+        border-radius: 3PX;
+        display: block;
+        width: 30%;
+        font-size: 12PX;
+        padding: 6PX 0;
+        background-color: #F8F8F8;
+        color: #999999;
+        border: 1PX solid #F8F8F8;
+
+        &.active {
+            color: var(--van-primary-color);
+            border-color: var(--van-primary-color);
+            pointer-events: none;
+        }
+    }
+}
+.btn{
+    display: block;
+    height: 36px;
+    font-size: 13px;
+    margin: 0 auto;
+}

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

@@ -0,0 +1,72 @@
+import { defineComponent, reactive, ref } from "vue";
+import styles from "./index.module.less";
+import { 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",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const tags = ["识别不准", "无法评测", "不出评测结果", "曲谱不一致", "指法错误", "其他"];
+		const recommenData = reactive({
+			loading: false,
+			active: "识别不准",
+			message: "",
+		});
+
+		/** 提交意见反馈 */
+		const handleSubmit = async () => {
+			if (!recommenData.message) {
+				showToast({
+					message: "请先填写意见反馈",
+					position: "top",
+				});
+				return;
+			}
+			recommenData.loading = true;
+			try {
+				await sysSuggestionAdd({
+					content: recommenData.message + "#" + recommenData.active,
+					type: "SMART_PRACTICE",
+				});
+				showToast({
+					message: "意见反馈已提交",
+					position: "top",
+				});
+				emit("close");
+			} catch (error) {}
+			recommenData.loading = false;
+		};
+
+		return () => (
+			<div class={styles.content}>
+				<Tabs lineHeight={0} color="#1A1A1A">
+					<Tab title="意见反馈">
+						<Cell border={false} title="请选择问题类型" />
+						<div class={styles.tags}>
+							{tags.map((text) => (
+								<span class={[styles.tag, recommenData.active === text && styles.active]} onClick={() => (recommenData.active = text)}>
+									{text}
+								</span>
+							))}
+						</div>
+						<Field
+							v-model={recommenData.message}
+							rows="3"
+							autosize={{ maxHeight: 128 }}
+							border={false}
+							type="textarea"
+							maxlength={200}
+							placeholder="请详细描述您遇到的问题，以便我们尽快为您解决！"
+							show-word-limit
+						/>
+						<Cell>
+							<img class={styles.btn} src={iconSubmit} onClick={handleSubmit} />
+						</Cell>
+					</Tab>
+				</Tabs>
+			</div>
+		);
+	},
+});

src/page-orchestra/custom-plugins/helper-model/screen-model/index.module.less

@@ -0,0 +1,61 @@
+.container {
+    position: relative;
+    width: 40vw;
+    height: 100vh;
+    max-width: 295px;
+    background: #fff;
+    border-radius: 16px 0 0 16px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+    }
+
+    :global {
+        .van-tabs__content {
+            height: calc(100vh - var(--van-tabs-line-height));
+        }
+
+        .van-tab__panel {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+        }
+
+        iframe {
+            flex: 1;
+            width: 100%;
+            border: none;
+            margin: 0;
+
+            &::-webkit-scrollbar {
+                width: 0;
+                display: none;
+            }
+        }
+    }
+}
+
+.closeBtn {
+    position: absolute;
+    left: -30px;
+    top: 50%;
+    margin-top: -20px;
+    width: 30px;
+    height: 40px;
+}
+.jianyi{
+    flex-shrink: 0;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--van-primary-color);
+    border-top: 1px solid #F0F0F0;
+    font-size: 13px;
+    &:active{
+        opacity: .8;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { defineComponent, ref } from "vue";
+import styles from "./index.module.less";
+import iconBack from "../icons/icon-right-back.png";
+import { Icon, ImagePreview, Tab, Tabs } from "vant";
+
+export default defineComponent({
+	name: "screenModel",
+	emits: ["close"],
+	setup(props, { emit }) {
+		return () => (
+			<>
+				<img class={styles.closeBtn} src={iconBack} onClick={() => emit("close")} />
+				<div class={styles.container}>
+					<Tabs swipeable animated>
+						<Tab name="投屏" title="投屏">
+							<iframe src="https://online.colexiu.com/student/#/guide" />
+						</Tab>
+						<Tab name="帮助" title="帮助">
+							<iframe src="https://online.colexiu.com/student/#/helpCenter?platformType=ANALYSIS" />
+						</Tab>
+					</Tabs>
+				</div>
+			</>
+		);
+	},
+});

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

@@ -3,11 +3,10 @@ import styles from "./index.module.less";
 
 import Title from "./title";
 import icons from "./image/headerTop.json";
-import { Badge, Circle, Popover } from "vant";
+import { Badge, Circle, Popover, Popup } from "vant";
 import { metronomeData } from "../../helpers/metronome";
 import Speed from "./speed";
 import { handleStartEvaluat } from "/src/view/evaluating";
-import { Popup } from "@varlet/ui";
 import Settting from "./settting";
 import ModeTypeMode from "./mode-type-mode";
 import state, { handleChangeSection, handleResetPlay, handleRessetState, togglePlay } from "/src/state";
@@ -222,10 +221,10 @@ export default defineComponent({
 					</div>
 				</div>
 
-				<Popup teleport="body" defaultStyle={false} v-model:show={headerData.settingMode}>
+				<Popup v-model:show={headerData.settingMode} class="popup-custom van-scale" transition="van-scale" teleport="body">
 					<Settting onClose={() => (headerData.settingMode = false)} />
 				</Popup>
-				<Popup teleport="body" position="bottom" closeOnClickOverlay={false} overlay={false} defaultStyle={false} v-model:show={headData.modeMode}>
+				<Popup v-model:show={headData.modeMode}  teleport="body" class="popup-custom" position="bottom" closeOnClickOverlay={false} overlay={false}>
 					<ModeTypeMode onClose={(value) => handleChangeModeType(value)} />
 				</Popup>
 			</div>

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

@@ -1,18 +1,24 @@
-import { defineComponent, onBeforeMount, watch } from "vue";
+import { defineComponent, onBeforeMount, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import iconClose from "../image/close2.png";
-import { Cell, Field, NoticeBar, Radio, RadioGroup, Slider, Switch, Tab, Tabs } from "vant";
+import { Cell, Field, NoticeBar, Popup, Radio, RadioGroup, Slider, Switch, Tab, Tabs } from "vant";
 import state from "/src/state";
 import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
 import iconInfo from "../image/info.svg";
 // import iconDown from "../image/down.svg";
 import iconTv from "../image/tv.png";
 import iconYijian from "../image/yijian.png";
+import ScreenModel from "../../custom-plugins/helper-model/screen-model";
+import Recommendation from "../../custom-plugins/helper-model/recommendation";
 
 export default defineComponent({
 	name: "header-settting",
 	emits: ["close"],
 	setup(props, { emit }) {
+		const helperData = reactive({
+			show: false,
+			recommendationShow: false, // 建议
+		});
 		return () => (
 			<div class={styles["header-settting"]}>
 				<div class={styles.closeBtn} onClick={() => emit("close")}>
@@ -28,11 +34,11 @@ export default defineComponent({
 								}}
 							</Cell>
 							<div class={styles.btnsbar}>
-								<div class={styles.btn}>
+								<div class={styles.btn} onClick={() => (helperData.show = true)}>
 									<img src={iconTv} />
 									投屏帮助
 								</div>
-								<div class={styles.btn}>
+								<div class={styles.btn} onClick={() => (helperData.recommendationShow = true)}>
 									<img src={iconYijian} />
 									意见反馈
 								</div>
@@ -120,6 +126,29 @@ export default defineComponent({
 						</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 custom-close-btn van-scale" transition="van-scale" teleport="body" closeable>
+					<Recommendation
+						onClose={() => {
+							helperData.recommendationShow = false;
+						}}
+					/>
+				</Popup>
 			</div>
 		);
 	},

src/style.css

@@ -61,4 +61,14 @@
 .van-scale-enter-active,
 .van-scale-leave-active {
   transition: all 0.25s;
+}
+
+.custom-close-btn .van-popup__close-icon {
+  top: 0;
+  right: -30px;
+  background-color: #fff;
+  border-radius: 50%;
+  padding: 4px;
+  font-size: 16px;
+  color: var(--van-primary-color);
 }