h5-colexiu/src/views/order-detail/order-video/index.tsx

import { Cell, CellGroup, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

import iconTeacher from '@common/images/icon_teacher.png'

export default defineComponent({
  name: 'OrderVideo',
  methods: {
    async onSubmit() {
      console.log('video submit')
      return true
    }
  },
  render() {
    return (
      <div class={styles.videoOrder}>
        <CellGroup border={false}>
          <Cell titleClass={styles.title} title="课程名称" />
          <Cell
            title="大号基础演奏"
            v-slots={{
              default: () => (
                <span class={styles.price}>
                  <i>¥</i> 299.00
                </span>
              )
            }}
          />
        </CellGroup>

        <CellGroup border={false}>
          <Cell titleClass={styles.title} title="主讲老师" />
          <Cell
            class={styles.titleName}
            title="张李"
            v-slots={{
              icon: () => <Image class={styles.userLogo} src={iconTeacher} />
            }}
          />
        </CellGroup>

        <CellGroup border={false}>
          <Cell
            titleClass={styles.title}
            title="上课时间"
            value="（共4 课时）"
          />
          <Cell
            v-slots={{
              title: () => (
                <div>
                  {[1, 2, 3].map(item => (
                    <div class={styles.classItem}>
                      <div class={styles.time}>2018-09-09 周五</div>
                      <p>19:25 - 20:00</p>
                      <p>19:25 - 20:00</p>
                    </div>
                  ))}
                </div>
              )
            }}
          />
        </CellGroup>
      </div>
      // 视频课
    )
  }
})