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 { useRoute } from 'vue-router'
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 route = useRoute()
    const tabs = sessionStorage.getItem('orchestra-detail-tab')
    const tabValue = ref(tabs || route.query.tabs || 'information')
    sessionStorage.removeItem('orchestra-detail-tab')
    const tabHeight = ref('auto')
    const termTimes = ref({
      start: '09-01',
      end: '03-01'
    })

    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={(height: any) => {
            tabHeight.value = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader border={false} />
        </OSticky>
        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          v-model:active={tabValue.value}
          animated
          offsetTop={tabHeight.value}
          swipeable
          onChange={(val: string) => {
            sessionStorage.setItem('orchestra-detail-tab', val)
          }}
        >
          <Tab title="乐团信息" name="information">
            <Information termTimes={termTimes.value} />
          </Tab>
          <Tab title="训练进度" name="plan">
            <Plan height={tabHeight.value} termTimes={termTimes.value} />
          </Tab>
          {/* <Tab title="训练照片" name="photo"></Tab> */}
          {/* <Tab title="乐团资讯" name="info"></Tab> */}
        </Tabs>

        {/* {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>
    )
  }
})