orchestra-app/src/views/lessonCourseware/component/CourseItem/index.tsx

import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import iconTop from './image/icon-top.png'
import iconLock from './image/icon-lock.png'
import { Image, Loading } from 'vant'

export default defineComponent({
  name: 'CourseItem',
  props: {
    list: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    term: {
      type: String as PropType<any>,
      defaut: 0
    }
  },
  emits: ['itemClick'],
  setup(prop, { emit }) {
    const schoolTerm = {
      1: '一',
      2: '二',
      3: '三',
      4: '四',
      5: '五',
      6: '六'
    }
    return () => (
      <div class={styles.content}>
        <div class={styles.wrap}>
          <div class={styles.icon}>
            <div>第{schoolTerm[prop.term as any]}学期</div>
          </div>
          {prop.list.map((item: any, index: number) => {
            return (
              <div class={styles.item} onClick={() => emit('itemClick', item)}>
                <div class={styles.cover}>
                  <div class={styles.coverImg}>
                    <img
                      src={item.coverImg}
                      onLoad={(e: Event) => {
                        if (e.target) {
                          (e.target as any).style.opacity = 1
                        }
                      }}
                    />
                  </div>
                  <div class={styles.coverNum}>
                    {item.courseNumName ? item.courseNumName : `共${item.courseNum}课`}
                  </div>
                </div>
                <div class={[styles.name, 'van-ellipsis']}>{item.name}</div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
})