music-score/src/page-instrument/custom-plugins/guide-page/student-top.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 { useRoute } from "vue-router";
import { getQuery } from "/src/utils/queryString";
import { getGuidance, setGuidance } from "./api";
import { headTopData } from "/src/page-instrument/header-top/index";
import state from "/src/state";

export default defineComponent({
  name: "studnetT-guide",
  emits: ["close"],
  setup(props, { emit }) {
    const data = reactive({
      box: {},
      show: false,
      steps: [
        {
          ele: "",
          eleRect: {} as DOMRect,
          img: getImage("studnetT1.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem'
          },
          imgStyle: {
            top: "1.2rem",
            width:'5.64rem',
            height:'2.77rem',
            left:'-2rem'
          },
          btnsStyle: {
            top: "4.4rem",
            left:'-0.7rem'
          },
        },
        {
          ele: "",
          img: getImage("studnetT2.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem',
  
          },
          imgStyle: {
            top: "1.2rem",
            width:'5.46rem',
            height:'2.3rem',
            left:'-2rem'
          },
          btnsStyle: {
            top: "3.9rem",
            left:'-0.7rem'
          },
        },
        {
          ele: "",
          img: getImage("studnetT3.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem',
          },
          imgStyle: {
            top: "1.2rem",
            width:'5.46rem',
            height:'2.30rem',
            left:'-2rem'
          },
          btnsStyle: {
            top: "3.9rem",
            left:'-0.7rem'
          },
        },
        {
          ele: "",
          img: getImage("studnetT4.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem',
          },
          imgStyle: {
            top: "1.2rem",
            width:'5.46rem',
            height:'2.30rem',
            left:'-2rem'
          },
          btnsStyle: {
            top: "3.9rem",
            left:'-0.7rem'
          },
        },
        {
          ele: "",
          img: getImage("studnetT5.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem',
     
          },
          imgStyle: {
            top: "1.2rem",
            width:'5.46rem',
            height:'2.6rem',
            left:'-3rem'
          },
          btnsStyle: {
            top: "4.1rem",
            left:'-1.3rem'
          },
        },
        {
          ele: "",
          img: getImage("studnetT6.png"),
          handStyle: {
            top: "0.67rem",
            left:'0.1rem',
         
          },
          imgStyle: {
            top: "0.92rem",
            width:'5.46rem',
            height:'2.30rem',
            left:'-5.5rem'
          },
          btnsStyle: {
            top: "3.6rem",
            left:'-1.8rem'
          },
        },
        {
            ele: "",
            eleRect: {} as DOMRect,
            img: getImage("studnetT7.png"),
            handStyle: {
                top: "0.67rem",
                left:'0.1rem',
            },
            imgStyle: {
              top: "0.92rem",
              width:'5.46rem',
              height:'2.3rem',
              left:'-5.5rem'
            },
            btnsStyle: {
              top: "3.6rem",
              left:'-3.7rem'
            },
          },      {
            ele: "",
            eleRect: {} as DOMRect,
            img: getImage("studnetT8.png"),
            handStyle: {
              top: "-1.38rem",
              left:'.26rem',
              transform: 'rotate(180deg)'
            },
            imgStyle: {
              top: "-3.8rem",
              width:'5.46rem',
              height:'2.28rem',
              left:'-5rem'
            },
            btnsStyle: {
              top: "-1.2rem",
              left:'-4.3rem'
            },
          },
      ],
      step: 0,
      initDone: false,
    });
    const tipShow = ref(false)
    const query: any = getQuery();
  //  const guideInfo = localStorage.getItem('guideInfo')
  //  if(guideInfo&&JSON.parse(guideInfo).studnetT || !query.showGuide){
  //   tipShow.value =false
  //  }else {
  //   tipShow.value =true
  //  }

  const guideInfo = ref({} as any)
  const getAllGuidance = async()=>{
    console.log('学生引导123')
    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.studnetT) {
        tipShow.value = false;
      } else {
        tipShow.value = headTopData.modeType !== "init" ? true : false;
      }
    } catch(e) {
      console.log(e)
    }
    // const guideInfo = localStorage.getItem('teacher-guideInfo');

  }
  getAllGuidance()

    const getStepELe = () => {
      console.log(`studnetT${data.step}`)
      const ele: HTMLElement = document.getElementById(`studnetT-${data.step}`)!;
      if (ele) {
        if (ele.style.display === 'none'){
					handleNext()
					return
				}
        const eleRect = ele.getBoundingClientRect();
        // console.log(eleRect,666)
        data.box = {
          left: eleRect.x + "px",
          top: eleRect.y + "px",
          width: eleRect.width + "px",
          height: eleRect.height + "px",
        };
      }
    };
    onMounted(() => {
      // 顶部栏有个动画过度效果，位置会移动，需要加个延迟时间计算其移动后的位置
      setTimeout(() => {
        getStepELe();
        data.initDone = true;
      }, 1200);
    });


    const handleNext = () => {
      if (data.step >= 7) {
       endGuide();
        return;
      }
      data.step = data.step + 1;
      getStepELe();
    };
    
    const endGuide = async()=>{
      // let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}') || null
      if(!guideInfo.value){
        guideInfo.value = {studnetT:true}
      }else{
        guideInfo.value.studnetT = true
      }
      // localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
      try{
				const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(guideInfo.value)})
			  }catch(e){
				console.log(e)
			  }
      state.guideInfo = guideInfo.value;
      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>} 
        {
          data.initDone &&
          <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>
    );
  },
});