h5-colexiu/src/teacher/my-sheetMusic/index.tsx

import { Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import styles from './index.module.less'
import { useEventTracking } from '@/helpers/hooks'
import { getRandomKey } from '@/views/music/music'
import Personal from '@/views/music/personal/personal'
import Collection from '@/views/music/personal/collection'
import Album from '@/views/music/personal/album'
import AlbumMy from '@/views/music/personal/album-my'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'

export default defineComponent({
  name: 'mySheetMusic',
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const activeTab = ref('personal')
    const personal = ref()
    const collection = ref()
    const practice = ref()
    const height = ref<any>('auto')
    onMounted(() => {
      useEventTracking('我的乐谱')
    })
    return () => {
      return (
        <div>
          <TheSticky
            position="top"
            onBarHeight={(h: any) => {
              height.value = h
            }}
          >
            <ColHeader />
          </TheSticky>
          <Tabs
            animated
            swipeable
            color="var(--van-primary)"
            lineWidth={20}
            v-model:active={activeTab.value}
            onChange={val => (activeTab.value = val)}
            sticky
            offsetTop={height.value}
          >
            <Tab title="购买单曲" name="personal">
              <div class={styles.container}>
                <Personal
                  ref={personal}
                  onFavorite={() => {
                    practice.value?.reload?.()
                  }}
                />
              </div>
            </Tab>
            <Tab title="购买专辑" name="personal-album">
              <div class={styles.container}>
                <AlbumMy />
              </div>
            </Tab>
            <Tab title="收藏单曲" name="collection">
              <div class={styles.container}>
                <Collection
                  ref={collection}
                  onFavorite={() => {
                    practice.value?.reload?.()
                  }}
                />
              </div>
            </Tab>
            <Tab title="收藏专辑" name="album">
              <div class={styles.container}>
                <Album />
              </div>
            </Tab>
          </Tabs>
        </div>
      )
    }
  }
})