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";
import {getGuidance,setGuidance} from './api'
import { headTopData } from "/src/page-instrument/header-top/index";
import state, { IPlatform } from "/src/state";

export default defineComponent({
	name: "aiTeacher-guide",
	emits: ["close"],
	setup(props, { emit }) {
		const data = reactive({
			box: {},
			show: false,
			steps: state.platform === IPlatform.PC ? [
				{
					img: getImage("aiTeacher2.png"),
					eleRect: {
						top: "-3rem",
					},
					imgStyle: {
						left: "-0.7rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						bottom: ".9rem",
						left: ".9rem",
						transform: "scale(.83)",
					},
					boxStyle: {
						borderRadius: "40px",
					},
				},
				{
					img: getImage("aiTeacher3.png"),
					eleRect: {
						top: "-3rem",
					},
					imgStyle: {
						left: "-0.7rem",
						width: "6.48rem",
						height: "3rem",
					},
					btnsStyle: {
						bottom: ".9rem",
						left: ".8rem",
						transform: "scale(.83)",
					},
					boxStyle: {
						borderRadius: "40px",
					},
				}
			] : [
				{
					eleRect: {
						left: "4.5rem",
						top: "-3.6rem",
					},
					img: getImage("aiTeacher1.png"),
					imgStyle: {
						width: "7.776rem",
						height: "3.6rem",
					},
					btnsStyle: {
						bottom: "1.3rem",
						left: "2.1rem",
				
					},
					boxStyle: {
						borderRadius: "40px",
						transform: "scale(1)",
					},
					eleRectPadding: {
						left: 14,
						top: 14,
						width: 28,
						height: 28,
					},
				},
				{
					img: getImage("aiTeacher2.png"),
					eleRect: {
						top: "-3rem",
					},
					imgStyle: {
						left: "-0.7rem",
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						bottom: ".9rem",
						left: ".9rem",
						transform: "scale(.83)",
					},
					boxStyle: {
						borderRadius: "40px",
					},
				},
				{
					img: getImage("aiTeacher3.png"),
					eleRect: {
						top: "-3rem",
					},
					imgStyle: {
						left: "-0.7rem",
						width: "6.48rem",
						height: "3rem",
					},
					btnsStyle: {
						bottom: ".9rem",
						left: ".8rem",
						transform: "scale(.83)",
					},
					boxStyle: {
						borderRadius: "40px",
					},
				},
				{
					img: getImage("aiTeacher4.png"),
					eleRect: {
						top: "-3rem",
						left: "-1rem",
					},
					imgStyle: {
						width: "6.48rem",
						height: "3.01rem",
					},
					btnsStyle: {
						bottom: ".9rem",
						left: "1.6rem",
						"justify-content": "center",
						padding: 0,
						transform: "scale(.83)",
					},
					boxStyle: {
						borderRadius: "40px",
					},
				},
			],
			step: 0,
		});

		const tipShow = ref(false);
		// const guideInfo = localStorage.getItem("guideInfo");
		const query: any = getQuery();
		const guideInfo = ref({} as any)
		const getAllGuidance = async()=>{
		  try{
			if (state.guideInfo) {
				guideInfo.value = state.guideInfo
			} else {
				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.teacherBottom) {
			  tipShow.value = false;
			} else {
			  tipShow.value = headTopData.modeType === "init" ? true : false;
			}
		  }catch(e){
			console.log(e)
		  }
		  // const guideInfo = localStorage.getItem('teacher-guideInfo');
	
		}
		getAllGuidance()



		// if ((guideInfo && JSON.parse(guideInfo).teacherBottom) || !query.showGuide) {
		// 	tipShow.value = false;
		// } else {
		// 	tipShow.value = true;
		// }
		const steps = state.platform === IPlatform.PC ? ["modeType-0", "modeType-1"] : ["modeType-box", "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();

				const left = data.steps[data.step].eleRectPadding?.left || 0;
				const top = data.steps[data.step].eleRectPadding?.top || 0;
				const width = data.steps[data.step].eleRectPadding?.width || 0;
				const height = data.steps[data.step].eleRectPadding?.height || 0;
				data.box = {
					left: eleRect.x - left + "px",
					top: eleRect.y - top + "px",
					width: eleRect.width + width + "px",
					height: eleRect.height + height + "px",
				};
				console.log(`coai-${data.step}`, data.box);
			} else {
				handleNext();
			}
		};
		onMounted(() => {
			getStepELe();
		});
		const handleNext = () => {
			if (data.step >= 3 || (state.platform === IPlatform.PC && data.step >= 1)) {
				endGuide();
				return;
			}
			data.step = data.step + 1;
			getStepELe();
		};

		const endGuide = async() => {
			// let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
			if (!guideInfo.value) {
				guideInfo.value = { teacherBottom: true };
			} else {
				guideInfo.value.teacherBottom = true;
			}
			try{
				const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(guideInfo.value)})
			  }catch(e){
				console.log(e)
			  }
			// 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, ...data.steps[data.step].boxStyle }}
						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}`,
									top: `${item.eleRect?.top}`,
								}}
							>
								<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>
		);
	},
});