classroom-app/src/custom-plugins/guide-page/woring-guide.tsx

import { Button, Popup } from "vant";
import { } from "vant";
import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import { getImage } from "./images";
import { useRect } from "@vant/use";

export default defineComponent({
  name: "woring",
  emits: ["close"],
  setup(props, { emit }) {
    const data = reactive({
      box: {height:''} as any,
      show: false,
      steps: [
        {
          ele: "",
          eleRect: {} as DOMRect,
          img: getImage("woring1.png"),
          handStyle: {
            // top: "2.98rem",
            left:'4.5rem'
          },
          // imgStyle: {
          //   width:'5.46rem',
          //   height:'2.6rem',
          //   top: "1.2rem",
          //   left:'2.1rem'
          // },
          imgStyle: {
            width:'8.19rem',
            height:'3.9rem',
            top: "0.6rem",
            left:'0.8rem'
          },
          btnsStyle: {
            top: "5.2rem",
            left:'3.5rem',
          },
          // boxStyle:{
          //   transform: 'scale(1)'
          // },
          type:'bottom'
        },
        {
          ele: "",
          eleRect: {} as DOMRect,
          img: getImage("woring2.png"),
          handStyle: {
            // top: "2.98rem",
            left:'4.5rem'
          },
          imgStyle: {
            width:'8.19rem',
            height:'3.9rem',
            top: "0.6rem",
            left:'0.8rem'
          },
          btnsStyle: {
            top: "5.2rem",
            left:'3.5rem'
          },
          // boxStyle:{
          //   transform: 'scale(1)'
          // },
          type:'bottom'
        },
        {
          ele: "",
          img: getImage("woring3.png"),
          handStyle: {
            top: "-1.39rem",
            left:'4.5rem',
            transform: 'rotate(180deg)'
          },
          imgStyle: {
            width:'8.19rem',
            height:'3.9rem',
            top: "-7.4rem",
            left:'0.8rem'
          },
          btnsStyle: {
            top: "-2.6rem",
            left:'2.11rem',
          },
          // boxStyle:{
          //   transform: 'scale(1)'
          // },
        },
      ],
      step: 0,
    });
    const tipShow = ref(false)
    const isPad = ref(true)
    const getStepELe = () => {

      const ele: HTMLElement = document.getElementById(`woring-${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",
        };
        console.log(data.box?.height)
      }else{
        handleNext()
      }
    };
    onMounted(() => {
      setTimeout(()=>{
        const guideInfo = localStorage.getItem('guideInfo')
        if(guideInfo&&JSON.parse(guideInfo).woring){
         tipShow.value =false
        }else {
         tipShow.value =true
        }
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        if(clientWidth>750){
          console.log('PAD')
          isPad.value = true;
        }else{
          isPad.value = false;
          console.log('PHONE')
        }
        getStepELe();
      },500)
      window.addEventListener("resize", resetSize);
    });
    const resetSize = ()=>{
      getStepELe();
    }

    onUnmounted(()=>{
      window.removeEventListener("resize", resetSize);
    })
    const handleNext = () => {
      if (data.step >= 3) {
       endGuide();
        return;
      }
      data.step = data.step + 1;
      getStepELe();
    };

    const endGuide = ()=>{
      let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}')

      if(!guideInfo){
        guideInfo = {woring:true}
      }else{
        guideInfo.woring = 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()}>
      {data.step!=data.steps.length-1&&<div
          class={[styles.backBtn,styles.right]}
          onClick={(e: Event) => {
            e.stopPropagation();
           endGuide()
          }}
        >

          跳过
        </div>}
        <div class={[styles.box,styles.noscalc]} style={{...data.box,}} id={`modeType-${data.step}`}>
          {data.steps.map((item: any, index) => (
            //   top: `${item.imgStyle?.height}`    top: `${item.eleRect?.top}px`,
            <div
              onClick={(e: Event) => e.stopPropagation()}
              class={styles.item}
              style={ item.type == 'bottom'?{
                display: index === data.step ? '' : 'none',
                left: `${item.eleRect?.left}px`,
                top:  `${data.box?.height}`,
              }:{
                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 ? (
                  <>
                    <Button
                      class={[styles.btn,styles.sacleBtn]}
                      round
                      color="transparent"
                      style={{ "border-color": "#fff" }}
                      type="primary"
                      onClick={() => {
                        data.step = 0;
                        getStepELe();
                      }}
                    >
                      再看一遍
                    </Button>
                    <Button class={[styles.btn,styles.endBtn,styles.sacleBtn]} round type="primary" onClick={() =>endGuide()}>
                      完成
                    </Button>
                  </>
                ) : (
                  <Button class={[styles.btn,styles.sacleBtn]} round type="primary" onClick={() => handleNext()}>

                    下一步 ({data.step + 1}/{data.steps.length})
                  </Button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
      </Popup>
    );
  },
});