orchestra-music-score/src/subpages/colexiu/tips/index.tsx

import { Button, Popup } from 'vant'
import {} from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
import state from '/src/pages/detail/state'
import styles from './index.module.less'
import Tip1 from './tip1'
import Tip2 from './tip2'
import { modelType } from '../buttons'

export default defineComponent({
  name: 'tips-step',
  setup(props, ctx) {
    const tipShow = ref(false)
    const guide = reactive({
      tip1: false,
      tip2: false,
    })
    watch(
      () => state.initRendered,
      () => {
        const isFirstTip = localStorage.getItem('isFirstTip')
        if (state.initRendered && modelType.value === 'init' && !isFirstTip) {
          tipShow.value = true
          guide.tip1 = true
          guide.tip2 = false
          console.log('首次渲染结束')
        }
      }
    )
    watch(modelType, () => {
      console.log(modelType.value)
      const isFirstModel = localStorage.getItem('isFirstModel')
      if (state.initRendered && modelType.value === 'practice' && !isFirstModel) {
        tipShow.value = true
        guide.tip1 = false
        guide.tip2 = true
        console.log('模式更改')
      }
    })
    const setLocalData = (key: string) => {
      localStorage.setItem(key, 'ok')
    }
    return () => (
      <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
        {guide.tip1 && (
          <Tip1
            onHanldeStop={() => {
              tipShow.value = false
              setLocalData('isFirstTip')
            }}
          />
        )}
        {guide.tip2 && (
          <Tip2
            onHanldeStop={() => {
              tipShow.value = false
              setLocalData('isFirstModel')
            }}
          />
        )}
      </Popup>
    )
  },
})