lesson-course-play/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 }) {
    return () => (
      <div class={styles.content}>
        <div class={styles.wrap}>
          {prop.list.map((item: any) => {
            return (
              <div
                class={[styles.item, 'courseItem']}
                onClick={() => emit('itemClick', item)}>
                <div class={styles.cover}>
                  <div class={styles.coverImg}>
                    <img
                      src={
                        item.coverImg ||
                        'data:image/png;base64,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'
                      }
                      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>
    );
  }
});