h5-colexiu/src/business-components/course-video-item/index.tsx

import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { Cell, Icon, Image } from 'vant'
import videoStop from '@common/images/icon_video_stop.png'
import bars from '@common/svg/bars.svg'

/**
 * @description: 课程视频列表项
 * @param {title} 视频标题
 * @param {imgUrl} 视频封面图
 * @param {content} 视频内容
 */
interface IDetail {
  id?: number
  title: string
  content?: string
  imgUrl?: string
  videoUrl?: string
  index?: number
}

export default defineComponent({
  name: 'CourseVideoItem',
  props: {
    detail: {
      type: Object as PropType<IDetail>,
      required: true
    },
    border: {
      type: Boolean,
      default: false
    },
    onPlay: {
      type: Function as PropType<(detail: IDetail) => void>,
      default: () => {}
    },
    playId: {
      // 播放视屏编号
      type: Number,
      default: 0
    }
  },
  render() {
    return (
      <Cell
        class={styles.videoSection}
        border={this.border}
        onClick={() => this.onPlay(this.detail)}
        v-slots={{
          icon: () => (
            <div class={styles.videoImg}>
              <Image src={this.detail.imgUrl} fit="cover" />
              {this.detail.id === this.playId ? (
                <div class={styles.living}>
                  <Image src={bars} class={styles.animation} />
                  <span>播放中</span>
                </div>
              ) : (
                <Icon class={styles.videoStop} name={videoStop} size={26} />
              )}
            </div>
          ),
          title: () => (
            <div class={[styles.videoTitle, 'videoSmall']}>
              <p
                class={[
                  styles.videoTitleText,
                  'van-ellipsis',
                  this.detail.id === this.playId && styles.active
                ]}
              >
                {this.detail.title}
              </p>
              <p class={[styles.videoTitleContent, 'van-multi-ellipsis--l2']}>
                {this.detail.content}
              </p>
            </div>
          )
        }}
      ></Cell>
    )
  }
})