classroom-instruments/src/custom-plugins/guide-page/home-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 { eventGlobal, px2vw, px2vwH } from '@/utils/index';
import { getGuidance, setGuidance } from './api';
export default defineComponent({
  name: 'coai-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('home1.png'),
          handStyle: {
            top: '0.91rem'
          },
          imgStyle: {
            top: px2vw(-150),
            left: px2vw(563),
            width: px2vw(734),
            height: px2vw(295)
          },
          btnsStyle: {
            bottom: px2vw(188),
            left: px2vw(805)
          },
          boxStyle: {
            border: 'none',
            width: '0px',
            height: '0px',
            backgroundColor: 'transparent'
            // visibility: 'hidden'
          },
          eleRectPadding: {
            left: 7,
            top: 7,
            width: 14,
            height: 14
          }
        },
        // {
        //   ele: '',
        //   img: getImage('home2.png'),
        //   imgStyle: {
        //     top: '100%',
        //     left:  px2vw(-250),
        //     width: px2vw(401),
        //     height: px2vw(227)
        //   },
        //   btnsStyle: {
        //     bottom: '30px',
        //     left: px2vw(-90),
        //   },
        //   boxStyle:{
        //     borderRadius:'25px'
        //   },
        //   eleRectPadding:{
        //     left:7,
        //     top:7,
        //     width:14,
        //     height:14
        //   }

        // },
        {
          ele: '',
          img: getImage('home3.png'),
          handStyle: {
            top: '-1.39rem',
            left: '0.17rem',
            transform: 'rotate(180deg)'
          },
          imgStyle: {
            top: px2vw(-4),
            width: px2vw(454),
            height: px2vw(227),
            left: px2vw(282)
          },
          btnsStyle: {
            bottom: '30px',
            left: px2vw(445)
          },
          boxStyle: {
            borderRadius: '20px'
          },
          eleRectPadding: {
            left: 44,
            top: 44,
            width: 88,
            height: 88
          }
        },
        {
          ele: '',
          img: getImage('home4.png'),
          handStyle: {
            top: '-1.39rem',
            left: '1.4rem',
            transform: 'rotate(180deg)'
          },
          imgStyle: {
            top: px2vw(-4),
            left: px2vw(-310),
            width: px2vw(477),
            height: px2vw(227)
          },
          btnsStyle: {
            bottom: '30px',
            left: px2vw(-147)
          },
          eleRectPadding: {
            left: 7,
            top: 7,
            width: 14,
            height: 14
          },
          boxStyle: {}
        },
        {
          ele: '',
          img: getImage('home5.png'),
          handStyle: {
            top: '-1.39rem',
            left: '1.4rem',
            transform: 'rotate(180deg)'
          },
          imgStyle: {
            top: '0',
            width: px2vw(600),
            height: px2vw(290),
            left: px2vw(18)
          },
          btnsStyle: {
            bottom: px2vw(95),
            left: px2vw(185),
            'justify-content': 'center',
            padding: 0
          },
          eleRectPadding: {
            left: 7,
            top: 7,
            width: 14,
            height: 14
          },
          type: 'bottom',
          boxStyle: {}
        }
      ],
      step: 0
    });
    const tipShow = ref(false);
    // const res =  setGuidance({guideTag:'teacher-guideInfo',guideValue:'{}'})
    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
        if (res.data) {
          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
        } else {
          guideInfo.value = {};
        }

        if (guideInfo.value && guideInfo.value.homeGuide) {
          tipShow.value = false;
        } else {
          tipShow.value = true;
        }
      } catch (e) {
        console.log(e);
      }
      // const guideInfo = localStorage.getItem('teacher-guideInfo');
    };
    getAllGuidance();
    const getStepELe = () => {
      const ele: HTMLElement = document.getElementById(`home-${data.step}`)!;
      console.log(`coai-${data.step}`, data.steps[data.step].eleRectPadding);
      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'
        };
      } else {
        handleNext();
      }
    };

    const onResetGuide = async (name: string) => {
      try {
        if (name !== 'Home') return;
        if (!guideInfo.value) {
          guideInfo.value = { homeGuide: false };
        } else {
          guideInfo.value.homeGuide = false;
        }
        try {
          await setGuidance({
            guideTag: 'teacher-guideInfo',
            guideValue: JSON.stringify(guideInfo.value)
          });
        } catch (e) {
          console.log(e);
        }
        data.step = 0;
        getStepELe();
        tipShow.value = true;
      } catch {
        //
      }
    };
    onMounted(() => {
      getStepELe();
      window.addEventListener('resize', resetSize);
      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
    });
    const resetSize = () => {
      getStepELe();
    };

    onUnmounted(() => {
      window.removeEventListener('resize', resetSize);
      eventGlobal.off('teacher-guideInfo', onResetGuide);
    });

    const handleNext = () => {
      if (data.step >= 3) {
        endGuide();
        return;
      }
      data.step = data.step + 1;
      getStepELe();
    };

    const endGuide = async () => {
      // let guideInfo =
      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
      if (!guideInfo.value) {
        guideInfo.value = { homeGuide: true };
      } else {
        guideInfo.value.homeGuide = true;
      }
      try {
        const res = await setGuidance({
          guideTag: 'teacher-guideInfo',
          guideValue: JSON.stringify(guideInfo.value)
        });
      } catch (e) {
        console.log(e);
      }
      // 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}
      </>
    );
  }
});