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

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Sticky, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import Information from './compontent/information'
import Photo from './compontent/photo'
import Plan from './compontent/plan'
import styles from './orchestra-detail.module.less'

export default defineComponent({
  name: 'orchestra-detail',
  setup() {
    const tabs = sessionStorage.getItem('orchestra-detail-tab')
    // console.log(tabs, 'tabs')
    const tabValue = ref(tabs || 'information')
    sessionStorage.removeItem('orchestra-detail-tab')
    const tabHeight = ref('auto')
    const termTimes = ref({
      start: '09-01',
      end: '03-01'
    })

    // 获取头部高度
    const onGetHeight = (height: any) => {
      tabHeight.value = height
    }

    const getDefaultParams = async () => {
      // last_term_time 上学期
      // next_term_time 下学期
      const { data } = await request.get('/api-school/sysParamConfig/queryByParamNameList', {
        params: {
          paramNames: 'last_term_time,next_term_time'
        }
      })

      ;(data || []).forEach((item: any) => {
        if (item.paramName === 'last_term_time') {
          termTimes.value.start = item.paramValue
        } else if (item.paramName === 'next_term_time') {
          termTimes.value.end = item.paramValue
        }
      })
    }

    getDefaultParams()

    return () => (
      <div class={styles.orchestraDetail}>
        <OSticky position="top" onGetHeight={onGetHeight}>
          <OHeader />
          <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={tabValue.value}>
            <Tab title="乐团信息" name="information"></Tab>
            <Tab title="训练进度" name="plan"></Tab>
            <Tab title="训练照片" name="photo"></Tab>
            {/* <Tab title="乐团资讯" name="info"></Tab> */}
          </Tabs>
        </OSticky>

        {tabValue.value === 'information' && <Information termTimes={termTimes.value} />}
        {tabValue.value === 'plan' && <Plan height={tabHeight.value} termTimes={termTimes.value} />}
        {tabValue.value === 'photo' && <Photo height={tabHeight.value} />}
      </div>
    )
  }
})