h5-colexiu/src/student/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
  auditVersion: number
}

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>
          </div> */}
          <div class={styles.viPrice}>
            <span class={styles.priceNum}>
              {item.payType === 'VIP' ? (
                <span style={{ color: '#C76E21' }}>会员</span>
              ) : (
                <>
                  {item?.lessonPrice > 0 && (
                    <>
                      <i>￥</i>
                      {item?.lessonPrice}
                    </>
                  )}
                  {item?.lessonPrice <= 0 && item.auditVersion !== 0 && (
                    <>
                      <i>￥</i>0
                    </>
                  )}
                  {item?.lessonPrice <= 0 && item.auditVersion === 0 && (
                    <span style={{ color: '#20BEA0' }}>免费</span>
                  )}
                </>
              )}
            </span>
            <span class={styles.label}>/{item?.lessonCount}课时</span>
          </div>

          <div class={styles.viUserNum}>{item?.countStudent}人已学习</div>
        </div>
      </div>
    )
  }
})