orchestra-app/src/views/unit-test/unit-list/unitDetail.tsx

import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import {
  ActionSheet,
  Button,
  Cell,
  CellGroup,
  Dialog,
  Icon,
  Image,
  List,
  showToast,
  Tab,
  Tabs
} from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import questIcon from '@/school/images/quest-icon.png'
import styles from './index.module.less'
import { useRoute, useRouter } from 'vue-router'
import UnitListItem from './models/unit-list-item'
import UnitStudentList from './models/unit-student-list'
import OFullRefresh from '@/components/o-full-refresh'
//
import request from '@/helpers/request'
export default defineComponent({
  name: 'unitDetail',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const form = reactive({})
    const refreshing = ref(false)
    const loading = ref(false)
    const activeName = ref('one')
    const showTip = ref(false)
    const getDetail = async () => {
      try {
        const res = await request.get('/api-teacher/unitExamination/detail', {
          params: { unitExaminationId: route.query.id }
        })
      } catch (e) {}
    }
    onMounted(() => {
      getDetail()
    })

    return () => (
      <div class={styles.unitDetail}>
        <UnitListItem></UnitListItem>
        <div class={styles.tabsWrap}>
          <Icon
            class={styles.tabsWrapIcon}
            name={questIcon}
            size={18}
            color="#333"
            onClick={() => {
              showTip.value = true
            }}
          />
          <Tabs
            v-model:active={activeName.value}
            class={styles.rankTabs}
            background={'#F8F8F8'}
            title-active-color={'#333333'}
            title-inactive-color={'#777'}
            color={'#FF8057'}
            shrink
          >
            <Tab name="one" title="I类学生">
              <UnitStudentList></UnitStudentList>
            </Tab>
            <Tab name="two" title="II类学生">
              <UnitStudentList></UnitStudentList>
            </Tab>
            <Tab name="three" title="III类学生">
              <UnitStudentList></UnitStudentList>
            </Tab>
          </Tabs>
        </div>
        <Dialog
          class="exercisDetailDialog"
          v-model:show={showTip.value}
          title="提示框"
          confirmButtonText="我知道了"
          v-slots={{
            title: () => (
              <div class={styles.DialogTitle}>
                <span></span>
                <p>学生分类</p>
              </div>
            ),
            default: () => (
              <div class={styles.DialogConent}>
                <p>
                  根据学生入团的批次对不同训练阶段的学生进行分类，不同训练阶段的学生可布置不同标准的课后训练和单元测验内容。
                </p>
                <br />
                <p>&nbsp;&nbsp;&nbsp;I类学生：最新进入本乐团的学员</p>
                <p>&nbsp;II 类学生：较早进入本乐团的学员</p>
                <p>III 类学生：最早进入本乐团的学员</p>
              </div>
            )
          }}
        ></Dialog>
      </div>
    )
  }
})