h5-colexiu/src/views/video-class/video-item.tsx

import { defineComponent, PropType } from 'vue'
import { Image } from 'vant'
import styles from './video-item.module.less'

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

interface VideoItemProps {
  id?: number
  teacherId?: number
  lessonName: string
  userName: string
  avatar: string
  lessonCoverUrl: string
  lessonCount: number
  lessonPrice: number
  countStudent: number
  lessonSubjectName: string
}

export default defineComponent({
  name: 'VideoItem',
  props: {
    item: Object as PropType<VideoItemProps>,
    onClick: {
      type: Function as PropType<(item: any) => void>,
      default: (item: any) => {}
    }
  },
  render() {
    const item: any = this.item
    return (
      <div
        class={styles.videoItem}
        onClick={() => {
          this.onClick(item)
        }}
      >
        <div style={{ position: 'relative' }}>
          <Image
            class={styles.viCover}
            fit="cover"
            src={item?.lessonCoverUrl}
          />
          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
        </div>

        <div class={styles.viSection}>
          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
          <div class={styles.viUserInfo}>
            <Image
              src={item?.avatar || iconTeacher}
              class={styles.viUserLogo}
            />
            <span class={[styles.viUserName, 'van-hairline--right']}>
              {item?.userName ||
                item?.username ||
                `游客${item?.teacherId || ''}`}
            </span>
            <span class={styles.viUserNum}>{item?.countStudent}人已购买</span>
          </div>
          <div class={styles.viPrice}>
            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
            {item?.lessonPrice <= 0 &&item?.auditVersion &&<>￥{0}/</>}
            {item?.lessonPrice <= 0 &&!item?.auditVersion &&<>免费/</>}
            {item?.lessonCount}课时
          </div>
        </div>
      </div>
    )
  }
})