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"; export default defineComponent({ name: "teacherTop-guide", emits: ["close"], setup(props, { emit }) { const data = reactive({ box: {}, show: false, steps: [ { ele: "", eleRect: {} as DOMRect, img: getImage("teacherTop1.png"), handStyle: { top: "0.91rem", }, imgStyle: { top: "1.32rem", width:'3.63rem', height:'2.28rem', left:'-2rem' }, btnsStyle: { top: "2.8rem", left:'-0.7rem' }, }, { ele: "", img: getImage("teacherTop2.png"), handStyle: { top: "-1.39rem", left:'0.15rem', transform: 'rotate(180deg)' }, imgStyle: { top: "1.32rem", width:'4.20rem', height:'2.28rem', left:'-2rem' }, btnsStyle: { top: "2.8rem", left:'-0.7rem' }, }, { ele: "", img: getImage("teacherTop3.png"), handStyle: { top: "-1.39rem", left:'0.17rem', transform: 'rotate(180deg)' }, imgStyle: { top: "1.32rem", width:'5.15rem', height:'2.28rem', left:'-2rem' }, btnsStyle: { top: "2.8rem", left:'-0.7rem' }, }, { ele: "", img: getImage("teacherTop4.png"), handStyle: { top: "-1.39rem", left:'1.4rem', transform: 'rotate(180deg)' }, imgStyle: { top: "1.32rem", width:'4.39rem', height:'2.28rem', left:'-2rem' }, btnsStyle: { top: "2.8rem", left:'-0.7rem' }, }, { ele: "", img: getImage("teacherTop5.png"), handStyle: { top: "-1.39rem", left:'1.4rem', transform: 'rotate(180deg)' }, imgStyle: { top: "1.32rem", width:'4.58rem', height:'2.28rem', left:'-2rem' }, btnsStyle: { top: "2.8rem", left:'-0.7rem' }, }, { ele: "", img: getImage("teacherTop6.png"), handStyle: { top: "-1.39rem", left:'1.4rem', transform: 'rotate(180deg)' }, imgStyle: { top: "1.32rem", width:'4.01rem', height:'2.28rem', left:'-3.2rem' }, btnsStyle: { top: "2.8rem", left:'-1.8rem' }, }, ], step: 0, }); const tipShow = ref(false) const guideInfo = localStorage.getItem('guideInfo') if(guideInfo&&JSON.parse(guideInfo).teacherTop){ tipShow.value =false }else { tipShow.value =true } const getStepELe = () => { console.log(`teacherTop${data.step}`) const ele: HTMLElement = document.getElementById(`teacherTop-${data.step}`)!; if (ele) { if (ele.style.display === 'none'){ handleNext() return } 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 >= 5) { endGuide(); return; } data.step = data.step + 1; getStepELe(); }; const endGuide = ()=>{ let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}') || null if(!guideInfo){ guideInfo = {teacherTop:true} }else{ guideInfo.teacherTop = true } localStorage.setItem('guideInfo',JSON.stringify(guideInfo)) tipShow.value = false // localStorage.setItem('endC') } return () => (
handleNext()}>
{ e.stopPropagation(); endGuide() }} > 跳过
{data.steps.map((item: any, index) => (
e.stopPropagation()} class={styles.item} style={{ display: index === data.step ? "" : "none", left: `${item.eleRect?.left}px`, top: `${item.eleRect?.top}px`, }} > {/* */}
{data.step + 1 == data.steps.length ? ( <>
endGuide()}> 完成
{ data.step = 0; getStepELe(); }} > 再看一遍
) : ( )}
))}
); }, });