h5-colexiu/src/student/teacher-dependent/components/video-item/index.tsx

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

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

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', flexShrink: 0 }}>
          <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.tags}>
            {item?.musicNum > 0 ? (
              <span class={styles.label}>{item?.musicNum}首曲目</span>
            ) : (
              ''
            )}
            {item?.lessonCount > 0 ? (
              <span class={styles.label}>{item?.lessonCount}课时</span>
            ) : (
              ''
            )}
          </div>
          <div class={styles.viPrice}>
            <div class={styles.viUserNum}>{item?.countStudent}人学习</div>
            <span class={styles.priceNum}>
              {item.payType === 'VIP' ? (
                <span style={{ color: '#C76E21' }}>会员</span>
              ) : (
                <>
                  {item?.lessonPrice > 0 && (
                    <>
                      <i>￥</i>
                      {moneyFormat(item?.lessonPrice, '0.00')}
                    </>
                  )}
                  {item?.lessonPrice <= 0 && item.auditVersion !== 0 && (
                    <>
                      <i>￥</i>0
                    </>
                  )}
                  {item?.lessonPrice <= 0 && item.auditVersion === 0 && (
                    <span style={{ color: '#20BEA0' }}>免费</span>
                  )}
                </>
              )}
            </span>
          </div>
        </div>
      </div>
    )
  }
})