music-score/src/page-instrument/custom-plugins/guide-page/teacher-bootom.tsx

import { Button, Popup } from "vant";
import {} from "vant";
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import { getImage } from "./images";
import { getQuery } from "/src/utils/queryString";

export default defineComponent({
	name: "aiTeacher-guide",
	emits: ["close"],
	setup(props, { emit }) {
		const data = reactive({
			box: {},
			show: false,
			steps: [
				{
					ele: "",
					eleRect: {} as DOMRect,
					img: getImage("aiTeacher1.png"),
					handStyle: {
						top: "0.91rem",
					},
					imgStyle: {
						top: "-3.01rem",
						width: "6.48rem",
						height: "3.01rem",
						left: "4.67rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "6rem",
					},
				},
				{
					ele: "",
					img: getImage("aiTeacher2.png"),
					handStyle: {
						top: "-1.39rem",
						left: "0.15rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-3.01rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "1.3rem",
					},
				},
				{
					ele: "",
					img: getImage("aiTeacher3.png"),
					handStyle: {
						top: "-1.39rem",
						left: "0.17rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-3.01rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "1.3rem",
					},
				},
				{
					ele: "",
					img: getImage("aiTeacher4.png"),
					handStyle: {
						top: "-1.39rem",
						left: "1.4rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-3.01rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "0.8rem",
						"justify-content": "center",
						padding: 0,
					},
				},
			],
			step: 0,
		});

		const tipShow = ref(false);
		const guideInfo = localStorage.getItem("guideInfo");
		const query: any = getQuery();
		if ((guideInfo && JSON.parse(guideInfo).teacherBottom) || !query.showGuide) {
			tipShow.value = false;
		} else {
			tipShow.value = true;
		}
		const getStepELe = () => {
			console.log(`modeType${data.step}`);
			const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
			if (ele) {
				const eleRect = ele.getBoundingClientRect();
				data.box = {
					left: eleRect.x + "px",
					top: eleRect.y + "px",
					width: eleRect.width + "px",
					height: eleRect.height + "px",
				};
			}
		};
		onMounted(() => {
			getStepELe();
		});
		const handleNext = () => {
			if (data.step >= 3) {
				endGuide();
				return;
			}
			data.step = data.step + 1;
			getStepELe();
		};

		const endGuide = () => {
			let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
			if (!guideInfo) {
				guideInfo = { teacherBottom: true };
			} else {
				guideInfo.teacherBottom = true;
			}
			localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
			tipShow.value = false;
			//  localStorage.setItem('endC')
		};
		return () => (
			<Popup
				teleport="body"
				overlay={false}
				closeOnClickOverlay={false}
				class={["popup-custom", styles.guidePopup]}
				v-model:show={tipShow.value}
			>
				<div class={styles.content} onClick={() => handleNext()}>
					<div
						class={styles.backBtn}
						onClick={(e: Event) => {
							e.stopPropagation();
							endGuide();
						}}
					>
						跳过
					</div>
					<div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
						{data.steps.map((item: any, index) => (
							<div
								onClick={(e: Event) => e.stopPropagation()}
								class={styles.item}
								style={{
									display: index === data.step ? "" : "none",
									left: `${item.eleRect?.left}px`,
									top: `${item.eleRect?.top}px`,
								}}
							>
								<img class={styles.img} style={item.imgStyle} src={item.img} />
								<div class={styles.btns} style={item.btnsStyle}>
									{data.step + 1 == data.steps.length ? (
										<>
											<div class={[styles.endBtn]} onClick={() => endGuide()}>
												完成
											</div>
											<div
												class={[styles.nextBtn]}
												style={{ "border-color": "#fff" }}
												onClick={() => {
													data.step = 0;
													getStepELe();
												}}
											>
												再看一遍
											</div>
										</>
									) : (
										<Button class={styles.teacherBtn} round type="primary" onClick={() => handleNext()}>
											下一步 ({data.step + 1}/{data.steps.length})
										</Button>
									)}
								</div>
							</div>
						))}
					</div>
				</div>
			</Popup>
		);
	},
});