music-score/src/page-instrument/custom-plugins/guide-page/student-bottom.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";
import { getGuidance, setGuidance } from "./api";

export default defineComponent({
	name: "studentB-guide",
	emits: ["close"],
	setup(props, { emit }) {
		const data = reactive({
			box: {},
			show: false,
			steps: [
				{
					ele: "",
					eleRect: {} as DOMRect,
					img: getImage("studentB1.png"),
					handStyle: {
						top: "-1.39rem",
						left: "1.7rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-5.01rem",
						width: "6.48rem",
						height: "3.01rem",
						left: "1.2rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "3.2rem",
					},
				},
				{
					ele: "",
					img: getImage("studentB2.png"),
					handStyle: {
						top: "-1.39rem",
						left: "1.5rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-5.01rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						top: "-1.61rem",
						left: "2.3rem",
					},
				},
				{
					ele: "",
					img: getImage("studentB3.png"),
					handStyle: {
						top: "-1.39rem",
						left: "1.4rem",
						transform: "rotate(180deg)",
					},
					imgStyle: {
						top: "-4.5rem",
						width: "6.48rem",
						height: "3.01rem",
						left: "-4.3rem",
					},
					btnsStyle: {
						top: "-1.1rem",
						left: "-3.2rem",
					},
				},
			],
			step: 0,
		});
		const tipShow = ref(false);
		const query: any = getQuery();
		// const guideInfo = localStorage.getItem("guideInfo");
		// if ((guideInfo && JSON.parse(guideInfo).studentB) || !query.showGuide) {
		// 	tipShow.value = false;
		// } else {
		// 	tipShow.value = true;
		// }
		const guideInfo = ref({} as any)
		const getAllGuidance = async()=>{
		  try{
		  const res = await getGuidance({guideTag:'guideInfo'})
		  if(res.data){
			guideInfo.value = JSON.parse(res.data?.guideValue) || null
		  }else{
			guideInfo.value = {}
		  }
	  
	  
		  if (guideInfo.value && guideInfo.value.studentB || !query.showGuide) {
			tipShow.value = false;
		  } else {
			tipShow.value = true;
		  }
		  }catch(e){
		  console.log(e)
		  }
		  // const guideInfo = localStorage.getItem('teacher-guideInfo');
	  
		}
		getAllGuidance()
		const steps = [ "modeType-0", "modeType-1", "modeType-2"];
		const getStepELe = () => {
			console.log(steps[data.step]);
			const ele: HTMLElement = document.getElementById(steps[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 >= 2) {
				endGuide();
				return;
			}
			data.step = data.step + 1;
			getStepELe();
		};

		const endGuide = async() => {
			// let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
			if (!guideInfo.value) {
				guideInfo.value = { studentB: true };
			} else {
				guideInfo.value.studentB = true;
			}
			// localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
			try{
				const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(guideInfo.value)})
			  }catch(e){
				console.log(e)
			  }
			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()}>
					{data.step != data.steps.length - 1 && (
						<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} />
								<img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} />
								<div class={styles.btns} style={item.btnsStyle}>
									{data.step + 1 == data.steps.length ? (
										<>
											<div class={[styles.studentNext]} onClick={() => endGuide()}>
												完成
											</div>
											<div
												class={[styles.nextBtn]}
												style={{ "border-color": "#fff" }}
												onClick={() => {
													data.step = 0;
													getStepELe();
												}}
											>
												再看一遍
											</div>
										</>
									) : (
										<Button class={styles.studentNext} round type="primary" onClick={() => handleNext()}>
											下一步 ({data.step + 1}/{data.steps.length})
										</Button>
									)}
								</div>
							</div>
						))}
					</div>
				</div>
			</Popup>
		);
	},
});