h5-colexiu/src/student/teacher-dependent/components/tips/index.tsx

import { Icon } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import styles from './index.module.less'
import icon3 from '../../images/icon3.png'

export default defineComponent({
  name: 'tips',
  props: {
    /** 标题 */
    title: {
      type: String,
      default: '',
    },
    /** 内容 */
    content: {
      type: String,
      default: ''
    },
    /** 类型 */
    type: {
      type: String,
      default: ''
    },
    btnTxt: {
      type: String,
      default: '不再提醒'
    },
    class: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const isStatus = ref(true)
    // 获取当前提示是否有缓存
    const getTypeIsCatch = () => {
      const localType = localStorage.getItem('teacher_home_local');
      const formatLocalType = localType ? JSON.parse(localType) : {}
      if(formatLocalType[props.type]) {
        return true
      } else {
        return false
      }
    }

    // 设置已知道
    const setTypeIsCatch = () => {
      const localType = localStorage.getItem('teacher_home_local');
      const formatLocalType = localType ? JSON.parse(localType) : {}
      formatLocalType[props.type] = 1
      localStorage.setItem('teacher_home_local', JSON.stringify(formatLocalType))
    }

    onMounted(() => {
      isStatus.value = !getTypeIsCatch()
    })
    return () => (
      isStatus.value ? <div class={[styles.tipSection, props.class]}>
      <Icon class={styles.iconCross} onClick={() => {
        emit('close')
        isStatus.value = false
      }} name="cross" />
      <div class={styles.tipTitle}>
        <img src={icon3} />
        {props.title}
      </div>
      <div class={styles.tipContent}>
        {props.content}
      </div>
      <div class={styles.tipFooter} onClick={() => {
        emit("confirm")
        setTypeIsCatch()
        isStatus.value = false
      }}>{props.btnTxt}</div>
    </div> : ''
    )
  }
})