colexiu-project/src/components/col-header/index.tsx

import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import './index.css'
import logo from './images/logo.png'
import whileLogo from './images/whileLogo.png'
import { state } from '@/state'
import { RouterLink } from 'vue-router'
import { getAuth, getUserType } from '@/helpers/utils'
import loganInfo from './modals/loganInfo'
export default defineComponent({
  name: 'col-header',
  components: {
    loganInfo
  },
  data() {
    return {
      navigator: [
        { name: '首页', href: '/home', current: false },
        { name: '谱库', href: '/musicLibrary', current: false },
        { name: '视频课', href: '/videoDetailList', current: false },
        // { name: '云教练', href: '#', current: false },
        // { name: '社区', href: '#', current: false },
        { name: '下载', href: '/downLoad', current: false }
      ],
      navPath: ['', '/musicLibrary', '', '', '/downLoad'],
      isTop: false,
      isdark: false,
      token: '',
      userType: '',
      isLogin: false,
      userInfo: {}
    }
  },
  mounted() {
    this.token = getAuth()
    this.userType = getUserType()
    if (this.userType && this.token) {
      this.isLogin = true

      // this.userInfo =
    }
    window.addEventListener('scroll', e => {
      //函数体
      let scrollTop =
        document.documentElement.scrollTop | document.body.scrollTop
      scrollTop > 70 ? (this.isTop = true) : (this.isTop = false)
    })
  },
  methods: {
    gotoMain() {
      this.$router.push({ path: '/' })
    }
  },
  watch: {
    $route(res: any) {
      // console.log(res)
      this.isdark = !!res.meta.isdark
      this.navigator.forEach((item: any) => {
        item.current = false
      })
      this.navigator.forEach((item: any) => {
        if (item.href === res.meta.highlightPath) {
          item.current = true
          // this.isdark = !!res.meta.isdark
          // console.log(this.isdark)
        }
      })
    }
  },
  render() {
    return (
      <>
        {/* <div class="wall h-[70px]"></div> */}
        <div
          class={[
            'headerSection backdrop-blur-sm',
            this.isTop ? '' : 'top',
            this.isdark ? 'isdark' : ''
          ]}
        >
          <div class="flex items-center h-full">
            <div class="logoWrap" onClick={() => this.gotoMain()}>
              <img
                class="w-full"
                src={this.isdark || !this.isTop ? logo : whileLogo}
                alt=""
              />
            </div>
          </div>
          <div class={['rightWrap', 'flex', 'items-center']}>
            <div class="flex mr120">
              {this.navigator.map((item: any) => (
                <div
                // onClick={() => {
                //   this.navigator.forEach((item: any) => {
                //     item.current = false
                //   })
                //   item.current = true
                // }}
                >
                  <RouterLink
                    to={item.href}
                    class={[
                      item.current ? 'activeItem' : 'normalItem',
                      'itemCenter'
                    ]}
                  >
                    {item.name}
                  </RouterLink>
                </div>
              ))}
            </div>
            {!this.isLogin ? (
              <ElButton
                type="primary"
                class="logoBtn"
                round
                onClick={() => {
                  state.loginPopupStatus = true
                }}
              >
                登录注册
              </ElButton>
            ) : (
              <>
                <div>
                  <loganInfo></loganInfo>
                </div>
              </>
            )}
          </div>
        </div>
        {this.isTop ? <div class="wall"></div> : ''}
      </>
    )
  }
})