orchestra-app/src/school/train-planning/component/course-preview/index.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Dialog, Icon, Image, Tab, Tabs, Tag } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import iconTimer from '../../images/icon-timer.png'
import iconTeacher from '@common/images/icon_teacher.png'

export default defineComponent({
  name: 'course-preview',
  setup() {
    const forms = reactive({
      conflictStatus: false,
      conflictMessage: '该时间段伴学指导在其他学校有课',
      tabValue: '1',
      courseValue: '1'
    })
    return () => (
      <div class={styles.coursePreview}>
        <OSticky position="top">
          <OHeader border={false} />
          <Tabs
            lineWidth={20}
            lineHeight={4}
            v-model:active={forms.tabValue}
            swipeThreshold={3}
            class={styles.orchestraTabs}
          >
            <Tab title="2022上学期团" name="1"></Tab>
            <Tab title="2022下学期团" name="2"></Tab>
            <Tab title="2022下学期团" name="2"></Tab>
            <Tab title="2022下学期团" name="2"></Tab>
            <Tab title="2022下学期团" name="2"></Tab>
          </Tabs>

          <Tabs
            swipeThreshold={3}
            class={styles.courseTabs}
            v-model:active={forms.courseValue}
            lineHeight={0}
            shrink
          >
            <Tab title="长笛班" name="1"></Tab>
            <Tab title="乐理班" name="1"></Tab>
            <Tab title="小号班" name="1"></Tab>
            <Tab title="长笛" name="1"></Tab>
          </Tabs>
        </OSticky>

        <CellGroup inset class={styles.cellGroup}>
          <Cell center class={styles.cellDatetime}>
            {{
              title: () => (
                <div class={styles.cellDate}>
                  <Icon name={iconTimer} class={styles.iconTimer} />
                  2022-10-31
                </div>
              ),
              value: () => <span class={styles.cellTime}>45分钟</span>
            }}
          </Cell>
          <div class={styles.cellTimeRange}>14:00-15:30</div>
          <Cell center class={styles.cellTeacher}>
            {{
              icon: () => <Image src={iconTeacher} class={styles.img} />,
              title: () => (
                <div class={styles.teacherInfo}>
                  <p class={styles.teacherName}>李老师</p>
                  <Tag type="primary">乐理课</Tag>
                </div>
              ),
              value: () => (
                <Button round plain type="primary" class={styles.btn}>
                  调整
                </Button>
              )
            }}
          </Cell>
        </CellGroup>

        <Dialog
          v-model:show={forms.conflictStatus}
          message={forms.conflictMessage}
          messageAlign="left"
          confirmButtonText="知道了"
          cancelButtonText="暂不设置"
          showCancelButton
          onConfirm={() => {
            // forms.classStatus = true
          }}
        >
          {{
            title: () => (
              <div class={styles.dialogTitle}>
                <i></i>
                课程冲突
              </div>
            )
          }}
        </Dialog>
      </div>
    )
  }
})