classroom-instruments/src/custom-plugins/guide-page/music-guide.tsx

import { NButton } from 'naive-ui';
import {
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import { getImage } from './images';
import {px2vw,px2vwH} from '@/utils/index'
export default defineComponent({
  name: 'music-guide',
  emits: ['close'],
  setup(props, { emit }) {
    const data = reactive({
      box: {
        height:'0px',
      } as any,
      show: false,
      /**
       *
            width:  px2vw(840),
            height:  px2vw(295)
       */
      steps: [
        {
          ele: '',
          eleRect: {} as DOMRect,
          img: getImage('music1.png'),
          handStyle: {
            top: '0.91rem'
          },
          imgStyle: {
            left: '-4.4em',
            width:  '534px',
            height:  '228px'
          },
          btnsStyle: {
            bottom:'30px',
            left: '90px',
          },
          eleRectPadding:{
            left:7,
            top:7,
            width:14,
            height:14
          }
        },
        {
          ele: '',
          img: getImage('music2.png'),
          imgStyle: {
            top: '100%',
            left:  '-205px',
            width: '420px',
            height:'228px'
          },
          btnsStyle: {
            bottom: '30px',
            left: px2vw(-60),
          },
          boxStyle:{
            borderRadius: '25px'
          },
          eleRectPadding:{
            left:7,
            top:7,
            width:14,
            height:14
          }

        },
        {
          ele: '',
          img: getImage('music3.png'),
          imgStyle: {
            top: '100%',
            left:  '-130px',
            width: px2vw(401),
            height: px2vw(304)
          },
          btnsStyle: {
            bottom: '90px',
            left:px2vw(20),
          },

          eleRectPadding:{
            left:7,
            top:7,
            width:14,
            height:14
          },
          type:'bottom'
        },
      ],
      step: 0
    });
    const tipShow = ref(false);
    const guideInfo = localStorage.getItem('teacher-guideInfo');
    if (guideInfo && JSON.parse(guideInfo).musicGuide) {
      tipShow.value = false;
    } else {
      tipShow.value = true;
    }
    const getStepELe = () => {

      const ele: HTMLElement = document.getElementById(`music-${data.step}`)!;

      if (ele ) {
        const eleRect = ele.getBoundingClientRect();
        console.log(ele.style.display,'ele')
        if(ele.style.display == 'none'){
          handleNext()
          return
        }
        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();
      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('teacher-guideInfo')|| '{}') || null;
      if (!guideInfo) {
        guideInfo = { musicGuide: true };
      } else {
        guideInfo.musicGuide = true;
      }
      localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
      tipShow.value = false;
      //  localStorage.setItem('endC')
    };
    return () => (
      <>
        {tipShow.value ? (
          <div
            v-model:show={tipShow.value}
            class={['n-modal-mask', 'n-modal-mask-guide']}>
            <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={ item.type=='bottom'?  {
                      display: index === data.step ? '' : 'none',
                      left: `${item.eleRect?.left}px`,
                      top:`-${item.imgStyle?.height}`

                    }:{
                      display: index === data.step ? '' : 'none',
                      left: `${item.eleRect?.left}px`,
                     top: `${data.box?.height}`,

                    }}>
                    <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.endBtn]}
                            onClick={() => endGuide()}>
                            完成
                          </div>
                          <div
                            class={styles.nextBtn}
                            onClick={() => {
                              data.step = 0;
                              getStepELe();
                            }}>
                            再看一遍
                          </div>

                        </>
                      ) : (
                        <div class={styles.btn} onClick={() => handleNext()}>
                          下一步 ({data.step + 1}/{data.steps.length})
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ) : null}
      </>
    );
  }
});