orchestra-app/src/school/orchestra/orchestra-information.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Button, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './orchestra-information.module.less'
import OrchestraInformationList from './orchestra-information-list'

export default defineComponent({
  name: 'orchestra-information',
  setup() {
    const tabName = sessionStorage.getItem('orchestra-information-tab')
    const state = reactive({
      activeName: tabName || 'publish',
      listState: {
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      offlineCount: 0,
      publishedCount: 0
    })
    const getStat = async () => {
      try {
        const { data } = await request.get('/api-school/sysNewsInformation/stat')
        state.publishedCount = data.publishedCount || 0
        state.offlineCount = data.offlineCount || 0
      } catch {
        //
      }
    }
    onMounted(async () => {
      // getStat()
    })
    return () => (
      <div class={[styles.information]}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            state.listState.height = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader border={false} />
        </OSticky>

        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          animated
          v-model:active={state.activeName}
          offsetTop={state.listState.height}
          swipeable
          onChange={(val: string) => {
            sessionStorage.setItem('orchestra-information-tab', val)
          }}
        >
          <Tab title={`已发布(${state.publishedCount})`} name="publish">
            <OrchestraInformationList
              headHeight={state.listState.height}
              type="1"
              onChangeList={getStat}
            />
          </Tab>
          <Tab title={`已下架(${state.offlineCount})`} name="offline">
            <OrchestraInformationList
              headHeight={state.listState.height}
              type="0"
              onChangeList={getStat}
            />
          </Tab>
        </Tabs>
      </div>
    )
  }
})