orchestra-app/src/school/train-planning/index.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { state } from '@/state'
import { Sticky, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import Practice from './component/practice'
import Standard from './component/standard'
import { resestState } from './create'
import styles from './index.module.less'

export default defineComponent({
  name: 'train-planning',
  setup() {
    const trainType = sessionStorage.getItem('trainType')
    const tabValue = ref(trainType || 'standard')
    const address = ref('')
    // sessionStorage.removeItem('trainType')

    const getSchoolDetail = async () => {
      try {
        const { data } = await request.get(`/api-school/school/detail/${state.user.data.school.id}`)
        address.value = data.address || ''
      } catch {
        //
      }
    }

    onMounted(() => {
      getSchoolDetail()
    })
    return () => (
      <div class={styles.train}>
        <OSticky position="top">
          <OHeader />
          <Tabs
            sticky
            lineWidth={20}
            lineHeight={4}
            v-model:active={tabValue.value}
            onChange={(val: any) => {
              // 切换时间重置表单数据
              resestState()
              sessionStorage.setItem('trainType', val)
            }}
          >
            <Tab title="标准训练" name="standard"></Tab>
            <Tab title="自定义训练" name="practice"></Tab>
          </Tabs>
        </OSticky>

        {tabValue.value === 'standard' && <Standard address={address.value} />}
        {tabValue.value === 'practice' && <Practice address={address.value} />}
      </div>
    )
  }
})