h5-colexiu/src/views/order-detail/order-vip-course/index.tsx

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

import iconTeacher from '@common/images/icon_teacher.png'
import { moneyFormat } from '@/helpers/utils'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'OrderPractice',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      collapse: [1]
    }
  },
  render() {
    const item = this.item
    console.log(item.classTime)
    return (
      <div class={styles.videoOrder}>
        <CellGroup border={false}>
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={[styles.title]}>
                  <span class={styles.tag}>VIP定制课</span>
                  <span class={[styles.courseGroupName, 'van-ellipsis']}>{item.courseGroupName}</span>
                </div>
              )
            }}
          />
          <Cell
            center
            border={false}
            title={item.teacherName}
            titleClass={styles.teacher}
            v-slots={{
              icon: () => (
                <Image
                  class={styles.userLogo}
                  src={item.avatar || iconTeacher}
                />
              ),
              default: () => (
                <>
                  <span class={styles.price}>
                    <i>¥</i>
                    {moneyFormat(item.coursePrice)}
                  </span>
                  /{item.classTime.length}课时
                </>
              )
            }}
          />
          <Cell border={false}>
            <Collapse border={false} v-model={this.collapse}>
              <CollapseItem
                title="课程详情"
                name={1}
                class={styles.collapseItem}
              >
                <div class={styles.classItem}>
                  {item.classTime.map((item: any) => {
                    const dateTime = `${item.classDate} ${dayjs(
                      item.startTime
                    ).format('HH:mm')}-${dayjs(item.endTime).format('HH:mm')}`
                    return <div class={styles.time}>{dateTime}</div>
                  })}
                </div>
              </CollapseItem>
            </Collapse>
          </Cell>
        </CellGroup>
      </div>
    )
  }
})